@extends('layouts.master')

@section('title', 'Surat Jalan Information')

@section('css')
    <style>
        .btn-square {
            width: 100px;
        }
        .table th, .table td {
            text-align: left;
            vertical-align: middle;
            padding: 12px;
        }
        .table thead {
            background-color: #f2f2f2;
        }
        .table-responsive {
            margin-top: 20px;
        }
        .table {
            width: 100%;
            binvoice-collapse: collapse;
            table-layout: fixed;
        }
        .table td, .table th {
            word-wrap: break-word;
            overflow: hidden;
            max-width: 150px;
        }
        .table td {
            padding: 10px;
            binvoice-top: 1px solid #ddd;
            binvoice-bottom: 1px solid #ddd;
        }
        .table th {
            background-color: #f8f8f8;
            font-weight: bold;
            binvoice-bottom: 2px solid #ddd;
        }
        .table td, .table th {
            binvoice-left: none;
            binvoice-right: none;
        }
        .table-responsive {
            margin-bottom: 30px;
        }
        .section-title {
            font-weight: bold;
            font-size: 18px;
            margin-top: 20px;
            margin-bottom: 10px;
        }
    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
@endsection

@section('content')
    <x-page-title title="Surat Jalan" pagetitle="Surat Jalan Information" />
    <hr>
    <form id="updateForm" method="POST" action="{{ route('transaction.surat_jalan.store') }}">
        @csrf
    <div class="card">
        <div class="card-body">
            <h6 class="mb-4 text-uppercase">Surat Jalan Information</h6>
            <!-- Search Filters -->
            <div class="row mb-4">
                <div class="form-group">
                    <label for="sales_invoice_number">{{__('Sales Invoice Number')}}</label>
                    <select id="search_input" name="sales_invoice_number" class="form-select selectSO" >
                        <option value=""></option>
                        @foreach ($salesInvoices as $salesInvoice)
                            <option value="{{ $salesInvoice->sales_invoice_number }}">
                                {{ $salesInvoice->sales_invoice_number }} - {{$salesInvoice->customers->customer_name}}
                            </option>
                        @endforeach
                    </select>
                </div>
                <br>
                <div class="form-group mt-2">
                    <label for="document_date">{{__('Document Date')}}</label>
                    <input type="date"  name="document_date" class="form-control" required value="" id="document_date">
                </div>

                <div class="col-md-2 pt-4">
                    <button type="button" class="btn btn-primary" id="btn-search">Cari</button>
                </div>
                <div class="form-group mt-2">
                    <label for="document_date">{{__('Ekspedisi')}}</label>
                    {{-- This field is editable --}}
                    <input type="text" name="ekspedisi" class="form-control"  id="ekspedisi">
                </div>
                <div class="form-group mt-2">
                    <label for="document_date">{{__('Alamat')}}</label>
                    {{-- This field is editable --}}
                    <input type="text" name="alamat" class="form-control"  id="alamat">
                </div>
                <div class="form-group mt-2">
                    <label for="document_date">Unit</label>
                    <select name="unit_name" id="unit_name" class="form-control">
                        <option value="KOLI">KOLI</option>
                        <option value="IKAT">IKAT</option>
                    </select>
                </div>
            </div>

            <div class="form-group mt-2">
                <label>No Telp</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="phone_number" id="phone_number_yes" value="1">
                    <label class="form-check-label" for="phone_number_yes">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="phone_number" id="phone_number_no" value="0" checked>
                    <label class="form-check-label" for="phone_number_no">No</label>
                </div>
            </div>

            <div class="form-group mt-2">
                <label>Alias</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="alias" id="alias_yes" value="1">
                    <label class="form-check-label" for="alias_yes">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="alias" id="alias_no" value="0" checked>
                    <label class="form-check-label" for="alias_no">No</label>
                </div>
            </div>

            <div id="alias_fields" style="display: none;">
                <div class="form-group mt-2">
                    <label for="alias_name">Nama Alias</label>
                    <input type="text" name="alias_name" class="form-control" id="alias_name" disabled>
                </div>
                <div class="form-group mt-2">
                    <label for="alias_city">Kota Alias</label>
                    <input type="text" name="alias_city" class="form-control" id="alias_city" disabled>
                </div>
            </div>


            <!-- Receivable Table -->
            <div class="section-title">Details</div>
            <div class="table-responsive">
                <table id="detailTable" class="table table-hover mt-3">
                    <thead>
                        <tr>
                            <th>{{__('Item Name')}}</th>
                            <th>{{__('Qty')}}</th>
                            <th>Notes</th>
                            <th style="max-width:50px;">Action</th>
                        </tr>
                    </thead>
                    <tbody id="detail-table-body">
                        <!-- Data will be inserted here dynamically -->
                    </tbody>
                </table>
                 <button type="button" class="btn btn-success mt-3" id="add-row-btn">
                    Add Row
                </button>
            </div>

            <div class="row mb-4">
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary btn-square" id="btn-submit">Submit</button>
                </div>
            </div>
        </div>
    </div>
    </form>
@endsection

@section('scripts')
<script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.bootstrap5.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>

<script>
    $(document).ready(function() {
        const urlParams = new URLSearchParams(window.location.search);
        const salesInvoiceNumberParam = urlParams.get('sales_invoice_number');
        let rowCount = 0;

        @if(session('success'))
            Swal.fire({
                title: '{{__('Sales Order')}} Created',
                text: 'Do you want to print it?',
                icon: 'success',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
            }).then((result) => {
                if (result.isConfirmed) {
                    var id = "{{ session('id') }}";
                    if (id) {
                        window.location.href = "{{ route('sales_invoice.print.do', ['id' => ':id']) }}".replace(':id', id);
                    }
                }
            });
        @endif

        const selectize = $('#search_input').selectize({
            sortField: 'text',
            placeholder: 'Search for a Sales Order',
        });

        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            }
        });

        const detailTable = $('#detailTable').DataTable({
            paging: false,
            searching: true,
            ordering: false,
            info: true,
            autoWidth: false,
            responsive: true,
        });

        $('#detailTable').parent().hide();

        function addRow(item_name = '', qty = '', notes = '', editable = true) {
            if (item_name === '') {
                item_name = 'Barang Campur';
            }
            const readonlyAttr = editable ? '' : 'readonly';

            const newRow = `
                <tr data-index="${rowCount}">
                    <td><input type="text" class="form-control" name="details[${rowCount}][item_name]" value="${item_name}" required ></td>
                    <td><input type="number" class="form-control" name="details[${rowCount}][qty]" value="1" required ></td>
                    <td>
                        <textarea placeholder="Description" class="form-control" rows="2" cols="50" name="details[${rowCount}][notes]" id="description_${rowCount}">${notes}</textarea>
                    </td>
                    <td style="max-width:50px;">
                        <button type="button" class="btn btn-danger remove-row"><i class="material-icons-outlined">delete</i></button>
                    </td>
                </tr>
            `;

            $('#detail-table-body').append(newRow); // Use append instead of prepend
            rowCount++;
        }

        $('input[name="alias"]').on('change', function() {
            if ($('#alias_yes').is(':checked')) {
                // If 'Yes' is checked, show the fields and enable them
                $('#alias_fields').slideDown();
                $('#alias_name').prop('disabled', false).prop('required', true); // Make required if enabled
                $('#alias_city').prop('disabled', false).prop('required', true); // Make required if enabled
            } else {
                // If 'No' is checked, hide the fields and disable them
                $('#alias_fields').slideUp();
                $('#alias_name').prop('disabled', true).prop('required', false).val(''); // Clear and disable
                $('#alias_city').prop('disabled', true).prop('required', false).val(''); // Clear and disable
            }
        });

        // Initial check on page load to ensure correct state (since 'No' is checked by default)
        // This is optional but good practice to ensure consistency
        if ($('#alias_yes').is(':checked')) {
            $('#alias_fields').show();
            $('#alias_name').prop('disabled', false).prop('required', true);
            $('#alias_city').prop('disabled', false).prop('required', true);
        } else {
            $('#alias_fields').hide();
            $('#alias_name').prop('disabled', true).prop('required', false);
            $('#alias_city').prop('disabled', true).prop('required', false);
        }

        $('#add-row-btn').on('click', function() {
            addRow('', '', '', true);
            $('#detailTable').parent().show();
        });

        $(document).on('click', '.remove-row', function() {
            $(this).closest('tr').remove();
            reIndexRows(); // Call re-indexing function
            if ($('#detail-table-body tr').length === 0) {
                $('#detailTable').parent().hide();
            }
        });

        function reIndexRows() {
            // Re-index all rows to ensure sequential order after a deletion
            $('#detail-table-body tr').each(function(index, element) {
                $(element).find('input, textarea').each(function() {
                    const oldName = $(this).attr('name');
                    if (oldName) {
                        const newName = oldName.replace(/details\[\d+\]/, `details[${index}]`);
                        $(this).attr('name', newName);
                    }
                });
            });
            rowCount = $('#detail-table-body tr').length;
        }

        let salesInvoices = @json($salesInvoices);

        $('#btn-search').on('click', function() {
            let searchInput = $('#search_input').find(":selected").val().trim();
            handleSearch(searchInput);
        });

        function handleSearch(searchInput) {
            if (!searchInput) {
                Swal.fire({
                    title: 'Warning!',
                    text: "Harap pilih faktur!",
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
                return;
            }
            let si = salesInvoices.find((e) => e.sales_invoice_number == searchInput);
            if (si) {
                document.getElementById('document_date').value = si.document_date.substring(0, 10);
                const alias = si.alias;
                if(alias){
                    document.getElementById('alias_yes').checked = true;
                    document.getElementById('alias_name').value = si.alias_name;
                    document.getElementById('alias_city').value = si.alias_city;
                    $('#alias_fields').show();
                    $('#alias_name').prop('disabled', false).prop('required', true);
                    $('#alias_city').prop('disabled', false).prop('required', true);
                }
            }

            $.ajax({
                url: '{{ route("transaction.surat_jalan.fetchDetails") }}',
                type: 'POST',
                data: { search: searchInput },
                beforeSend: function() {
                    // $('#detail-table-body').empty();
                    rowCount = 0; // Reset rowCount before adding new data
                    $('#detailTable').parent().show();
                },
                success: function(response) {
                    if (response && response.length > 0) {
                        $.each(response, function(i, detail) {
                            addRow(detail.item_name, detail.qty, '', false);
                        });
                        // reIndexRows() is not needed here as addRow now appends and increments rowCount
                    }
                },
                error: function(error) {
                    console.error("Error:", error);
                    alert('An error occurred while fetching detail data. Please try again.');
                }
            });
        }

        if (salesInvoiceNumberParam) {
            selectize[0].selectize.setValue(salesInvoiceNumberParam);
            handleSearch(salesInvoiceNumberParam);
        }

        $("#updateForm").on("submit", function(e) {
            let hasEmptyItemId = false;
            let isValid = true;
            const rows = document.querySelectorAll('#detail-table-body tr');
            const sales_invoice_number = document.getElementById('search_input').value;

            if (!sales_invoice_number) {
                isValid = false;
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Faktur belum dipilih!',
                });
            }

            rows.forEach(row => {
                const itemIdInput = row.querySelector('input[name$="[item_name]"]');
                if (!itemIdInput.value || itemIdInput.value.trim() === '') {
                    hasEmptyItemId = true;
                }
            });

            if (hasEmptyItemId) {
                isValid = false;
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Ada barang yang belum dipilih!',
                });
            }

            if (!isValid) {
                e.preventDefault();
            }
        });
    });
</script>
@endsection