{{-- Step 3: Certificates of Competency/Proficiency --}}
<div class="step-content">

    {{-- 3. Whether Fresher or GOC holder --}}
    <div class="mb-4 border rounded p-3">
        @if($readOnly['certificates_proficiency'] ?? false)
            <div class="alert alert-info py-1 px-2 mb-2 small"><i class="fas fa-lock me-1"></i> This section is read-only as it was accepted during scrutiny.</div>
        @endif
        <div class="row align-items-center">
            <div class="col-md-6">
                <span class="fw-bold">{{$formMaster['certificates_proficiency']['c_sno']}}. Whether Fresher or GOC holder</span>
            </div>
            <div class="col-md-6">
                <select wire:model.live="certificateType"
                    class="form-select form-select-sm @error('application.c_f_or_g') is-invalid @enderror"
                    {{ ($readOnly['certificates_proficiency'] ?? false) ? 'disabled' : '' }}>
                    <option value="">Select</option>
                    <option value="F">Fresher</option>
                    <option value="G">GOC Holder</option>
                    <option value="R">Resit</option>
                </select>
                @error('application.c_f_or_g')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    {{-- GOC Holder - Certificates of Competency/Proficiency --}}
    @if($certificateType === 'G')
        <div class="mb-4 border rounded p-3">
            <h6 class="fw-bold mb-3">Certificates of Competency/Proficiency</h6>

            {{-- Certificate Input Form --}}
            @if(!($readOnly['certificates_proficiency'] ?? false))
                <div class="table-responsive mb-4">
                    <table class="table table-bordered mb-0">
                        <thead>
                            <tr class="table-light">
                                <th style="width: 25%;"><span class="c-label">Class of certificate</span></th>
                                <th style="width: 25%;"><span class="c-label">Certificate No</span></th>
                                <th style="width: 22%;"><span class="c-label">Certificate Issue Date</span></th>
                                <th style="width: 20%;"><span class="c-label">Issued Authority</span></th>
                                <th style="width: 8%;" class="text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input type="text"
                                        wire:model="certificateForm.c_cert_class"
                                        class="form-control form-control-sm @error('certificateForm.c_cert_class') is-invalid @enderror"
                                        placeholder="">
                                    @error('certificateForm.c_cert_class')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </td>
                                <td>
                                    <input type="text"
                                        wire:model="certificateForm.c_cert_no"
                                        class="form-control form-control-sm @error('certificateForm.c_cert_no') is-invalid @enderror"
                                        placeholder="">
                                    @error('certificateForm.c_cert_no')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </td>
                                <td>
                                    <input type="date"
                                        wire:model="certificateForm.d_cert_issue_dt"
                                        class="form-control form-control-sm @error('certificateForm.d_cert_issue_dt') is-invalid @enderror"
                                        max="{{ date('Y-m-d') }}">
                                    @error('certificateForm.d_cert_issue_dt')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </td>
                                <td>
                                    <select wire:model="certificateForm.c_cert_issue_ofc"
                                        class="form-select form-select-sm @error('certificateForm.c_cert_issue_ofc') is-invalid @enderror">
                                        <option value="">Select</option>
                                        <option value="DG Shipping">DG Shipping</option>
                                        <option value="WPC">WPC</option>
                                    </select>
                                    @error('certificateForm.c_cert_issue_ofc')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </td>
                                <td class="text-center align-middle">
                                    <div class="d-flex flex-column gap-1">
                                        <button type="button"
                                            wire:click="saveCertificate"
                                            class="btn btn-sm {{ $editingCertificateId ? 'btn-success' : 'btn-primary' }}"
                                            wire:loading.attr="disabled"
                                            wire:target="saveCertificate">
                                            <span wire:loading.remove wire:target="saveCertificate">
                                                {{ $editingCertificateId ? 'Update' : 'Save' }}
                                            </span>
                                            <span wire:loading wire:target="saveCertificate">
                                                <span class="spinner-border spinner-border-sm"></span>
                                            </span>
                                        </button>
                                        @if($editingCertificateId)
                                            <button type="button"
                                                wire:click="cancelCertificateForm"
                                                class="btn btn-sm btn-outline-secondary">
                                                Cancel
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            @endif

            {{-- Previous License details (if any) --}}
            <div class="table-responsive">
                <table class="table table-bordered table-sm mb-0">
                    <thead>
                        <tr style="background: linear-gradient(to right, #2980b9, #6dd5fa); color: #fff;">
                            <th colspan="5" class="py-2 ps-3">Previous License details (if any)</th>
                        </tr>
                        <tr class="table-light">
                            <th style="width: 25%;">Class of certificate</th>
                            <th style="width: 25%;">Certificate No</th>
                            <th style="width: 22%;">Certificate Issue Date</th>
                            <th style="width: 20%;">Certificate Issue Office</th>
                            <th style="width: 8%;" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($certificates as $cert)
                            <tr>
                                <td>{{ $cert['c_cert_class'] }}</td>
                                <td>{{ $cert['c_cert_no'] }}</td>
                                <td>{{ \Carbon\Carbon::parse($cert['d_cert_issue_dt'], config('app.timezone'))->format('d-m-Y') }}</td>
                                <td>{{ $cert['c_cert_issue_ofc'] }}</td>
                                <td class="text-center">
                                    @if(!($readOnly['certificates_proficiency'] ?? false))
                                        <a href="javascript:void(0)" wire:click="editCertificate({{ $cert['id'] }})"
                                            class="text-primary me-2" title="Edit"><i class="fa-solid fa-pen-to-square"></i></a>
                                            <a href="javascript:void(0)"
                                            wire:click="deleteCertificate({{ $cert['id'] }})"
                                            class="text-danger" title="Delete"
                                            onclick="return confirm('Are you sure you want to delete this certificate?')">
                                            <i class="fas fa-trash"></i> 
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-3">
                                    No certificates added yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    {{-- Resit - Last Exam Details --}}
    @if($certificateType === 'R')
        <div class="mb-4 border rounded p-3">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <span class="fw-bold">Date of Last Examination</span>
                </div>
                <div class="col-md-3">
                    <input type="date"
                        wire:model="application.d_last_exam_dt"
                        class="form-control form-control-sm @error('application.d_last_exam_dt') is-invalid @enderror"
                        max="{{ date('Y-m-d') }}"
                        {{ ($readOnly['certificates_proficiency'] ?? false) ? 'disabled' : '' }}>
                    @error('application.d_last_exam_dt')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-3">
                    <span class="fw-bold">No. of Attempts</span>
                </div>
                <div class="col-md-3">
                    <select wire:model="application.n_no_of_attempt"
                        class="form-select form-select-sm @error('application.n_no_of_attempt') is-invalid @enderror"
                        {{ ($readOnly['certificates_proficiency'] ?? false) ? 'disabled' : '' }}>
                        <option value="">Select</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    @error('application.n_no_of_attempt')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
    @endif

    {{-- Fresher --}}
    @if($certificateType === 'F')
        <div class="mb-4 border rounded p-3">
            <div class="alert alert-success mb-0">
                <i class="fas fa-check-circle me-2"></i>
                You have selected <strong>Fresher</strong> category. Please proceed to the next step.
            </div>
        </div>
    @endif
</div>