@extends('layouts.master')
@section('title', 'Users')
@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">Users Table</h6>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end align-items-center">
                                <a class="btn btn-success user-invitation mx-2" href="#" data-bs-toggle="modal" data-bs-target="#userInvitationModal"><i
                                        class="fa-regular fa-user me-2"></i>Send User Invitation</a>
                                <a class="btn btn-primary mx-2" href="{{ route('users.create') }}"><i
                                        class="fa-solid fa-plus me-2"></i>Add New User</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 users-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">Email</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Company</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Role</th>
                                    @can('users.edit')
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    @endcan
                                    @can(['users.edit', 'users.update', 'users.destroy','users.password.edit'])
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
                                    @endcan
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('users.user-invitation')
@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() {
            $(document).on('change', '.change-status', function() {
                var status = $(this).prop('checked') == true ? 1 : 0;
                var id = $(this).attr('data-id');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: "{{ route('users.status') }}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        'status': status,
                        'id': id
                    },
                    success: function(e) {
                        toastr.success(e.success);
                    },
                    error: function error() {
                        toastr.error("Something went wrong. Please try again.");
                    }
                });

            });

            var table = $('.users-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('users.index') }}",
                    data: function (d) {
                        d.company = $(document).find('#filter_companies').length ? $(document).find('#filter_companies').val() : '';
                    @role([\App\Models\User::SUPER_ADMIN])
                        d.company_group = $(document).find('#filter_company_groups').length ? $(document).find('#filter_company_groups').val() : '';
                    @endrole
                    }
                },
                "lengthChange": false,
                info: false,
                "language": {
                    "paginate": {
                        "previous": "Prev"
                    }
                },
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'email', name: 'email'},
                    {data: 'company', name: 'company'},
                    {data: 'role', name: 'role'},
                        @can('users.edit')
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data, type, full, meta, status) {
                            var status = data === 1 ? 'checked' : '';
                            return "<div class='form-check form-switch ms-2'><input class='form-check-input change-status' name='status' type='checkbox' role='switch' data-id =" +
                                full.id + " id='flexSwitchCheckDefault' value=" + data + " " +
                                status + "></div>";
                        }
                    },
                        @endcan
                        @can(['users.edit', 'users.update', 'users.destroy','users.password.edit'])
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                    @endcan
                ],
                dom:
                    '<"row"' +
                    '<"col-sm-12 col-md-8" <"row" <"get_companies_data col-md-4 col-sm-6 col-auto" B> @role(\App\Models\User::SUPER_ADMIN)<"get_company_groups_data col-md-4 col-sm-6 col-auto" B>@endrole >>' +
                    '<"col-sm-12 col-md-4" <"search-filter me-2"f>>' +
                    '>t' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',
                initComplete: function () {
                    @php $companySelect = "<select id='filter_companies' class='form-select select2 text-capitalize mb-md-0 mb-2' style='width: 100%'><option value=''>" . 'All Companies' . "</option>"; @endphp
                    @foreach ($companies as $company)
                    @php $companySelect .= "<option value='$company->id'>" . $company->name . "</option>"; @endphp
                    @endforeach
                    @php $companySelect .= "</select>"; @endphp
                    $("{!! $companySelect !!}").appendTo('.get_companies_data').on('change', function () {
                        $('.users-datatable').DataTable().draw(true);
                    });
                @role([\App\Models\User::SUPER_ADMIN])
                    @php $companyGroupSelect = "<select id='filter_company_groups' class='form-select select2 text-capitalize mb-md-0 mb-2' style='width: 100%'><option value=''>" . 'All Company Groups' . "</option>"; @endphp
                    @foreach ($companyGroups as $companyGroup)
                    @php $companyGroupSelect .= "<option value='$companyGroup->id'>" . $companyGroup->name . "</option>"; @endphp
                    @endforeach
                    @php $companyGroupSelect .= "</select>"; @endphp
                    $("{!! $companyGroupSelect !!}").appendTo('.get_company_groups_data').on('change', function () {
                        $('.users-datatable').DataTable().draw(true);
                    });
                @endrole
                    $('.select2').select2();
                }
            });
            @if ($errors->has('user_email') || $errors->has('user_company') || session('invitation_error'))
            $("#userInvitationModal").modal('show');
            @endif
        });

        $('.company-groups').change( function() {
            let id = $(this).val();
            var company = {{ old('user_company', 0) }};
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var company_dropdown = $('select[name="user_company"]');
            company_dropdown.empty().prop('disabled', true);

            $.ajax({
                url: "{{ route('users.companies.data') }}",
                type: "GET",
                dataType: "json",
                data: {
                    'id': id
                },
                success: function(res) {
                    $.each(res.companies, function (index, value) {
                        company_dropdown.append(`<option value='${index}'>${value}</option>`);
                    });
                    if(company)
                        company_dropdown.val(company);
                    company_dropdown.prop('disabled', false).trigger('change');
                },
                error: function error() {
                    toastr.error("Something went wrong. Please try again.");
                }
            });
        }).change();

        $('select[name="role"]').change(function () {
            $(".companies, .company_group_user_div").toggle($(this).val() != '{{ \App\Models\User::COMPANY_GROUP_ADMIN }}');
        }).change();

        $('.company_group_user').change(function () {
            $(this).val($(this).prop('checked') ? 1 : 0);
        }).change();

    </script>
@endpush