@extends('layouts.master')
@section('content')
<div class="h">
@include('inc.header-nav')
<div class="mx-auto container-fluid align-items-center pt-150">
    @include('inc.header-profile')
    <div class="d-flex flex-column flex-lg-row" style="margin-bottom: 100px">
        <div class="flex-column flex-lg-row-auto w-200 w-lg-500px w-xl-600px mb-10 mb-lg-0">
            <div class="card px-0 pt-3 card-flush">
                <div class="card-header px-0" id="kt_chat_contacts_header">
                    <div class="card-title">
                        <div class="d-flex justify-content-center flex-column me-3">
                            <h3 class="px-6"> Passport Details</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body px-7 pt-5" id="kt_chat_contacts_body">
                    <div class="mb-10">
                        <form  class="row needs-validation"  method="POST" action="/me/passport" enctype="multipart/form-data" novalidate>
                            @csrf
                            @if (optional($passport)->status == 'all-good')
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Student ID Number</strong><br>
                                    <span>{{ $passport->student_school_id }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Year Level</strong><br>
                                    <span>{{ $passport->year_level }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-5">
                                    <strong>Form Type Submitting</strong><br>
                                    <span>{{ is_array($passport->form_type) ? implode(', ', $passport->form_type) : '' }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>First Name</strong><br>
                                    <span>{{ $passport->first_name }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Last Name</strong><br>
                                    <span>{{ $passport->last_name }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Nationality</strong><br>
                                    <span>{{ $countries->firstWhere('id', $passport->country_id)?->name }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Issuing Country</strong><br>
                                    <span>{{ $countries->firstWhere('id', $passport->issue_by_country_id)?->name }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Gender</strong><br>
                                    <span>{{ ucfirst($passport->gender) }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Passport No.</strong><br>
                                    <span>{{ $passport->passport_no }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Passport Expiry Date</strong><br>
                                    <span>{{ optional($passport->passport_expiry_date) ? \Carbon\Carbon::parse($passport->passport_expiry_date)->format('F d, Y') : '' }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Passport Issued Date</strong><br>
                                    <span>{{ optional($passport->passport_issued_date) ? \Carbon\Carbon::parse($passport->passport_issued_date)->format('F d, Y') : '' }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Email</strong><br>
                                    <span>{{ $passport->email }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Contact Number</strong><br>
                                    <span>{{ $passport->contact_no }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-5">
                                    <strong>Date of Birth</strong><br>
                                    <span>{{ optional($passport->date_of_birth) ? \Carbon\Carbon::parse($passport->date_of_birth)->format('F d, Y') : '' }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-5">
                                    <strong>Place of Birth</strong><br>
                                    <span>{{ $passport->place_of_birth }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-5">
                                    <strong>Place of Issue / Issuing Authority</strong><br>
                                    <span>{{ $passport->place_of_issue }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-5">
                                    <strong>Permanent Address</strong><br>
                                    <span>{{ $passport->permanent_address }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-5">
                                    <strong>Current Address</strong><br>
                                    <span>{{ $passport->current_address }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Father Name</strong><br>
                                    <span>{{ $passport->father_name }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Mother Name</strong><br>
                                    <span>{{ $passport->mother_name }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-3">
                                    <h5><strong>VISA INFORMATION</strong></h5>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Visa Category</strong><br>
                                    <span>{{ strtoupper($passport->visa_category) }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Visa Date of Expiry</strong><br>
                                    <span>{{ optional($passport->visa_date_of_expiry) ? \Carbon\Carbon::parse($passport->visa_date_of_expiry)->format('F d, Y') : '' }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>Visa Date of Issue</strong><br>
                                    <span>{{ optional($passport->visa_date_of_issue) ? \Carbon\Carbon::parse($passport->visa_date_of_issue)->format('F d, Y') : '' }}</span>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-12 pb-3">
                                    <h5><strong>ACR CARD INFORMATION</strong></h5>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>ACR Card No.</strong><br>
                                    <span>{{ $passport->acr_card_no }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>ACR Date of Issue</strong><br>
                                    <span>{{ optional($passport->acr_date_of_issue) ? \Carbon\Carbon::parse($passport->acr_date_of_issue)->format('F d, Y') : '' }}</span>
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>ACR Date of Expiry</strong><br>
                                    <span>{{ optional($passport->acr_date_of_expiry) ? \Carbon\Carbon::parse($passport->acr_date_of_expiry)->format('F d, Y') : '' }}</span>
                                </div>
                            </div>
                            
                            @if (!is_null($passport))
                            <div class="row">
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>BIO Page</strong><br>
                                    @if ($passport->bio_page)
                                    
                                    <span> 
                                        @php
                                            $bioPage = optional($passport)->bio_page;
                                            $href = '';

                                            if ($bioPage && strpos($bioPage, 'drive.google.com') !== false) {
                                                // Extract ID if format is "...id=xxxx"
                                                if (strpos($bioPage, 'id=') !== false) {
                                                    $id = explode('id=', $bioPage)[1];
                                                    $href = "https://drive.google.com/open?id={$id}";
                                                } else {
                                                    $href = $bioPage; // Use as-is if already a direct Drive link
                                                }
                                            } else {
                                                $href = optional($passport)->bio_page_url ?: '#';
                                            }
                                        @endphp

                                        <a target="_blank" href="{{ $href }}" style="display:flex">
                                            <span>View File</span>
                                        </a>
                                    </span>
                                    @else
                                        <span>N/A</span>
                                    @endif
                                </div>
                                <div class="col-12 col-md-6 pb-5">
                                    <strong>ACR Card</strong><br>
                                    @if ($passport->acr_card)
                                    <span> 
                                        @php
                                            $acr_card = optional($passport)->acr_card;
                                            $href = '';

                                            if ($acr_card && strpos($acr_card, 'drive.google.com') !== false) {
                                                // Extract ID if format is "...id=xxxx"
                                                if (strpos($acr_card, 'id=') !== false) {
                                                    $id = explode('id=', $acr_card)[1];
                                                    $href = "https://drive.google.com/open?id={$id}";
                                                } else {
                                                    $href = $acr_card; // Use as-is if already a direct Drive link
                                                }
                                            } else {
                                                $href = optional($passport)->acr_card_url ?: '#';
                                            }
                                        @endphp

                                        <a target="_blank" href="{{ $href }}" style="display:flex">
                                            <span>View File</span>
                                        </a>
                                    </span>
                                    @else
                                        <span>N/A</span>
                                    @endif
                                </div>
                            </div>
                            @endif
                            @else 
                            
                            <div class="row">
                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Student ID Number</span>
                                    </label>
                                    <input type="text" name="student_school_id" value="{{optional($passport)->student_school_id}}" class="form-control form-control-solid">
                                </div>

                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center text-asterisk fs-6 fw-semibold mb-2">
                                        <span class="required">Year Level</span>
                                    </label>
                                    <select class="form-control" required name="year_level">
                                        <option value="">Select a year level</option>
                                        <option value="BS" @if (optional($passport)->year_level == 'BS') {{'selected'}} @endif>BS</option>
                                        <option value="MD 1" @if (optional($passport)->year_level == 'MD 1') {{'selected'}} @endif>MD 1</option>
                                        <option value="MD 2" @if (optional($passport)->year_level == 'MD 2') {{'selected'}} @endif>MD 2</option>
                                        <option value="MD 3" @if (optional($passport)->year_level == 'MD 3') {{'selected'}} @endif>MD 3</option>
                                        <option value="MD 4" @if (optional($passport)->year_level == 'MD 4') {{'selected'}} @endif>MD 4</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please select year level
                                    </div>
                                </div>

                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Form Type Submitting</span>
                                    </label>
                                    @php
                                        $selectedTypes = $passport->form_type ?? [];
                                    @endphp
                                
                                    <div class="d-flex gap-4">
                                        <label class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="form_type[]" value="passport"
                                                @if (in_array('passport', $selectedTypes)) checked @endif>
                                            <span class="form-check-label">Passport</span>
                                        </label>
                                    
                                        <label class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="form_type[]" value="acr"
                                                @if (in_array('acr', $selectedTypes)) checked @endif>
                                            <span class="form-check-label">ACR</span>
                                        </label>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please select at least one form type
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">First Name</span>
                                    </label>
                                    <input type="text" name="first_name" value="{{optional($passport)->first_name}}" required class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Last Name</span>
                                    </label>
                                    <input type="text" name="last_name" value="{{optional($passport)->last_name}}" required class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Nationality</span>
                                    </label>
                                    <select class="form-control" required name="country_id">
                                        <option value="">Select nationality</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}" 
                                                @if (optional($passport)->country_id == $country->id) selected @endif>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        Please select nationality
                                    </div>
                                </div>
                            </div>

                            
                            <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                    <span class="required">Issuing Country</span>
                                </label>
                                <select class="form-control" required name="issue_by_country_id">
                                    <option value="">Select nationality</option>
                                    @foreach ($countries as $country)
                                        <option value="{{ $country->id }}" 
                                            @if (optional($passport)->country_id == $country->id) selected @endif>
                                            {{ $country->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    Please select nationality
                                </div>
                            </div>

                            
                            <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                    <span class="required">Gender</span>
                                </label>
                                <div class="d-flex gap-4">
                                    <label class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" value="male" 
                                            @if (optional($passport)->gender == 'male') checked @endif required>
                                        <span class="form-check-label">Male</span>
                                    </label>
                                    <label class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" value="female" 
                                            @if (optional($passport)->gender == 'female') checked @endif required>
                                        <span class="form-check-label">Female</span>
                                    </label>
                                </div>
                                <div class="invalid-feedback">
                                    Please select gender
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Passport No.</span>
                                    </label>
                                    <input type="text" name="passport_no" value="{{optional($passport)->passport_no}}"  required class="form-control required form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Passport Date Expiry</span>
                                    </label>
                                    <input type="date" name="passport_expiry_date" required value="{{$passport && $passport->passport_expiry_date ?  date('Y-m-d', strtotime(optional($passport)->passport_expiry_date)): ''}}"  class="form-control form-control-solid">
                                </div>
                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Passport Date of Issue</span>
                                    </label>
                                    <input type="date" name="passport_issued_date" required value="{{$passport && $passport->passport_issued_date ?  date('Y-m-d', strtotime(optional($passport)->passport_issued_date)) : ''}}"  class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 col-lg-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Email</span>
                                    </label>
                                    <input type="text" name="email" value="{{$passport && $passport->email ? $passport->email : ''}}" required class="form-control form-control-solid">
                                </div>

                                <div class="col-12 col-md-12 col-lg-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Contact Number</span>
                                    </label>
                                    <input type="text" name="contact_no" value="{{$passport && $passport->contact_no ? $passport->contact_no : ''}}" required class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Date of Birth</span>
                                    </label>
                                    <input type="date" name="date_of_birth" required value="{{$passport && $passport->date_of_birth ?  date('Y-m-d', strtotime(optional($passport)->date_of_birth)): ''}}"  class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12  d-flex flex-column mb-4 fv-row fv-plugins-icon-container">
                                    <div class="d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                            <span class="required">Place Of Birth</span>
                                        </label>
                                        <input type="text" name="place_of_birth" required value="{{optional($passport)->place_of_birth}}"  class="form-control form-control-solid">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12  d-flex flex-column mb-4 fv-row fv-plugins-icon-container">
                                    <div class="d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                            <span class="required">Place of Issue / Issuing Authority</span>
                                        </label>
                                        <input type="text" name="place_of_issue" required value="{{optional($passport)->place_of_issue}}" class="form-control form-control-solid">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12  d-flex flex-column mb-4 fv-row fv-plugins-icon-container">
                                    <div class="d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                            <span  class="required">Permanent Address</span>
                                        </label>
                                        <input type="text" name="permanent_address" required value="{{optional($passport)->permanent_address}}"  class="form-control form-control-solid">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12  d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <div class="d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                            <span class="required">Current Address</span>
                                        </label>
                                        <input type="text" name="current_address" required  value="{{optional($passport)->current_address}}"  class="form-control form-control-solid">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span  class="required">Father Name</span>
                                    </label>
                                    <input type="text" name="father_name" required value="{{optional($passport)->father_name}}" required class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Mother Name</span>
                                    </label>
                                    <input type="text" name="mother_name" required value="{{optional($passport)->mother_name}}" required class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <h5 class="mb-4 pt-5"><strong>VISA INFORMATION</strong></h5>
        
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Visa Category</span>
                                    </label>
                                    <select name="visa_category" class="form-control" required>
                                        <option value="">Select visa category</option>
                                        <option value="9A" @if (optional($passport)->visa_category  === '9a') {{'selected'}} @endif>
                                            9A
                                        </option>
                                        <option value="9F" @if (optional($passport)->visa_category  === '9f') {{'selected'}} @endif>
                                            9F
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Date Expiry</span>
                                    </label>
                                    <input type="date" name="visa_date_of_expiry" required value="{{$passport && $passport->visa_date_of_expiry ?  date('Y-m-d', strtotime(optional($passport)->visa_date_of_expiry)): ''}}"  class="form-control form-control-solid">
                                </div>
                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span class="required">Date of Issue</span>
                                    </label>
                                    <input type="date" name="visa_date_of_issue" required value="{{$passport && $passport->visa_date_of_issue ?  date('Y-m-d', strtotime(optional($passport)->visa_date_of_issue)) : ''}}"  class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <h5 class="mb-4 pt-5"><strong>ACR CARD INFORMATION</strong></h5>
                                    <div class="d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                            <span>ACR Card No</span>
                                        </label>
                                        <input type="text" name="acr_card_no"  value="{{optional($passport)->acr_card_no}}" class="form-control form-control-solid">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-6  d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span>Date of Issue</span>
                                    </label>
                                    <input type="date" name="acr_date_of_issue" value="{{ $passport && $passport->acr_date_of_issue ?  date('Y-m-d', strtotime(optional($passport)->acr_date_of_issue)) : '' }}" class="form-control form-control-solid">
                                </div>
        
                                <div class="col-12 col-md-6 d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span>Date of Expiry</span>
                                    </label>
                                    <input type="date" name="acr_date_of_expiry"  value="{{ $passport && $passport->acr_date_of_expiry ? date('Y-m-d', strtotime(optional($passport)->acr_date_of_expiry)) : ''}}"  class="form-control form-control-solid">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12  d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span>BIO Page</span>
                                    </label>
                                    <input type="file" class="form-control" name="bio_page" accept="image/jpeg,image/png,application/pdf">
                                    @if (!empty(optional($passport)->bio_page))
                                    <div class="col-12 col-md-12 pb-5">
                                        <span> 
                                            @php
                                                $bioPage = optional($passport)->bio_page;
                                                $href = '';

                                                if ($bioPage && strpos($bioPage, 'drive.google.com') !== false) {
                                                    // Extract ID if format is "...id=xxxx"
                                                    if (strpos($bioPage, 'id=') !== false) {
                                                        $id = explode('id=', $bioPage)[1];
                                                        $href = "https://drive.google.com/open?id={$id}";
                                                    } else {
                                                        $href = $bioPage; // Use as-is if already a direct Drive link
                                                    }
                                                } else {
                                                    $href = optional($passport)->bio_page_url ?: '#';
                                                }
                                            @endphp

                                            <a target="_blank" href="{{ $href }}" style="display:flex">
                                                <span>View File</span>
                                                <span class="svg-icon svg-icon-success svg-icon-2hx">
                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path opacity="0.3" d="M19 15C20.7 15 22 13.7 22 12C22 10.3 20.7 9 19 9C18.9 9 18.9 9 18.8 9C18.9 8.7 19 8.3 19 8C19 6.3 17.7 5 16 5C15.4 5 14.8 5.2 14.3 5.5C13.4 4 11.8 3 10 3C7.2 3 5 5.2 5 8C5 8.3 5 8.7 5.1 9H5C3.3 9 2 10.3 2 12C2 13.7 3.3 15 5 15H19Z" fill="currentColor"/>
                                                    <path d="M13 17.4V12C13 11.4 12.6 11 12 11C11.4 11 11 11.4 11 12V17.4H13Z" fill="currentColor"/>
                                                    <path opacity="0.3" d="M8 17.4H16L12.7 20.7C12.3 21.1 11.7 21.1 11.3 20.7L8 17.4Z" fill="currentColor"/>
                                                    </svg>
                                                </span>
                                            </a>
                                        </span>
                                    </div>
                                    @endif
                                </div>
        
                                <div class="col-12 col-md-12  d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                                        <span>ACR Card</span>
                                    </label>
                                    <input type="file" class="form-control" name="acr_card" accept="image/jpeg,image/png,application/pdf">
                                    @if (!empty(optional($passport)->acr_card))
                                        <div class="col-12 col-md-12 pb-5">
                                            <span> 
                                                @php
                                                    $acr_card = optional($passport)->acr_card;
                                                    $href = '';
    
                                                    if ($acr_card && strpos($acr_card, 'drive.google.com') !== false) {
                                                        // Extract ID if format is "...id=xxxx"
                                                        if (strpos($acr_card, 'id=') !== false) {
                                                            $id = explode('id=', $acr_card)[1];
                                                            $href = "https://drive.google.com/open?id={$id}";
                                                        } else {
                                                            $href = $acr_card; // Use as-is if already a direct Drive link
                                                        }
                                                    } else {
                                                        $href = optional($passport)->acr_card_url ?: '#';
                                                    }
                                                @endphp
    
                                                <a target="_blank" href="{{ $href }}" style="display:flex">
                                                    <span>View File</span>
                                                    <span class="svg-icon svg-icon-success svg-icon-2hx">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path opacity="0.3" d="M19 15C20.7 15 22 13.7 22 12C22 10.3 20.7 9 19 9C18.9 9 18.9 9 18.8 9C18.9 8.7 19 8.3 19 8C19 6.3 17.7 5 16 5C15.4 5 14.8 5.2 14.3 5.5C13.4 4 11.8 3 10 3C7.2 3 5 5.2 5 8C5 8.3 5 8.7 5.1 9H5C3.3 9 2 10.3 2 12C2 13.7 3.3 15 5 15H19Z" fill="currentColor"/>
                                                        <path d="M13 17.4V12C13 11.4 12.6 11 12 11C11.4 11 11 11.4 11 12V17.4H13Z" fill="currentColor"/>
                                                        <path opacity="0.3" d="M8 17.4H16L12.7 20.7C12.3 21.1 11.7 21.1 11.3 20.7L8 17.4Z" fill="currentColor"/>
                                                        </svg>
                                                    </span>
                                                </a>
                                            </span>
                                        </div>
                                    @endif
                                </div>

                                <div class="col-12 pb-5">
                                    <div class="form-check">
                                        <input 
                                            class="form-check-input" 
                                            type="checkbox" 
                                            id="privacyConsent"
                                            required
                                        >
                                        <label class="form-check-label" for="privacyConsent">
                                            By clicking "Agree", you acknowledge that you have read and understood this privacy notice and consent to, and are aware of, the data collection, sharing, confidentiality, and data security, retention and disposal policies the college has in place to protect your personal data in compliance with Republic Act No. 10173, otherwise known as the Data Privacy Act of 2012, and the Implementing Rules and Regulations of the National Privacy Commission.
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-12  d-flex flex-column mb-5 fv-row fv-plugins-icon-container">
                                    <div class="d-flex flex-stack pt-15">
                                        <div class="mr-2">
                                        </div>
                                        <div>
                                            <button type="submit" class="btn btn-sm btn-success" >
                                                <span >
                                                    Submit
                                                    <i class="ki-duotone ki-arrow-right fs-4 ms-1">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                    </i>
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-lg-row-fluid ms-lg-7 ms-xl-10">
            <div class="card px-0 pt-3" id="kt_chat_messenger">
                <div class="card-header  border-0 px-0" id="kt_chat_messenger_header">
                    <div class="card-title">
                        <div class="d-flex px-6 justify-content-center flex-column me-3">
                            <span class="card-label fw-bolder mb-1">Passport Requests</span>
                            <span class="text-muted mt-1 fw-bold ">List of passport requests</span>
                        </div>
                    </div>
                    <div class="p-d-flex p-jc-between px-6 pt-5">
                        @if (optional($passport)->status == 'approved')
                        <button class="btn btn-sm btn-success group-text2 me-5" @click="createPassportRequestModal()">
                            Create New Request
                        </button>
                        @endif
                    </div>

                </div>

                <div class="card-body px-7" id="kt_chat_messenger_body">
                    <div class="mb-10 table-responsive">
                        <table class="table align-middle table-row-dashed table-row-bordered  gs-0 gy-4 mb-10"> 
                            <thead>
                                <tr class="fw-bold text-muted bg-light">
                                    <th class="ps-4 rounded-start">Unique ID</th>
                                    <th class="ps-4">Created At</th>
                                    <th class="ps-4">Requesting For</th>
                                    <th class="ps-4">Reason</th>
                                    <th class="ps-4">Explaination</th>
                                    <th class="ps-4">Return Date</th>
                                    <th class="ps-4">Attachments</th>
                                    <th class="ps-4">Status</th>
                                    <th class="ps-4 rounded-end"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($passports as $pass)
                                <tr>
                                    <td class="ps-3">{{$pass->unique_id}}</td>
                                    <td>{{$pass->created_at}}</td>
                                    <td>{{ ucwords(implode(', ', $pass->form_type)) }}</td>
                                    <td>{{ ucwords(implode(' ', explode('_', $pass->reason)))}}</td>
                                    <td>{{$pass->notes}}</td>
                                    <td>{{$pass->passport_return_date}}</td>
                                    <td>
                                            @foreach($pass->attachments as $index => $att) 
                                                <a href="{{ $pass->attachment_urls[$index] ?? '#' }}"  target="_blank">View File</a>
                                            @endforeach
                                    </td>
                                    <td>
                                        @if ($pass->status == 'pending')<span class="badge badge-info">Pending</span>@endif
                                        @if ($pass->status == 'approved')<span class="badge badge-success">Approved</span>@endif
                                        @if ($pass->status == 'disapproved')<span class="badge badge-danger">Dis Approved</span>@endif
                                        <p> {{$pass->status_notes}}</p>

                                    </td>

                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
@if (is_null($passport)) 
<div class="modal fade" tabindex="-1" id="passport_prompt_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Passport Required</h3> <!-- Updated title -->

                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <i class="ki-duotone ki-cross fs-1">
                        <span class="path1"></span><span class="path2"></span>
                    </i>
                </div>
                <!--end::Close-->
            </div>
            <form class="row g-3 needs-validation" method="POST" action="/me/passport/create" enctype="multipart/form-data" novalidate>
                @csrf
                <div class="modal-body px-8">
                    <p class="fs-6 fw-normal text-gray-700">
                        Your passport record is missing or expired. To continue, please update your passport details or confirm to proceed anyway.
                    </p> <!-- New message -->
                </div>
                <div class="modal-footer pe-9">
                    <div class="d-flex flex-stack">
                        <div>
                            <button type="submit" class="btn btn-sm btn-success">
                                <span>Continue
                                    <i class="ki-duotone ki-arrow-right fs-4 ms-1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@include('modals.passport-request-modal')
@endsection
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var myModal = new bootstrap.Modal(document.getElementById('passport_prompt_modal'));
        myModal.show();
    });

    document.querySelector('form').addEventListener('submit', function (e) {
        const checkboxes = document.querySelectorAll('input[name="form_type[]"]');
        const isChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
        const invalidFeedback = document.querySelector('.invalid-feedback');
    
        if (!isChecked) {
            e.preventDefault(); // Prevent form submission
            invalidFeedback.style.display = 'block';
            checkboxes.forEach(checkbox => checkbox.classList.add('is-invalid'));
        } else {
            invalidFeedback.style.display = 'none';
            checkboxes.forEach(checkbox => checkbox.classList.remove('is-invalid'));
        }
    });
</script>    
@endpush