@extends('layouts.admin')

@section('content')
    @if (session('success'))
        <div class="alert alert-success mt-3" id="errorMessage">
            {{ session('success') }}
        </div>
    @endif
    @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="" action="{{ route('admin.assign.returnRider') }}" method="POST">
                @csrf
                <div class="d-flex align-items-center justify-content-between gap-3">
                    @if (!session()->has('agent_location'))
                        <select class="form-control select2" id="locationSelect" style="max-width:220px">
                            <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>
                    @else
                        @php
                            $agentLocationCode = session('agent_location');
                            $selectedLocation = $locations->firstWhere('locker_code', $agentLocationCode);
                        @endphp
                        @if ($selectedLocation)
                            <select class="form-control select2" id="locationSelect" style="max-width:220px">
                                <option value="">Select Location</option>
                                <option value="{{ $selectedLocation->locker_code }}">
                                    {{ $selectedLocation->location_landmark }}
                                </option>
                            </select>
                        @else
                            <select id="location" name="location" class="select2 form-control">
                                <option value="" disabled selected>Invalid agent location</option>
                            </select>
                        @endif
                    @endif
                    <select class="form-control select2" id="riderSelect" style="max-width:220px">
                        <option value="">Select Rider</option>
                    </select>
                    <input type="hidden" name="locker_code" id="lockerCodeInput">
                    <input type="hidden" name="rider_id" id="riderIdInput">
                    <input type="hidden" name="rider_full_name" id="riderFullNameInput">
                    <input type="hidden" name="rider_number" id="riderNumberInput">
                    <input type="hidden" name="selectedRows" id="selectedRowsInput">
                    @can('rider_assign_to_return')
                        <button type="submit" id="assignRiderBtn" class="btn btn-sm btn-primary" style="display: none;">Assign
                            Rider</button>
                    @endcan
                    <select class="form-control select2" id="filterSelect" style="max-width:220px">
                        <option value="">Filter</option>
                        <option value="product_returned_by_rider">Returned By Rider</option>
                    </select>
                    @can('return_product_collection_by_agent')
                        <a class="btn btn-sm btn-primary download-collect-btn d-flex align-items-center text-white"
                            id="collect-button-return">Collect</a>
                    @endcan
                    <a class="btn btn-sm btn-primary download-btn d-flex align-items-center"
                        href="{{ route('admin.return.generate-pdf') }}">
                        <i class="fas fa-file-pdf mr-2"></i> Download List
                    </a>
                </div>
            </form>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover datatable datatable-returnPreparation">
                    <thead>
                        <tr>
                            <th width="10">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>Mobile</th>
                            <th>Tracking Number</th>
                            <th>Location</th>
                            <th>Assign</th>
                            <th>Logistics Collected</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($drop_data as $data)
                            <tr data-entry-id="{{ $data->tracking_number ?? '' }}">
                                <td><input type="checkbox" class="selectRow"></td>
                                <td>{{ $data->customer_mobile ?? '' }}</td>
                                <td>{{ $data->tracking_number ?? '' }}</td>
                                <td>{{ $data->location->location_landmark ?? '' }}</td>
                                <td
                                    class="{{ $data->productTracking->return_rider_name && $data->productTracking->return_rider_number ? 'text-success' : 'text-warning' }}">
                                    @if ($data->productTracking->return_rider_name && $data->productTracking->return_rider_number)
                                        <strong>{{ $data->productTracking->return_rider_name }}
                                            ({{ $data->productTracking->return_rider_number }})
                                        </strong>
                                    @else
                                        <strong>Not Assigned</strong>
                                    @endif
                                </td>
                                <td
                                    class="{{ $data->productTracking->product_returned_by_rider == 1 ? 'text-success' : 'text-warning' }}">
                                    <strong>{{ $data->productTracking->product_returned_by_rider == 1 ? 'Collected' : 'Not Yet' }}</strong>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center align-middle">No data found</td>
                            </tr>
                        @endforelse

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent
    <script>
        $(document).ready(function() {
            $('#searchForm').on('submit', function(e) {
                e.preventDefault();
                const lockerCode = $('#locationSelect').val();
                $('#lockerCodeInput').val(lockerCode);
                const riderId = $('#riderSelect').val();
                $('#riderIdInput').val(riderId);

                $('input[name="selectedRows[]"]').remove();

                $('.selectRow:checked').each(function() {
                    const entryId = $(this).closest('tr').data('entry-id');
                    if (entryId) {
                        $('#searchForm').append(
                            `<input type="hidden" name="selectedRows[]" value="${entryId}">`);
                    }
                });
                this.submit();
            });
        });
    </script>
    <script>
        $(function() {
            let table = $('.datatable-returnPreparation:not(.ajaxTable)').DataTable({
                dom: 'Bfrtip',
                buttons: [],
                select: false,
                columnDefs: [{
                    targets: 'select-checkbox',
                    orderable: false,
                    visible: false,
                    searchable: false,
                }, ],
                orderCellsTop: true,
                pageLength: 25,
            });

            $('.dataTables_filter').show();
            $('.dt-buttons').hide();
            $('.select2').select2();

            function fetchData() {
                const lockerCode = $('#locationSelect').val();
                const product_returned_by_rider = $('#filterSelect').val();

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

                // AJAX request
                $.ajax({
                    url: "{{ route('admin.return.preparation') }}",
                    method: 'GET',
                    data: {
                        locker_code: lockerCode,
                        product_returned_by_rider: product_returned_by_rider
                    },
                    success: function(response) {
                        renderTable(response);
                    },
                    error: function() {
                        $('.datatable-returnPreparation tbody').html(
                            '<tr><td colspan="8">An error occurred while fetching data.</td></tr>');
                    }
                });
            }

            // Function to render data into the table
            function renderTable(response) {
                const tbody = $('.datatable-returnPreparation tbody');
                tbody.empty();

                if (response.length > 0) {
                    response.forEach(data => {
                        const isRiderAssigned = data.product_tracking?.return_rider_name && data
                            .product_tracking?.return_rider_number;
                        const riderStatusClass = isRiderAssigned ? 'text-success' : 'text-warning';
                        const riderInfo = isRiderAssigned ?
                            `<strong>${data.product_tracking.return_rider_name} (${data.product_tracking.return_rider_number})</strong>` :
                            `<strong>Not Assigned</strong>`;

                        const isRiderCollect = data.product_tracking?.product_returned_by_rider === 1;
                        const riderCollectedClass = isRiderCollect ? 'text-success' : 'text-warning';
                        const riderCollectedInfo = isRiderCollect ?
                            `<strong>Collected</strong>` :
                            `<strong>Not Yet</strong>`;

                        // Append new row to the table
                        tbody.append(`
                    <tr data-entry-id="${data.tracking_number || ''}">
                        <td><input type="checkbox" class="selectRow"></td>
                        <td>${data.customer_mobile || ''}</td>
                        <td>${data.tracking_number || ''}</td>
                        <td>${data.location.location_landmark || ''}</td>
                       <td class="${riderStatusClass}">${riderInfo}</td>
                         <td class="${riderCollectedClass}">${riderCollectedInfo}</td>
                    </tr>
                `);
                    });
                } else {
                    tbody.append('<tr><td colspan="8">No data found for the selected filter.</td></tr>');
                }
            }

            // Trigger fetchData on location change
            $('#locationSelect').on('change', function() {
                fetchData();
            });

            // Trigger fetchData on filter change
            $('#filterSelect').on('change', function() {
                fetchData();
            });

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

            $('.datatable-returnPreparation 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 = $('#locationSelect').val();
                // const url = $(this).attr('href') + '?locker_code=' + lockerCode + '&selectedRows[]=' +
                //     selectedRows.join('&selectedRows[]=');
                const url = $(this).attr('href') + '?locker_code=' + lockerCode;
                window.location.href = url;
            });
            $(document).ready(function() {
                $('#collect-button-return').on('click', function(e) {
                    e.preventDefault();

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

                    if (selectedRows.length === 0) {
                        alert('Please select at least one row to collect.');
                        return;
                    }
                    const url = "{{ route('admin.return.collected.by.agent') }}";
                    const queryParams = new URLSearchParams();
                    selectedRows.forEach((row) => queryParams.append('selectedRows[]', row));
                    window.location.href = `${url}?${queryParams.toString()}`;
                });
            });
        });
    </script>
    <script>
        const getRidersByLockerUrl = "{{ route('admin.riders.by.locker') }}";

        $(document).ready(function() {
            const riderSelect = $('#riderSelect');
            const assignRiderBtn = $('#assignRiderBtn');

            assignRiderBtn.hide();
            $('#locationSelect').on('change', function() {
                const lockerCode = $(this).val();
                $('#lockerCodeInput').val(lockerCode); // Set locker code
                riderSelect.empty().append('<option value="">Loading...</option>');
                assignRiderBtn.hide();

                if (lockerCode) {
                    // Make AJAX call to get riders by locker code
                    $.ajax({
                        url: getRidersByLockerUrl,
                        type: 'GET',
                        data: {
                            locker_code: lockerCode,
                        },
                        success: function(response) {
                            if (response.code === 200) {
                                const riders = response.data;

                                if (riders.length > 0) {
                                    riderSelect.empty().append(
                                        '<option value="">Select Rider</option>'
                                    );

                                    // Populate the dropdown with rider information
                                    riders.forEach((rider) => {
                                        riderSelect.append(
                                            `<option value="${rider.user_id}" data-name="${rider.user_full_name}" data-number="${rider.user_mobile_no}">
                                        ${rider.user_full_name} (${rider.user_mobile_no})
                                    </option>`
                                        );
                                    });
                                    assignRiderBtn.show();
                                } else {
                                    riderSelect.empty().append(
                                        '<option value="">No Riders Found</option>'
                                    );
                                    assignRiderBtn.hide();
                                }
                            } else {
                                riderSelect.empty().append(
                                    '<option value="">Failed to fetch data</option>'
                                );
                                assignRiderBtn.hide();
                            }
                        },
                        error: function() {
                            riderSelect.empty().append(
                                '<option value="">Error fetching data</option>'
                            );
                            assignRiderBtn.hide();
                        },
                    });
                } else {
                    riderSelect.empty().append('<option value="">Select Location First</option>');
                    assignRiderBtn.hide();
                }
            });

            // Update hidden inputs when rider is selected
            riderSelect.on('change', function() {
                const selectedOption = $(this).find(':selected');
                const riderId = selectedOption.val();
                const riderName = selectedOption.data('name');
                const riderNumber = selectedOption.data('number');

                $('#riderIdInput').val(riderId);
                $('#riderFullNameInput').val(riderName);
                $('#riderNumberInput').val(riderNumber);
            });
        });
    </script>

    <script>
        @if (session('error'))
            setTimeout(function() {
                document.getElementById('errorMessage').style.display = 'none';
            }, 4000); // 3000 milliseconds = 3 seconds
        @endif
    </script>
@endsection