@extends('layouts.master')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark text-weight-bold">Review Purchase Order</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{!! route('purchase-orders.departmentIndex') !!}">Department Review</a></li>
                    <li class="breadcrumb-item active">Review</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row">
        <div class="col-md-12">
            @include('flash::message')
            
            <div class="bg-white card-primary card-maroon">
                <div class="card-header">
                    <h3 class="card-title">{{ $po->request_number }} - Add Cost Information</h3>
                </div>
                
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <strong>Request Number:</strong><br>{{ $po->request_number ?? '-' }}
                        </div>
                        <div class="col-md-2">
                            <strong>Request Type:</strong><br>{{ ucfirst($po->request_type) }}
                        </div>
                        <div class="col-md-2">
                            <strong>Quotation:</strong><br>{{ $po->quotation->name ?? '-' }}
                        </div>
                        <div class="col-md-2">
                            <strong>Date:</strong><br>{{ $po->date->format('Y-m-d') ?? '-' }}
                        </div>
                        <div class="col-md-3">
                            <strong>Status:</strong><br>
                            <span class="badge badge-warning">{{ $po->department_status }}</span>
                        </div>
                    </div>

                    <hr>

                    <!-- Attached Files Section -->
                    <div class="mb-4">
                        <h5><i class="fa fa-paperclip"></i> Attached Files</h5>
                        @php $files = $po->getMedia(); @endphp
                        @if($files->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>File Name</th>
                                            <th>Type</th>
                                            <th>Size</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($files as $file)
                                            <tr>
                                                <td><i class="fa fa-file"></i> {{ $file->name }}</td>
                                                <td><small class="text-muted">{{ strtoupper($file->mime_type) }}</small></td>
                                                <td><small class="text-muted">{{ number_format($file->size / 1024, 2) }} KB</small></td>
                                                <td>
                                                    <a href="{{ url('storage/' . $file->id . '/' . $file->file_name) }}" target="_blank" class="btn btn-sm btn-outline-primary" title="View file">
                                                        <i class="fa fa-eye"></i> View
                                                    </a>
                                                    <a href="{{ url('storage/' . $file->id . '/' . $file->file_name) }}" download class="btn btn-sm btn-outline-primary" title="Download file">
                                                        <i class="fa fa-download"></i> Download
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-muted"><small>No files attached to this Purchase Order.</small></p>
                        @endif
                    </div>

                    <hr>
                    
                    {!! Form::open(['route' => ['purchase-orders.departmentUpdate', $po->id], 'method' => 'POST']) !!}




                    <!-- SECTION 2: LOCAL PURCHASE OUTBOUND FORM -->
                    <div class="mb-4">
                        <h4 class="text-danger mb-3">Create LPOUT</h4>
                        
                        <div class="row">
                            <!-- Name Field (auto-filled, can be edited) -->
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    {!! Form::label('name', 'LPOUT Name:') !!}
                                    {!! Form::text('name', $po->lpout_name ?? 'Purchase Order', [
                                        'class' => ($errors->has('name')) ? 'form-control is-invalid' : 'form-control'
                                    ]) !!}
                                    @if ($errors->has('name'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <!-- Vendor Id Field -->
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    {!! Form::label('vendor_id', 'Vendor:') !!}
                                    {!! Form::select('vendor_id', $vendorItems, $po->lpout_vendor_id, [
                                        'class' => ($errors->has('vendor_id')) ? 'form-control is-invalid' : 'form-control',
                                        'id' => 'vendor_id'
                                    ]) !!}
                                    @if ($errors->has('vendor_id'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('vendor_id') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <!-- TRN No Field -->
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    {!! Form::label('trn_no', 'TRN No:') !!}
                                    {!! Form::text('trn_no', $po->lpout_trn_no, [
                                        'class' => ($errors->has('trn_no')) ? 'form-control is-invalid' : 'form-control',
                                        'id' => 'trn_no',
                                        'readonly' => true
                                    ]) !!}
                                    @if ($errors->has('trn_no'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('trn_no') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <!-- Kindly Attn Field -->
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    {!! Form::label('kindly_attn', 'Kindly Attn:') !!}
                                    {!! Form::text('kindly_attn', $po->lpout_kindly_attn, [
                                        'class' => ($errors->has('kindly_attn')) ? 'form-control is-invalid' : 'form-control'
                                    ]) !!}
                                    @if ($errors->has('kindly_attn'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('kindly_attn') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <!-- Date Field -->
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    {!! Form::label('date', 'Date:') !!}
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                        {!! Form::text('date', $po->lpout_date, [
                                            'class' => ($errors->has('date')) ? 'form-control is-invalid' : 'form-control',
                                            'id' => 'date'
                                        ]) !!}
                                        @if ($errors->has('date'))
                                            <span class="invalid-feedback">
                                                <strong>{{ $errors->first('date') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Payment Type Field -->
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    {!! Form::label('payment_type', 'Payment Type:') !!}
                                    {!! Form::select('payment_type', ['Cash' => 'Cash', 'Cheque' => 'Cheque'], $po->lpout_payment_type, [
                                        'class' => 'form-control',
                                        'id' => 'payment_type'
                                    ]) !!}
                                </div>
                            </div>

                            <!-- Cheque Date Field -->
                            <div class="col-md-3 col-sm-6" id="cheque_date_div" style="display:none;">
                                <div class="form-group">
                                    {!! Form::label('cheque_date', 'Cheque Date:') !!}
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                        {!! Form::text('cheque_date', $po->lpout_cheque_date, [
                                            'class' => 'form-control',
                                            'id' => 'cheque_date'
                                        ]) !!}
                                    </div>
                                </div>
                            </div>

                            <!-- VAT Field -->
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group pt-4">
                                    {!! Form::label('vat', 'Apply VAT (5%):') !!}
                                    <label class="checkbox-inline">
                                        {!! Form::hidden('vat', 0) !!}
                                        {!! Form::checkbox('vat', '1', $po->lpout_vat) !!}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Hidden Amount Field - calculated from items total -->
                        {!! Form::hidden('amount', null, ['id' => 'amount_hidden']) !!}

                        <!-- Payment Preference Section -->
                        <div class="row mt-3">
                            <div class="col-sm-12 mt-2">
                                <h5 class="text-danger">Payment Preference</h5>
                                <hr>
                            </div>

                            <div class="col-md-12 col-sm-12">
                                <!-- Payment Preference Option -->
                                <div class="form-group">
                                    {!! Form::label('lpo_payment_preference_option', 'Payment Preference Option:') !!}
                                    <div class="mt-2">
                                        <label class="custom-control custom-radio">
                                            {!! Form::radio('lpo_payment_preference_option', 'default', ($po->lpout_payment_preference_option === 'default' || !$po->lpout_payment_preference_option), [
                                                'class' => 'custom-control-input',
                                                'id' => 'option_default'
                                            ]) !!}
                                            <span class="custom-control-label" for="option_default">Use Vendor's Default Preference</span>
                                        </label>
                                        <label class="custom-control custom-radio mt-2">
                                            {!! Form::radio('lpo_payment_preference_option', 'custom', ($po->lpout_payment_preference_option === 'custom'), [
                                                'class' => 'custom-control-input',
                                                'id' => 'option_custom'
                                            ]) !!}
                                            <span class="custom-control-label" for="option_custom">Use Custom Payment Preference</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Default Payment Preference Display -->
                            <div class="col-sm-12" id="default_preference_section" style="display: none;">
                                <div class="card card-outline card-danger">
                                    <div class="card-header">
                                        <h5 class="card-title">Vendor's Default Payment Preference</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <p><strong>Payment Preference:</strong></p>
                                                <p id="vendor_payment_preference_display">-</p>
                                            </div>
                                            <div class="col-md-4" id="vendor_pdc_days_display_section" style="display: none;">
                                                <p><strong>Number of Days (PDC):</strong></p>
                                                <p id="vendor_pdc_days_display">-</p>
                                            </div>
                                            <div class="col-md-4" id="vendor_pdc_option_display_section" style="display: none;">
                                                <p><strong>Payment Processing Option:</strong></p>
                                                <p id="vendor_pdc_option_display">-</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Custom Payment Preference Fields -->
                            <div class="col-sm-12" id="custom_preference_section" style="display: none;">
                                <div class="row mt-3">
                                    <div class="col-md-4 col-sm-6">
                                        <div class="form-group">
                                            {!! Form::label('lpo_payment_preference', 'Payment Preference:') !!}
                                            {!! Form::select('lpo_payment_preference', ['cod' => 'Cash on Delivery', 'pdc' => 'PDC (Post Dated Check)'], $po->lpout_payment_preference, [
                                                'class' => ($errors->has('lpo_payment_preference')) ? 'form-control is-invalid' : 'form-control',
                                                'id' => 'lpo_payment_preference'
                                            ]) !!}
                                            @if ($errors->has('lpo_payment_preference'))
                                                <span class="invalid-feedback">
                                                    <strong>{{ $errors->first('lpo_payment_preference') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-sm-6" id="custom_pdc_days_section" style="display: none;">
                                        <div class="form-group">
                                            {!! Form::label('lpo_pdc_number_of_days', 'Number of Days (PDC):') !!}
                                            {!! Form::number('lpo_pdc_number_of_days', $po->lpout_pdc_number_of_days, [
                                                'class' => ($errors->has('lpo_pdc_number_of_days')) ? 'form-control is-invalid' : 'form-control',
                                                'placeholder' => 'Number of days'
                                            ]) !!}
                                            @if ($errors->has('lpo_pdc_number_of_days'))
                                                <span class="invalid-feedback">
                                                    <strong>{{ $errors->first('lpo_pdc_number_of_days') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-sm-6" id="custom_pdc_option_section" style="display: none;">
                                        <div class="form-group">
                                            {!! Form::label('lpo_pdc_payment_option', 'Payment Processing Option:') !!}
                                            {!! Form::select('lpo_pdc_payment_option', ['on_delivery_amount' => 'On Delivery', 'on_payment_release_amount' => 'On PO Release'], $po->lpout_pdc_payment_option, [
                                                'class' => ($errors->has('lpo_pdc_payment_option')) ? 'form-control is-invalid' : 'form-control',
                                                'id' => 'lpo_pdc_payment_option'
                                            ]) !!}
                                            @if ($errors->has('lpo_pdc_payment_option'))
                                                <span class="invalid-feedback">
                                                    <strong>{{ $errors->first('lpo_pdc_payment_option') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                    <hr class="my-4">

                    <!-- SECTION 1: REQUEST COST INFORMATION (This is the LPOUT Items) -->
                    <div class="mb-4">
                        <h4 class="text-danger mb-3">Items for Local Purchase Outbound</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="itemsTable">
                                <thead class="bg-light">
                                    <tr>
                                        <th>NO</th>
                                        <th>MATERIAL NAME (DESCRIPTION)</th>
                                        <th>UNIT</th>
                                        <th>QUANTITY</th>
                                        <th>COST PER UNIT (AED)</th>
                                        <th>TOTAL COST (AED)</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        // If lpout_items exist (already submitted), use them with their cost data
                                        // Otherwise, use the original items from Step 1
                                        if ($po->lpout_items && is_array($po->lpout_items) && count($po->lpout_items) > 0) {
                                            $itemsToDisplay = is_string($po->lpout_items) ? json_decode($po->lpout_items, true) : $po->lpout_items;
                                        } else {
                                            // Use original items from Step 1, converted to lpout format
                                            $originalItems = is_string($po->items) ? json_decode($po->items, true) : $po->items;
                                            $itemsToDisplay = $originalItems;
                                        }
                                    @endphp
                                    @if($itemsToDisplay && is_array($itemsToDisplay) && count($itemsToDisplay) > 0)
                                        @foreach($itemsToDisplay as $idx => $item)
                                            <tr>
                                                <td class="row-number">{{ $idx + 1 }}</td>
                                                <td>
                                                    <input type="text" data-field="description" name="lpout_items[{{ $idx }}][description]" class="form-control" value="{{ $item['description'] ?? $item['material_name'] ?? '' }}" />
                                                </td>
                                                <td>
                                                    <input type="text" data-field="unit" name="lpout_items[{{ $idx }}][unit]" class="form-control" value="{{ $item['unit'] ?? '' }}" />
                                                </td>
                                                <td>
                                                    <input type="number" min="0" step="any" data-field="qty" name="lpout_items[{{ $idx }}][qty]" class="form-control qty" value="{{ $item['qty'] ?? $item['quantity'] ?? '' }}" />
                                                </td>
                                                <td>
                                                    <input type="number" min="0" step="0.01" data-field="unit_price" name="lpout_items[{{ $idx }}][unit_price]" class="form-control unit_price" value="{{ $item['unit_price'] ?? $item['cost'] ?? '' }}" />
                                                </td>
                                                <td>
                                                    <input type="number" min="0" step="0.01" data-field="total" name="lpout_items[{{ $idx }}][total]" class="form-control total" value="{{ $item['total'] ?? '' }}" readonly />
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-danger btn-sm removeRow">X</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="7" class="text-center">No items</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-outline-primary" id="addRow">+ Add Row</button>
                    </div>

                    <hr class="my-4">

                    <!-- Totals Section -->
                    <div class="row mt-3">
                        <div class="col-sm-12">
                            <table class="table table-borderless">
                                <tr>
                                    <th style="width:70%">TOTAL AMOUNT (IN AED)</th>
                                    <td>
                                        <input type="text" class="form-control" id="total_amount_display" readonly>
                                    </td>
                                </tr>
                                <tbody id="vatSection" style="display:none;">
                                    <tr>
                                        <th>VAT (5%) (IN AED)</th>
                                        <td><input type="text" class="form-control" id="vat_amount_display" readonly></td>
                                    </tr>
                                    <tr>
                                        <th>TOTAL SUM VALUE INCLUDING VAT (5%) (IN AED)</th>
                                        <td><input type="text" class="form-control" id="grand_total_display" readonly></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                                            <!-- Terms & Conditions -->
                        <div class="row mt-3">
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    {!! Form::label('terms', 'Terms & Conditions:') !!}
                                    {!! Form::textarea('terms', $po->lpout_terms ?? '
                                    <ul>
                                        <li>Invoice must accompany goods or to be mailed before the time of collection, LPO number should appear on all invoices</li>
                                        <li>Payment: 90 days PDC, based on partial material deliveries & partial payments</li>
                                        <li>Goods (Materials, products or services) to be supplied as specified in the Purchase order, FTS reserves the right to accept / reject any items not up to our required quality or specifications.</li>
                                        <li>Failure to prepare the shipment on the date specified or subsequently agreed shall entitle FTS to cancel order without penalties to FTS or refuse to accept any subsequent delivery of the goods which the supplier attempts to make.</li>
                                        <li>Any rejected material due to manufacturing errors, the supplier is full responsible about the replacement and FTS has the right to hold the payment until the issue is resolved & job is delivered.</li>
                                        <li>Delivery: Delivery of items to be as per the attached sheet in the LPO provided to be delivered at RAK Airport.</li>
                                        <li>All the design drawings, supporting documents with UL/FM certifications, test certificates, Equipment Warranties for two (2) years, Functional Manuals and related documents under scope.</li>
                                        <li>All Material submittals with relevant UL/FM approval compliance documents, MTC, Supply & warranty certificates to be under scope.</li>
                                        <li>Strictly to follow UL/FM approval with standard designs & to provide all the supporting documents for Gate passes etc.</li>
                                        <li>Penalty Clause: 5% delay penalty against passing of each week as per client T&C, FTS Reserves the right to cancel this PO upon delays in design submissions, material delivery delays etc without any obligations/Liabilities on MS FTS</li>
                                    </ul>
                                    ', [
                                        'class' => 'form-control summernote',
                                        'rows' => 6
                                    ]) !!}
                                </div>
                            </div>
                        </div>

                    <!-- <div class="form-group">
                        {!! Form::label('department_notes', 'Department Notes:') !!}
                        {!! Form::textarea('department_notes', null, ['class' => 'form-control', 'rows' => 3, 'placeholder' => 'Add any notes...']) !!}
                    </div> -->

                    <div class="form-group">
                        {!! Form::submit('Forward to Admin', ['class' => 'btn btn-success btn-flat']) !!}
                        <!-- {!! Form::button('Reject', ['class' => 'btn btn-danger btn-flat', 'data-toggle' => 'modal', 'data-target' => '#rejectModal']) !!} -->
                        <a href="{!! route('purchase-orders.departmentIndex') !!}" class="btn btn-secondary btn-flat">Cancel</a>
                    </div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Purchase Order</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['route' => ['purchase-orders.departmentReject', $po->id], 'method' => 'POST']) !!}
            <div class="modal-body">
                <div class="form-group">
                    {!! Form::label('notes', 'Rejection Reason:') !!}
                    {!! Form::textarea('notes', null, ['class' => 'form-control', 'rows' => 3, 'required' => true]) !!}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                {!! Form::submit('Reject', ['class' => 'btn btn-danger']) !!}
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

@section('css')
@parent
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css')}}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{ asset('plugins/daterangepicker/daterangepicker.css')}}">
@endsection

@section('scripts')
<script src="{{ asset('plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{ asset('plugins/bs-custom-file-input/bs-custom-file-input.min.js')}}"></script>
<script src="{{ asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
<script src="{{ asset('plugins/summernote/summernote-bs4.min.js') }}"></script>

<script>
    $(document).ready(function() {
        // --- SECTION 1: ITEMS TABLE INITIALIZATION ---
        // Initialize file input
        bsCustomFileInput.init();

        // Initialize date pickers
        $('#date').daterangepicker({
            singleDatePicker: true,
            timePicker: false,
            locale: {
                format: 'YYYY-MM-DD'
            }
        });

        $('#cheque_date').daterangepicker({
            singleDatePicker: true,
            timePicker: false,
            locale: { format: 'YYYY-MM-DD' }
        });

        // Initialize Select2
        $('#vendor_id').select2({
            theme: 'bootstrap4',
            placeholder: 'Select Vendor',
            allowClear: true
        });

        // --- Show/Hide Cheque Date ---
        function toggleChequeDate() {
            if ($('#payment_type').val() === 'Cheque') {
                $('#cheque_date_div').show();
            } else {
                $('#cheque_date_div').hide();
                $('#cheque_date').val('');
            }
        }

        toggleChequeDate();

        $('#payment_type').on('change', function() {
            toggleChequeDate();
        });

        // --- Build a new row for items ---
        function buildRowHtml() {
            return `
                <tr>
                    <td class="row-number"></td>
                    <td><input type="text" data-field="description" class="form-control" /></td>
                    <td><input type="text" data-field="unit" class="form-control" /></td>
                    <td><input type="number" min="0" step="any" data-field="qty" class="form-control qty" /></td>
                    <td><input type="number" min="0" step="any" data-field="unit_price" class="form-control unit_price" /></td>
                    <td><input type="number" min="0" step="any" data-field="total" class="form-control total" readonly /></td>
                    <td><button type="button" class="btn btn-danger btn-sm removeRow">X</button></td>
                </tr>
            `;
        }

        // --- Update row numbering and field names ---
        function updateRowIndexes() {
            $('#itemsTable tbody tr').each(function(i) {
                const idx = i;
                // Update row number
                $(this).find('.row-number').text(idx + 1);
                
                // Only update field names for newly added rows (those without proper lpout_items naming)
                $(this).find('input').each(function() {
                    const field = $(this).data('field');
                    if (field) {
                        const currentName = $(this).attr('name');
                        // Check if this row was dynamically added (new row)
                        if (!currentName || currentName.indexOf('lpout_items') === -1) {
                            // This is a new row, set proper naming
                            $(this).attr('name', `lpout_items[${idx}][${field}]`);
                        } else if (currentName.includes('lpout_items[') && !currentName.includes(`lpout_items[${idx}]`)) {
                            // Update index for newly added rows that were inserted
                            const newName = currentName.replace(/lpout_items\[\d+\]/, `lpout_items[${idx}]`);
                            $(this).attr('name', newName);
                        }
                    }
                });
            });
        }

        // --- Add Row ---
        $('#addRow').click(function() {
            $('#itemsTable tbody').append(buildRowHtml());
            updateRowIndexes();
        });

        // --- Remove Row ---
        $(document).on('click', '.removeRow', function() {
            $(this).closest('tr').remove();
            updateRowIndexes();
            calculateTotals();
        });

        // --- Auto calculate total if unit price is given ---
        $(document).on('input', '.qty, .unit_price', function() {
            const row = $(this).closest('tr');
            const qty = parseFloat(row.find('input[data-field="qty"]').val()) || 0;
            const price = parseFloat(row.find('input[data-field="unit_price"]').val());

            if (!isNaN(price) && price !== 0) {
                const total = qty * price;
                row.find('input[data-field="total"]').val(total.toFixed(2)).prop('readonly', true);
            } else {
                row.find('input[data-field="total"]').prop('readonly', false);
            }

            calculateTotals();
        });

        // --- Manual total change triggers full recalculation ---
        $(document).on('input', '.total', function() {
            calculateTotals();
        });

        // --- Show/Hide VAT section based on checkbox ---
        function toggleVatSection() {
            if ($('input[name="vat"]').is(':checked')) {
                $('#vatSection').show();
                calculateTotals();
            } else {
                $('#vatSection').hide();
                $('#vat_amount_display').val('');
                $('#grand_total_display').val('');
            }
        }

        // Initialize VAT section on load
        toggleVatSection();

        $('input[name="vat"]').on('change', function() {
            toggleVatSection();
        });

        // --- Recalculate subtotal, VAT, and grand total ---
        function calculateTotals() {
            let subtotal = 0;
            
            // Sum all item totals
            $('#itemsTable tbody tr').each(function() {
                const rowTotal = parseFloat($(this).find('input[data-field="total"]').val()) || 0;
                subtotal += rowTotal;
            });

            // Update display field
            $('#total_amount_display').val(subtotal.toFixed(2));
            
            // Update hidden field for amount (this goes to backend)
            $('#amount_hidden').val(subtotal.toFixed(2));

            // Calculate VAT if checkbox is checked
            if ($('input[name="vat"]').is(':checked')) {
                const vat = subtotal * 0.05;
                const grandTotal = subtotal + vat;
                
                $('#vat_amount_display').val(vat.toFixed(2));
                $('#grand_total_display').val(grandTotal.toFixed(2));
            }
        }

        // Initialize numbering
        updateRowIndexes();
        calculateTotals(); // Calculate totals on page load
        
        // Trigger input events on all quantity and unit_price fields to recalculate totals
        $('#itemsTable tbody tr').each(function() {
            $(this).find('input[data-field="unit_price"]').trigger('input');
        });
    });

    // Auto-fill TRN number when vendor is selected
    $('#vendor_id').on('change', function () {
        var vendorId = $(this).val();

        if (vendorId) {
            $.ajax({
                url: '/vendor/' + vendorId + '/vat',
                type: 'GET',
                success: function (data) {
                    $('#trn_no').val(data.vat_no);
                }
            });

            // Fetch vendor payment preference
            $.ajax({
                url: '/vendor/' + vendorId + '/payment-preference',
                type: 'GET',
                success: function (data) {
                    displayVendorPaymentPreference(data);
                }
            });
        } else {
            $('#trn_no').val('');
        }
    });

    // Display vendor payment preference
    function displayVendorPaymentPreference(data) {
        const preference = data.payment_preference;
        const days = data.pdc_number_of_days;
        const option = data.pdc_payment_option;

        // Display preference
        const prefText = preference === 'cod' ? 'Cash on Delivery' : 'PDC (Post Dated Check)';
        $('#vendor_payment_preference_display').text(prefText);

        // Show/hide PDC fields based on preference
        if (preference === 'pdc') {
            $('#vendor_pdc_days_display_section').show();
            $('#vendor_pdc_option_display_section').show();
            $('#vendor_pdc_days_display').text(days || '-');
            
            const optionText = option === 'on_delivery_amount' ? 'On Delivery' : 'On PO Release';
            $('#vendor_pdc_option_display').text(optionText);
        } else {
            $('#vendor_pdc_days_display_section').hide();
            $('#vendor_pdc_option_display_section').hide();
        }
    }

    // Handle payment preference option change
    function togglePaymentPreferenceOption() {
        const option = $('input[name="lpo_payment_preference_option"]:checked').val();
        
        if (option === 'default') {
            $('#default_preference_section').show();
            $('#custom_preference_section').hide();
            // Clear custom fields
            $('#lpo_payment_preference').val('');
            $('#lpo_pdc_number_of_days').val('');
            $('#lpo_pdc_payment_option').val('');
        } else {
            $('#default_preference_section').hide();
            $('#custom_preference_section').show();
        }
    }

    // Initialize on page load
    togglePaymentPreferenceOption();

    // Listen for changes
    $('input[name="lpo_payment_preference_option"]').on('change', function() {
        togglePaymentPreferenceOption();
    });

    // Handle custom payment preference change
    function toggleCustomPaymentFields() {
        const preference = $('#lpo_payment_preference').val();
        
        if (preference === 'pdc') {
            $('#custom_pdc_days_section').show();
            $('#custom_pdc_option_section').show();
            $('#lpo_pdc_number_of_days').prop('required', true);
            $('#lpo_pdc_payment_option').prop('required', true);
        } else {
            $('#custom_pdc_days_section').hide();
            $('#custom_pdc_option_section').hide();
            $('#lpo_pdc_number_of_days').prop('required', false).val('');
            $('#lpo_pdc_payment_option').prop('required', false).val('');
        }
    }

    // Initialize custom payment fields on load
    toggleCustomPaymentFields();

    // Listen for custom payment preference changes
    $('#lpo_payment_preference').on('change', function() {
        toggleCustomPaymentFields();
    });
</script>

<script>
    $(function () {
        $('.summernote').summernote({
            height: 250, // set editor height
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview']]
            ]
        });
    });
</script>
@endsection