@extends('layouts.master')
@section('title', 'Company Groups')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
    <script src="{{ asset('assets/js/plugins/jquery-1.9.1.min.js') }}"></script>
@endpush
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="mb-0">Company Groups Table</h6>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end align-items-center">
                                <a class="btn btn-primary mx-2" href="{{ route('company_groups.create') }}"><i
                                        class="fa-solid fa-plus me-2"></i>Add New Company Group</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <div class="table-responsive p-0">
                            <table id="datatable" class="table company_groups-datatable mb-0" style="width:100%">
                                <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Customers</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Companies</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Created By</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        $(function() {
            $('.company_groups-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('company_groups.index') }}",
                "lengthChange": false,
                info: false,
                "language": {
                    "paginate": {
                        "previous": "Prev"
                    }
                },
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'customers', name: 'customers'},
                    {data: 'companies', name: 'companies'},
                    {data: 'created_by', name: 'created_by'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
    </script>
@endpush