@extends('layouts.location')

@section('title', (isset($pageMode) && $pageMode === 'converted-freight') ? 'Booking Pending' : 'Calculate Freight')
@section('page-title', (isset($pageMode) && $pageMode === 'converted-freight') ? 'Booking Pending' : 'Calculate Freight')

@section('content')
    @php
        $bookingCompleted = $bookingCompleted ?? collect();
        $bookingPending = $bookingPending ?? collect();
    @endphp
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    {{ (isset($pageMode) && $pageMode === 'converted-freight') ? 'Booking Pending' : 'Calculate Freight' }}
                </div>
                <div class="card-body">
                    <input type="hidden" id="location_id" name="location_id"
                        value="{{ session('location_id') ?? 'NOT_SET' }}">
                    <div class="row mb-3">
                        <label for="so_no" class="col-md-4 col-form-label">SO Number</label>
                        <div class="col-md-8">
                            <div id="customDropdown" class="custom-dropdown">
                                <div id="dropdownSelected" class="dropdown-selected">-- Select SO Number --</div>
                                <div id="dropdownList" class="dropdown-list" style="display:none;">
                                    <input type="text" id="dropdownSearch" class="form-control mb-2"
                                        placeholder="Search SO Number...">
                                    <div id="dropdownOptions" class="dropdown-options"
                                        style="max-height:200px;overflow-y:auto;">
                                        @foreach($so_numbers as $row)
                                            @php
                                                $picId = is_object($row) ? ($row->pic_id ?? $row->so_no ?? $row) : $row;
                                                $soList = is_object($row) ? ($row->so_list ?? '') : '';
                                                $label = $soList ?: $picId; // Show only SO numbers
                                            @endphp
                                            <div class="dropdown-option" data-value="{{ $picId }}">{{ $label }}</div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="so_no" name="so_no" value="">
                        </div>
                    </div>

                    <div id="shipmentDetailsContainer" style="display: none;">
                        <div class="alert alert-info">
                            <h6>Shipment Details</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Total Boxes:</strong> <span id="totalBoxes">0</span></p>
                                    <p><strong>Total Weight:</strong> <span id="totalWeight">0</span> kg</p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Dimensions:</strong> <span id="boxDimensions">-</span></p>
                                </div>
                            </div>
                            <div id="individualBoxes" class="mt-3">
                                <h6>Individual Box Details</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Box</th>
                                                <th>Weight (kg)</th>
                                                <th>Dimensions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="boxesTable"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12 text-center">
                            @if(isset($pageMode) && $pageMode === 'converted-freight')
                                <button type="button" class="btn btn-success" id="redirectFreightButton" disabled>
                                    Offline Pending
                                </button>
                                <button type="button" class="btn btn-primary ms-2" id="redirectFreightOnlineButton" disabled>
                                    Online Booking
                                </button>
                            @else
                                <button type="button" class="btn btn-success" id="redirectFreightButton" disabled>
                                    Calculate Freight
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(isset($pageMode) && $pageMode === 'converted-freight')
            <div class="col-md-12 mt-4">
                <div class="card">
                    <div class="card-header">
                        Booking Pending
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered" id="bookingPendingTable">
                                <thead>
                                    <tr>
                                        <th>PIC ID</th>
                                        <th>SO Numbers</th>
                                        <th>Customer</th>
                                        <th>Picking Status</th>
                                        <th>Picking Date</th>
                                        <th>Packing Status</th>
                                        <th>Packing Date</th>
                                        <th>Booking Status</th>
                                        <th>Booking Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($bookingPending as $row)
                                        @php
                                            $soList = '';
                                            if (!empty($row->so_numbers)) {
                                                $decoded = json_decode($row->so_numbers, true);
                                                if (is_array($decoded)) {
                                                    $soList = implode(', ', $decoded);
                                                } else {
                                                    $soList = (string) $row->so_numbers;
                                                }
                                            }

                                            $formatDate = function ($value) {
                                                if (empty($value)) {
                                                    return '';
                                                }
                                                try {
                                                    return \Carbon\Carbon::parse($value)->format('Y-m-d');
                                                } catch (\Exception $e) {
                                                    return $value;
                                                }
                                            };
                                        @endphp
                                        <tr>
                                            <td>{{ $row->pic_id }}</td>
                                            <td>{{ $soList }}</td>
                                            <td>{{ $row->customer_name ?? '' }}</td>
                                            <td>{{ $row->picking_status }}</td>
                                            <td>{{ $formatDate($row->picking_date_complete ?? null) }}</td>
                                            <td>{{ $row->packing_status }}</td>
                                            <td>{{ $formatDate($row->packing_date_complete ?? null) }}</td>
                                            <td>{{ $row->booking_status }}</td>
                                            <td>{{ $formatDate($row->booking_date_complete ?? null) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center">No pending bookings found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @else
            {{-- Booking Completed table temporarily disabled
            <div class="col-md-12 mt-4">
                <div class="card">
                    <div class="card-header">
                        Booking Completed
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead>
                                    <tr>
                                        <th>PIC ID</th>
                                        <th>SO Numbers</th>
                                        <th>Picking Status</th>
                                        <th>Picking Date</th>
                                        <th>Packing Status</th>
                                        <th>Packing Date</th>
                                        <th>Booking Status</th>
                                        <th>Booking Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($bookingCompleted as $row)
                                        @php
                                            $soList = '';
                                            if (!empty($row->so_numbers)) {
                                                $decoded = json_decode($row->so_numbers, true);
                                                if (is_array($decoded)) {
                                                    $soList = implode(', ', $decoded);
                                                } else {
                                                    $soList = (string) $row->so_numbers;
                                                }
                                            }

                                            $formatDate = function ($value) {
                                                if (empty($value)) {
                                                    return '';
                                                }
                                                try {
                                                    return \Carbon\Carbon::parse($value)->format('Y-m-d');
                                                } catch (\Exception $e) {
                                                    return $value;
                                                }
                                            };
                                        @endphp
                                        <tr>
                                            <td>{{ $row->pic_id }}</td>
                                            <td>{{ $soList }}</td>
                                            <td>{{ $row->picking_status }}</td>
                                            <td>{{ $formatDate($row->picking_date_complete ?? null) }}</td>
                                            <td>{{ $row->packing_status }}</td>
                                            <td>{{ $formatDate($row->packing_date_complete ?? null) }}</td>
                                            <td>{{ $row->booking_status }}</td>
                                            <td>{{ $formatDate($row->booking_date_complete ?? null) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center">No completed bookings found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            --}}
        @endif
    </div>

    @if(isset($pageMode) && $pageMode === 'converted-freight')
        <div class="modal fade" id="freightBookingModal" tabindex="-1" aria-labelledby="freightBookingModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="freightBookingModalLabel">Booking Pending Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="freightBookingForm">
                            <input type="hidden" name="pic_id" id="booking_pic_id" value="">
                            <div class="mb-3">
                                <label for="transporter_name" class="form-label">Transporter Name</label>
                                <input type="text" class="form-control" name="transporter_name" id="transporter_name">
                            </div>
                            <div class="mb-3">
                                <label for="destination_branch" class="form-label">Destination Branch</label>
                                <input type="text" class="form-control" name="destination_branch" id="destination_branch">
                            </div>
                            <div class="mb-3">
                                <label for="remarks" class="form-label">Remarks</label>
                                <textarea class="form-control" name="remarks" id="remarks" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="dispatch_date" class="form-label">Dispatch Date</label>
                                <input type="date" class="form-control" name="dispatch_date" id="dispatch_date">
                            </div>
                        </form>
                        <div id="freightBookingAlert" class="alert" style="display:none;"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveFreightBookingButton">Save</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .custom-dropdown {
            position: relative;
            width: 100%;
        }

        .dropdown-selected {
            border: 1px solid #ced4da;
            padding: 8px 12px;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
        }

        .dropdown-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #ced4da;
            border-top: none;
            z-index: 2000;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .dropdown-option {
            padding: 8px 12px;
            cursor: pointer;
        }

        .dropdown-option:hover,
        .dropdown-option.active {
            background: #f1f1f1;
        }

        #bookingPendingTable thead th {
            cursor: pointer;
            user-select: none;
        }
    </style>
    <script>
        $(document).ready(function () {
            var pageMode = @json($pageMode ?? 'calculator');
            let shipmentData = { totalWeight: 0, dimensions: '', boxes: [] };
            var $dropdown = $('#customDropdown');
            var $selected = $('#dropdownSelected');
            var $list = $('#dropdownList');
            var $search = $('#dropdownSearch');
            var $options = $('#dropdownOptions');
            var $hiddenInput = $('#so_no');

            $selected.on('click', function (e) {
                e.stopPropagation();
                $list.toggle();
                $search.val('');
                $options.children().show();
                $search.focus();
            });

            $search.on('keyup', function () {
                var filter = $(this).val().toUpperCase();
                $options.children('.dropdown-option').each(function () {
                    if ($(this).text().toUpperCase().indexOf(filter) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });

            $options.on('click', '.dropdown-option', function (e) {
                e.stopPropagation();
                var value = $(this).data('value');
                var text = $(this).text();
                $selected.text(text);
                $hiddenInput.val(value).trigger('change');
                $list.hide();
            });

            // Prevent clicks inside the dropdown from closing it
            $list.on('click', function (e) { e.stopPropagation(); });

            // Close dropdown if clicking outside
            $(document).on('click', function (e) {
                if (!$dropdown.is(e.target) && $dropdown.has(e.target).length === 0) {
                    $list.hide();
                }
            });

            $hiddenInput.on('change', function () {
                const soNo = $(this).val();
                if (!soNo) {
                    $('#redirectFreightButton').prop('disabled', true);
                    $('#redirectFreightOnlineButton').prop('disabled', true);
                    $('#shipmentDetailsContainer').hide();
                    return;
                }
                $.ajax({
                    url: "{{ route('location.freight.getBoxDetails') }}",
                    method: 'GET',
                    data: { 'so_no': soNo },
                    success: function (response) {
                        if (response.success) {
                            shipmentData.totalWeight = response.totalWeight;
                            shipmentData.dimensions = response.dimensions;
                            shipmentData.boxes = response.boxes;
                            $('#totalBoxes').text(response.boxes.length);
                            $('#totalWeight').text(parseFloat(response.totalWeight).toFixed(2));
                            $('#boxDimensions').text(response.dimensions || 'Not specified');
                            const boxesTable = $('#boxesTable');
                            boxesTable.empty();
                            response.boxes.forEach(function (box) {
                                let boxWeight = parseFloat(box.weight) || 0;
                                let row = `<tr><td>${box.box}</td><td>${boxWeight.toFixed(2)}</td><td>${box.dimension || 'Not specified'}</td></tr>`;
                                boxesTable.append(row);
                            });
                            $('#shipmentDetailsContainer').show();
                            $('#redirectFreightButton').prop('disabled', false);
                            $('#redirectFreightOnlineButton').prop('disabled', false);
                        } else {
                            alert(response.message);
                            $('#redirectFreightButton').prop('disabled', true);
                            $('#redirectFreightOnlineButton').prop('disabled', true);
                            $('#shipmentDetailsContainer').hide();
                        }
                    },
                    error: function (error) {
                        console.error('Error fetching box details:', error);
                        alert('Failed to fetch box details for this sales order');
                        $('#redirectFreightButton').prop('disabled', true);
                        $('#redirectFreightOnlineButton').prop('disabled', true);
                        $('#shipmentDetailsContainer').hide();
                    }
                });
            });

            (function () {
                var params = new URLSearchParams(window.location.search || '');
                var initialSo = params.get('so_no');
                if (!initialSo) {
                    return;
                }

                var matchedOption = null;
                $options.children('.dropdown-option').each(function () {
                    var value = String($(this).data('value') || '').trim();
                    var text = ($(this).text() || '').trim();
                    if (value === initialSo || text.indexOf(initialSo) !== -1) {
                        matchedOption = $(this);
                        return false;
                    }
                });

                if (!matchedOption) {
                    return;
                }

                var selectedValue = matchedOption.data('value');
                var selectedText = matchedOption.text();
                $selected.text(selectedText);
                $hiddenInput.val(selectedValue).trigger('change');
            })();

            $('#redirectFreightButton').on('click', function () {
                if (shipmentData.boxes.length === 0) {
                    alert('No box details available for this sales order');
                    return;
                }

                if (pageMode === 'converted-freight') {
                    var picId = $hiddenInput.val();
                    if (!picId) {
                        alert('Please select SO / PIC ID first');
                        return;
                    }
                    $('#booking_pic_id').val(picId);
                    $('#freightBookingAlert').hide().removeClass('alert-success alert-danger').text('');
                    var modalEl = document.getElementById('freightBookingModal');
                    var modal = new bootstrap.Modal(modalEl);
                    modal.show();
                    return;
                }

                // Calculator / online mode
                try {
                    sessionStorage.setItem('so_no', $hiddenInput.val() || '');
                }
                catch (e) {
                }

                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/freight-redirect.php';

                const soInput = document.createElement('input');
                soInput.type = 'hidden';
                soInput.name = 'so_no';
                soInput.value = $hiddenInput.val();
                form.appendChild(soInput);

                const boxesInput = document.createElement('input');
                boxesInput.type = 'hidden';
                boxesInput.name = 'boxes';
                boxesInput.value = encodeURIComponent(JSON.stringify(shipmentData.boxes));
                form.appendChild(boxesInput);

                const locationIdInput = document.createElement('input');
                locationIdInput.type = 'hidden';
                locationIdInput.name = 'location_id';
                locationIdInput.value = document.getElementById('location_id').value;
                form.appendChild(locationIdInput);

                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                form.appendChild(csrfInput);

                document.body.appendChild(form);
                form.submit();
            });

            // In converted-freight mode, Online Booking button should trigger the same
            // calculate-freight redirect as calculator mode.
            if (pageMode === 'converted-freight') {
                $('#redirectFreightOnlineButton').on('click', function () {
                    if (shipmentData.boxes.length === 0) {
                        alert('No box details available for this sales order');
                        return;
                    }

                    try {
                        sessionStorage.setItem('so_no', $hiddenInput.val() || '');
                    }
                    catch (e) {
                    }

                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '/freight-redirect.php';

                    const soInput = document.createElement('input');
                    soInput.type = 'hidden';
                    soInput.name = 'so_no';
                    soInput.value = $hiddenInput.val();
                    form.appendChild(soInput);

                    const boxesInput = document.createElement('input');
                    boxesInput.type = 'hidden';
                    boxesInput.name = 'boxes';
                    boxesInput.value = encodeURIComponent(JSON.stringify(shipmentData.boxes));
                    form.appendChild(boxesInput);

                    const locationIdInput = document.createElement('input');
                    locationIdInput.type = 'hidden';
                    locationIdInput.name = 'location_id';
                    locationIdInput.value = document.getElementById('location_id').value;
                    form.appendChild(locationIdInput);

                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                    form.appendChild(csrfInput);

                    document.body.appendChild(form);
                    form.submit();
                });
            }

            if (pageMode === 'converted-freight') {
                (function () {
                    var table = document.getElementById('bookingPendingTable');
                    if (!table || !table.tHead || !table.tBodies || !table.tBodies[0]) {
                        return;
                    }

                    var tbody = table.tBodies[0];
                    var headers = table.tHead.querySelectorAll('th');
                    if (!headers || headers.length === 0) {
                        return;
                    }

                    var state = { index: -1, asc: true };

                    var getText = function (row, idx) {
                        var cell = row.cells && row.cells[idx] ? row.cells[idx] : null;
                        var text = cell ? (cell.textContent || '') : '';
                        return String(text).trim();
                    };

                    var parseVal = function (text) {
                        var v = String(text || '').trim();
                        if (v === '') {
                            return { type: 'empty', value: '' };
                        }
                        if (/^\d{4}-\d{2}-\d{2}$/.test(v)) {
                            var t = Date.parse(v + 'T00:00:00');
                            return { type: 'date', value: isNaN(t) ? v : t };
                        }
                        if (/^-?\d+(\.\d+)?$/.test(v)) {
                            return { type: 'number', value: Number(v) };
                        }
                        return { type: 'string', value: v.toLowerCase() };
                    };

                    var cmp = function (a, b) {
                        if (a.type === 'empty' && b.type === 'empty') return 0;
                        if (a.type === 'empty') return 1;
                        if (b.type === 'empty') return -1;
                        if (a.type === b.type) {
                            if (a.value < b.value) return -1;
                            if (a.value > b.value) return 1;
                            return 0;
                        }
                        var prio = { number: 0, date: 1, string: 2, empty: 3 };
                        return (prio[a.type] ?? 9) - (prio[b.type] ?? 9);
                    };

                    Array.prototype.forEach.call(headers, function (th, idx) {
                        th.addEventListener('click', function () {
                            var asc = state.index === idx ? !state.asc : true;
                            state.index = idx;
                            state.asc = asc;

                            var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));
                            rows = rows.filter(function (tr) {
                                return tr.cells && tr.cells.length === headers.length;
                            });

                            rows.sort(function (r1, r2) {
                                var v1 = parseVal(getText(r1, idx));
                                var v2 = parseVal(getText(r2, idx));
                                var c = cmp(v1, v2);
                                return asc ? c : -c;
                            });

                            rows.forEach(function (r) {
                                tbody.appendChild(r);
                            });
                        });
                    });
                })();
            }

            @if(isset($pageMode) && $pageMode === 'converted-freight')
            $('#saveFreightBookingButton').on('click', function () {
                var formData = {
                    pic_id: $('#booking_pic_id').val(),
                    transporter_name: $('#transporter_name').val(),
                    destination_branch: $('#destination_branch').val(),
                    remarks: $('#remarks').val(),
                    dispatch_date: $('#dispatch_date').val(),
                    // Shipment data
                    boxes: JSON.stringify(shipmentData.boxes),
                    total_weight: shipmentData.totalWeight,
                    dimensions: shipmentData.dimensions
                };

                if (!formData.transporter_name || !formData.destination_branch || !formData.dispatch_date) {
                    $('#freightBookingAlert').show().addClass('alert-danger').removeClass('alert-success').text('Please fill all required fields.');
                    return;
                }

                $.ajax({
                    url: "{{ route('location.freight.booking.store') }}",
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            $('#freightBookingAlert').show().addClass('alert-success').removeClass('alert-danger').text(response.message || 'Saved successfully');
                            setTimeout(function () {
                                var modalEl = document.getElementById('freightBookingModal');
                                var modal = bootstrap.Modal.getInstance(modalEl);
                                if (modal) {
                                    modal.hide();
                                }
                                window.location.reload();
                            }, 1000);
                        } else {
                            $('#freightBookingAlert').show().addClass('alert-danger').removeClass('alert-success').text(response.message || 'Failed to save booking');
                        }
                    },
                    error: function () {
                        $('#freightBookingAlert').show().addClass('alert-danger').removeClass('alert-success').text('Failed to save booking');
                    }
                });
            });
            @endif
        });
    </script>
@endpush