@php
    use App\Models\Invoice;
@endphp
<div class="box-body px-0 ">
    <table aria-describedby="tbl-invoices-desc" class="table table-bordered table-hover" id="tbl-invoices">
    <thead>
        <th scope="col">Invoice #</th>
        <th scope="col">Transporter</th>
        <th scope="col">Quantity (tons)</th>
        <th scope="col">Amount</th>
        <th scope="col" class="min-width-158">Date & Time</th>
        <th scope="col" class="min-width-158">Payment Date</th>
        <th scope="col">Txn ID</th>
        <th scope="col">Status</th>
        <th scope="col">Action</th>
    </thead>
    <tbody>
        @forelse($job->invoices ?? [] as $invoice)
            <tr>
                <td data-type='text'><a href="#">{{ $invoice->invoice_no ?? null }}</a></td>
                <td data-type='none'>{{ $invoice->transporter->name ?? null }}</td>
                <td data-type='none'>{{ $invoice->quantity ?? null }}</td>
                <td data-type='none'>{{ $invoice->amount ?? null }}</td>
                <td data-type='none'>{{ $invoice->invoice_date ? $invoice->invoice_date->format('d/m/Y, h:i A') : null }}</td>
                <td data-type='none'>{{ $invoice->payment_date ? $invoice->payment_date->format('d/m/Y, h:i A') : null }}</td>
                <td data-type='none' >{{ $invoice->transaction_id ?? null }}</td>
                <td data-type='none'>
                    <span class="{{ $invoice->dynamic_status_class }}">{{ $invoice->dynamic_status }}</span>
                </td>
                <td data-type='none'>
                    @php
                        if($isTransporter) {
                            $url = route('transporter.jobs.invoice.show', ['job' => $job->id, 'invoice' => $invoice->id]);
                        } else {
                            $url = route('admin.jobs.invoice.show', ['job' => $job->id, 'invoice' => $invoice->id]);
                        }
                    @endphp
                    <a href="{{ $url }}" class="me-3" target="_blank">
                        <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                    </a>
                    
                    @if(!$isTransporter && auth()->user()->isAdmin() && !$invoice->isPaid())
                    <a href="javascript:void(0)" class="me-3 mark-invoice-paid" data-invoice-id="{{ $invoice->id }}" data-job-id="{{ $job->id }}" title="Mark as Paid">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: top;">
                            <path d="M11.2503 7.70825H1.66699C1.32533 7.70825 1.04199 7.42492 1.04199 7.08325C1.04199 6.74159 1.32533 6.45825 1.66699 6.45825H11.2503C11.592 6.45825 11.8753 6.74159 11.8753 7.08325C11.8753 7.42492 11.592 7.70825 11.2503 7.70825Z" fill="#292D32"/>
                            <path d="M6.66667 14.375H5C4.65833 14.375 4.375 14.0917 4.375 13.75C4.375 13.4083 4.65833 13.125 5 13.125H6.66667C7.00833 13.125 7.29167 13.4083 7.29167 13.75C7.29167 14.0917 7.00833 14.375 6.66667 14.375Z" fill="#292D32"/>
                            <path d="M12.0833 14.375H8.75C8.40833 14.375 8.125 14.0917 8.125 13.75C8.125 13.4083 8.40833 13.125 8.75 13.125H12.0833C12.425 13.125 12.7083 14.0917 12.7083 14.75C12.7083 14.0917 12.425 14.375 12.0833 14.375Z" fill="#292D32"/>
                            <path d="M14.6337 17.7084H5.36699C2.05033 17.7084 1.04199 16.7084 1.04199 13.4251V6.57508C1.04199 3.29175 2.05033 2.29175 5.36699 2.29175H11.2503C11.592 2.29175 11.8753 2.57508 11.8753 2.91675C11.8753 3.25841 11.592 3.54175 11.2503 3.54175H5.36699C2.75033 3.54175 2.29199 3.99175 2.29199 6.57508V13.4167C2.29199 16.0001 2.75033 16.4501 5.36699 16.4501H14.6253C17.242 16.4501 17.7003 16.0001 17.7003 13.4167V9.18342C17.7003 8.84175 17.9837 8.55842 18.3253 8.55842C18.667 8.55842 18.9503 8.84175 18.9503 9.18342V13.4167C18.9587 16.7084 17.9503 17.7084 14.6337 17.7084Z" fill="#292D32"/>
                            <path d="M14.9999 6.87495C14.8415 6.87495 14.6832 6.81662 14.5582 6.69162L13.3082 5.44162C13.0665 5.19995 13.0665 4.79995 13.3082 4.55828C13.5499 4.31662 13.9499 4.31662 14.1915 4.55828L14.9999 5.36662L17.8915 2.47495C18.1332 2.23328 18.5332 2.23328 18.7749 2.47495C19.0165 2.71662 19.0165 3.11662 18.7749 3.35828L15.4415 6.69162C15.3165 6.81662 15.1582 6.87495 14.9999 6.87495Z" fill="#292D32"/>
                        </svg>
                    </a>
                    @endif
                    

                    @php
                        $canDelete = !$isTransporter || ($isTransporter && (int)optional($invoice)->transporter_id === (int)auth()->id());
                    @endphp
                    @if($canDelete)
                    <a href="javascript:void(0)" class="delete-invoice" data-invoice-id="{{ $invoice->id ?? null }}" data-job-id="{{ $job->id ?? null }}">
                        <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                    </a>
                    @else
                    <span class="invisible">
                        <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                    </span>
                    @endif
                </td>
            </tr>
        @empty
           
        @endforelse
    </tbody>
    </table>
</div>

{{-- Invoice Payment Modal --}}
<div class="modal fade" id="invoicePaymentModal" tabindex="-1" aria-labelledby="invoicePaymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="invoicePaymentModalLabel">Mark Invoice as Paid</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="invoicePaymentForm" method="POST">
                @csrf
                <input type="hidden" id="invoice_id" name="invoice_id">
                <input type="hidden" id="job_id" name="job_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="transaction_id" class="form-label">Transaction ID <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="transaction_id" name="transaction_id" maxlength="32">
                    </div>
                    <div class="mb-3">
                        <label for="payment_date" class="form-label">Payment Date <span class="text-danger">*</span></label>
                        <div class="position-relative">
                            <input type="text" class="form-control date-picker" id="payment_date" name="payment_date" readonly>
                            <span class="position-absolute date-picker-icon" style="right: 10px; top: 50%; transform: translateY(-50%);">
                                <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
                            </span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="payment_mode" class="form-label">Payment Mode <span class="text-danger">*</span></label>
                        <select class="form-control" id="payment_mode" name="payment_mode">
                            <option value="">Select Payment Mode</option>
                            <option value="1">Bank Transfer</option>
                            <option value="2">Wire Transfer</option>
                            <option value="3">Cash</option>
                            <option value="4">Cheque</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="note" class="form-label">Note</label>
                        <textarea class="form-control" id="note" name="note" rows="3" placeholder="Enter any additional notes..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Mark as Paid</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Initialize date picker with explicit format handling
    $('#payment_date').datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        yearRange: '-10:+10',
        maxDate: '0', // Cannot select future dates
        showButtonPanel: true,
        closeText: 'Clear',
        currentText: 'Today',
        beforeShow: function(input, inst) {
            // Ensure the input shows the correct format when opening
            const currentValue = $(this).val();
            if (currentValue) {
                // Convert any existing value to dd/mm/yyyy format
                const parts = currentValue.split('-');
                if (parts.length === 3) {
                    const formattedDate = parts[2] + '/' + parts[1] + '/' + parts[0];
                    $(this).val(formattedDate);
                }
            }
        },
        onSelect: function(dateText, inst) {
            // Force the display format to dd/mm/yyyy
            const parts = dateText.split('/');
            if (parts.length === 3) {
                const day = parts[0].padStart(2, '0');
                const month = parts[1].padStart(2, '0');
                const year = parts[2];
                
                // Ensure 4-digit year
                const fullYear = year.length === 2 ? '20' + year : year;
                
                // Set the display value in dd/mm/yyyy format
                const displayDate = day + '/' + month + '/' + fullYear;
                $(this).val(displayDate);
                
                // Store the formatted date for backend submission
                const formattedDate = fullYear + '-' + month + '-' + day;
                $(this).attr('data-formatted-date', formattedDate);
                
                console.log('Display date:', displayDate); // Debug
                console.log('Formatted date:', formattedDate); // Debug
            }
        }
    });
    
    // Initialize jQuery Validate
    $('#invoicePaymentForm').validate({
        ignore: ":hidden",
        errorClass: 'help-block text-danger',
        errorElement: "span",
        onkeyup: false,
        onfocusout: false,
        onclick: false,
        
        rules: {
            transaction_id: {
                required: true,
                maxlength: 32,
                minlength: 8
            },
            payment_date: {
                required: true
            },
            payment_mode: {
                required: true
            }
        },
        
        messages: {
            transaction_id: {
                required: "Transaction ID is required",
                maxlength: "Transaction ID must be maximum 32 characters",
                minlength: "Transaction ID must be minimum 8 characters"
            },
            payment_date: {
                required: "Payment date is required"
            },
            payment_mode: {
                required: "Please select a payment mode"
            }
        },
        
        highlight: function (element) {
            $(element).closest('.mb-3').addClass('has-error');
        },
        
        unhighlight: function (element) {
            $(element).closest('.mb-3').removeClass('has-error');
        },
        
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        }
    });
    
    // Handle click on mark-invoice-paid button
    $(document).on('click', '.mark-invoice-paid', function() {
        const invoiceId = $(this).data('invoice-id');
        const jobId = $(this).data('job-id');
        
        // Reset form and validation
        $('#invoicePaymentForm')[0].reset();
        $('#invoicePaymentForm .has-error').removeClass('has-error');
        $('#invoicePaymentForm .help-block').remove();
        
        // Set values in modal
        $('#invoice_id').val(invoiceId);
        $('#job_id').val(jobId);
        
        // Set today's date as default in dd/mm/YYYY format
        const today = new Date();
        const day = today.getDate().toString().padStart(2, '0');
        const month = (today.getMonth() + 1).toString().padStart(2, '0');
        const year = today.getFullYear();
        
        const displayDate = day + '/' + month + '/' + year;
        const formattedDate = year + '-' + month + '-' + day;
        
        $('#payment_date').val(displayDate);
        $('#payment_date').attr('data-formatted-date', formattedDate);
        
        // Show modal
        $('#invoicePaymentModal').modal('show');
    });
    
    // Handle form submission
    $('#invoicePaymentForm').on('submit', function(e) {
        e.preventDefault();
        
        if (!$(this).valid()) {
            return false;
        }
        
        // Check if we have a formatted date
        const formattedDate = $('#payment_date').attr('data-formatted-date');
        if (!formattedDate) {
            toastr.error('Please select a valid payment date');
            return false;
        }
        
        const formData = new FormData(this);
        formData.set('payment_date', formattedDate); // Send YYYY-MM-DD format
        
        // Get the invoice ID and job ID from the hidden fields
        const invoiceId = $('#invoice_id').val();
        const jobId = $('#job_id').val();
        
        // Build the correct URL dynamically
        let url = "{{ route('admin.jobs.invoice.mark-paid', [':job', ':invoice']) }}";
        url = url.replace(':job', jobId);
        url = url.replace(':invoice', invoiceId);
        
        console.log('Submitting to URL:', url); // Debug
        console.log('Form data:', Object.fromEntries(formData)); // Debug
        
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log('Success response:', response); // Debug
                if (response.status === 'success') {
                    toastr.success(response.message || 'Invoice marked as paid successfully');
                    $('#invoicePaymentModal').modal('hide');
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    toastr.error(response.message || 'Failed to mark invoice as paid');
                }
            },
            error: function(xhr) {
                console.log('Error response:', xhr); // Debug
                if (xhr.status === 422) {
                    // Validation errors
                    const response = xhr.responseJSON;
                    if (response && response.errors) {
                        // Show each validation error in toaster
                        Object.keys(response.errors).forEach(function(field) {
                            const errorMessages = response.errors[field];
                            if (Array.isArray(errorMessages)) {
                                errorMessages.forEach(function(errorMessage) {
                                    toastr.error(errorMessage);
                                });
                            } else {
                                toastr.error(errorMessage);
                            }
                        });
                    } else if (response && response.message) {
                        toastr.error(response.message);
                    } else {
                        toastr.error('Validation failed');
                    }
                } else {
                    // Other errors
                    let message = 'Failed to mark invoice as paid';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    toastr.error(message);
                }
            }
        });
    });
});
</script>