@extends('layouts.admin')
@section('title', 'Applicant Profile')

@section('content')
    <style>
        label {
            font-weight: bold;
        }
        .card-health {
            margin-top: 20px;
            border: 2px dashed #f4b8b8;
            border-radius: 8px;
            padding: 15px;
            background-color: #ffeaea;
        }

        .card-limitations {
            margin-top: 20px;
            border: 2px dashed #ffd9b3;
            border-radius: 8px;
            padding: 15px;
            background-color: #fff6e0;
        }



        .card-health h5 {
            font-size: 1.2rem;
            color: #2d3a56;
            margin-bottom: 10px;
        }

        .card-health p {
            margin-bottom: 5px;
            color: #555;
        }


        .card-limitations h5 {
            font-size: 1.2rem;
            color: #2d3a56;
            margin-bottom: 10px;
        }

        .card-limitations p {
            margin-bottom: 5px;
            color: #555;
        }

        .applicant-info {
            margin-top: 20px;
        }

        .applicant-info .row {
            margin-bottom: 10px;
        }

        .applicant-info label {
            font-size: 1rem;
        }

        .no-data {
            color: #999;
        }
        .file-preview-wrapper {
    display: inline-block;
    position: relative;
    margin-top: 5px;
}

.file-icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 100px;
    margin-top: 5px;
    font-size: 14px;
    color: #555;
}

.pdf-icon {
    background-color: #ff4d4d;
    color: #fff;
}

.word-icon {
    background-color: #4d79ff;
    color: #fff;
}

.unknown-icon {
    background-color: #ccc;
    color: #333;
}

.download-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 7px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.download-icon:hover {
    background: #007bff;
    color: #fff;
    text-decoration: none;
}

    </style>
    <section id="content">
        <div class="content-wrap py-0">
            <section id="slider" class="slider-element">
                <div class="vertical-middle min-vh-lg-100">
                    <div class="container py-5 py-lg-0">
                        <div class="row d-flex justify-content-center">
                            <div class="col-lg-8">
                                <div class="card border-0 p-4 rounded-4 shadow-sm">
                                    <div class="card-body">
                                        <div class="row ">
                                            <div class="col-md-5">
                                                <h2 class="mb-5 text-uppercase text-center ls-1 fw-bold"
                                                    style="color:#2d3a56">Student Information</h2>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <label for="">Student Code:</label>
                                                        <p class="border-bottom pb-3" id="student_code">
                                                            {{ $applicant->applicant_code }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="">Student Status:</label>
                                                        <p class="border-bottom pb-3" id="student_code">
                                                            {{ $applicant->getStatusTitle() }}
                                                            <br />{{ $applicant->getStatusMessage() }}</p>

                                                    </div>
                                                    <div class="col-12">
                                                        <label for="">Student Name:</label>
                                                        <p class="border-bottom pb-3" id="student_name">
                                                            {{ $applicant->applicant_name }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-current-school-name">Current School:</label>
                                                        <p class="border-bottom pb-3" id="student_school">
                                                            {{ $applicant->applicant_current_school }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-date-of-birth">Student’s Date of Birth:</label>
                                                        <p class="border-bottom pb-3" id="student_date_of_birth">
                                                            {{ $applicant->applicant_date_of_birth }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-grade">Academic Year Applying for:</label>
                                                        <p class="border-bottom pb-3" id="student_grade">
                                                            {{ $applicant->applicant_academic_year_applying_for }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-grade">Grade:</label>
                                                        <p class="border-bottom pb-3" id="student_grade">
                                                            {{ 'Grade ' . $applicant->applicant_grade }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-email">Student’s Email:</label>
                                                        <p class="border-bottom pb-3" id="student_email">
                                                            {{ $applicant->applicant_email }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-phone">Student’s Contact Number:</label><br>
                                                        <p class="border-bottom pb-3" id="student_phone">
                                                            {{ $applicant->applicant_phone }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-phone">Student’s Address:</label><br>
                                                        <p class="border-bottom pb-3" id="student_address">
                                                            {{ $applicant->applicant_address }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-student_national_id">National ID:</label><br>
                                                        <p class="border-bottom pb-3" id="student_national_id">
                                                            {{ $applicant->applicant_national_id }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-1" style="border-left: 1px solid #762626;margin:0 auto;">
                                            </div>
                                            <div class="col-md-5">
                                                <h2 class="mb-5 text-uppercase text-center ls-1 fw-bold"
                                                    style="color:#2d3a56">Guardians Information</h2>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <label for="step-father-name">Father’s Name:</label>
                                                        <p class="border-bottom pb-3" id="father_name">
                                                            {{ $applicant->applicant_father_name }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-father-occupation">Father’s Occupation:</label>
                                                        <p class="border-bottom pb-3" id="father_occupation">
                                                            {{ $applicant->applicant_father_occupation }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-father-email">Father’s Email:</label>
                                                        <p class="border-bottom pb-3" id="father_email">
                                                            {{ $applicant->applicant_father_email }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-father-phone">Father’s Contact Number:</label><br>
                                                        <p class="border-bottom pb-3" id="father_phone">
                                                            {{ $applicant->applicant_father_phone }}</p>
                                                    </div>

                                                    <div class="col-12">
                                                        <label for="step-mother-name">Mother’s Name:</label>
                                                        <p class="border-bottom pb-3" id="mother_name">
                                                            {{ $applicant->applicant_mother_name }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-mother-occupation">Mother’s Occupation:</label>
                                                        <p class="border-bottom pb-3" id="mother_occupation">
                                                            {{ $applicant->applicant_mother_occupation }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-mother-email">Mother’s Email:</label>
                                                        <p class="border-bottom pb-3" id="mother_email">
                                                            {{ $applicant->applicant_mother_email }}</p>
                                                    </div>
                                                    <div class="col-12">
                                                        <label for="step-mother-phone">Mother's Contact Number:</label><br>
                                                        <p class="border-bottom pb-3" id="mother_phone">
                                                            {{ $applicant->applicant_mother_phone }}</p>
                                                    </div>
                                                    <div class="col-12">

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

                                    </div>
                                </div>
                                @if($health)
                                        <div class="card-health">
                                            <h5>HEALTH INFORMATION</h5>
                                            <div class="row">
                                                <div class="col-12">
                                                    <label for="">Food Allergies:</label>
                                                    <p>{{ $health->applicant_food ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Medication Allergies:</label>
                                                    <p>{{ $health->applicant_medication ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Other Allergies:</label>
                                                    <p>{{ $health->applicant_other_allergies ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Asthma Chronic Conditions:</label>
                                                    <p>{{ $health->applicant_asthma ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Diabetes Chronic Conditions:</label>
                                                    <p>{{ $health->applicant_diabetes ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Seizures Chronic Conditions:</label>
                                                    <p>{{ $health->applicant_seizures ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Other Chronic Conditions:</label>
                                                    <p>{{ $health->applicant_other_chronic_conditions ?: 'No data provided' }}</p>
                                                </div>


                                            </div>
                                        </div>
                                        @else
                                        <p class="no-data">No health information available</p>
                                        @endif

                                        <!-- Limitations Information Card -->
                                        @if($limit)
                                        <div class="card-limitations">
                                            <h5>LIMITATIONS INFORMATION</h5>
                                            <div class="row">
                                                <div class="col-12">
                                                    <label for="">Mobility Limitations:</label>
                                                    <p>{{ $limit->applicant_mobility ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Vision Limitations:</label>
                                                    <p>{{ $limit->applicant_vision ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Hearing Limitations:</label>
                                                    <p>{{ $limit->applicant_hearing ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Developmental Limitations:</label>
                                                    <p>{{ $limit->applicant_developmental ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Emotional Limitations:</label>
                                                    <p>{{ $limit->applicant_emotional ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Other Limitations:</label>
                                                    <p>{{ $limit->applicant_other_limitations ?: 'No data provided' }}</p>
                                                </div>
                                                <div class="col-12">
                                                    <label for="">Other Health Concerns:</label>
                                                    <p>{{ $limit->applicant_other_health_concerns ?: 'No data provided' }}</p>
                                                </div>
                                            </div>
                                        </div>
                                        @else
                                        <p class="no-data">No limitations information available</p>
                                        @endif
                                        {{-- card of uploaded files --}}
                                        <div class="card mb-4" style="border: 2px dashed #ccc; margin-top: 20px;">
                                            <div class="card-header">
                                                <h5 class="card-title">Documents</h5>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    {{-- Passport --}}
                                                    @if($applicant->applicant_passport)
                                                        <div class="col-12 mb-4">
                                                            <label>Passport:</label>
                                                            <div class="file-preview-wrapper position-relative">
                                                                @php
                                                                    $passportExtension = pathinfo($applicant->applicant_passport, PATHINFO_EXTENSION);
                                                                @endphp

                                                                @if(in_array($passportExtension, ['png', 'jpg', 'jpeg', 'gif']))
                                                                    <img src="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_passport, now()->addMinutes(5)) }}"
                                                                         alt="Passport"
                                                                         style="max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-top: 5px;">
                                                                @elseif($passportExtension === 'pdf')
                                                                    <div class="file-icon pdf-icon">PDF</div>
                                                                @elseif(in_array($passportExtension, ['doc', 'docx']))
                                                                    <div class="file-icon word-icon">Word</div>
                                                                @else
                                                                    <div class="file-icon unknown-icon">File</div>
                                                                @endif

                                                                <a href="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_passport, now()->addMinutes(5)) }}"
                                                                   class="download-icon"
                                                                   target="_blank"
                                                                   title="Download Passport">
                                                                    <i class="fas fa-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <p>No Passport file</p>
                                                    @endif

                                                    {{-- Birth Certificate --}}
                                                    @if($applicant->applicant_birth_certificate)
                                                        <div class="col-12 mb-4">
                                                            <label>Birth Certificate:</label>
                                                            <div class="file-preview-wrapper position-relative">
                                                                @php
                                                                    $birthCertificateExtension = pathinfo($applicant->applicant_birth_certificate, PATHINFO_EXTENSION);
                                                                @endphp

                                                                @if(in_array($birthCertificateExtension, ['png', 'jpg', 'jpeg', 'gif']))
                                                                    <img src="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_birth_certificate, now()->addMinutes(5)) }}"
                                                                         alt="Birth Certificate"
                                                                         style="max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-top: 5px;">
                                                                @elseif($birthCertificateExtension === 'pdf')
                                                                    <div class="file-icon pdf-icon">PDF</div>
                                                                @elseif(in_array($birthCertificateExtension, ['doc', 'docx']))
                                                                    <div class="file-icon word-icon">Word</div>
                                                                @else
                                                                    <div class="file-icon unknown-icon">File</div>
                                                                @endif

                                                                <a href="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_birth_certificate, now()->addMinutes(5)) }}"
                                                                   class="download-icon"
                                                                   target="_blank"
                                                                   title="Download Birth Certificate">
                                                                    <i class="fas fa-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <p>No Birth Certificate file</p>
                                                    @endif

                                                    {{-- Personal Picture --}}
                                                    @if($applicant->applicant_picture)
                                                        <div class="col-12 mb-4">
                                                            <label>Personal Picture:</label>
                                                            <div class="file-preview-wrapper position-relative">
                                                                @php
                                                                    $pictureExtension = pathinfo($applicant->applicant_picture, PATHINFO_EXTENSION);
                                                                @endphp

                                                                @if(in_array($pictureExtension, ['png', 'jpg', 'jpeg', 'gif']))
                                                                    <img src="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_picture, now()->addMinutes(5)) }}"
                                                                         alt="Picture"
                                                                         style="max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-top: 5px;">
                                                                @elseif($pictureExtension === 'pdf')
                                                                    <div class="file-icon pdf-icon">PDF</div>
                                                                @elseif(in_array($pictureExtension, ['doc', 'docx']))
                                                                    <div class="file-icon word-icon">Word</div>
                                                                @else
                                                                    <div class="file-icon unknown-icon">File</div>
                                                                @endif

                                                                <a href="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_picture, now()->addMinutes(5)) }}"
                                                                   class="download-icon"
                                                                   target="_blank"
                                                                   title="Download Picture">
                                                                    <i class="fas fa-download"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <p>No Personal Picture file</p>
                                                    @endif

                                                    {{-- No Files --}}
                                                    @if(!$applicant->applicant_passport && !$applicant->applicant_birth_certificate && !$applicant->applicant_picture)
                                                        <div class="col-12">
                                                            <p>No documents uploaded yet.</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        {{-- End card of the uploaded files --}}



                                <div class="row ms-1 mt-4">
                                  <div class="col-lg-6">


                                </div>

                                </div>

                            </div>
                            <div class="col-lg-4">
                                <div class="card mb-5  border-0  rounded-4 shadow-sm">
                                    <!--begin::Header-->
                                    <div class="card-header align-items-center border-0 mt-4">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="fw-bold mb-2 text-gray-900">Current Status</span>
                                        </h3>
                                    </div>
                                    <!--end::Header-->
                                    <!--begin::Body-->
                                    <div class="card-body pt-5 " style="display: none">
                                        <!--begin::Timeline-->
                                        <div class="timeline-label"
                                            style=".timeline-label:before{background-color: green;}">
                                            <!--begin::Item-->
                                            <div class="timeline-item">
                                                <!--begin::Label-->
                                                <div class="timeline-label fw-bold text-gray-800 fs-6">1.</div>
                                                <!--end::Label-->

                                                <!--begin::Badge-->
                                                <div class="timeline-badge">
                                                    <i class="fa fa-genderless text-{{ $applicant->applicant_status == 1 ? 'success':'primary' }} fs-1"></i>
                                                </div>
                                                <!--end::Badge-->

                                                <!--begin::Text-->
                                                <div class="fw-mormal timeline-content {{ $applicant->applicant_status == 1 ? 'fw-bold':'text-muted' }} ps-3">
                                                    New
                                                </div>
                                                <!--end::Text-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Item-->
                                            <div class="timeline-item">
                                                <!--begin::Label-->
                                                <div class="timeline-label fw-bold text-gray-800 fs-6">2.</div>
                                                <!--end::Label-->

                                                <!--begin::Badge-->
                                                <div class="timeline-badge">
                                                    <i class="fa fa-genderless text-{{ $applicant->applicant_status == 2 ? 'success':'primary' }} fs-1"></i>
                                                </div>
                                                <!--end::Badge-->

                                                <!--begin::Content-->
                                                <div class="timeline-content d-flex">
                                                    <span class="ps-3 {{ $applicant->applicant_status == 2 ? 'fw-bold':'text-muted' }}">  Waiting for exam</span>
                                                </div>
                                                <!--end::Content-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Item-->
                                            <div class="timeline-item">
                                                <!--begin::Label-->
                                                <div class="timeline-label fw-bold text-gray-800 fs-6">3.</div>
                                                <!--end::Label-->

                                                <!--begin::Badge-->
                                                <div class="timeline-badge">
                                                    <i class="fa fa-genderless text-{{ $applicant->applicant_status == 3 ? 'success':'primary' }} fs-1"></i>
                                                </div>
                                                <!--end::Badge-->

                                                <!--begin::Desc-->
                                                <div class="ps-3 {{ $applicant->applicant_status == 3 ? 'fw-bold':'text-muted' }}">
                                                    Waiting for exam result
                                                </div>
                                                <!--end::Desc-->
                                            </div>
                                            <!--end::Item-->

                                            {{-- <!--begin::Item-->
                                            <div class="timeline-item">
                                                <!--begin::Label-->
                                                <div class="timeline-label fw-bold text-gray-800 fs-6">4.</div>
                                                <!--end::Label-->

                                                <!--begin::Badge-->
                                                <div class="timeline-badge">
                                                    <i class="fa fa-genderless text-{{ $applicant->applicant_status == 4 ? 'success':'primary' }} fs-1"></i>
                                                </div>
                                                <!--end::Badge-->

                                                <!--begin::Text-->
                                                <div class="ps-3 {{ $applicant->applicant_status == 4 ? 'fw-bold':'text-muted' }}">
                                                    Passed the Exam
                                                </div>
                                                <!--end::Text-->
                                            </div>
                                            <!--end::Item--> --}}

                                            <!--begin::Item-->
                                            <div class="timeline-item">
                                                <!--begin::Label-->
                                                <div class="timeline-label fw-bold text-gray-800 fs-6">4.</div>
                                                <!--end::Label-->

                                                <!--begin::Badge-->
                                                <div class="timeline-badge">
                                                    <i class="fa fa-genderless text-{{ $applicant->applicant_status == 5 ? 'success':'primary' }} fs-1"></i>
                                                </div>
                                                <!--end::Badge-->

                                                <!--begin::Desc-->
                                                <div class="ps-3 {{ $applicant->applicant_status == 5 ? 'fw-bold':'text-muted' }}">
                                                    Wait for meeting
                                                </div>
                                                <!--end::Desc-->
                                            </div>
                                            <!--end::Item-->

                                            <!--begin::Item-->
                                            <div class="timeline-item">
                                                <!--begin::Label-->
                                                <div class="timeline-label fw-bold text-gray-800 fs-6">5.</div>
                                                <!--end::Label-->

                                                <!--begin::Badge-->
                                                <div class="timeline-badge">
                                                    <i class="fa fa-genderless text-{{ $applicant->applicant_status == 6 ? 'success':'primary' }} fs-1"></i>
                                                </div>
                                                <!--end::Badge-->

                                                <!--begin::Text-->
                                                <div class="ps-3 {{ $applicant->applicant_status == 6 ? 'fw-bold':'text-muted' }}">
                                                    Waiting for meeting result
                                                </div>
                                                <!--end::Text-->
                                            </div>
                                            <!--end::Item-->

                                            @if ($applicant->applicant_status == 7)
                                                <!--begin::Item-->
                                                <div class="timeline-item">
                                                    <!--begin::Label-->
                                                    <div class="timeline-label fw-bold text-gray-800 fs-6">6.</div>
                                                    <!--end::Label-->

                                                    <!--begin::Badge-->
                                                    <div class="timeline-badge">
                                                        <i class="fa fa-genderless text-success fs-1"></i>
                                                    </div>
                                                    <!--end::Badge-->

                                                    <!--begin::Desc-->
                                                    <div class="timeline-content fw-bold ps-3">
                                                        Application Accepted
                                                    </div>
                                                    <!--end::Desc-->
                                                </div>
                                                <!--end::Item-->
                                            @elseif($applicant->applicant_status == 8)
                                                <!--begin::Item-->
                                                <div class="timeline-item">
                                                    <!--begin::Label-->
                                                    <div class="timeline-label fw-bold text-gray-800 fs-6">6.</div>
                                                    <!--end::Label-->

                                                    <!--begin::Badge-->
                                                    <div class="timeline-badge">
                                                        <i class="fa fa-genderless text-danger fs-1"></i>
                                                    </div>
                                                    <!--end::Badge-->

                                                    <!--begin::Desc-->
                                                    <div class="timeline-content fw-bold ps-3">
                                                        Application Rejected
                                                    </div>
                                                    <!--end::Desc-->
                                                </div>
                                                <!--end::Item-->
                                            @endif

                                        </div>
                                        <!--end::Timeline-->
                                    </div>
                                    <!--end: Card Body-->


                                      <!--begin::Footer-->
                                    <div class="card-footer">
                                        <span class="fw-bold">Status: </span>  {{$applicant->getStatusTitle();}}
                                        <br>
                                      <span class= "fw-bold">Message:</span>  {{$applicant->getStatusMessage();}}
                                    </div>
                                        <!--end::Card Footer-->
                                </div>

                                {{--  Card Application information --}}
                                    <div class="card mb-5 border-0 rounded-4 shadow-sm">
                                        <!--begin::Header-->
                                        <div class="card-header align-items-center border-0 mt-4">
                                            <h3 class="card-title align-items-start flex-column">
                                                <span class="fw-bold mb-2 text-gray-900">Application Information</span>
                                            </h3>
                                        </div>
                                        <hr class="my-3">
                                        <!--end::Header-->

                                        <!--begin::Body-->
                                        <div class="card-body">
                                            <!-- Line Separator -->

                                            <!-- Created At -->
                                            <div class="d-flex align-items-center mt-n5">
                                                <span class="fw-bold">Created At:</span>
                                                <span class="ms-2 text-end">{{ date('d-m-Y h:i:s A', strtotime($applicant->created_at)) }}</span>
                                            </div>
                                        </div>
                                        <!--end::Body-->
                                    </div>

                                {{-- End card Application information --}}

                                @can(['applicant.edit'])
                                <div class="row ms-2 mt-4 ">
                                    <a class="btn btn-primary submit_btn"
                                    href="{{ route('admin.applicant.edit', $applicant->id) }}">
                                    <i class="fa fa-edit"></i>
                                    <span class="indicator-label">Edit Information</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </a>
                                </div>
                                <form method="POST" action="{{ route('admin.applicant.transfer')}}">
                                    @csrf
                                <div class="row ms-2 mt-4 ">
                                    <input type="hidden" value="{{$applicant->id}}" name= "id"/>
                                    <button type="submit" class="btn btn-primary submit_btn"
                                   >
                                    <i class="fa fa-send"></i>
                                    <span class="indicator-label">Approve & Transfer</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </button>
                                </div>
                                </form>
                                @endcan
                                @if(env('APP_ENV') !== 'production')
                                @can(['applicant.change_status'])
                                <form data-kt-search-element="form"  autocomplete="off" method="POST" action="{{ route('admin.applicant.status.search.submit') }}">
                                    @csrf

                                    <div class="row ms-2 mt-4">
                                        <input type="hidden"
                                        name="search"
                                        value="{{ $applicant->applicant_code}}" />
                                      <button type="submit" class="btn btn-success submit_btn">
                                        <i class="fa fa-recycle"></i>
                                        <span class="indicator-label">Change Status</span>
                                        <span class="indicator-progress">Please wait...
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>

                                    </div>
                                </form>
                                @endcan
                                @endif
                                <form action="{{ route('site.exportApplicationPdf') }}" id="export_form" method="POST">
                                    @csrf

                                    <div class="row ms-2 mt-4 ">
                                        <button type="submit" class="btn btn-success submit_btn" style="background-color: #28a745;">
                                            <i class="fa fa-file-pdf"></i>
                                            <span>Export PDF</span>
                                            <span class="indicator-progress">Please wait...
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>

                                    <input type="hidden" value="{{$applicant->applicant_code}}" name="applicant_code"/>


                                    </div>
                                </form>
                                
                                <!-- line--break -->
                                <hr class="my-3">
                                @if (in_array(auth()->id(),[1, 5, 6]))
                                @can(['applicant.delete'])
                                <form method="POST" action="{{ route('admin.applicant.destroy', $applicant->id) }}" class="delete-applicant-form">
                                    @csrf
                                    @method('DELETE')
                                    <div class="row ms-2 mt-10 ">
                                        <button type="submit" class="btn btn-danger submit_btn delete-applicant-btn">
                                        <i class="fa fa-trash"></i>
                                        <span class="indicator-label">Delete</span>
                                        </button>
                                    </div>

                                </form>
                                @endcan
                                @endif


                            </div>

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

            </section>
        </div>
    </section>
    <script>
        function renderFilePreview(filePath, alt) {
            const fileExtension = filePath.split('.').pop().toLowerCase();
            let htmlContent = '';

            if (['png', 'jpg', 'jpeg', 'gif'].includes(fileExtension)) {
                htmlContent = `<img src="{{ Storage::disk('do')->temporaryUrl('${filePath}', now()->addMinutes(5)) }}"
                                alt="${alt}"
                                style="max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-top: 5px;">`;
            } else if (fileExtension === 'pdf') {
                htmlContent = `<div class="file-icon pdf-icon">PDF</div>`;
            } else if (['doc', 'docx'].includes(fileExtension)) {
                htmlContent = `<div class="file-icon word-icon">Word</div>`;
            } else {
                htmlContent = `<div class="file-icon unknown-icon">File</div>`;
            }

            return htmlContent;
        }
    </script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const deleteButtons = document.querySelectorAll('.delete-applicant-btn');
        
        deleteButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const form = this.closest('.delete-applicant-form');
                
                Swal.fire({
                    title: 'Confirm Deletion',
                    text: 'Are you sure you want to delete this applicant? This action cannot be undone.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Delete',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        const originalHtml = this.innerHTML;
                        this.innerHTML = `
                            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                            Deleting...
                        `;
                        this.disabled = true;
                        
                        form.submit();
                        
                        setTimeout(() => {
                            this.innerHTML = originalHtml;
                            this.disabled = false;
                        }, 5000);
                    }
                });
            });
        });
    });
    </script>
@endsection