@extends('master')

@section('content')
    <section class="section dashboard">
        <div class="container">
            <h5>Employee </h5>

            <!-- Display Table for Employees -->
            <table class="table" id="employeeTable">
                <!-- Table headers -->
                <thead>
                    <tr>
                        <th></th>
                        <th>Employee ID</th>
                        <th>Name</th>
                        <th>Dept ID</th>
                        <th>Contact</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Table rows will be added dynamically using JavaScript -->
                </tbody>
            </table>
            <h5> Vehicles</h5>

            <!-- Display Table for Available Vehicles -->
            <table class="table" id="companyVehiclesTable">
                <!-- Table headers -->
                <thead>
                    <tr>
                        <th></th>
                        <th>Year</th>
                        <th>Make</th>
                        <th>Model</th>
                        <th>Reg No</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Available vehicles will be added dynamically using JavaScript -->
                </tbody>
            </table>

            <div class="col-12">
                <div class="form-action-button">
                    <button type="button" class="btn save-btn" id="submitSelection">Save</button>
                    <button type="button" class="btn bg-white" onclick="window.history.back()">Back</button>

                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function () {
            // Get the path from the URL
            var path = window.location.pathname;

            // Extract the employeeId from the path
            var matches = path.match(/\/assign\/edit\/(\d+)/);

            // Check if matches are found
            if (matches && matches[1]) {
                var employeeId = matches[1];

                // Trigger the editEmployee function with the extracted employeeId
                editEmployee(employeeId);
            } else {
                console.error('Employee ID not found in the URL.');
            }

        function editEmployee(employeeId) {
            // Make an AJAX request to fetch data for the selected employee
            $.ajax({
                type: 'GET',
                url: '/assign/get-employee-data/' + employeeId,
                dataType: 'json',
                success: function (data) {
                    displayEmployeeData(data.employee);
                    displayAllVehicles(data.allVehicles);
                },
                error: function (error) {
                    console.log('Error:', error.responseText);
                }
            });
        }

        function displayEmployeeData(employee) {
            var tableBody = $('#employeeTable tbody');
            tableBody.empty();

            var departmentName = employee.department ? employee.department.name : 'N/A';
            console.log(employee);  // Log the departmentName

            var row = '<tr>' +
                '<td><input type="checkbox" class="select-checkbox" data-employee-id="' + employee.id + '" checked disabled></td>' +
                '<td>' + employee.emp_id + '</td>' +
                '<td>' + employee.name + '</td>' +
                '<td>' + departmentName + '</td>' +
                '<td>' + employee.contact + '</td>' +
                '</tr>';

            tableBody.append(row);
        }


        function displayAllVehicles(allVehicles) {
            var vehicleTable = $('#companyVehiclesTable tbody');
            vehicleTable.empty();

            $.each(allVehicles, function (index, vehicle) {
                console.log('Vehicle ID:', vehicle.id); // Output the ID to console for debugging

            var row = '<tr>' +
                '<td><input type="checkbox" class="select-vehicle-checkbox" data-vehicle-id="' + vehicle.id + '" checked></td>' +
                '<td>' + vehicle.year + '</td>' +
                '<td>' + vehicle.make + '</td>' +
                '<td>' + vehicle.model + '</td>' +
                '<td>' + vehicle.reg_no + '</td>' +
                '<td>' + (vehicle.status == 100 ? '<span class="badge verified">Active</span>' : (vehicle.status == 0 ? '<span class="badge unverified">Inactive</span>' : 'Unknown')) + '</td>' +
                '</tr>';

            vehicleTable.append(row);
            });
        }

        $('#submitSelection').on('click', function () {
                    // Get CSRF token from the meta tag
                    var csrfToken = $('meta[name="csrf-token"]').attr('content');

                    // Get selected employee ID
                    var employeeId = $('.select-checkbox:checked').data('employee-id');

                    // Get selected vehicle IDs
                    var selectedVehicleIds = [];
                    $('.select-vehicle-checkbox:checked').each(function () {
                        selectedVehicleIds.push($(this).data('vehicle-id'));
                    });

                    // Make an AJAX request to update the database
                    $.ajax({
                        type: 'POST',
                        url: '/assign/update-employee-vehicles',
                        dataType: 'json',
                        data: {
                            _token: csrfToken, // Include the CSRF token
                            employee_id: employeeId,
                            vehicle_ids: selectedVehicleIds
                        },
                        success: function (data) {
                // Redirect to the specified route after successful submission
                window.location.href = '{{ route("assign.list") }}';
            },
                        error: function (error) {
                            console.log('Error:', error.responseText);
                            // Optionally, you can handle error actions here
                        }
                    });
        });
    });
</script>
@endpush