@extends('root')
@section('title', 'Account Isolated')

@section('content')
<div class="container d-flex align-items-center justify-content-center" style="min-height: 80vh;">
    <div class="card border-danger shadow-lg" style="max-width: 600px; width: 100%;">
        <div class="card-header bg-danger text-white text-center py-3">
            <h3 class="mb-0 text-white"><i class="ti ti-lock me-2"></i> Akun Dibekukan</h3>
        </div>
        <div class="card-body p-4">
            <div class="text-center mb-4">
                <div class="avatar avatar-xl bg-danger-subtle text-danger rounded-circle mb-3 mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                    <i class="ti ti-ban fs-1"></i>
                </div>
                <h4 class="mb-2">Akses Akun Anda Dibatasi</h4>
                <p class="text-muted">
                    Akun Anda saat ini dalam status <strong>ISOLASI</strong> karena indikasi pelanggaran kebijakan penggunaan.
                </p>
            </div>

            <div class="alert alert-danger-subtle border-danger mb-4">
                <div class="d-flex">
                    <div class="me-2"><i class="ti ti-alert-circle fs-5"></i></div>
                    <div>
                        <strong>Alasan Isolasi:</strong><br>
                        {{ $client->isolation_reason_code ?? 'Pelanggaran Kebijakan' }}
                        <div class="mt-1 small text-muted">{{ $client->isolation_note }}</div>
                    </div>
                </div>
            </div>

            @if($appeal)
                <div class="card bg-light border">
                    <div class="card-body">
                        <h5 class="card-title">Status Banding</h5>
                        <p class="mb-2">Andah telah mengajukan banding pada: <strong>{{ $appeal->submitted_at->format('d M Y H:i') }}</strong></p>
                        
                        @if($appeal->status === 'pending')
                            <div class="alert alert-warning mb-0">
                                <i class="ti ti-clock me-1"></i> Banding Anda sedang ditinjau oleh tim kami. Mohon menunggu.
                            </div>
                        @elseif($appeal->status === 'rejected')
                            <div class="alert alert-danger mb-0">
                                <i class="ti ti-x me-1"></i> Banding Anda ditolak.
                                @if($appeal->review_note)
                                    <hr>
                                    <strong>Catatan Admin:</strong> {{ $appeal->review_note }}
                                @endif
                            </div>
                            <div class="mt-3 text-center">
                                <button class="btn btn-outline-danger btn-sm" onclick="$('#appealFormContainer').slideDown()">Ajukan Banding Baru</button>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            @if(!$appeal || ($appeal && $appeal->status === 'rejected'))
                <div id="appealFormContainer" style="{{ $appeal && $appeal->status === 'rejected' ? 'display:none;' : '' }}">
                    <h5 class="mt-4 mb-3">Ajukan Banding</h5>
                    <form action="{{ route('client.isolation.appeal') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Pesan Banding</label>
                            <textarea name="appeal_message" class="form-control" rows="4" required minlength="20" placeholder="Jelaskan mengapa isolasi ini keliru atau langkah perbaikan yang telah Anda lakukan..."></textarea>
                            <div class="form-text">Minimal 20 karakter.</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Lampiran Bukti (Opsional)</label>
                            <input type="file" name="attachment" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                            <div class="form-text">Maksimal 5MB (PDF/Gambar).</div>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Kirim Banding</button>
                        </div>
                    </form>
                </div>
            @endif

            <div class="text-center mt-4">
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-link text-muted">Logout</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection