@php use Illuminate\Support\Facades\Storage; @endphp


<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <x-breadcrumb :title="'No due certificate for Application ID: ' . $this->appId" :breadcrumb="$breadcrumb" />
        
        <x-back-button />

    </div>

    <div class="container mt-5">
     @if ($errors->any())
        <x-validation-errors />
        @endif
        <div class="card">
            <div class="card-body"> 
       
                <div class="mb-3">
                    <div class="row">
                        <div class="col-sm-3">
                            <label class="form-label fw-bold">No Due Certificate Upload<span class="text-danger">*</span></label>
                        </div>
                        <div class="col-sm-6">
                            @php
                            $requiredDocs = ['CMRNODUES'];
                            $is_delete = !$readOnly['no_dues_certificate'];
                            @endphp

                            @include('layout.partials.files')
                        
                    </div>
                </div>
           
                <div class="mb-3">
                    <div class="row">
                        <div class="col-sm-3">
                            <label class="form-label fw-bold"> TEC Comment Upload<span class="text-danger">*</span></label>
                        </div>
                        <div class="col-sm-6">
                            @php
                            $requiredDocs = ['CMRTEC01'];
                            $is_delete = !$readOnly['tec_certificate'];
                            @endphp

                            @include('layout.partials.files')
                        
                    </div>
                </div>


                <!-- Action Buttons -->
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button
                        type="button"
                        class="btn btn-primary px-4"
                        wire:click="confirmSubmit"
                        wire:loading.attr="disabled"
                        wire:target="confirmSubmit">
                        <span wire:loading.remove wire:target="confirmSubmit">
                            <i class="fas fa-paper-plane"></i> Submit
                        </span>
                        <span wire:loading wire:target="confirmSubmit">
                            <span class="spinner-border spinner-border-sm" role="status"></span>
                            Processing...
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
     <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Confirm Submission</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Are you sure you want to submit this?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button 
                        type="button" 
                        class="btn btn-primary" 
                        wire:click="submitApplication"
                        data-bs-dismiss="modal"
                    >
                        Yes, Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
    document.addEventListener('livewire:initialized', () => {
        Livewire.on('show-submit-confirmation-modal', () => {
            const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
            modal.show();
        });
    });
</script>
@endpush