@extends('layouts.location')

@section('title', 'Packed Sales Order')
@section('page-title', 'Packed Sales Order')



<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;
    }
</style>

@section('content')
    {{-- Original PIC ID selection UI is kept here for reference but disabled. --}}
    {{--------------
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    Print Packlist
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('location.packlist.generate') }}" id="packlistForm">
                        @csrf
                        <!-- Old PIC ID dropdown and box selection UI -->
                    </form>
                </div>
            </div>
        </div>
    </div>
    --------------}}

    <div class="row">
        <div class="col-md-12">
            <div class="card mt-4">
                <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-print"></i> Packed Sales Order</h5>

                    @if(isset($packings) && $packings->count() > 0)

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label for="statusFilter" class="form-label">Status</label>
                                <select id="statusFilter" class="form-select mb-2">
                                    <option value="pending" selected>Pending Sales Order</option>
                                    <option value="short">Short Sales order</option>
                                    <option value="all">All Sales Order</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="soFilter" class="form-label">Filter by Sales Order</label>
                                <select id="soFilter" class="form-select mb-2">
                                    @if(isset($soNumbers))
                                        @foreach($soNumbers as $so)
                                            <option value="{{ $so }}">{{ $so }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label for="soSearch" class="form-label">Search (SO / Box)</label>
                                <input type="text" id="soSearch" class="form-control" placeholder="Type to search...">
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" id="packlistTable">
                                <thead class="table-dark">
                                    <tr>
                                        <th>SO No</th>
                                        <th>Customer Name</th>
                                        <th>Box</th>
                                        <th>Weight (Kgs)</th>
                                        <th>Remark</th>
                                        <th>Transporter for Zoho</th>
                                        <th>Packing Complete Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($packings as $row)
                                        @php
                                            // --- Total box count ---
                                            $boxRaw = $row->box;
                                            $boxCount = 0;

                                            // Normalize to a single string
                                            if (is_array($boxRaw)) {
                                                $boxString = implode(',', array_map('strval', $boxRaw));
                                            } else {
                                                $boxString = (string) $boxRaw;
                                            }

                                            $boxString = trim($boxString);

                                            if ($boxString !== '') {
                                                // Try JSON first
                                                $decodedBox = json_decode($boxString, true);
                                                if (json_last_error() === JSON_ERROR_NONE && is_array($decodedBox)) {
                                                    $filtered = array_filter($decodedBox, function ($v) {
                                                        return $v !== null && $v !== '';
                                                    });
                                                    $boxCount = count($filtered);
                                                }

                                                if ($boxCount === 0) {
                                                    // Fallback: treat bracketed / comma-separated string as list
                                                    $tmp = trim($boxString, "[]\"'");
                                                    if ($tmp !== '') {
                                                        $parts = array_filter(array_map('trim', explode(',', $tmp)), function ($v) {
                                                            return $v !== '';
                                                        });
                                                        $boxCount = count($parts) > 0 ? count($parts) : 1;
                                                    } else {
                                                        $boxCount = 1;
                                                    }
                                                }
                                            }

                                            // --- Total weight ---
                                            $weightRaw = $row->weight;
                                            $totalWeight = 0;

                                            // Normalize to a single string
                                            if (is_array($weightRaw)) {
                                                $weightString = implode(',', array_map('strval', $weightRaw));
                                            } else {
                                                $weightString = (string) $weightRaw;
                                            }

                                            $weightString = trim($weightString);

                                            if ($weightString !== '') {
                                                // Try JSON first
                                                $decodedW = json_decode($weightString, true);
                                                if (json_last_error() === JSON_ERROR_NONE && is_array($decodedW)) {
                                                    foreach ($decodedW as $w) {
                                                        if ($w !== null && $w !== '') {
                                                            $totalWeight += (float) $w;
                                                        }
                                                    }
                                                }

                                                if ($totalWeight == 0) {
                                                    // Fallback: extract all numeric values and sum them
                                                    $matches = [];
                                                    preg_match_all('/-?\d+(?:\.\d+)?/', $weightString, $matches);
                                                    if (!empty($matches[0])) {
                                                        foreach ($matches[0] as $num) {
                                                            $totalWeight += (float) $num;
                                                        }
                                                    } else {
                                                        $totalWeight = (float) $weightString;
                                                    }
                                                }
                                            }

                                            // Determine row status based on completion and force-completion lists
                                            $isShort = !empty($shortSoNumbers ?? []) && in_array($row->so_no, $shortSoNumbers, true);
                                            $isCompleted = !empty($completedSoNumbers ?? []) && in_array($row->so_no, $completedSoNumbers, true);

                                            if ($isShort) {
                                                $rowStatus = 'short';
                                            } elseif ($isCompleted) {
                                                $rowStatus = 'completed';
                                            } else {
                                                $rowStatus = 'pending';
                                            }
                                        @endphp
                                        <tr data-status="{{ $rowStatus }}">
                                            <td>{{ $row->so_no }}</td>
                                            <td>{{ $customerNamesBySo[$row->so_no] ?? '-' }}</td>
                                            <td>{{ $boxCount > 0 ? $boxCount : '-' }}</td>
                                            <td>{{ $totalWeight > 0 ? $totalWeight : '-' }}</td>
                                            <td>{{ $remarksBySo[$row->so_no] ?? '-' }}</td>
                                            <td>{{ $transporterBySo[$row->so_no] ?? '-' }}</td>
                                            <td
                                                @php
                                                    $packingDateRaw = $packingDateBySo[$row->so_no] ?? null;
                                                @endphp
                                                @if($packingDateRaw)
                                                    data-sort="{{ $packingDateRaw }}"
                                                @endif
                                            >
                                                @if($packingDateRaw)
                                                    {{ \Carbon\Carbon::parse($packingDateRaw)->format('Y-m-d H:i:s') }}
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <a href="{{ route('location.packlist.print', ['so_no' => $row->so_no, 'box' => 'all']) }}"
                                                   target="_blank" class="btn btn-sm btn-outline-primary mb-1">
                                                    <i class="fas fa-print"></i> Print Packlist
                                                </a>

                                                <a href="{{ route('location.freight.calculator', ['so_no' => $row->so_no]) }}"
                                                   class="btn btn-sm btn-outline-success mb-1">
                                                    <i class="fas fa-truck"></i> Calculate Freight
                                                </a>

                                                <button type="button" class="btn btn-sm btn-warning mb-1 convert-so-btn"
                                                   data-so-no="{{ $row->so_no }}" data-bs-toggle="modal" data-bs-target="#soConversionModal">
                                                    <i class="fas fa-exchange-alt"></i> Convert SO
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i> No packlist data available.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Freight Calculation Modal --}}
    <div class="modal fade" id="freightCalculationModal" tabindex="-1" aria-labelledby="freightCalculationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="freightCalculationModalLabel">Freight Cost Calculation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="freightLoadingSpinner" class="text-center">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2">Calculating freight costs...</p>
                    </div>
                    <div id="freightResults" style="display:none;">
                        <div class="alert alert-info mb-3">
                            <h6>Shipment Details</h6>
                            <div id="shipmentDetails"></div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Carrier</th>
                                        <th>Service</th>
                                        <th>Rate (₹)</th>
                                        <th>Est. Delivery</th>
                                    </tr>
                                </thead>
                                <tbody id="freightRatesTable"></tbody>
                            </table>
                        </div>
                    </div>
                    <div id="freightError" class="alert alert-danger" style="display:none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Edit Packlist Modal --}}
    <div class="modal fade" id="editPacklistModal" tabindex="-1" aria-labelledby="editPacklistModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPacklistModalLabel">Edit Packlist</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="editPacklistLoading" class="text-center" style="display:none;">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2">Loading packlist...</p>
                    </div>
                    <div id="editPacklistTableContainer" style="display:none;">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="editPacklistTable">
                                <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th>Quantity</th>
                                        <th>Weight (Kgs)</th>
                                        <th>Dimension</th>
                                        <th>Box</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <div id="editPacklistError" class="alert alert-danger" style="display:none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- SO Conversion Modal --}}
    <div class="modal fade" id="soConversionModal" tabindex="-1" aria-labelledby="soConversionModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="soConversionModalLabel">Convert SO <span id="conversionSoSpan"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="soConversionForm">
                        <input type="hidden" id="conversionSoNo" name="so_no" value="">
                        <div class="mb-3">
                            <label class="form-label">Charge Type</label>
                            <select name="extra_charge_type" id="conversionChargeType" class="form-select" required>
                                <option value="">Select a charge</option>
                                <option value="shipping">Shipping Charge</option>
                                <option value="no_charge">No Charge</option>
                                <option value="handling">Handling Charge</option>
                                <option value="insurance">Insurance</option>
                                <option value="surcharge">Other Surcharge</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Remark</label>
                            <textarea name="extra_charge_remark" id="conversionChargeRemark" class="form-control" rows="3" placeholder="Enter any remarks..."></textarea>
                        </div>
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection





<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        let $dropdown = $('#customDropdown');
        let $selected = $('#dropdownSelected');
        let $list = $('#dropdownList');
        let $search = $('#dropdownSearch');
        let $options = $('#dropdownOptions');
        let $hiddenInput = $('#so_no');

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

        // Search filter
        $search.on('keyup', function () {
            let filter = $(this).val().toUpperCase();
            $options.children('.dropdown-option').each(function () {
                $(this).toggle($(this).text().toUpperCase().indexOf(filter) > -1);
            });
        });

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

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

        // Load boxes when SO changes
        $hiddenInput.on('change', function () {
            // alert('Loading boxes for SO:' + $(this).val())
            let soNo = $(this).val();
            let boxSelect = $('#box');
            boxSelect.html('<option value="all">-- All Boxes --</option>');
            $('#boxDimension, #boxWeight').text('-');

            if (!soNo) {
                $('#boxDetailsContainer').hide();
                $('#generateButton, #editPacklistButton').prop('disabled', true);
                return;
            }

            $('#generateButton, #editPacklistButton').prop('disabled', false);

            $.get("{{ route('location.packlist.boxes') }}", { so_no: soNo }, function (response) {
                console.log("Box Response:", response);
                if (response.length > 0) {
                    response.forEach(item => {
                        boxSelect.append(
                            $('<option></option>')
                                .val(item.box)
                                .text(item.box)
                                .data('dimension', item.dimension)
                                .data('weight', item.weight)
                        );
                    });
                    $('#boxDetailsContainer').show();
                    $('#box').trigger('change');
                } else {
                    console.warn("No boxes found for SO:", soNo);
                    $('#boxDetailsContainer').hide();
                }
            }).fail(function () {
                $('#boxDetailsContainer').hide();
            });
        });

        // Update box details
        $('#box').on('change', function () {
            let selected = $(this).find('option:selected');
            if (selected.val() !== 'all') {
                $('#boxDimension').text(selected.data('dimension') || 'Not specified');
                $('#boxWeight').text(selected.data('weight') || 'Not specified');
            } else {
                $('#boxDimension').text('Multiple dimensions');
                $('#boxWeight').text('Multiple weights');
            }
        });

        // Print packlist
        $('#generateButton').on('click', function () {
            let soNo = $hiddenInput.val();
            let boxVal = $('#box').val();
            if (!soNo) {
                alert('Please select a PIC ID.');
                return;
            }
            if (boxVal === 'all') {

                window.open("{{ url('location-user/packlist/print') }}/" + soNo + "/all", '_blank');

            } else {
                $('#packlistForm').submit();
            }
        });

        // Edit packlist
        $('#editPacklistButton').on('click', function () {
            let soNo = $hiddenInput.val();
            if (!soNo) {
                alert('Please select a PIC ID to edit.');
                return;
            }
            $('#editPacklistModal').modal('show');
            $('#editPacklistTable tbody').empty();
            $('#editPacklistLoading').show();
            $('#editPacklistTableContainer, #editPacklistError').hide();

            let itemsUrl = "{{ url('location-user/packlist/items') }}";

            $.get(itemsUrl + '/' + soNo, function (data) {
                $('#editPacklistLoading').hide();
                if (data.length > 0) {
                    data.forEach(function (item, index) {
                        $('#editPacklistTable tbody').append(
                            `<tr data-id="${item.id}" data-item-index="${index}">
                            <td>${item.item_name}</td>
                            <td><input type="number" class="form-control edit-qty" value="${item.quantity}" /></td>
                            <td><input type="text" class="form-control edit-weight" value="${item.weight}" /></td>
                            <td><input type="text" class="form-control edit-dimension" value="${item.dimension}" /></td>
                            <td>${item.box}</td>
                            <td>
                                <button class="btn btn-sm btn-success save-row">Save</button>
                                <button class="btn btn-sm btn-danger delete-row">Delete</button>
                            </td>
                        </tr>`
                        );
                    });
                    $('#editPacklistTableContainer').show();
                } else {
                    $('#editPacklistError').text('No packlist items found.').show();
                }
            }).fail(function () {
                $('#editPacklistLoading').hide();
                $('#editPacklistError').text('Failed to load packlist items.').show();
            });
        });

        // Save item
        $('#editPacklistTable').on('click', '.save-row', function () {
            let $tr = $(this).closest('tr');
            let id = $tr.data('id');
            let itemIndex = $tr.data('item-index');

            let updateUrl = "{{ url('location-user/packlist/update') }}";

            $.ajax({
                url: updateUrl + "/" + id + "/" + itemIndex,
                method: 'PUT',
                data: {
                    quantity: $tr.find('.edit-qty').val(),
                    weight: $tr.find('.edit-weight').val(),
                    dimension: $tr.find('.edit-dimension').val(),
                    _token: '{{ csrf_token() }}'
                }
            }).done(() => alert('Item updated successfully!'))
                .fail(() => alert('Failed to update item.'));


        });

        // Delete item
        $('#editPacklistTable').on('click', '.delete-row', function () {
            if (!confirm('Are you sure you want to delete this item?')) return;
            let $tr = $(this).closest('tr');
            let packingId = $tr.data('id');
            let itemIndex = $tr.data('item-index');

            let deleteUrl = "{{ route('location.packlist.delete', [':packing_id', ':item_index']) }}";
            deleteUrl = deleteUrl
                .replace(':packing_id', packingId)
                .replace(':item_index', itemIndex);

            $.ajax({
                url: deleteUrl,
                method: 'DELETE',
                data: { _token: '{{ csrf_token() }}' }
            }).done(() => {
                $tr.remove();
                alert('Item deleted successfully!');
            }).fail(() => alert('Failed to delete item.'));



        });
    });

    // SO dropdown and text search filter for the packlist table
    $(function () {
        function rebuildSoOptionsByStatus() {
            var selectedStatus = ($('#statusFilter').val() || 'pending').toLowerCase();
            var $rows = $('#packlistTable tbody tr');
            var uniqueSo = {};

            $rows.each(function () {
                var $tr = $(this);
                var rowStatus = ($tr.data('status') || '').toString().toLowerCase();
                var soNo = ($tr.find('td').eq(0).text() || '').trim();

                if (!soNo) {
                    return;
                }

                if (selectedStatus === 'pending') {
                    if (!(rowStatus === 'pending' || rowStatus === '')) {
                        return;
                    }
                } else if (selectedStatus === 'short') {
                    if (rowStatus !== 'short') {
                        return;
                    }
                }

                uniqueSo[soNo] = true;
            });

            var $soFilter = $('#soFilter');
            var currentValue = $soFilter.val();
            $soFilter.empty();

            var placeholderLabel = (selectedStatus === 'pending')
                ? 'All Pending Sales Orders'
                : 'All Sales Orders';

            $soFilter.append('<option value="">' + placeholderLabel + '</option>');

            Object.keys(uniqueSo).sort().forEach(function (so) {
                var selected = (so === currentValue) ? ' selected' : '';
                $soFilter.append('<option value="' + so + '"' + selected + '>' + so + '</option>');
            });
        }

        function applyFilters() {
            var selectedSo = $('#soFilter').val();
            var searchText = ($('#soSearch').val() || '').toLowerCase();
            var selectedStatus = ($('#statusFilter').val() || 'pending');
            var $rows = $('#packlistTable tbody tr');

            $rows.each(function () {
                var $tr = $(this);
                var soNo = ($tr.find('td').eq(0).text() || '').toLowerCase();
                var box = ($tr.find('td').eq(1).text() || '').toLowerCase();
                var rowStatus = ($tr.data('status') || '').toString().toLowerCase();

                var matchesSo = true;
                if (selectedSo) {
                    matchesSo = (soNo === selectedSo.toLowerCase());
                }

                var matchesSearch = true;
                if (searchText) {
                    matchesSearch = soNo.indexOf(searchText) !== -1 || box.indexOf(searchText) !== -1;
                }

                var matchesStatus = true;
                if (selectedStatus === 'pending') {
                    matchesStatus = (rowStatus === 'pending' || rowStatus === '');
                } else if (selectedStatus === 'short') {
                    matchesStatus = (rowStatus === 'short');
                }

                if (matchesSo && matchesSearch && matchesStatus) {
                    $tr.show();
                } else {
                    $tr.hide();
                }
            });
        }

        $('#soFilter').on('change', applyFilters);
        $('#soSearch').on('keyup', applyFilters);
        $('#statusFilter').on('change', function () {
            // Reset SO dropdown to "All Sales Orders" whenever status changes
            $('#soFilter').val('');
            rebuildSoOptionsByStatus();
            applyFilters();
        });

        // Initial build based on default status (Pending)
        rebuildSoOptionsByStatus();
        applyFilters();

        // Click-to-sort for all columns in the packlist table
        var sortDirections = {};

        $('#packlistTable thead th').each(function (index) {
            $(this).css('cursor', 'pointer').on('click', function () {
                var columnIndex = index;
                var $tbody = $('#packlistTable tbody');
                var rows = $tbody.find('tr').get();

                // Toggle sort direction for this column
                sortDirections[columnIndex] = sortDirections[columnIndex] === 'asc' ? 'desc' : 'asc';
                var direction = sortDirections[columnIndex];

                rows.sort(function (a, b) {
                    var $aCell = $(a).children('td').eq(columnIndex);
                    var $bCell = $(b).children('td').eq(columnIndex);

                    // Special handling for Packing Complete Date column (index 6)
                    if (columnIndex === 6) {
                        var aSortVal = $aCell.data('sort') || ($aCell.text() || '').trim();
                        var bSortVal = $bCell.data('sort') || ($bCell.text() || '').trim();

                        var aTime = Date.parse(aSortVal) || 0;
                        var bTime = Date.parse(bSortVal) || 0;

                        var cmpDate = aTime === bTime ? 0 : (aTime < bTime ? -1 : 1);
                        return direction === 'asc' ? cmpDate : -cmpDate;
                    }

                    var aText = ($aCell.text() || '').trim();
                    var bText = ($bCell.text() || '').trim();

                    // Try numeric comparison first
                    var aNum = parseFloat(aText.replace(/[^0-9.\-]/g, ''));
                    var bNum = parseFloat(bText.replace(/[^0-9.\-]/g, ''));
                    var aIsNum = !isNaN(aNum);
                    var bIsNum = !isNaN(bNum);

                    var cmp;
                    if (aIsNum && bIsNum) {
                        cmp = aNum === bNum ? 0 : (aNum < bNum ? -1 : 1);
                    } else {
                        aText = aText.toLowerCase();
                        bText = bText.toLowerCase();
                        if (aText < bText) cmp = -1;
                        else if (aText > bText) cmp = 1;
                        else cmp = 0;
                    }

                    return direction === 'asc' ? cmp : -cmp;
                });

                $.each(rows, function (i, row) {
                    $tbody.append(row);
                });

                // Re-apply filters after sorting to respect current SO / search filters
                applyFilters();
            });
        });
    });

    $(function () {
        $('.convert-so-btn').on('click', function () {
            var soNo = $(this).data('so-no') || '';
            $('#conversionSoSpan').text(soNo);
            $('#conversionSoNo').val(soNo);
            $('#conversionChargeType').val('');
            $('#conversionChargeRemark').val('');
        });

        var packlistLocationId = "{{ session('location_id') ?? '' }}";

        $('#soConversionForm').on('submit', function (e) {
            e.preventDefault();

            var soNo = ($('#conversionSoNo').val() || '').trim();
            var chargeType = ($('#conversionChargeType').val() || '').trim();
            var remark = ($('#conversionChargeRemark').val() || '').trim();

            if (!soNo) {
                alert('SO No missing.');
                return;
            }
            if (!chargeType) {
                alert('Please select a charge type.');
                return;
            }

            var payload = {
                so_no: soNo,
                extra_charge_type: chargeType,
                extra_charge_remark: remark,
                location_id: packlistLocationId
            };

            var $btn = $('#soConversionForm').find('button[type="submit"]');
            var originalHtml = $btn.html();
            $btn.prop('disabled', true).html('Submitting...');

            fetch("{{ route('location.conversion.store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(payload)
            })
                .then(function (resp) {
                    return resp.json().catch(function () { return {}; }).then(function (data) {
                        return { ok: resp.ok, data: data };
                    });
                })
                .then(function (resp) {
                    if (resp.ok && resp.data && resp.data.success) {
                        try {
                            $('#soConversionModal').modal('hide');
                        } catch (e) { }
                        alert('Sent SO for the conversion to admin team.');
                        var targetUrl = soNo
                            ? window.location.origin + '/location-user/conversion?so_no=' + encodeURIComponent(soNo)
                            : window.location.origin + '/location-user/conversion';
                        window.location.assign(targetUrl);
                    } else {
                        var msg = (resp.data && resp.data.message) ? resp.data.message : 'Please try again.';
                        alert('Failed to save charges. ' + msg);
                    }
                })
                .catch(function () {
                    alert('Network error while saving charges.');
                })
                .finally(function () {
                    $btn.prop('disabled', false).html(originalHtml);
                });
        });
    });
</script>