@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg freeze-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Account Freeze Management"
                    description="Manage account freeze or unfreeze requests and track their approval status.">
                    @can('student')
                        <button
                            id="freezeToggleBtn"
                            type="button"
                            class="asset-btn {{ $hasActiveFrozen ? 'asset-btn--secondary' : 'asset-btn--primary' }}"
                            onclick="toggleFreeze()"
                            {{ $hasPendingRequest ? 'disabled' : '' }}
                            title="{{ $hasPendingRequest ? 'You have a pending request.' : '' }}">
                            @if ($hasActiveFrozen)
                                <iconify-icon icon="ri:lock-unlock-line"></iconify-icon>
                                Unfreeze Account
                            @else
                                <iconify-icon icon="ri:lock-line"></iconify-icon>
                                Freeze Account
                            @endif
                        </button>
                    @endcan
                </x-page-title>
                @can('student')
                    <div class="ui-card freeze-status-card">
                        <div class="freeze-status-card__main">
                            <div class="freeze-status-card__icon {{ $hasActiveFrozen ? 'freeze-status-card__icon--danger' : 'freeze-status-card__icon--success' }}">
                                @if ($hasPendingRequest)
                                    <iconify-icon icon="ri:time-line"></iconify-icon>
                                @elseif ($hasActiveFrozen)
                                    <iconify-icon icon="ri:lock-line"></iconify-icon>
                                @else
                                    <iconify-icon icon="ri:shield-check-line"></iconify-icon>
                                @endif
                            </div>

                            <div class="freeze-status-card__content">
                                <div class="freeze-status-card__eyebrow">Current Status</div>

                                <h4 class="freeze-status-card__title mb-0">
                                    @if ($hasPendingRequest)
                                        Pending Request
                                    @elseif ($hasActiveFrozen)
                                        Account is Frozen
                                    @else
                                        Account is Active
                                    @endif
                                </h4>

                                <p class="freeze-status-card__sub mb-0">
                                    @if ($hasPendingRequest)
                                        Your request is currently under review. You cannot submit another request until it is processed.
                                    @elseif ($hasActiveFrozen)
                                        Your account is currently frozen. You can submit an unfreeze request.
                                    @else
                                        Your account is active. You can submit a freeze request if needed.
                                    @endif
                                </p>
                            </div>
                        </div>
                        <div class="freeze-status-card__right">
                            @if ($hasPendingRequest)
                                <span class="ui-pill ui-pill--warn">
                                    <iconify-icon icon="ri:time-line"></iconify-icon>
                                    {{ $hasActiveFrozen ? 'Pending Freeze' : 'Pending Unfreeze' }}
                                </span>
                            @elseif ($hasActiveFrozen)
                                <span class="ui-pill ui-pill--danger">
                                    <iconify-icon icon="ri:lock-line"></iconify-icon>
                                    Frozen
                                </span>
                            @else
                                <span class="ui-pill ui-pill--success">
                                    <iconify-icon icon="ri:shield-check-line"></iconify-icon>
                                    Active
                                </span>
                            @endif
                        </div>
                    </div>
                @endcan

                <div class="ui-card freeze-table-card">
                    <div class="freeze-table-head">
                        <div>
                            <h5 class="freeze-table-title mb-0">Freeze Requests History</h5>
                            <p class="freeze-table-sub mb-0">
                                Review all previous freeze and unfreeze requests with status, priority, admin notes, and submitted dates.
                            </p>
                        </div>

                        <span class="ui-pill ui-pill--info">
                            {{ $freezeRequests->count() }} Request(s)
                        </span>
                    </div>

                    <div class="freeze-table-wrap">
                        <table class="table freeze-table mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                        <th>Student</th>
                                    @endif
                                    <th>Request Type</th>
                                    <th>Status</th>
                                    <th>Priority</th>
                                    <th>Subject</th>
                                    <th>Description</th>
                                    <th>Admin Note</th>
                                    <th>Submitted Date</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($freezeRequests as $index => $request)
                                    @php
                                        $typeClass = $request->type === 'freeze' ? 'ui-pill--danger' : 'ui-pill--success';

                                        $statusClass = match ($request->status) {
                                            'pending' => 'ui-pill--warn',
                                            'approved' => 'ui-pill--success',
                                            'rejected' => 'ui-pill--danger',
                                            'unsolved' => 'ui-pill--warn',
                                            default => 'ui-pill--neutral',
                                        };

                                        $priorityClass = match ($request->priority) {
                                            'high' => 'ui-pill--danger',
                                            'medium' => 'ui-pill--warn',
                                            'low' => 'ui-pill--success',
                                            default => 'ui-pill--info',
                                        };
                                    @endphp

                                    <tr>
                                        <td class="text-center">
                                            <span class="freeze-id">#{{ $index + 1 }}</span>
                                        </td>

                                        @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                            <td>
                                                <span class="ui-pill ui-pill--neutral">
                                                    {{ $request->creator ? trim($request->creator->first_name . ' ' . $request->creator->last_name) : '-' }}
                                                </span>
                                            </td>
                                        @endif

                                        <td>
                                            <span class="ui-pill {{ $typeClass }}">
                                                @if ($request->type === 'freeze')
                                                    <iconify-icon icon="ri:lock-line"></iconify-icon>
                                                    Freeze
                                                @else
                                                    <iconify-icon icon="ri:lock-unlock-line"></iconify-icon>
                                                    Unfreeze
                                                @endif
                                            </span>
                                        </td>

                                        <td>
                                            <span class="ui-pill {{ $statusClass }}">
                                                {{ ucfirst($request->status) }}
                                            </span>
                                        </td>

                                        <td>
                                            <span class="ui-pill {{ $priorityClass }}">
                                                {{ ucfirst($request->priority) }}
                                            </span>
                                        </td>

                                        <td>
                                            <div class="freeze-subject">
                                                {{ $request->subject }}
                                            </div>
                                        </td>

                                        <td>
                                            <div class="freeze-description" title="{{ $request->description }}">
                                                {{ Str::limit($request->description, 50) }}
                                            </div>
                                        </td>

                                        <td>
                                            <div class="freeze-admin-note" title="{{ $request->status_note }}">
                                                {{ $request->status_note ?: '-' }}
                                            </div>
                                        </td>

                                        <td>
                                            <span class="freeze-date">
                                                {{ $request->created_at->format('d/m/Y H:i') }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ isset($hasMultipleChildren) && $hasMultipleChildren ? 9 : 8 }}">
                                            <div class="freeze-empty">
                                                <iconify-icon icon="ri:archive-line"></iconify-icon>
                                                <h6>No freeze requests yet.</h6>
                                                <p>Click the action button above to submit your first freeze or unfreeze request.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

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

    <div class="modal fade freeze-loading-modal" id="loadingModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="freeze-loader">
                        <div class="freeze-loader__spinner">
                            <span class="spinner-border" role="status" aria-hidden="true"></span>
                        </div>

                        <h5 class="freeze-loader__title mb-0">Processing your request</h5>
                        <p class="freeze-loader__text mb-0">
                            Please wait while we submit your account status request.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleFreeze() {
            const btn = document.getElementById('freezeToggleBtn');

            if (!btn || btn.disabled) {
                return;
            }

            btn.disabled = true;

            const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
            loadingModal.show();

            fetch('{{ route("freeze.store") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({})
            })
                .then(response => response.json())
                .then(data => {
                    loadingModal.hide();

                    if (data.success) {
                        const alertType = data.requestType === 'freeze' ? 'warning' : 'success';

                        showAlert(data.message, alertType);

                        setTimeout(() => {
                            location.reload();
                        }, 2000);
                    } else {
                        btn.disabled = false;
                        showAlert('An error occurred. Please try again.', 'danger');
                    }
                })
                .catch(error => {
                    loadingModal.hide();
                    btn.disabled = false;

                    console.error('Error:', error);
                    showAlert('An error occurred. Please try again.', 'danger');
                });
        }

        function showAlert(message, type) {
            const alertHTML = `
                <div class="freeze-floating-alert alert alert-${type} alert-dismissible fade show" role="alert">
                    <div class="freeze-floating-alert__content">
                        <iconify-icon icon="${type === 'success' ? 'ri:checkbox-circle-line' : type === 'warning' ? 'ri:alert-line' : 'ri:error-warning-line'}"></iconify-icon>
                        <span>${message}</span>
                    </div>

                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;

            document.body.insertAdjacentHTML('beforeend', alertHTML);

            setTimeout(() => {
                const alerts = document.querySelectorAll('.freeze-floating-alert');

                if (alerts.length > 0) {
                    alerts[alerts.length - 1].remove();
                }
            }, 5000);
        }
    </script>
@endpush

@push('styles')
    <style>
        .freeze-page .ui-card {
            border: 2px solid #e5e7eb !important;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
        }

        .freeze-status-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .freeze-status-card__main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
        }

        .freeze-status-card__icon {
            width: 58px;
            height: 58px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #071b3d;
            font-size: 1.7rem;
            flex-shrink: 0;
        }

        .freeze-status-card__icon--danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .freeze-status-card__icon--success {
            background: #f0fdf4;
            color: #166534;
        }

        .freeze-status-card__content {
            min-width: 0;
        }

        .freeze-status-card__eyebrow {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.2rem;
        }

        .freeze-status-card__title {
            color: #111827;
            font-size: 1.15rem !important;
            font-weight: 900;
            line-height: 1.35;
        }

        .freeze-status-card__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-top: 0.35rem;
            max-width: 820px;
        }

        .freeze-status-card__right {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .freeze-table-card {
            padding: 0 !important;
        }

        .freeze-table-head {
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            background: #fff;
        }

        .freeze-table-title {
            font-size: 1.05rem !important;
            font-weight: 900;
            color: #111827;
        }

        .freeze-table-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .freeze-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .freeze-table {
            min-width: 1050px;
            width: 100%;
            vertical-align: middle;
        }

        .freeze-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

        .freeze-table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 650;
            border-color: #eef2f7;
            padding: 0.95rem 1rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .freeze-table tbody tr {
            transition: 0.16s ease;
        }

        .freeze-table tbody tr:hover {
            background: #f8fafc;
        }

        .freeze-id {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 900;
        }

        .freeze-subject {
            color: #111827;
            font-weight: 850;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .freeze-description,
        .freeze-admin-note {
            max-width: 260px;
            color: #475569;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .freeze-date {
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 750;
        }

        .freeze-empty {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .freeze-empty iconify-icon {
            display: block;
            font-size: 2.35rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .freeze-empty h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .freeze-empty p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .freeze-loading-modal .modal-content {
            border: 0;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 28px 70px rgba(15, 23, 42, 0.2);
        }

        .freeze-loading-modal .modal-body {
            padding: 2rem;
        }

        .freeze-loader {
            text-align: center;
        }

        .freeze-loader__spinner {
            width: 68px;
            height: 68px;
            margin: 0 auto 1rem;
            border-radius: 22px;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .freeze-loader__title {
            color: #111827;
            font-size: 1.05rem !important;
            font-weight: 900;
        }

        .freeze-loader__text {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.35rem;
        }

        .freeze-floating-alert {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            max-width: 420px;
            border: 0;
            border-radius: 16px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
            padding: 0.9rem 1rem;
        }

        .freeze-floating-alert__content {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding-right: 1.5rem;
            font-weight: 750;
        }

        .freeze-floating-alert__content iconify-icon {
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .asset-btn:disabled {
            opacity: 0.65;
            cursor: not-allowed;
            pointer-events: none;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary { background: #eff6ff; color: #0f1724; }
        .ui-pill--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        @media (max-width: 991.98px) {
            .freeze-status-card {
                align-items: flex-start;
            }

            .freeze-status-card__main {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .freeze-page .ui-card {
                padding: 1rem;
            }

            .freeze-table-head {
                padding: 1rem;
            }

            .freeze-status-card__right,
            #freezeToggleBtn {
                width: 100%;
            }

            .freeze-floating-alert {
                left: 12px;
                right: 12px;
                top: 12px;
                max-width: none;
            }
        }
    </style>
@endpush