@extends('layouts.admin')
@section('title','Deletion Requests')
@section('page-title','🗑️ Account Deletion Requests')

@section('styles')
<style>
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:22px}
.stat-card{background:#fff;border-radius:14px;padding:22px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .3s}
.stat-card:hover{transform:translateY(-3px)}
.stat-number{font-size:36px;font-weight:800;color:#1e3c72;margin-bottom:6px}
.stat-label{font-size:13px;color:#888}
/* Tabs */
.del-tabs{display:flex;gap:0;margin-bottom:0;border-bottom:2px solid #e0e0e0}
.del-tab{padding:12px 22px;background:none;border:none;font-size:14px;font-weight:600;color:#888;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.2s;white-space:nowrap}
.del-tab.active{color:#1e3c72;border-bottom-color:#1e3c72}
.del-content{display:none;padding-top:18px}
.del-content.active{display:block}
/* Status badges */
.status-pending{background:#fff3cd;color:#856404;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}
.status-approved{background:#d4edda;color:#155724;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}
.status-rejected{background:#f8d7da;color:#721c24;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}
/* Action buttons */
.btn-view{background:#0ea5e9;color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;text-decoration:none;display:inline-block}
.btn-approve{background:#22c55e;color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600}
.btn-reject{background:#ef4444;color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600}
/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:18px;padding:30px;max-width:480px;width:90%;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.modal-card h3{font-size:18px;color:#1e3c72;margin-bottom:18px}
.warn-box{background:#fff3cd;border:1px solid #ffc107;border-radius:10px;padding:14px;font-size:13px;color:#856404;margin-bottom:16px}
.modal-card label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#555}
.modal-card textarea{width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:8px;font-size:13px;resize:vertical;outline:none;margin-bottom:14px}
.modal-btns{display:flex;gap:10px}
.modal-btns button{flex:1;padding:11px;border:none;border-radius:9px;cursor:pointer;font-size:14px;font-weight:600}
.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
    .logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
        height: 45px !important;
        margin: 5px 0 !important;
    }
    .card, .del-card, .settings-card { padding: 16px !important; }
    .filter-bar { flex-direction: column; align-items: stretch !important; }
    .filter-group, .filter-select, .filter-input { width: 100% !important; }
    .responsive-form-grid, .view-grid { grid-template-columns: 1fr !important; }
}
</style>
@endsection

@section('content')

{{-- Stats --}}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-number">{{ $stats['pending'] }}</div>
        <div class="stat-label">Pending</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ $stats['approved'] }}</div>
        <div class="stat-label">Deleted</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ $stats['rejected'] }}</div>
        <div class="stat-label">Rejected</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">0</div>
        <div class="stat-label">Reactivated</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ $stats['total'] }}</div>
        <div class="stat-label">Total Requests</div>
    </div>
</div>

<div class="card" style="padding:0;overflow:hidden">
    <div class="del-tabs">
        <button class="del-tab active" onclick="switchTab('pending',this)">⏳ Pending</button>
        <button class="del-tab" onclick="switchTab('deleted',this)">🗑️ Deleted Accounts</button>
        <button class="del-tab" onclick="switchTab('rejected',this)">❌ Rejected</button>
        <button class="del-tab" onclick="switchTab('all',this)">📋 All Requests</button>
    </div>

    <div style="padding:0 22px 22px">

    @foreach(['pending','deleted','rejected','all'] as $tabKey)
    <div class="del-content {{ $tabKey === 'pending' ? 'active' : '' }}" id="tab-{{ $tabKey }}">
        @php
            $filtered = match($tabKey) {
                'pending'  => $requests->where('status','pending'),
                'deleted'  => $requests->where('status','approved'),
                'rejected' => $requests->where('status','rejected'),
                'all'      => $requests,
            };
        @endphp
        <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Customer Name</th>
                    <th>Email</th>
                    <th>Requested On</th>
                    <th>Reason</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($filtered as $req)
            <tr>
                <td><strong>{{ 1000 + $req->id }}</strong></td>
                <td><strong>{{ $req->user->name ?? '(Deleted)' }}</strong></td>
                <td>{{ $req->email }}</td>
                <td>{{ $req->created_at->format('d/m/Y, H:i') }}</td>
                <td style="max-width:180px;font-size:13px;color:#666">{{ $req->reason ?: '—' }}</td>
                <td>
                    <span class="status-{{ $req->status }}">{{ strtoupper($req->status) }}</span>
                </td>
                <td>
                    <div style="display:flex;gap:6px;flex-wrap:wrap">
                        <button class="btn-view" onclick="viewModal({{ $req->id }}, '{{ addslashes($req->user->name ?? '') }}', '{{ $req->email }}', '{{ addslashes($req->reason ?? '') }}', '{{ $req->created_at->format('d/m/Y H:i') }}')">
                            👁️ View
                        </button>
                        @if($req->status === 'pending')
                        <button class="btn-approve" onclick="approveModal({{ $req->id }}, '{{ addslashes($req->user->name ?? $req->email) }}')">
                            ✅ Approve
                        </button>
                        <button class="btn-reject" onclick="rejectModal({{ $req->id }})">
                            ❌ Reject
                        </button>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" style="text-align:center;padding:40px;color:#aaa">No {{ $tabKey }} requests</td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div>
    @endforeach

    </div>
</div>

{{-- View Modal --}}
<div class="modal" id="viewModal">
<div class="modal-card">
    <h3>📋 Request Details</h3>
    <div id="viewDetails"></div>
    <div class="modal-btns" style="margin-top:16px">
        <button onclick="document.getElementById('viewModal').classList.remove('open')" style="background:#6c757d;color:#fff">Close</button>
    </div>
</div>
</div>

{{-- Approve Modal --}}
<div class="modal" id="approveModal">
<div class="modal-card">
    <h3>✅ Approve Deletion Request</h3>
    <div class="warn-box">⚠️ <strong>Warning:</strong> This will <strong>permanently delete</strong> the customer account. This action cannot be undone.</div>
    <form id="approveForm" method="POST">
        @csrf
        <label>Admin Note (optional)</label>
        <textarea name="admin_note" rows="3" placeholder="Reason for approval…"></textarea>
        <div class="modal-btns">
            <button type="button" onclick="document.getElementById('approveModal').classList.remove('open')" style="background:#e0e0e0;color:#333">Cancel</button>
            <button type="submit" style="background:#ef4444;color:#fff">🗑️ Confirm Delete</button>
        </div>
    </form>
</div>
</div>

{{-- Reject Modal --}}
<div class="modal" id="rejectModal">
<div class="modal-card">
    <h3>❌ Reject Deletion Request</h3>
    <form id="rejectForm" method="POST">
        @csrf
        <label>Reason for Rejection</label>
        <textarea name="admin_note" rows="3" placeholder="Explain why the request is rejected…"></textarea>
        <div class="modal-btns">
            <button type="button" onclick="document.getElementById('rejectModal').classList.remove('open')" style="background:#e0e0e0;color:#333">Cancel</button>
            <button type="submit" style="background:#1e3c72;color:#fff">Confirm Reject</button>
        </div>
    </form>
</div>
</div>
@endsection

@section('scripts')
<script>
function switchTab(name, btn) {
    document.querySelectorAll('.del-tab').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.del-content').forEach(c => c.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tab-' + name).classList.add('active');
}

function viewModal(id, name, email, reason, date) {
    document.getElementById('viewDetails').innerHTML = `
        <div class="responsive-form-grid" style="gap:12px;font-size:14px">
            <div><strong style="color:#555">Customer:</strong><br>${name || '(Deleted)'}</div>
            <div><strong style="color:#555">Email:</strong><br>${email}</div>
            <div><strong style="color:#555">Requested On:</strong><br>${date}</div>
            <div><strong style="color:#555">Reason:</strong><br>${reason || '—'}</div>
        </div>
    `;
    document.getElementById('viewModal').classList.add('open');
}

function approveModal(id, name) {
    document.getElementById('approveForm').action = `/admin/deletion-requests/${id}/approve`;
    document.getElementById('approveModal').classList.add('open');
}

function rejectModal(id) {
    document.getElementById('rejectForm').action = `/admin/deletion-requests/${id}/reject`;
    document.getElementById('rejectModal').classList.add('open');
}

// Close modal on outside click
document.querySelectorAll('.modal').forEach(m => {
    m.addEventListener('click', e => { if(e.target === m) m.classList.remove('open'); });
});
</script>
@endsection