@include('admin.header')

<style>
.card {
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 20px;
}
.card-header h5 {
    margin: 0;
}
.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}
.bg-approved { background: #d1fae5; color: #065f46; }
.bg-rejected { background: #fee2e2; color: #991b1b; }
.bg-pending { background: #fed7aa; color: #92400e; }
.bg-under_review { background: #dbeafe; color: #1e40af; }
.btn-sm {
    padding: 5px 12px;
    margin-right: 5px;
}
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.loading-spinner {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}
.spinner-border {
    width: 40px;
    height: 40px;
}
.doctor-info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.clinic-card {
    border-left: 4px solid #667eea;
}
.upload-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f9fafb;
}
.upload-area:hover {
    border-color: #007bff;
    background: #f8f9fa;
}
.file-preview {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #f1f1f1;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px;
}
.file-preview img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}
.file-list {
    margin-top: 15px;
}

.timeline {
    position: relative;
    padding-left: 20px;
}
.timeline:before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}
.timeline-item {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.timeline-item:last-child {
    border-bottom: none;
}
.timeline-dot {
    position: absolute;
    left: -17px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.timeline-dot-approved { background: #10b981; box-shadow: 0 0 0 2px #d1fae5; }
.timeline-dot-rejected { background: #ef4444; box-shadow: 0 0 0 2px #fee2e2; }
.timeline-dot-pending { background: #f59e0b; box-shadow: 0 0 0 2px #fed7aa; }
.timeline-dot-under_review { background: #3b82f6; box-shadow: 0 0 0 2px #dbeafe; }
</style>

<div class="main-wrapper">
    @include('admin.topbar')
    @include('admin.leftbar')

    <div class="page-wrapper">
        <div class="content">
            <div class="container-fluid py-4">

                @php
                    $doc = $doctor_documents ?? null;
                    $identityFiles = [];
                    if ($doc && $doc->identity_document_file) {
                        $identityFiles = json_decode($doc->identity_document_file, true);
                        if (!is_array($identityFiles)) $identityFiles = [];
                    }
                    
                    $registrationFile = null;
                    if ($doc && $doc->registration_certificate_file) {
                        $regFile = json_decode($doc->registration_certificate_file, true);
                        $registrationFile = is_array($regFile) && isset($regFile[0]['file']) ? $regFile[0]['file'] : null;
                    }
                    
                    $specializationFile = null;
                    if ($doc && $doc->specialization_certificate_file) {
                        $specFile = json_decode($doc->specialization_certificate_file, true);
                        $specializationFile = is_array($specFile) && isset($specFile[0]['file']) ? $specFile[0]['file'] : null;
                    }
                    
                    // Get selected medical degrees as array
                    $selectedDegrees = [];
                    if ($doc && $doc->medical_degree_id) {
                        $selectedDegrees = explode(',', $doc->medical_degree_id);
                    }
                    
                    $vs = $verification_status['verificationStatus'] ?? null;
                @endphp

                <!-- Header -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h4 class="mb-0">Doctor Document Verification</h4>
                                        <p class="text-muted mb-0">Manage and verify doctor documents</p>
                                    </div>
                                    <div>
                                        <button class="btn btn-outline-secondary btn-sm me-2" onclick="location.reload()">
                                            <i class="ti ti-refresh"></i> Refresh
                                        </button>
                                        <button type="button" class="btn btn-primary btn-sm" onclick="saveAllDocuments()">
                                            <i class="ti ti-device-floppy"></i> Save All Changes
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Doctor Information Card -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card doctor-info-card">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                <i class="ti ti-user fs-1"></i>
                                            </div>
                                            <div>
                                                <h4 class="mb-1">{{ $doctor_name ?? 'N/A' }}</h4>
                                                <p class="mb-0">
                                                    <i class="ti ti-mail"></i> {{ $doctor_email ?? 'N/A' }} &nbsp;|&nbsp;
                                                    <i class="ti ti-phone"></i> {{ $doctor_phone ?? 'N/A' }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-md-end">
                                        <span class="badge bg-light text-dark">
                                            <i class="ti ti-id"></i> Doctor ID: {{ request('doctor_id') ?? 'N/A' }}
                                        </span>
                                        <br>
                                        <span class="badge bg-light text-dark mt-1">
                                            <i class="ti ti-user-check"></i> User ID: {{ request('doctor_user_id') ?? 'N/A' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Clinic Information -->
                @if(!empty($clinic_info) && count($clinic_info) > 0)
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="ti ti-building-hospital"></i> Associated Clinics</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @foreach($clinic_info as $clinic)
                                    <div class="col-md-6 mb-3">
                                        <div class="p-3 border rounded clinic-card">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="mb-1">{{ $clinic['name'] }}</h6>
                                                    <small class="text-muted">
                                                        <i class="ti ti-map-pin"></i> {{ $clinic['address'] }}
                                                        @if(!empty($clinic['city'])), {{ $clinic['city'] }}@endif
                                                    </small>
                                                    @if(!empty($clinic['phone']))
                                                    <br><small><i class="ti ti-phone"></i> {{ $clinic['phone'] }}</small>
                                                    @endif
                                                </div>
                                                <span class="badge {{ $clinic['status'] == 'active' ? 'bg-success' : 'bg-secondary' }}">
                                                    {{ ucfirst($clinic['status']) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div class="row">
                    <!-- Left Column - Document Forms -->
                    <div class="col-lg-8">
                        <!-- Identity Document -->
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0"><i class="ti ti-id"></i> Identity Verification</h5>
                                    <span class="status-badge bg-{{ $doc->identity_status ?? 'pending' }}" id="identityStatusBadge">
                                        {{ ucfirst($doc->identity_status ?? 'Pending') }}
                                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <form id="identityForm" class="document-form" data-doc-type="identity">
                                    @csrf
                                    <input type="hidden" name="doctor_id" value="{{ request('doctor_id') }}">
                                    <input type="hidden" name="doctor_user_id" value="{{ request('doctor_user_id') }}">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">ID Type</label>
                                            <select class="form-control" name="identity_document_type">
                                                <option value="">Select</option>
                                                <option value="aadhaar_card" {{ ($doc->identity_document_type ?? '')=='aadhaar_card'?'selected':'' }}>Aadhaar Card</option>
                                                <option value="pan_card" {{ ($doc->identity_document_type ?? '')=='pan_card'?'selected':'' }}>PAN Card</option>
                                                <option value="passport" {{ ($doc->identity_document_type ?? '')=='passport'?'selected':'' }}>Passport</option>
                                                <option value="driving_license" {{ ($doc->identity_document_type ?? '')=='driving_license'?'selected':'' }}>Driving License</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">ID Number</label>
                                            <input type="text" class="form-control" name="identity_document_number" value="{{ $doc->identity_document_number ?? '' }}">
                                        </div>
                                    </div>
                                    
                                    <!-- File Upload Section -->
                                    <div class="mb-3">
                                        <label class="form-label">Identity Documents (Front & Back)</label>
                                        <div class="upload-area" onclick="$('#identityInput').click()">
                                            <i class="ti ti-cloud-upload fs-1"></i>
                                            <p class="mb-0">Click to upload files</p>
                                            <small class="text-muted">Max 2 files, up to 5MB each (JPG, PNG, PDF)</small>
                                            <input type="file" id="identityInput" class="d-none" accept="image/*,application/pdf" multiple>
                                        </div>
                                        <div id="identityPreview" class="file-list">
                                            @foreach($identityFiles as $key => $file)
                                            <div class="file-preview" data-file="{{ $file['file'] }}">
                                                @if(pathinfo($file['file'], PATHINFO_EXTENSION) == 'pdf')
                                                <i class="ti ti-file-pdf fs-2 text-danger"></i>
                                                @else
                                                <img src="{{ $file['file'] }}">
                                                @endif
                                                <span>Document {{ $key+1 }}</span>
                                                <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="deleteFile('identity', '{{ $file['file'] }}')">
                                                    <i class="ti ti-trash"></i>
                                                </button>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    
                                    @if($doc && $doc->identity_rejection_reason)
                                    <div class="alert alert-danger alert-sm">
                                        <strong>Rejection Reason:</strong> {{ $doc->identity_rejection_reason }}
                                    </div>
                                    @endif
                                    <div class="mt-3">
                                        <button type="button" class="btn btn-success btn-sm" onclick="updateStatus('identity', 'approved')">
                                            <i class="ti ti-check"></i> Approve
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm" onclick="showRejectModal('identity')">
                                            <i class="ti ti-x"></i> Reject
                                        </button>
                                        <button type="button" class="btn btn-warning btn-sm" onclick="updateStatus('identity', 'under_review')">
                                            <i class="ti ti-clock"></i> Under Review
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Medical Registration -->
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0"><i class="ti ti-file-invoice"></i> Medical Registration</h5>
                                    <span class="status-badge bg-{{ $doc->registration_verification_status ?? 'pending' }}" id="registrationStatusBadge">
                                        {{ ucfirst($doc->registration_verification_status ?? 'Pending') }}
                                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <form id="registrationForm" class="document-form" data-doc-type="registration">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Registration Number</label>
                                            <input type="text" class="form-control" name="registration_number" value="{{ $doc->registration_number ?? '' }}">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Registration Year</label>
                                            <select class="form-control" name="registration_year">
                                                <option value="">Select</option>
                                                @for($y = date('Y'); $y >= date('Y')-50; $y--)
                                                <option value="{{ $y }}" {{ ($doc->registration_year ?? '') == $y ? 'selected' : '' }}>{{ $y }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">License Expiry Date</label>
                                            <input type="date" class="form-control" name="license_expiry_date" value="{{ $doc->license_expiry_date ?? '' }}">
                                        </div>
                                        <div class="col-md-6 mb-3">
    <label class="form-label">State Medical Council</label>
    <select class="form-control" name="state_medical_council_id">
        <option value="">Select Medical Council</option>
        @foreach($medical_councils as $council)
        <option value="{{ $council->id }}" {{ ($doc->state_medical_council_id ?? '') == $council->id ? 'selected' : '' }}>
            {{ $council->name }} @if($council->state_ut) - {{ $council->state_ut }} @endif
        </option>
        @endforeach
    </select>
</div>
                                    </div>
                                    
                                    <!-- Registration Certificate Upload -->
                                    <div class="mb-3">
                                        <label class="form-label">Registration Certificate</label>
                                        <div class="upload-area" onclick="$('#registrationInput').click()">
                                            <i class="ti ti-cloud-upload fs-1"></i>
                                            <p class="mb-0">Click to upload certificate</p>
                                            <small class="text-muted">JPG, PNG, PDF (Max 5MB)</small>
                                            <input type="file" id="registrationInput" class="d-none" accept="image/*,application/pdf" name="medical_registration_certificate">
                                        </div>
                                        @if($registrationFile)
                                        <div class="file-preview mt-2" data-file="{{ $registrationFile }}">
                                            @if(pathinfo($registrationFile, PATHINFO_EXTENSION) == 'pdf')
                                            <i class="ti ti-file-pdf fs-2 text-danger"></i>
                                            @else
                                            <img src="{{ $registrationFile }}">
                                            @endif
                                            <span>Registration Certificate</span>
                                            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="deleteFile('medical', '{{ $registrationFile }}')">
                                                <i class="ti ti-trash"></i>
                                            </button>
                                        </div>
                                        @endif
                                    </div>
                                    
                                    @if($doc && $doc->registration_rejection_reason)
                                    <div class="alert alert-danger alert-sm">
                                        <strong>Rejection Reason:</strong> {{ $doc->registration_rejection_reason }}
                                    </div>
                                    @endif
                                    <div class="mt-3">
                                        <button type="button" class="btn btn-success btn-sm" onclick="updateStatus('registration', 'approved')">
                                            <i class="ti ti-check"></i> Approve
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm" onclick="showRejectModal('registration')">
                                            <i class="ti ti-x"></i> Reject
                                        </button>
                                        <button type="button" class="btn btn-warning btn-sm" onclick="updateStatus('registration', 'under_review')">
                                            <i class="ti ti-clock"></i> Under Review
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Qualification -->
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0"><i class="ti ti-graduation-cap"></i> Qualification Certificate</h5>
                                    <span class="status-badge bg-{{ $doc->qualification_status ?? 'pending' }}" id="qualificationStatusBadge">
                                        {{ ucfirst($doc->qualification_status ?? 'Pending') }}
                                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <form id="qualificationForm" class="document-form" data-doc-type="qualification">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Medical Degree (Multiple Select)</label>
                                            <select class="form-control" name="medical_degree_id[]" multiple size="4">
                                                <option value="">Select Degrees</option>
                                                @foreach($degree_list as $degree)
                                                <option value="{{$degree->id}}" {{ in_array($degree->id, $selectedDegrees) ? 'selected' : '' }}>
                                                    {{$degree->name}}
                                                </option>
                                                @endforeach
                                            </select>
                                            <small class="text-muted">Hold Ctrl/Cmd to select multiple degrees</small>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Specialization</label>
                                            <input type="text" class="form-control" name="specialization_text" value="{{ $doc->specialization_text ?? '' }}" placeholder="Enter specialization">
                                            <input type="hidden" name="specialization_id" value="{{ $doc->specialization_id ?? '' }}">
                                        </div>
                                    </div>
                                    
                                    <!-- Degree Certificate Upload -->
                                    <div class="mb-3">
                                        <label class="form-label">Degree Certificate</label>
                                        <div class="upload-area" onclick="$('#degreeInput').click()">
                                            <i class="ti ti-cloud-upload fs-1"></i>
                                            <p class="mb-0">Click to upload certificate</p>
                                            <small class="text-muted">JPG, PNG, PDF (Max 5MB)</small>
                                            <input type="file" id="degreeInput" class="d-none" accept="image/*,application/pdf" name="specialization_certificate_file">
                                        </div>
                                        @if($specializationFile)
                                        <div class="file-preview mt-2" data-file="{{ $specializationFile }}">
                                            @if(pathinfo($specializationFile, PATHINFO_EXTENSION) == 'pdf')
                                            <i class="ti ti-file-pdf fs-2 text-danger"></i>
                                            @else
                                            <img src="{{ $specializationFile }}">
                                            @endif
                                            <span>Degree Certificate</span>
                                            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="deleteFile('specialization', '{{ $specializationFile }}')">
                                                <i class="ti ti-trash"></i>
                                            </button>
                                        </div>
                                        @endif
                                    </div>
                                    
                                    @if($doc && $doc->qualification_rejection_reason)
                                    <div class="alert alert-danger alert-sm">
                                        <strong>Rejection Reason:</strong> {{ $doc->qualification_rejection_reason }}
                                    </div>
                                    @endif
                                    <div class="mt-3">
                                        <button type="button" class="btn btn-success btn-sm" onclick="updateStatus('qualification', 'approved')">
                                            <i class="ti ti-check"></i> Approve
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm" onclick="showRejectModal('qualification')">
                                            <i class="ti ti-x"></i> Reject
                                        </button>
                                        <button type="button" class="btn btn-warning btn-sm" onclick="updateStatus('qualification', 'under_review')">
                                            <i class="ti ti-clock"></i> Under Review
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column - Status Overview -->
                   <!-- Right Column - Status Overview -->
<div class="col-lg-4">
    @if($vs && $vs['overall_status'] == 'approved' && !$vs['is_live'])
    <div class="card mb-4 bg-success text-white">
        <div class="card-body text-center">
            <i class="ti ti-crown fs-1"></i>
            <h5 class="mt-2">Ready for Final Approval</h5>
            <p>All documents have been approved</p>
            <button class="btn btn-light" onclick="finalApproval()">
                <i class="ti ti-check-circle"></i> Make Doctor Live
            </button>
        </div>
    </div>
    @endif

    <!-- Status Overview Card -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="ti ti-chart-bar"></i> Verification Overview</h5>
        </div>
        <div class="card-body">
            @if($vs && !empty($vs['documents']))
                <div class="text-center mb-4 p-3 bg-light rounded">
                    <h3 class="mb-0 {{ $vs['overall_status'] == 'approved' ? 'text-success' : ($vs['overall_status'] == 'rejected' ? 'text-danger' : 'text-warning') }}">
                        {{ ucfirst($vs['overall_status']) }}
                    </h3>
                    <small>{{ $vs['approved_count'] }} Approved | {{ $vs['rejected_count'] }} Rejected</small>
                    @if($vs['is_live'] ?? false)
                    <div class="mt-2">
                        <span class="badge bg-success">✓ Doctor is Live</span>
                    </div>
                    @endif
                </div>
                
                @foreach($vs['documents'] as $document)
                <div class="mb-3 p-2 border rounded">
                    <div class="d-flex justify-content-between mb-1">
                        <strong>{{ $document['title'] }}</strong>
                        <span class="badge bg-{{ $document['raw_status'] == 'approved' ? 'success' : ($document['raw_status'] == 'rejected' ? 'danger' : 'warning') }}">
                            {{ $document['status'] }}
                        </span>
                    </div>
                    @if($document['rejection_reason'])
                    <small class="text-danger">{{ $document['rejection_reason'] }}</small>
                    @endif
                    
                    <!-- Timeline for this document -->
                    @if(!empty($document['timeline']))
                    <div class="mt-2 pt-2 border-top">
                        <small class="text-muted">History:</small>
                        <div class="small mt-1">
                            @foreach($document['timeline'] as $timeline)
                            <div class="d-flex justify-content-between mb-1">
                                <span>{{ $timeline['title'] }}</span>
                                <span class="text-muted" style="font-size: 10px;">{{ $timeline['date'] }}</span>
                            </div>
                            @if($timeline['message'])
                            <div class="text-muted mb-1" style="font-size: 10px;">{{ $timeline['message'] }}</div>
                            @endif
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
                @endforeach
            @else
                <p class="text-center text-muted">No documents uploaded yet</p>
            @endif
        </div>
    </div>

    <!-- Complete History Timeline Card -->
    @if($vs && !empty($vs['all_history']) && count($vs['all_history']) > 0)
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="ti ti-history"></i> Complete History Timeline</h5>
        </div>
        <div class="card-body" style="max-height: 400px; overflow-y: auto;">
            <div class="timeline">
                @foreach($vs['all_history'] as $historyItem)
                <div class="timeline-item mb-3">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <strong>{{ ucfirst(str_replace('_', ' ', $historyItem->document_type)) }}</strong>
                            <span class="badge bg-{{ $historyItem->status == 'approved' ? 'success' : ($historyItem->status == 'rejected' ? 'danger' : 'warning') }} ms-2">
                                {{ ucfirst($historyItem->status) }}
                            </span>
                            <div class="small text-muted mt-1">
                                {{ \Carbon\Carbon::parse($historyItem->created_at)->format('d M Y, h:i A') }}
                            </div>
                            @if($historyItem->message)
                            <div class="small mt-1">{{ $historyItem->message }}</div>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</div>
                </div>
            </div>
        </div>
        @include('admin.footer')
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="rejectDocType">
                <div class="mb-3">
                    <label class="form-label">Rejection Reason <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="rejectionReason" rows="3" required></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="submitRejection()">Reject</button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="loading-spinner">
        <div class="spinner-border text-primary"></div>
        <p class="mt-2 mb-0">Processing...</p>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
const baseUrl = '{{ url("") }}';
let currentDocType = null;
let pendingIdentityFiles = [];
let pendingRegistrationFile = null;
let pendingDegreeFile = null;

function showLoading() {
    $('.loading-overlay').fadeIn();
}

function hideLoading() {
    $('.loading-overlay').fadeOut();
}

// Handle Identity Files Upload
document.getElementById('identityInput')?.addEventListener('change', function(e) {
    const files = Array.from(e.target.files);
    const existingCount = document.querySelectorAll('#identityPreview .file-preview').length;
    
    if (existingCount + pendingIdentityFiles.length + files.length > 2) {
        toastr.error('Maximum 2 identity documents allowed');
        this.value = '';
        return;
    }
    
    files.forEach(file => {
        if (file.size > 5 * 1024 * 1024) {
            toastr.error('File size must be less than 5MB');
            return;
        }
        pendingIdentityFiles.push(file);
        const reader = new FileReader();
        reader.onload = function(ev) {
            const div = document.createElement('div');
            div.className = 'file-preview';
            const isPdf = file.type === 'application/pdf';
            div.innerHTML = `
                ${isPdf ? '<i class="ti ti-file-pdf fs-2 text-danger"></i>' : `<img src="${ev.target.result}">`}
                <span>New Upload</span>
                <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="this.parentElement.remove(); pendingIdentityFiles = pendingIdentityFiles.filter(f => f !== file)">
                    <i class="ti ti-trash"></i>
                </button>
            `;
            document.getElementById('identityPreview').appendChild(div);
        };
        reader.readAsDataURL(file);
    });
    this.value = '';
});

// Handle Registration File Upload
document.getElementById('registrationInput')?.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    
    if (file.size > 5 * 1024 * 1024) {
        toastr.error('File size must be less than 5MB');
        this.value = '';
        return;
    }
    
    pendingRegistrationFile = file;
    const reader = new FileReader();
    reader.onload = function(ev) {
        const container = document.getElementById('registrationUploadArea');
        const existingPreview = container.querySelector('.file-preview');
        if (existingPreview) existingPreview.remove();
        
        const div = document.createElement('div');
        div.className = 'file-preview mt-2';
        const isPdf = file.type === 'application/pdf';
        div.innerHTML = `
            ${isPdf ? '<i class="ti ti-file-pdf fs-2 text-danger"></i>' : `<img src="${ev.target.result}">`}
            <span>New Upload</span>
            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="this.parentElement.remove(); pendingRegistrationFile = null">
                <i class="ti ti-trash"></i>
            </button>
        `;
        container.appendChild(div);
    };
    reader.readAsDataURL(file);
    this.value = '';
});

// Handle Degree File Upload
document.getElementById('degreeInput')?.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    
    if (file.size > 5 * 1024 * 1024) {
        toastr.error('File size must be less than 5MB');
        this.value = '';
        return;
    }
    
    pendingDegreeFile = file;
    const reader = new FileReader();
    reader.onload = function(ev) {
        const container = document.getElementById('degreeUploadArea');
        const existingPreview = container.querySelector('.file-preview');
        if (existingPreview) existingPreview.remove();
        
        const div = document.createElement('div');
        div.className = 'file-preview mt-2';
        const isPdf = file.type === 'application/pdf';
        div.innerHTML = `
            ${isPdf ? '<i class="ti ti-file-pdf fs-2 text-danger"></i>' : `<img src="${ev.target.result}">`}
            <span>New Upload</span>
            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="this.parentElement.remove(); pendingDegreeFile = null">
                <i class="ti ti-trash"></i>
            </button>
        `;
        container.appendChild(div);
    };
    reader.readAsDataURL(file);
    this.value = '';
});

function deleteFile(type, fileUrl) {
    if (!confirm('Delete this file?')) return;
    
    showLoading();
    $.ajax({
        url: baseUrl + '/jivo-webadmin/delete-doctor-file',
        type: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}',
            doctoruserid: '{{ request("doctor_user_id") }}',
            type: type,
            fileUrl: fileUrl
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                toastr.success('File deleted');
                location.reload();
            } else {
                toastr.error(response.message);
            }
        },
        error: function() {
            hideLoading();
            toastr.error('Error deleting file');
        }
    });
}

function saveAllDocuments() {
    showLoading();
    
    // Collect data from all forms
    const identityData = new FormData($('#identityForm')[0]);
    const registrationData = new FormData($('#registrationForm')[0]);
    const qualificationData = new FormData($('#qualificationForm')[0]);
    
    // Merge all data
    const formData = new FormData();
    
    // Add identity data
    identityData.forEach((value, key) => {
        if (key !== '_token') formData.append(key, value);
    });
    
    // Add registration data
    registrationData.forEach((value, key) => {
        if (key !== '_token') formData.append(key, value);
    });
    
    // Add qualification data
    qualificationData.forEach((value, key) => {
        if (key !== '_token') formData.append(key, value);
    });
    
    // Handle multiple degree selections
    const degreeSelect = document.querySelector('select[name="medical_degree_id[]"]');
    if (degreeSelect) {
        const selectedValues = Array.from(degreeSelect.selectedOptions).map(opt => opt.value).filter(v => v);
        formData.set('medical_degree_id', selectedValues.join(','));
    }
    
    // Add pending files
    pendingIdentityFiles.forEach(file => {
        formData.append('identity_document_file[]', file);
    });
    
    if (pendingRegistrationFile) {
        formData.append('medical_registration_certificate', pendingRegistrationFile);
    }
    
    if (pendingDegreeFile) {
        formData.append('specialization_certificate_file', pendingDegreeFile);
    }
    
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('doctor_id', '{{ request("doctor_id") }}');
    formData.append('doctor_user_id', '{{ request("doctor_user_id") }}');
    
    $.ajax({
        url: baseUrl + '/jivo-webadmin/save-doctor-document-data',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            hideLoading();
            if (response.success) {
                toastr.success('Documents saved successfully');
                setTimeout(() => location.reload(), 1000);
            } else {
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            hideLoading();
            toastr.error('Error saving documents');
        }
    });
}


function updateStatus(docType, status, rejection_reason = null) {
    if (status === 'rejected' && !rejection_reason) {
        showRejectModal(docType);
        return;
    }

    showLoading();

    $.ajax({
        url: baseUrl + '/jivo-webadmin/update-document-status',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            doctor_user_id: '{{ request("doctor_user_id") }}',
            doctor_id: '{{ request("doctor_id") }}',
            document_type: docType,
            status: status,
            rejection_reason: rejection_reason
        },
        success: function(response) {
            hideLoading();

            if (response.success) {
                toastr.success(response.message);

                setTimeout(function () {
                    location.reload();
                }, 1000);

            } else {
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            hideLoading();

            toastr.error(
                'Error: ' + (xhr.responseJSON?.message || 'Something went wrong')
            );
        }
    });
}

function updateStatus222(docType, status, rejection_reason = null) {
    if (status === 'rejected') {
        showRejectModal(docType);
        return;
    }
    
    showLoading();
    
    $.ajax({
        url: baseUrl + '/jivo-webadmin/update-document-status',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            doctor_user_id: '{{ request("doctor_user_id") }}',
            doctor_id: '{{ request("doctor_id") }}',
            document_type: docType,
            status: status,
            rejection_reason: rejection_reason
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                toastr.success(response.message);
                setTimeout(function() { location.reload(); }, 1000);
            } else {
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            hideLoading();
            toastr.error('Error: ' + (xhr.responseJSON?.message || 'Something went wrong'));
        }
    });
}

function showRejectModal(docType) {
    currentDocType = docType;
    $('#rejectDocType').val(docType);
    $('#rejectionReason').val('');
    $('#rejectModal').modal('show');
}

function submitRejection() {
    const reason = $('#rejectionReason').val().trim();
    if (!reason) {
        toastr.error('Please provide a rejection reason');
        return;
    }
    $('#rejectModal').modal('hide');
    updateStatus(currentDocType, 'rejected', reason);
}

function finalApproval() {
    if (!confirm('Are you sure you want to make this doctor live?')) {
        return;
    }
    
    showLoading();
    
    $.ajax({
        url: baseUrl + '/jivo-webadmin/final-doctor-approval',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            doctor_user_id: '{{ request("doctor_user_id") }}',
            doctor_id: '{{ request("doctor_id") }}'
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                toastr.success(response.message);
                setTimeout(function() { location.reload(); }, 1500);
            } else {
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            hideLoading();
            toastr.error('Error: ' + (xhr.responseJSON?.message || 'Something went wrong'));
        }
    });
}

$(document).ready(function() {
    toastr.options = {
        "closeButton": true,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "timeOut": "3000"
    };
});
</script>

@include('admin.footer')