@extends('dashboard.layouts.master')
@section('title', 'Review Student Verification | Admin Panel')

@push('after-styles')
<style>
    .card-premium {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        background: #fff;
        margin-bottom: 24px;
    }
    .card-premium .card-header {
        background: transparent;
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    .card-premium .card-header h4 {
        margin: 0;
        font-weight: 700;
        color: #333;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .card-premium .card-body { padding: 24px; }

    /* Profile header */
    .student-avatar {
        width: 72px; height: 72px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #002868;
    }
    .student-avatar-placeholder {
        width: 72px; height: 72px;
        border-radius: 50%;
        background: #002868;
        display: flex; align-items: center; justify-content: center;
        font-size: 28px; color: #fff; font-weight: 700;
        flex-shrink: 0;
    }

    /* Info rows */
    .info-group { margin-bottom: 16px; }
    .info-label {
        font-size: 10px; text-transform: uppercase;
        color: #999; letter-spacing: 1px; margin-bottom: 3px;
    }
    .info-value { font-size: 14px; font-weight: 600; color: #222; }

    /* Status badges */
    .status-badge {
        display: inline-block;
        padding: 5px 14px; border-radius: 20px;
        font-size: 12px; font-weight: 700; text-transform: uppercase;
    }
    .badge-pending  { background: #fff4e5; color: #ff9800; }
    .badge-approved { background: #e6f7ef; color: #00c853; }
    .badge-rejected { background: #ffebee; color: #f44336; }
    .badge-hold     { background: #f3f3f3; color: #666; }

    /* Document viewer */
    .doc-container {
        border: 2px dashed #ddd;
        border-radius: 10px;
        overflow: hidden;
        transition: border-color .3s;
        background: #fafafa;
        text-align: center;
    }
    .doc-container:hover { border-color: #002868; }
    .doc-image {
        max-width: 100%; height: auto;
        cursor: zoom-in;
        transition: transform .3s;
        display: block; margin: 0 auto;
    }
    .doc-image:hover { transform: scale(1.02); }
    .doc-pdf {
        width: 100%; height: 520px;
        border: none;
    }
    .doc-actions { padding: 14px; border-top: 1px solid #f0f0f0; }
</style>
@endpush

@section('content')
<div class="padding">
    <div class="row">

        {{-- Page Title --}}
        <div class="col-md-12 m-b">
            <h2 class="h3 _700">Student Verification Review</h2>
            <small class="text-muted">
                <a href="{{ route('adminHome') }}">Dashboard</a> /
                <a href="{{ route('student-verification.index') }}">Student Verification</a> /
                #{{ $verification->id }}
            </small>
        </div>

        {{-- ── LEFT COLUMN ──────────────────────────────────────────────────── --}}
        <div class="col-md-4">

            {{-- Student Profile Card --}}
            <div class="card-premium">
                <div class="card-header">
                    <h4><i class="fa fa-user-circle-o"></i> Student Profile</h4>
                </div>
                <div class="card-body">

                    {{-- Avatar + name --}}
                    <div class="d-flex m-b-md" style="align-items:center; gap:16px;">
                        @if($verification->profile_image)
                            <img src="{{ asset('storage/' . $verification->profile_image) }}"
                                 class="student-avatar" alt="Profile Photo">
                        @else
                            <div class="student-avatar-placeholder">
                                {{ strtoupper(substr($verification->name ?? 'S', 0, 1)) }}
                            </div>
                        @endif
                        <div>
                            <div style="font-size:16px; font-weight:700; color:#222;">
                                {{ $verification->name ?? '-' }}
                            </div>
                            <div class="text-muted" style="font-size:13px;">
                                {{ $verification->phone ?? '-' }}
                            </div>
                        </div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Primary Email</div>
                        <div class="info-value">{{ $verification->email ?? '-' }}</div>
                    </div>

                    @if($verification->student_email)
                    <div class="info-group">
                        <div class="info-label">Student Email (.edu)</div>
                        <div class="info-value text-primary">{{ $verification->student_email }}</div>
                    </div>
                    @endif

                    <div class="info-group">
                        <div class="info-label">Date of Birth</div>
                        <div class="info-value">
                            {{ $verification->dob
                                ? \Carbon\Carbon::parse($verification->dob)->format('d M Y')
                                : ($verification->date_of_birth
                                    ? \Carbon\Carbon::parse($verification->date_of_birth)->format('d M Y')
                                    : '-') }}
                        </div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Gender</div>
                        <div class="info-value">
                            @php
                                $genderMap = [
                                    'male'            => 'Male',
                                    'female'          => 'Female',
                                    'other'           => 'Other',
                                    'prefer_not_to_say' => 'Prefer not to say',
                                    1 => 'Male', 2 => 'Female',
                                ];
                            @endphp
                            {{ $genderMap[$verification->gender] ?? '-' }}
                        </div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Country</div>
                        <div class="info-value">{{ $verification->country_name ?? '-' }}</div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Submission Date</div>
                        <div class="info-value">
                            {{ \Carbon\Carbon::parse($verification->created_at)->format('d M Y, H:i') }}
                        </div>
                    </div>

                    <div class="info-group">
                        <div class="info-label">Current Status</div>
                        <div class="info-value">
                            @php
                                $statusClass  = [1=>'badge-pending', 2=>'badge-approved', 3=>'badge-rejected', 4=>'badge-hold'];
                                $statusLabels = [1=>'Pending', 2=>'Approved', 3=>'Rejected', 4=>'On Hold'];
                            @endphp
                            <span class="status-badge {{ $statusClass[$verification->verification_status] ?? '' }}">
                                {{ $statusLabels[$verification->verification_status] ?? 'Unknown' }}
                            </span>
                        </div>
                    </div>

                    @if($verification->expiry_date)
                    <div class="info-group">
                        <div class="info-label">ID Expiry Date</div>
                        <div class="info-value">
                            {{ \Carbon\Carbon::parse($verification->expiry_date)->format('d M Y') }}
                        </div>
                    </div>
                    @endif

                </div>
            </div>

            {{-- Action Center Card --}}
            <div class="card-premium">
                <div class="card-header">
                    <h4><i class="fa fa-cog"></i> Action Center</h4>
                </div>
                <div class="card-body">
                    <form id="statusForm">
                        @csrf
                        <input type="hidden" name="id" value="{{ $verification->id }}">

                        <div class="form-group">
                            <label class="text-muted small _600">UPDATE STATUS</label>
                            <select name="status" class="form-control" id="statusSelect"
                                    style="border-radius:8px;">
                                <option value="1" {{ $verification->verification_status == 1 ? 'selected' : '' }}>
                                    Pending Approval
                                </option>
                                @if(\Helper::checkPermission('student_verification', 'approve'))
                                <option value="2" {{ $verification->verification_status == 2 ? 'selected' : '' }}>
                                    Approve Verification
                                </option>
                                @endif
                                @if(\Helper::checkPermission('student_verification', 'reject'))
                                <option value="3" {{ $verification->verification_status == 3 ? 'selected' : '' }}>
                                    Reject Verification
                                </option>
                                @endif
                                @if(\Helper::checkPermission('student_verification', 'update'))
                                <option value="4" {{ $verification->verification_status == 4 ? 'selected' : '' }}>
                                    Place on Hold
                                </option>
                                @endif
                            </select>
                        </div>

                        <div class="form-group m-t">
                            <label class="text-muted small _600">ID EXPIRY DATE</label>
                            <input type="date" name="expiry_date" class="form-control"
                                   style="border-radius:8px;"
                                   value="{{ $verification->expiry_date }}">
                            <small class="text-muted">
                                Verification auto-expires on this date.
                            </small>
                        </div>

                        @if(\Helper::checkPermission('student_verification','approve')
                            || \Helper::checkPermission('student_verification','reject')
                            || \Helper::checkPermission('student_verification','update'))
                        <button type="button" id="updateStatusBtn"
                                class="btn btn-block btn-lg p-x-md m-t"
                                style="background:#002868;color:#fff;border-radius:8px;font-weight:700;">
                            <i class="fa fa-save"></i> SAVE CHANGES
                        </button>
                        @endif
                    </form>
                </div>
            </div>

            {{-- Rewards History Card --}}
            <div class="card-premium">
                <div class="card-header">
                    <h4><i class="fa fa-gift"></i> Rewards History</h4>
                </div>
                <div class="card-body p-a-0">
                    <div class="table-responsive">
                        <table class="table table-striped m-a-0">
                            <thead>
                                <tr>
                                    <th>Business</th>
                                    <th class="text-right">Points</th>
                                    <th class="text-center">
                                        <label class="md-check m-a-0" style="font-weight: normal; cursor: pointer; font-size: 11px;">
                                            <input type="checkbox" id="filterRedeemed" class="has-value">
                                            <i class="primary"></i>
                                            Redeemed
                                        </label>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($rewards_history as $reward)
                                    <tr>
                                        <td><small class="_600">{{ $reward->business_name }}</small></td>
                                        <td class="text-right text-primary _600">{{ number_format($reward->business_total_points, 2) }}</td>
                                        <td class="text-center">
                                            <button class="btn btn-xs info view-points-details"
                                               data-id="{{ $reward->business_owner_id }}"
                                               data-name="{{ $reward->business_name }}"
                                               data-user="{{ $verification->user_id }}">View</button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="3" class="text-center text-muted p-a">No rewards found</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>{{-- /col-md-4 --}}

        {{-- Points Details Modal --}}
        <div id="pointsDetailsModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="modalBusinessName">Business Points History</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div id="pointsDetailsContent">
                            <div class="text-center p-a-md">
                                <i class="fa fa-spin fa-spinner fa-2x"></i>
                                <p>Loading history...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── RIGHT COLUMN ─────────────────────────────────────────────────── --}}
        <div class="col-md-8">
            <div class="card-premium">
                <div class="card-header">
                    <h4><i class="fa fa-id-card-o"></i> Student ID Document</h4>
                </div>

                @if($verification->student_id_document)
                    @php
                        $docPath = $verification->student_id_document;

                        // Files saved via Storage::disk('public') → accessible at storage/
                        // Old seeder files stored under assets/ → use asset() directly
                        if (str_starts_with($docPath, 'assets/') || str_starts_with($docPath, 'http')) {
                            $docUrl = asset($docPath);
                        } else {
                            $docUrl = asset('storage/' . $docPath);
                        }

                        $ext = strtolower(pathinfo($docPath, PATHINFO_EXTENSION));
                        $isPdf = ($ext === 'pdf');
                    @endphp

                    <div class="card-body p-a-0">
                        <div class="doc-container">
                            @if($isPdf)
                                {{-- PDF: render inline with iframe --}}
                                <iframe src="{{ $docUrl }}" class="doc-pdf"
                                        title="Student ID Document PDF"></iframe>
                            @else
                                {{-- Image: render with zoom-on-click --}}
                                <img src="{{ $docUrl }}" class="doc-image"
                                     id="idPreview" alt="Student ID Document">
                            @endif
                        </div>

                        <div class="doc-actions d-flex" style="gap:10px;">
                            <a href="{{ $docUrl }}" target="_blank"
                               class="btn btn-outline b-primary text-primary"
                               style="border-radius:8px;">
                                <i class="fa fa-external-link"></i>
                                Open in New Tab
                            </a>
                            <a href="{{ $docUrl }}" download
                               class="btn btn-outline b-success text-success"
                               style="border-radius:8px;">
                                <i class="fa fa-download"></i>
                                Download
                            </a>
                            <span class="text-muted small" style="align-self:center;">
                                {{ basename($docPath) }}
                            </span>
                        </div>
                    </div>

                @else
                    <div class="card-body text-center"
                         style="background:#fdfdfd; border-radius:8px; border:2px dashed #eee; padding:40px;">
                        <i class="fa fa-exclamation-triangle text-muted fa-3x m-b"></i>
                        <p class="text-muted m-a-0">No student ID document uploaded for this request.</p>
                    </div>
                @endif

            </div>{{-- /card-premium --}}
        </div>{{-- /col-md-8 --}}

    </div>{{-- /row --}}
</div>

{{-- Image zoom modal (only shown for non-PDF documents) --}}
<div id="imageModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content b-0">
            <div class="modal-body p-0" style="position:relative;">
                <button type="button" class="close p-a" data-dismiss="modal"
                        style="position:absolute;right:8px;top:4px;color:#fff;
                               opacity:1;text-shadow:0 1px 4px rgba(0,0,0,.5);z-index:10;">
                    &times;
                </button>
                <img src="" id="modalImg" style="width:100%;">
            </div>
        </div>
    </div>
</div>
@endsection

@push('after-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.0/sweetalert2.all.min.js"></script>
<script>
    // Save status
    $('#updateStatusBtn').on('click', function () {
        const btn = $(this);
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> SAVING...');

        $.ajax({
            url: "{{ route('student-verification.update-status') }}",
            type: 'POST',
            data: $('#statusForm').serialize(),
            success: function () {
                Swal.fire({
                    title: 'Updated!',
                    text: 'Student verification status saved successfully.',
                    icon: 'success',
                    confirmButtonColor: '#002868',
                }).then(() => window.location.reload());
            },
            error: function () {
                Swal.fire('Error', 'Something went wrong. Please try again.', 'error');
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> SAVE CHANGES');
            }
        });
    });

    // View Points Details
    $(document).on('click', '.view-points-details', function() {
        const businessId = $(this).data('id');
        const businessName = $(this).data('name');
        const userId = $(this).data('user');

        $('#modalBusinessName').text(businessName + ' - Points History');
        $('#pointsDetailsModal').modal('show');
        $('#pointsDetailsContent').html('<div class="text-center p-a-md"><i class="fa fa-spin fa-spinner fa-2x"></i><p>Loading history...</p></div>');

        $.ajax({
            url: "{{ route('end-user-management.points-details') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                business_id: businessId,
                user_id: userId,
                filter: $('#filterRedeemed').is(':checked') ? 'redeemed' : 'all'
            },
            success: function(response) {
                $('#pointsDetailsContent').html(response);
            }
        });
    });

    // Image zoom on click (only for image docs, not PDF)
    $('#idPreview').on('click', function () {
        $('#modalImg').attr('src', $(this).attr('src'));
        $('#imageModal').modal('show');
    });
</script>
@endpush