{{-- Document Offcanvas - Right-side offcanvas form for add/edit customer document --}}
{{-- Props: $customer --}}
@php
    $documentTypes = [
        'contract' => __('Contract'),
        'license' => __('License'),
        'certificate' => __('Certificate'),
        'insurance' => __('Insurance'),
        'tax_document' => __('Tax Document'),
        'agreement' => __('Agreement'),
        'invoice' => __('Invoice'),
        'other' => __('Other'),
    ];
@endphp

<div class="offcanvas offcanvas-end" tabindex="-1" id="documentOffcanvas" aria-labelledby="documentOffcanvasLabel" style="width: 500px;">
    <div class="offcanvas-header">
        <h5 id="documentOffcanvasLabel" class="offcanvas-title">{{ __('Add Document') }}</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="{{ __('Close') }}"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0">
        <form id="documentForm" onsubmit="return false;" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="_method" id="documentMethod" value="POST">
            <input type="hidden" name="document_id" id="document_id" value="">
            <input type="hidden" name="customer_id" value="{{ $customer->id }}">

            {{-- Document Title --}}
            <div class="mb-3">
                <label class="form-label" for="document_title">{{ __('Document Title') }} <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="document_title" name="document_title" placeholder="{{ __('e.g., Trade License 2024') }}" required>
                <div class="invalid-feedback"></div>
            </div>

            {{-- Document Number --}}
            <div class="mb-3">
                <label class="form-label" for="document_number">{{ __('Document Number') }}</label>
                <input type="text" class="form-control" id="document_number" name="document_number" placeholder="{{ __('e.g., TL-2024-12345') }}">
                <div class="invalid-feedback"></div>
            </div>

            {{-- Document Type --}}
            <div class="mb-3">
                <label class="form-label" for="document_type">{{ __('Document Type') }} <span class="text-danger">*</span></label>
                <select id="document_type" name="document_type" class="form-select" required>
                    <option value="">{{ __('Select Type') }}</option>
                    @foreach($documentTypes as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
                <div class="invalid-feedback"></div>
            </div>

            {{-- File Upload --}}
            <div class="mb-3">
                <label class="form-label" for="document_file">{{ __('Document File') }}</label>
                <input type="file" class="form-control" id="document_file" name="document_file" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                <div class="invalid-feedback"></div>
                <small class="text-muted">{{ __('Accepted formats: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG. Max size: 10MB') }}</small>
            </div>

            {{-- Current File Info (shown when editing) --}}
            <div class="mb-3" id="currentFileInfo" style="display: none;">
                <div class="alert alert-info py-2 mb-0">
                    <div class="d-flex align-items-center">
                        <i class="bx bx-file me-2"></i>
                        <div class="flex-grow-1">
                            <small class="fw-medium">{{ __('Current File:') }}</small>
                            <span id="currentFileName" class="ms-1"></span>
                        </div>
                        <a href="#" id="currentFileDownload" class="btn btn-sm btn-icon btn-label-primary" title="{{ __('Download') }}">
                            <i class="bx bx-download"></i>
                        </a>
                    </div>
                </div>
                <small class="text-muted">{{ __('Upload a new file to replace the existing one') }}</small>
            </div>

            <div class="row">
                {{-- Issue Date --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="document_issue_date">{{ __('Issue Date') }}</label>
                    <input type="text" class="form-control flatpickr-input" id="document_issue_date" name="issue_date" placeholder="YYYY-MM-DD" readonly="readonly">
                    <div class="invalid-feedback"></div>
                </div>

                {{-- Expiry Date --}}
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="document_expiry_date">{{ __('Expiry Date') }}</label>
                    <input type="text" class="form-control flatpickr-input" id="document_expiry_date" name="expiry_date" placeholder="YYYY-MM-DD" readonly="readonly">
                    <div class="invalid-feedback"></div>
                </div>
            </div>

            {{-- Notes --}}
            <div class="mb-3">
                <label class="form-label" for="document_notes">{{ __('Notes') }}</label>
                <textarea class="form-control" id="document_notes" name="notes" rows="3" placeholder="{{ __('Any additional notes about this document...') }}"></textarea>
                <div class="invalid-feedback"></div>
            </div>

            {{-- General Error Message Area --}}
            <div class="mb-3">
                <small class="text-danger" id="document-general-error"></small>
            </div>

            {{-- Buttons --}}
            <div class="mt-4">
                <button type="submit" class="btn btn-primary me-sm-3 me-1" id="submitDocumentBtn">
                    <i class="bx bx-save me-1"></i>{{ __('Save') }}
                </button>
                <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">
                    {{ __('Cancel') }}
                </button>
            </div>
        </form>
    </div>
</div>
