@extends('ui-common.layouts.master')
@section('title')
    @lang('Employee List')
@endsection
@section('css')
    <!-- DataTable 1.11.5 -->
    <link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
    <!-- select2@4.1.0 -->
    <link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
    <!-- font-awesome-6.7.2 -->
    <link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/employee-new/employee.css') }}" rel="stylesheet" />
@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Employee Detail
@endslot
@slot('title')
Employee
@endslot
@endcomponent
<style>
     .datatable_margin_top{
      margin-top:45px !important;
   }
   .datatable_margin_entires{
      position:absolute !important;
      top:60px !important
   }
   .form-select:focus {
    outline: 0;  
    box-shadow: none;  
}
@media only screen and (max-width: 1024px) {
   
   .datatable_margin_top {
      margin-top: 100px !important;
   }

   }
    @media only screen and (min-width: 340px) and (max-width: 767px) {
    .filter_tab {
        padding-top: 0px !important;
    }
}
@media only screen and (min-width: 484px) and (max-width: 767px) {
    .add_employee {
        padding-top: 0px !important;
    }
}

@media only screen and (max-width: 767px) {
    .datatable_search {
        top: 4px !important;
        left: -5px !important;
    }
}

</style>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="d-flex justify-content-lg-end px-3 pt-3 flex-wrap">
                    <h5 class=" mb-0"></h5>
                    <input value="{{ route('employee.fetch') }}" type="hidden" id="employeefetch">
                    <input value="{{ route('employee.add') }}/" type="hidden" id="employeeadd">
                    <input value="{{ route('employee.delete') }}/" type="hidden" id="employeedelete">
                    <input value="{{ route('employee.update-status') }}" type="hidden" id="employeeactive">
                    <div class="common_select2 me-2" style="width:165px">
                        <select class="js-example-basic-single form-control" name="state">
                            <option selected value="">Please Select</option>
                            <option value="1">Action</option>
                            <option value="2">Data</option>
                        </select>
                    </div>
                    <div class="me-2 pt-2 pt-md-0 filter_tab">
                        <button class="btn btn-success" type="button" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><i
                                class="fa-solid fa-filter pe-1"></i>Filter</button>
                    </div>
                    <div class="pt-2 pt-md-0 add_employee">
                        <a href="{{ route('employee.add') }}"><button id="addRow" class="btn btn-primary addRow"> Add
                                Employee
                                <span class="ms-1 ">
                                    <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"
                                        fill="#fff" viewBox="0 0 24 24" width="17" height="17">
                                        <path
                                            d="m12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm-5,21.797v-.797c0-2.757,2.243-5,5-5s5,2.243,5,5v.797c-1.501.769-3.201,1.203-5,1.203s-3.499-.434-5-1.203Zm11-.582v-.215c0-3.309-2.691-6-6-6s-6,2.691-6,6v.215c-3.008-1.965-5-5.362-5-9.215C1,5.935,5.935,1,12,1s11,4.935,11,11c0,3.853-1.992,7.25-5,9.215ZM12,5c-2.206,0-4,1.794-4,4s1.794,4,4,4,4-1.794,4-4-1.794-4-4-4Zm0,7c-1.654,0-3-1.346-3-3s1.346-3,3-3,3,1.346,3,3-1.346,3-3,3Z" />
                                    </svg> </span>

                            </button></a>
                    </div>

                </div>
                <div class="card-body common_datatable_theme table_search_custom common_search_emp">

                    <table id="employeeTable" class="table theme_table dt-responsive nowrap align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th class="profile-img-th p-0"></th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Mobile</th>
                                <th>Email</th>
                                <th>Role</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

            </div>
        </div>
        <!--end col-->
    </div>

    <!-- filter canva rightside -->

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header ">
            <button class="back_btn" data-bs-dismiss="offcanvas" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg"
                    fili="#181d27" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="24" height="24">
                    <path
                        d="M19,11H9l3.293-3.293L10.879,6.293,6.586,10.586a2,2,0,0,0,0,2.828l4.293,4.293,1.414-1.414L9,13H19Z" />
                </svg> Back </button>
        </div>
        <div class="offcanvas-body">
            <div class="col-12">
                <div class="form-group ">
                    <label for="department_id" class="form-label">
                        Name </label>
                    <div class="input-field">
                        <span class="icon z-index">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                                fill="none">
                                <path
                                    d="M2.5 1.875V18.125H9.375V15.625H10.625V18.125H17.5V1.875H2.5ZM3.75 3.125H16.25V16.875H11.875V14.375H8.125V16.875H3.75V3.125ZM5 4.375V5.625H7.5V4.375H5ZM8.75 4.375V5.625H11.25V4.375H8.75ZM12.5 4.375V5.625H15V4.375H12.5ZM5 6.875V8.125H7.5V6.875H5ZM8.75 6.875V8.125H11.25V6.875H8.75ZM12.5 6.875V8.125H15V6.875H12.5ZM5 9.375V10.625H7.5V9.375H5ZM8.75 9.375V10.625H11.25V9.375H8.75ZM12.5 9.375V10.625H15V9.375H12.5ZM5 11.875V13.125H7.5V11.875H5ZM8.75 11.875V13.125H11.25V11.875H8.75ZM12.5 11.875V13.125H15V11.875H12.5ZM5 14.375V15.625H7.5V14.375H5ZM12.5 14.375V15.625H15V14.375H12.5Z"
                                    fill="#96A5B8" />
                            </svg>
                        </span>
                        <select id="department_id"
                            class="form-select fs-12 fc-secondary font-weight-500 js-example-basic-single select2"
                            aria-label="Default select example" name="department">

                            <option selected value="">Please select one</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>

                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-3 pt-4">
                <button type="button" class="btn bg-danger text-white">Clear All</button>
                <button type="button" class="btn btn_primary">Update</button>
            </div>

        </div>
    </div>
    <!-- filter canva rightside -->


    <!-- Right Sidebar (Off-Canvas) -->
    <!-- Right Sidebar (Off-Canvas) -->
    <div id="userDetailSidebar" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="userDetailSidebarLabel">
        <div class="offcanvas-header">
            <button class="back_btn" data-bs-dismiss="offcanvas" aria-label="Close"><svg
                    xmlns="http://www.w3.org/2000/svg" fili="#181d27" id="Layer_1" data-name="Layer 1"
                    viewBox="0 0 24 24" width="24" height="24">
                    <path
                        d="M19,11H9l3.293-3.293L10.879,6.293,6.586,10.586a2,2,0,0,0,0,2.828l4.293,4.293,1.414-1.414L9,13H19Z" />
                </svg> Back </button>
        </div>
        <div class="offcanvas-body">
            <div class="d-flex align-items-flex-start justify-content-between">
                <!-- Profile Image Section -->
                <img id="sidebarProfileImage" class="rounded-circle modal_profile" src="" alt="Profile Image">
                <div class="d-flex gap-2">
                    <button class="btn_toggle" data-toggle="tooltip" data-bs-placement="top" aria-label="Toggle Status"
                        data-bs-original-title="Toggle Status">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                            fill="none">
                            <circle cx="8" cy="8" r="7" stroke="#17b26a" stroke-width="1.5"></circle>
                            <path d="M4 8h8" stroke="#17b26a" stroke-width="1.5" stroke-linecap="round"></path>
                        </svg>
                    </button>
                    <button class="btn_edit" data-toggle="tooltip" data-bs-placement="top" aria-label="Edit"
                        data-bs-original-title="Edit"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1"
                            data-name="Layer 1" viewBox="0 0 24 24" width="18" height="18">
                            <path
                                d="m4.5,1h5.515c.334,0,.663.03.985.088v5.412c0,1.378,1.122,2.5,2.5,2.5h5.411c.033.178.057.359.071.541.022.275.274.479.539.458.275-.022.48-.264.458-.539-.125-1.536-.793-2.981-1.883-4.07l-3.485-3.485c-1.228-1.228-2.86-1.904-4.596-1.904h-5.515C2.019,0,0,2.019,0,4.5v15c0,2.481,2.019,4.5,4.5,4.5h4c.276,0,.5-.224.5-.5s-.224-.5-.5-.5h-4c-1.93,0-3.5-1.57-3.5-3.5V4.5c0-1.93,1.57-3.5,3.5-3.5Zm12.889,5.096c.545.545.965,1.195,1.24,1.904h-5.129c-.827,0-1.5-.673-1.5-1.5V1.368c.706.273,1.353.692,1.904,1.243l3.485,3.485Zm5.878,5.636c-.943-.944-2.592-.944-3.535,0l-7.707,7.707c-.661.661-1.025,1.54-1.025,2.475v1.586c0,.276.224.5.5.5h1.586c.935,0,1.814-.364,2.475-1.025l7.707-7.707c.472-.472.732-1.1.732-1.768s-.26-1.296-.732-1.768Zm-.707,2.828l-7.707,7.707c-.472.472-1.1.732-1.768.732h-1.086v-1.086c0-.668.26-1.295.732-1.768l7.707-7.707c.566-.566,1.555-.566,2.121,0,.283.283.439.66.439,1.061s-.156.777-.439,1.061Z" />
                        </svg>
                    </button>
                    <button class="btn_delete" data-toggle="tooltip" data-bs-placement="top" aria-label="Delete"
                        data-bs-original-title="Delete"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                            height="16" viewBox="0 0 11 11" fill="none">
                            <g clip-path="url(#clip0_281_10181)">
                                <path
                                    d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z"
                                    fill="#f04438"></path>
                                <path
                                    d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z"
                                    fill="#f04438"></path>
                                <path
                                    d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z"
                                    fill="#f04438"></path>
                                <path
                                    d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z"
                                    fill="#f04438"></path>
                            </g>
                            <defs>
                                <clipPath id="clip0_281_10181">
                                    <rect width="11" height="11" fill="white"></rect>
                                </clipPath>
                            </defs>
                        </svg>
                    </button>

                </div>
            </div>

            <!-- User Details Section -->
            <div class="mt-3">
                <p class="heading_txt">Name : <span class="data_text" id="sidebarName"></span></p>
                <p class="heading_txt">Email : <span class="data_text" id="sidebarEmail"></span></p>
                <p class="heading_txt">Mobile : <span class="data_text" id="sidebarMobile"></span></p>
                <p class="heading_txt">Status : <span id="sidebarStatus"></span></p>
                <p class="heading_txt">Role : <span class="data_text" id="sidebarRole"></span></p>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
    <script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
    <script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
    <script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/datatables-1.11.5_cdn/datatables.buttons.min.js') }}"></script>
    <script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
    <script src="{{ url('js/sweetalert-2@11.20/sweetalert2.all.min.js') }}"></script>
    <script src="{{ url('js/employee/employee_lists.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Example data with profile image URL and status
            const employees = [{
                    profileImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8fDA%3D',
                    firstName: 'John',
                    lastName: 'Doe',
                    mobile: '1234567890',
                    email: 'john.doe@example.com',
                    status: 'active',
                    role: 'Admin'
                },
                {
                    profileImage: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8fDA%3D',
                    firstName: 'Jane',
                    lastName: 'Smith',
                    mobile: '9876543210',
                    email: 'jane.smith@example.com',
                    status: 'inactive',
                    role: 'User'
                }
            ];

            // Function to populate the table
            function populateTable(data) {
                const tableBody = $('#employeeTable tbody');
                tableBody.empty(); // Clear existing rows

                data.forEach((employee) => {
                    const statusClass = employee.status === 'active' ? 'dot-active' : 'dot-inactive';

                    const row = `
                <tr class="clickable-row" data-employee='${JSON.stringify(employee)}'>
                    <td class="position-relative">
                        <div class="position-relative profile-img">
                            <img src="${employee.profileImage}" alt="Profile Image" class="rounded-circle" style="width: 40px; height: 40px;">
                            <span class="status-dot ${statusClass}"></span>
                        </div>
                    </td>
                    <td>${employee.firstName}</td>
                    <td>${employee.lastName}</td>
                    <td>${employee.mobile}</td>
                    <td>${employee.email}</td>
                    <td>${employee.role}</td>
                </tr>
            `;
                    tableBody.append(row); // Add the row to the table body
                });

        // Reinitialize DataTable to ensure it picks up new data and is responsive
        $('#employeeTable').DataTable({
            responsive: true,
            searching:true,
            info: true,
            // dom: '<"top"l>rt<"bottom"ip>',
            // lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            columnDefs: [{
                targets: 0,
                orderable: false
            }],
            language: {
                // searchPlaceholder: "Search employees...",
                "paginate": {
                    "previous": '<span class="fa fa-chevron-left"></span>',
                    "next": '<span class="fa fa-chevron-right"></span>',
                },
            },
            // dom: '<"top"f>rt<"bottom_filter"ilp>', // Define where parts should go
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            initComplete: function() {
                // Ensure the bottom section exists and move the length control to the left side
                // $('#employeeTable_length').appendTo('.bottom');
                $('#employeeTable_filter input').attr('placeholder', 'Search employees...');
                $('#employeeTable_filter').parent().removeClass('col-md-6');
                $('#employeeTable_filter').parent().addClass('col-md-12 ps-lg-1');
                $('#employeeTable_filter').parent().parent().addClass('datatable_search');
                $('#employeeTable').parent().addClass('col-sm-12  datatable_margin_top');
                var svgIcon = '<svg width="17" height="17" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.3059 2.93994C6.5142 2.93994 3.44043 6.01372 3.44043 9.80541C3.44043 13.5971 6.5142 16.6709 10.3059 16.6709C14.0976 16.6709 17.1714 13.5971 17.1714 9.80541C17.1714 6.01372 14.0976 2.93994 10.3059 2.93994ZM2.19043 9.80541C2.19043 5.32336 5.82385 1.68994 10.3059 1.68994C14.7879 1.68994 18.4214 5.32336 18.4214 9.80541C18.4214 14.2875 14.7879 17.9209 10.3059 17.9209C5.82385 17.9209 2.19043 14.2875 2.19043 9.80541Z" fill="#181d27  "/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.0731 14.9628C15.3169 14.7184 15.7126 14.7179 15.957 14.9617L18.8937 17.8907C19.1381 18.1345 19.1386 18.5302 18.8949 18.7746C18.6511 19.019 18.2554 19.0195 18.011 18.7758L15.0743 15.8467C14.8299 15.6029 14.8294 15.2072 15.0731 14.9628Z" fill="#181d27  "/></svg>';
                $('#employeeTable_filter input').before(svgIcon);
                $("#employeeTable_length").parent().addClass('datatable_margin_entires');
            }

            // Call the function to populate the table with example data
            populateTable(employees);

            // Handle row click and populate sidebar with user details
            $('#employeeTable').on('click', '.clickable-row', function() {
                const employee = $(this).data('employee');

                // Update sidebar with employee details
                $('#sidebarProfileImage').attr('src', employee.profileImage);
                $('#sidebarName').text(`${employee.firstName} ${employee.lastName}`);
                $('#sidebarEmail').text(employee.email);
                $('#sidebarMobile').text(employee.mobile);
                $('#sidebarRole').text(employee.role);

                // Update the status and apply the appropriate CSS class
                const statusElement = $('#sidebarStatus');
                if (employee.status === 'active') {
                    statusElement.text('Active');
                    statusElement.removeClass('status-inactive').addClass('status-active');
                } else {
                    statusElement.text('Inactive');
                    statusElement.removeClass('status-active').addClass('status-inactive');
                }

                // Open the sidebar (right off-canvas)
                var myOffcanvas = new bootstrap.Offcanvas(document.getElementById('userDetailSidebar'));
                myOffcanvas.show();
            });

        });
    </script>
@endsection