@extends('layouts.app')

@section('title', 'VMS | ' . \App\CPU\translate('Employee List'))

@push('css_or_js')
@endpush

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxxl">
            <!--begin::Content wrapper-->
            <div class="d-flex flex-column flex-column-fluid">
                <!--begin::Toolbar-->
                <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                    <!--begin::Toolbar container-->
                    <div id="kt_app_toolbar_container" class="app-container container-xxxl d-flex flex-stack">
                        <!--begin::Page title-->
                        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                            <!--begin::Title-->
                            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                                {{ \App\CPU\translate('Vendors List') }} ( {{ $vendor_count }} )</h1>
                            <!--end::Title-->
                            <!--begin::Breadcrumb-->
                            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                                <!--begin::Item-->
                                <li class="breadcrumb-item text-muted">
                                    <a class="text-muted text-hover-primary">{{ \App\CPU\translate('Vendors') }}</a>
                                </li>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <li class="breadcrumb-item">
                                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                                </li>
                                <!--end::Item-->
                                <!--begin::Item-->
                                <li class="breadcrumb-item text-muted">List</li>
                                <!--end::Item-->
                            </ul>
                            <!--end::Breadcrumb-->
                        </div>
                        <!--end::Page title-->

                    </div>
                    <!--end::Toolbar container-->
                </div>
                <!--end::Toolbar-->
                <!--begin::Content-->
                <!--begin::Card-->
                <div class="card">
                    <!-- Data Table Top -->
                    <div class="px-3 py-4">
                        <div class="row flex-grow-1">
                            <!-- Search -->
                            <form class="row" action="{{ url()->current() }}" method="GET">
                                <div class="row col-10">
                                    <div class="row col-12 align-items-center">
                                        <div class="col-4 d-flex align-items-center position-relative my-1 ">
                                            <input type="text" data-kt-user-table-filter="search" name="search"
                                                class="form-control  fs-7 ps-12" placeholder="Search Vendor"
                                                value="{{ $_GET['search'] ?? '' }}" />
                                        </div>
                                        <div class="col-4 d-flex align-items-center position-relative my-1 ">
                                            <select aria-label="Select a Contract Name" id="role_select" name="search_role"
                                                data-control="select2" data-placeholder="Contract Name"
                                                class="form-select form-select-sm form-select-solid">
                                                <option value="0" selected disabled>Role</option>
                                                <option value="no">No select</option>
                                                @foreach ($rls as $role)
                                                    <option value="{{ $role->id }}">
                                                        {{ $role->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2 justify-content-end">
                                    <div class="d-flex align-items-center justify-content-end">
                                        <button type="submit"
                                            class="filterBtn btn btn-sm fw-bold btn-primary bigMainBtn ">Search</button>
                                        @include('includes.exportBtn', [
                                            'route' => route('admin.employee.export'),
                                        ])
                                    </div>
                                </div>
                            </form>
                            <!-- End Search -->
                        </div>
                        <!-- End Row -->
                    </div>
                    <!-- End Data Table Top -->

                    <div class="card-body pt-0">
                        <div id="kt_customers_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer"
                            style="overflow-x:auto">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer">
                                <thead>
                                    <tr class="text-start text-gray-400 fw-bold fs-7 gs-0">
                                        <th>{{ \App\CPU\translate('SL') }}</th>
                                        <th>{{ \App\CPU\translate('Name') }}</th>
                                        <th>{{ \App\CPU\translate('Email') }}</th>
                                        <th>{{ \App\CPU\translate('Vendor Name') }}</th>
                                        <th>{{ \App\CPU\translate('Role') }}</th>
                                        <th>{{ \App\CPU\translate('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($vendors as $k => $e)
                                        @if ($e->role)
                                            <tr>
                                                <!--begin::Name=-->
                                                <td>
                                                    {{ $e['id'] }}</a>
                                                </td>
                                                <!--end::Name=-->
                                                <!--begin::Name=-->
                                                <td>
                                                    {{ $e['name'] }}</a>
                                                </td>
                                                <!--end::Name=-->
                                                <!--begin::Email=-->
                                                <td>
                                                    {{ $e['email'] }}
                                                </td>
                                                <!--end::Email=-->
                                                <!--begin::Vendor Name=-->
                                                <td>{{ $e['VENDOR_NAME'] }}</td>
                                                <!--end::Vendor Name=-->
                                                <td>{{ $e->role['name'] }}</td>
                                                <!--end::Date=-->
                                                <!--begin::Action=-->
                                                <td>
                                                    <a href="#"
                                                        class="btn btn-sm btn-icon btn-light btn-active-light-primary"
                                                        data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                        <!--begin::Svg Icon | path: icons/duotune/general/gen052.svg-->
                                                        <span class="svg-icon svg-icon-2">
                                                            <svg width="24" height="24" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <rect x="10" y="10" width="4" height="4"
                                                                    rx="2" fill="currentColor" />
                                                                <rect x="17" y="10" width="4" height="4"
                                                                    rx="2" fill="currentColor" />
                                                                <rect x="3" y="10" width="4" height="4"
                                                                    rx="2" fill="currentColor" />
                                                            </svg>
                                                        </span>
                                                        <!--end::Svg Icon-->
                                                    </a>
                                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                                        data-kt-menu="true">
                                                        <!--begin::Menu item-->
                                                        <div class="menu-item px-3">
                                                            <a href="{{ route('admin.employee.edit', [$e['id']]) }}"
                                                                class="menu-link px-3">{{ \App\CPU\translate('Edit') }}</a>
                                                        </div>
                                                        <div class="menu-item px-3">
                                                            <a class="delete menu-link px-3"
                                                                id={{ $e['id'] }}>{{ \App\CPU\translate('Delete') }}</a>
                                                        </div>
                                                    </div>

                                                </td>
                                                <!--end::Action=-->
                                            </tr>
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>
                    <div class="table-responsive mt-4">
                        <div class="d-flex justify-content-lg-end">
                            <!-- Pagination -->
                            {{ $vendors->links() }}
                        </div>
                    </div>
                    @if (count($vendors) == 0)
                        <div class="text-center p-4">
                            <p class="mb-0">{{ \App\CPU\translate('No_data_to_show') }}</p>
                        </div>
                    @endif
                </div>

                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection

@push('script')
    <!--begin::Vendors Javascript(used for this page only)-->
    <script src="{{ asset('assets') }}/plugins/custom/datatables/datatables.bundle.js"></script>
    <!--end::Vendors Javascript-->
    <!--begin::Custom Javascript(used for this page only)-->
    <script src="{{ asset('assets') }}/js/custom/apps/customers/list/export.js"></script>
    <script src="{{ asset('assets') }}/js/custom/apps/customers/list/list.js"></script>
    <script src="{{ asset('assets') }}/js/custom/apps/customers/add.js"></script>
    <script src="{{ asset('assets') }}/js/widgets.bundle.js"></script>
    <script src="{{ asset('assets') }}/js/custom/widgets.js"></script>
    <script src="{{ asset('assets') }}/js/custom/apps/chat/chat.js"></script>
    <script src="{{ asset('assets') }}/js/custom/utilities/modals/upgrade-plan.js"></script>
    <script src="{{ asset('assets') }}/js/custom/utilities/modals/create-app.js"></script>
    <script src="{{ asset('assets') }}/js/custom/utilities/modals/users-search.js"></script>
    <script>
        $(document).on('change', '.switcher_input', function() {
            let id = $(this).attr("id");

            let status = 0;
            if (jQuery(this).prop("checked") === true) {
                status = 1;
            }

            Swal.fire({
                title: '{{ \App\CPU\translate('Are you sure') }}?',
                text: '{{ \App\CPU\translate('want_to_change_status') }}',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                cancelButtonText: 'No',
                confirmButtonText: 'Yes',
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{ url('/') }}/admin/employee/status/",
                        method: 'POST',
                        data: {
                            id: id,
                            status: status
                        },
                        success: function() {
                            toastr.success(
                                '{{ \App\CPU\translate('Status updated successfully') }}');
                        }
                    });
                }
            })
        });
        $(document).on('click', '.switcher_input', function() {
            let id = $(this).attr("id");

            let status = 0;
            if (jQuery(this).prop("checked") === true) {
                status = 1;
            }

            Swal.fire({
                title: '{{ \App\CPU\translate('Are you sure') }}?',
                text: '{{ \App\CPU\translate('want_to_change_status') }}',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                cancelButtonText: 'No',
                confirmButtonText: 'Yes',
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{ url('/') }}/admin/employee/status/",
                        method: 'POST',
                        data: {
                            id: id,
                            status: status
                        },
                        success: function() {
                            toastr.success(
                                '{{ \App\CPU\translate('Status updated successfully') }}');
                        }
                    });
                }
            })
        });
        $(document).on('click', '.delete', function() {
            let id = $(this).attr("id");
            Swal.fire({
                title: '{{ \App\CPU\translate('Are you sure') }}?',
                text: '{{ \App\CPU\translate('want_to_delete_this_vendor') }}',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                cancelButtonText: 'No',
                confirmButtonText: 'Yes',
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{ route('admin.employee.delete') }}",
                        method: 'POST',
                        data: {
                            id: id
                        },
                        success: function() {
                            toastr.success(
                                '{{ \App\CPU\translate('Vendor deleted successfully') }}');
                            location.reload();
                        }
                    });
                }
            })
        });
        $(document).ready(function() {
            var search_role = '{{ $_GET['search_role'] ?? '' }}';
            if (search_role != '') {
                $('#role_select>option[value=' + search_role + ']').prop('selected', true);
                $('#contract_select').trigger('change');
            }
        });
        $(document).on('change', 'select', function() {
            if ($(this).val() == 'no') {
                $(this).val(null).trigger("change");
            }
        });
    </script>
@endpush