@extends('master')

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

            <form class="row g-3 needs-validation" action="{{ route('search.employees') }}" method="post" novalidate>
                @csrf

                <!-- Search Box -->
                <div class="col-md-6">
                    <label for="searchBox" class="form-label">Search Employee</label>
                    <input type="text" class="form-control" id="searchBox" value="{{ old('search') }}" name="search" placeholder="Type to search" required>
                    @error('search')
                               <span class="text-danger">{{ $message }}</span>
                    @enderror
                    <div class="invalid-feedback">Please enter a valid search term.</div>
                </div>

                <!-- Search Criteria Dropdown -->

                <div class="col-md-6">
                    <label for="searchCriteria" class="form-label">Search By</label>
                    <select class="form-select" id="searchCriteria" name="search_criteria" aria-label="Search By" required>
                        <option selected disabled>Please Select</option>
                        <option value="1">Employee ID</option>
                        <option value="2">Name</option>
                        <option value="3">Contact</option>
                    </select>
                    @error('status')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                    <div class="invalid-feedback">Please select a search criteria.</div>
                </div>
                <div class="col-12">
                    <div class="form-action-button">
                        <button type="submit" class="btn save-btn">Search</button>
                    </div>
                </div>
            </form>
            <hr>
            <!-- Display Table -->
            <h5>Employee </h5>

            <table class="table" id="employeeTable">
                <thead>
                    <tr>
                        <th></th>
                        <!-- <th>ID</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>Available Vehicles</h5>

            <table class="table" id="availableVehiclesTable">
                <thead>
                    <tr>
                        <th></th>
                        <!-- <th>ID</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 () {
            $('form').submit(function (event) {
                event.preventDefault();

                var formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: formData,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        displayTable(data.employees);
                    },
                    error: function (error) {
                        console.log('Error:', error.responseText);
                    }
                });
            });
            function displayTable(employees) {
                var tableBody = $('#employeeTable tbody');
                tableBody.empty();

                $.each(employees, function (index, employee) {
                    var row = '<tr>' +
                        '<td><input type="checkbox" class="select-checkbox" name="selectedEmployee" data-employee-id="' + employee.id + '"></td>' +
                        '<td>' + employee.emp_id + '</td>' +
                        '<td>' + employee.name + '</td>' +
                        '<td>' + (employee.department ? employee.department.name : 'Not Assigned') + '</td>' +
                        '<td>' + employee.contact + '</td>' +
                        '</tr>';

                    tableBody.append(row);
                });

                // Add event handler for individual checkboxes
                $('.select-checkbox').change(function () {
                    $('.select-checkbox').not(this).prop('checked', false);

                    var selectedEmployeeId = $(this).data('employee-id');
                    if (selectedEmployeeId) {
                        getAvailableVehicles(selectedEmployeeId);
                    }
                });
            }

            function getAvailableVehicles(employeeId) {
                $.ajax({
                    type: 'GET',
                    url: '/assign/get-available-vehicles/' + employeeId,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data.hasOwnProperty('error')) {
                            console.error('Error:', data.error);
                            // Handle error, for example, show an alert or update the UI accordingly
                        } else {
                            displayAvailableVehicles(data.allVehicles);
                        }
                    },
                    error: function (error) {
                        console.log('Error:', error.responseText);
                        // Handle error, for example, show an alert or update the UI accordingly
                    }
                });
            }

            function displayAvailableVehicles(allVehicles) {
                console.log(allVehicles)
                var vehicleTable = $('#availableVehiclesTable tbody');
                vehicleTable.empty();

                // Add rows for each vehicle
                $.each(allVehicles, function (index, vehicle) {
                    var row = '<tr>' +
                        '<td><input type="checkbox" class="select-vehicle-checkbox" data-vehicle-id="' + vehicle.id + '"></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">Unassigned</span>' : (vehicle.status == 0 ? '<span class="badge unverified">Assigned</span>' : 'Unknown')) + '</td>' +
                        '</tr>';
                    vehicleTable.append(row);
                });

                
            }
// Handle the click event of the "Submit Selection" button
                $('#submitSelection').click(function () {
                    submitSelection();
                });
            function submitSelection() {
                var selectedEmployeeId = $('input[name="selectedEmployee"]:checked').data('employee-id');

                if (!selectedEmployeeId) {
                    alert('Please select an employee.');
                    return;
                }

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

                if (selectedVehicleIds.length === 0) {
                    alert('Please select at least one vehicle.');
                    return;
                }

                // Now you have the selected employee ID and vehicle IDs, send them to the server
                sendSelectionToServer(selectedEmployeeId, selectedVehicleIds);
            }

            function sendSelectionToServer(employeeId, vehicleIds) {
                    $.ajax({
                        type: 'POST',
                        url: '/assign/insert/company-vehicles',
                        data: {
                            employee_id: employeeId,
                            vehicle_ids: vehicleIds,
                            // Add the CSRF token to the request data
                            _token: '{{ csrf_token() }}',
                        },
                        dataType: 'json',
                        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);
                            alert('Error submitting selection. Please try again.');
                        }
                    });
            }

        });
    </script>
@endpush