{{-- 
    DELIVERY ACCEPTANCE FORMS VIEW
    This Blade template renders the delivery acceptance forms for the application.
--}}

@extends('layout.layout')
@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header card-header-primary">
                     <form id="deliveryAcceptanceForm">

                {{-- Date of Delivery / Inspection Report / Delivery Receipt --}}
                <div class="form-section-box">
                    <div class="row mb-2">
                        <div class="col-md-4">
                            <div class="form-group ">
                                <label>Date of Delivery <span class="text-danger">*</span></label>
                                <input type="date" class="form-control datepicker" name="date_of_delivery" placeholder="ex. 1/2/2024"  required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Inspection and Acceptance Report</label>
                                <input type="text" class="form-control" name="iar_number" placeholder="ex. XXX-ABC">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Delivery Receipt</label>
                                <input type="text" class="form-control datepicker" name="delivery_receipt" placeholder="ex. XXX-123">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Learning Resource Description --}}
                <div class="form-section-box">
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Learning Resource Description <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="lr_description" rows="3" placeholder="ex. Grade 10 - TLE Textbooks" required></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Grade Level / Learning Resource Type --}}
                <div class="form-section-box">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Grade Level <span class="text-danger">*</span></label>
                                <select class="form-control" name="grade_level" required>
                                    <option value="" disabled selected>Select Grade Level</option>
                                    @foreach($gradeLevels as $gradeLevel)
                                        <option value="{{ $gradeLevel->name }}">{{ $gradeLevel->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <!-- LR Type Dropdown Components -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="lr_type_select">
                                    Learning Resource Type <span class="text-danger">*</span>
                                </label>
                                @include('components.lr-type-dropdown-selection', [
                                    'targetId' => 'lr_type_select',
                                    'mode' => 'group',
                                    'submenuDirection' => 'left'
                                ])
                                <input type="hidden" name="lr_type_select" id="lr_type_select" value="ART">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Quantity / Unit Cost --}}
                <div class="form-section-box">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Quantity <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="quantity" placeholder="ex. 100" min="1" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Unit Cost</label>
                                <input type="number" class="form-control" name="unit_cost" placeholder="ex. 1,000,000" min="0" step="0.01">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Received By / Encoded By --}}
                <div class="form-section-box">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <div class="form-group">
                                    <label>Received by <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="received_by" placeholder="ex. Juan Dela Cruz" required>
                            </div>
                        </div>
                        @if(session('authority_level') == 3)
                        <div class="col-md-6">
                            <div class="form-group">
                                    <label>Destination <span class="text-danger">*</span></label>
                                    <select class="form-control" name="destination" required>
                                        <option value="" disabled selected>Select Destination</option>
                                        @foreach($districts as $district)
                                        <option value="{{ $district->station_name }}">{{ $district->station_name }}</option>
                                        @endforeach
                                    </select>
                            </div>
                        </div>
                        @endif
                        <!-- <div class="col-md-6">
                            <div class="form-group">
                                <label>Encoded By</label>
                                <input type="text" class="form-control" name="encoded_by" value="{{ ucwords(strtolower(trim($profileService->Firstname))) }} {{ ucwords(strtolower(trim($profileService->Lastname))) }}" readonly>
                            </div>
                        </div> -->
                    </div>
                </div>

                {{-- Remarks --}}
                <div class="form-section-box">
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Remarks</label>
                                <textarea class="form-control" name="remarks" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="row">
                    <div class="col-md-12 text-center p-3">
                        <button type="button" id="btnAddToList" class="btn btn-success">
                            <i class="material-icons">add_circle</i> Add to List
                        </button>
                        <button type="button" id="btnClearForm" class="btn btn-danger">
                            <i class="material-icons">clear</i> Clear Form
                        </button>
                    </div>
                </div>

                <hr>

                {{-- Delivery Acceptance Queue --}}
                 <div class="delivery-queue-box">
                    <div class="row align-items-center mb-3">
                        <div class="col-md-6">
                            <h5 class="mb-0 font-weight-bold">Delivery Queue Table</h5>
                        </div>
                        <div class="col-md-6 text-md-right justify-content-md-end d-flex align-items-center">
                            <span class="queue-stat">
                                Items in Queue
                                <span id="queueItemCount" class="queue-stat-value text-info">0</span>
                            </span>
                            <span class="queue-stat">
                                Total Quantity
                                <span id="queueTotalQty" class="queue-stat-value text-primary">0</span>
                            </span>
                            <span class="queue-stat">
                                Total Cost
                                <span id="queueTotalCost" class="queue-stat-value text-success">₱0.00</span>
                            </span>
                           <span class="material-icons-round queue-help-icon" 
                           data-bs-target="#deliveryHelpModal" 
                           data-bs-toggle="modal" style="font-size:18px; width:18px; height:18px;">help_outline</span>

                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered" id="deliveryQueueTable">
                            <thead>
                                <tr class="bg-primary text-white queue-list">
                                    <th>No.</th>
                                    <th>Actions</th>
                                    <th>Date Acquired</th>
                                    <th>IAR #</th>
                                    <th>DR #</th>
                                    <th>LR Description</th>
                                    <th>Grade Level</th>
                                    <th>LR Type</th>
                                    <th>Qty</th>
                                    <th>Total Cost</th>
                                     @if(session('authority_level') == 3)<th>Destination</th>@endif
                                    <th>Received By</th>
                                    <th>Remarks</th>
                                </tr>
                            </thead>
                            <tbody id="deliveryQueueBody">
                                {{-- Rows injected here via JS when "Add to List" is clicked --}}
                            </tbody>
                        </table>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <button type="button" id="btnCopyLast" class="btn btn-success">
                                <i class="material-icons">content_copy</i> Copy Last
                            </button>
                            <button type="button" id="btnClearList" class="btn btn-danger">
                                <i class="material-icons">clear</i> Clear List
                            </button>
                        </div>
                        <div class="col-md-6 text-md-right justify-content-md-end d-flex align-items-center">
                            <button type="button" id="btnSubmitAll" class="btn btn-outline-success">
                                <i class="material-icons">send</i> Submit All
                            </button>
                        </div>
                    </div>
                </div>
            </form>

                </div>
            </div>
        </div>
    </div>


</div>

{{-- DELIVERY ACCEPTANCE HELP MODAL --}}

<div class="modal fade" id="deliveryHelpModal" tabindex="-1" role="dialog" aria-labelledby="deliveryHelpModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deliveryHelpModalLabel">Delivery Acceptance Help</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="pl-3 mb-0">
                    <li><strong>Add to List</strong> stages a delivery record without submitting it.</li>
                    <li>Use the <i class="material-icons align-middle" style="font-size:16px;">edit</i> icon to edit a queued row, or <i class="material-icons align-middle" style="font-size:16px;">close</i> to remove it.</li>
                    <li><strong>Copy Last</strong> duplicates the most recent row so you can tweak just a few fields.</li>
                    <li>Nothing is saved to the system until you click <strong>Submit All</strong>.</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- EDIT TEXT MODAL (LR Description / Remarks) --}}
<div class="modal fade" id="editTextModal" tabindex="-1" aria-labelledby="editTextModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTextModalLabel">Edit Field</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <textarea id="editTextModalTextarea" class="form-control" rows="8"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="editTextModalApplyBtn" class="btn btn-primary">Apply</button>
            </div>
        </div>
    </div>
</div>

<style>

{{-- QUEUE LIST CSS  --}}
.queue-list th {
    font-size: 12px;
    color: #fff;
}

.delivery-queue-box {
    background-color: #f4f4f6;
    border-radius: 8px;
    padding: 20px;
}

.queue-stat {
    display: inline-block;
    margin-left: 24px;
    font-size: 13px;
    color: #555;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}

.queue-stat-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.queue-help-icon {
    vertical-align: middle;
    margin-left: 10px;
    color: #888;
    cursor: pointer;
    font-size: 20px;
}

{{-- EDITING CSS --}}

.editing-row {
    background-color: #fff8e1;
}

.btn-expand-field {
    padding: 0.25rem 0.5rem;
}

#editTextModalTextarea {
    resize: vertical;
}

.field-input-group .btn-expand-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.field-input.group .btn-expand-field .material-icons{
    line-height: 1;
}

.queue-text-ellipsis {
    display: block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input.form-control-sm.queue-text-ellipsis[readonly] {
    cursor: default;
}


.field-preview-text {
    cursor: default;
}

</style>


<script src="{{ asset('/assets/js/delivery-acceptance/deliveryQueue.js') }}" defer></script>
@endsection