@extends('layouts.admin')

@section('content')
    @if (session('error'))
        <div class="alert alert-danger mt-3" id="errorMessage">
            {{ session('error') }}
        </div>
    @endif
    <div class="card">
        <div class="card-header">
            <form id="searchForm" class="d-flex align-items-center">
                <select class="form-control select2 " id="searchOption" style="width: 200px;">
                    <option value="">Select Location</option>
                    @forelse ($locations as $location)
                        <option value="{{ $location->locker_code ?? '' }}">{{ $location->location_landmark ?? '' }}</option>
                    @empty
                        <option value="">No Location Found</option>
                    @endforelse
                </select>
                <a class="btn btn-primary download-btn d-flex align-items-center py-1 ml-3"
                    href="{{ route('admin.generate-pdf') }}">
                    <i class="fas fa-file-pdf mr-2"></i> Download List
                </a>
            </form>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover datatable datatable-dropPreparation">
                    <thead>
                        <tr>
                            <th width="10">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>Mobile</th>
                            <th>Tracking Number</th>
                            <th>Location</th>
                            <th>Product</th>
                            <th>Brand/Model/Serial</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($drop_data as $data)
                            <tr data-entry-id="{{ $data->id }}">
                                <td><input type="checkbox" class="selectRow"></td>
                                <td>{{ $data->customer_mobile ?? '' }}</td>
                                <td>{{ $data->tracking_number ?? '' }}</td>
                                <td>{{ $data->location_code ?? '' }}</td>
                                <td>{{ $product_types[$data->product_code] ?? '' }}</td>
                                <td>{{ $data->brand_type ?? '' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">No data found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent
    <script>
        $(function() {
            // Initialize Select2
            $('.select2').select2();

            $('#searchOption').on('change', function() {
                const lockerCode = $(this).val();

                if (!lockerCode) {
                    $('.datatable-dropPreparation tbody').html(
                        '<tr><td colspan="6">Please select a location.</td></tr>');
                    return;
                }

                $.ajax({
                    url: "{{ route('admin.customer-drop-preparation-list') }}",
                    method: 'GET',
                    data: {
                        locker_code: lockerCode
                    },
                    success: function(response) {
                        const tbody = $('.datatable-dropPreparation tbody');
                        tbody.empty();

                        if (response.length > 0) {
                            response.forEach(data => {
                                tbody.append(`
                                    <tr data-entry-id="${data.id}">
                                        <td><input type="checkbox" class="selectRow"></td>
                                        <td>${data.customer_mobile || ''}</td>
                                        <td>${data.tracking_number || ''}</td>
                                        <td>${data.location_code || ''}</td>
                                        <td>${data.product_code || ''}</td>
                                        <td>${data.brand_type || ''}</td>
                                    </tr>
                                `);
                            });
                        } else {
                            tbody.append(
                                '<tr><td colspan="6">No data found for the selected location.</td></tr>'
                            );
                        }
                    },
                    error: function() {
                        alert('An error occurred while fetching data.');
                    }
                });
            });

            $('#selectAll').on('click', function() {
                let isChecked = $(this).is(':checked');
                $('.selectRow').prop('checked', isChecked);
            });

            $('.datatable-dropPreparation tbody').on('click', '.selectRow', function() {
                if (!$(this).is(':checked')) {
                    $('#selectAll').prop('checked', false);
                }
            });

            $('.download-btn').on('click', function(e) {
                e.preventDefault();

                const selectedRows = [];
                $('.selectRow:checked').each(function() {
                    selectedRows.push($(this).closest('tr').data('entry-id'));
                });

                const lockerCode = $('#searchOption').val();
                const url = $(this).attr('href') + '?locker_code=' + lockerCode + '&selectedRows[]=' +
                    selectedRows.join('&selectedRows[]=');
                window.location.href = url;
            });
        });
    </script>
    <script>
        @if (session('error'))
            setTimeout(function() {
                document.getElementById('errorMessage').style.display = 'none';
            }, 3000); // 3000 milliseconds = 3 seconds
        @endif
    </script>
@endsection