@extends('backend.app')

@section('title', 'Account Deletion Requests')

@push('style')
<style>
    /* Modern Breadcrumb Styles */
    .modern-breadcrumb {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
        border-radius: 12px;
        padding: 1rem 1.5rem 1rem 0;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    .breadcrumb-items {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0.5rem;
    }
    .breadcrumb-item {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
    }
    .breadcrumb-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: #6c757d;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        transition: all 0.3s ease;
        font-weight: 500;
    }
    .breadcrumb-link:hover {
        background: white;
        color: #7367f0;
        box-shadow: 0 2px 8px rgba(115, 103, 240, 0.15);
        transform: translateY(-1px);
    }
    .breadcrumb-item.active {
        color: #7367f0;
        font-weight: 600;
    }
    .breadcrumb-item.active .breadcrumb-text {
        background: linear-gradient(135deg, #7367f0 0%, #a767ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .breadcrumb-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: white;
        border-radius: 8px;
        color: #7367f0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .breadcrumb-link:hover .breadcrumb-icon {
        background: linear-gradient(135deg, #7367f0 0%, #a767ff 100%);
        color: white;
    }
    .breadcrumb-item.active .breadcrumb-icon {
        background: linear-gradient(135deg, #7367f0 0%, #a767ff 100%);
        color: white;
    }
    .breadcrumb-separator {
        color: #adb5bd;
        font-size: 0.7rem;
        margin: 0 0.25rem;
    }
    .breadcrumb-text {
        text-transform: capitalize;
    }

    /* Status Badges */
    .status-pending {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        color: #856404;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85rem;
    }
    .status-approved {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85rem;
    }
    .status-denied {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85rem;
    }

    /* Stats Cards */
    .stats-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08);
        text-align: center;
        transition: all 0.3s ease;
        height: 100%;
    }
    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }
    .stats-number {
        font-size: 2.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
</style>
@endpush

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row align-items-center">
                    <div class="col-12">
                        @include('backend.partials.breadcrumb', [
                            'items' => [
                                ['url' => route('dashboard'), 'title' => 'Dashboard', 'icon' => 'fas fa-home'],
                                ['title' => 'Account Deletion Requests', 'icon' => 'fas fa-user-times']
                            ]
                        ])
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            @if($pendingCount > 0)
            <div class="alert alert-warning d-flex align-items-center mb-4" role="alert" style="border-radius: 12px; border-left: 4px solid #ff9f43;">
                <i class="fas fa-exclamation-triangle me-3 fa-2x"></i>
                <div>
                    <strong class="alert-heading">{{ $pendingCount }} pending deletion request(s)</strong>
                    <span class="d-block">Please review and approve or deny these requests. Accounts will be deleted in 48 hours if approved.</span>
                </div>
            </div>
            @endif

            <!-- Statistics -->
            <div class="row mb-4">
                <div class="col-md-3 col-6 mb-3">
                    <div class="stats-card">
                        <div class="stats-number">{{ $requests->total() }}</div>
                        <div class="text-muted">Total Requests</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <div class="stats-card">
                        <div class="stats-number" style="background: linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{{ $pendingCount }}</div>
                        <div class="text-muted">Pending</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <div class="stats-card">
                        <div class="stats-number" style="background: linear-gradient(135deg, #28c76f 0%, #20c997 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{{ \App\Models\AccountDeletionRequest::approved()->count() }}</div>
                        <div class="text-muted">Approved</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <div class="stats-card">
                        <div class="stats-number" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{{ \App\Models\AccountDeletionRequest::denied()->count() }}</div>
                        <div class="text-muted">Denied</div>
                    </div>
                </div>
            </div>

            <!-- Requests Table -->
            <div class="card" style="border-radius: 12px; box-shadow: 0 2px 15px rgba(0,0,0,0.08);">
                <div class="card-header" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); color: white; border-radius: 12px 12px 0 0;">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-user-times me-2"></i>Deletion Requests
                    </h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th>User</th>
                                    <th>Type</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                    <th>Requested</th>
                                    <th style="min-width: 200px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($requests as $request)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($request->user->avatar)
                                                <img src="{{ asset($request->user->avatar) }}" alt="{{ $request->user->name }}" class="rounded-circle me-2" style="width: 40px; height: 40px; object-fit: cover;">
                                            @else
                                                <div class="rounded-circle me-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #7367f0 0%, #a767ff 100%); color: white; font-weight: 600;">
                                                    {{ substr($request->user->name, 0, 1) }}
                                                </div>
                                            @endif
                                            <div>
                                                <strong>{{ $request->user->name }}</strong><br>
                                                <small class="text-muted">{{ $request->user->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary rounded-pill">{{ ucfirst($request->user_type) }}</span>
                                    </td>
                                    <td>
                                        @if($request->reason)
                                            <span class="text-truncate d-inline-block" style="max-width: 200px;">{{ Str::limit($request->reason, 80) }}</span>
                                        @else
                                            <em class="text-muted">No reason provided</em>
                                        @endif
                                    </td>
                                    <td>
                                        @if($request->status === 'pending')
                                            <span class="status-pending">
                                                <i class="fas fa-clock me-1"></i> Pending
                                            </span>
                                        @elseif($request->status === 'approved')
                                            <span class="status-approved">
                                                <i class="fas fa-check-circle me-1"></i> Approved
                                            </span>
                                        @else
                                            <span class="status-denied">
                                                <i class="fas fa-times-circle me-1"></i> Denied
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <div>
                                            <small class="text-muted">{{ $request->created_at->format('M d, Y') }}</small><br>
                                            <small class="text-muted">{{ $request->created_at->diffForHumans() }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('account-deletions.show', $request) }}" class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i> View
                                            </a>
                                            @if($request->status === 'pending')
                                            <form method="POST" action="{{ route('account-deletions.approve', $request) }}" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Are you sure? This will permanently delete the user account and all their data.')">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            </form>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="denyRequest({{ $request->id }}, '{{ $request->user->name }}')">
                                                <i class="fas fa-times"></i>
                                            </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5">
                                        <div class="text-muted my-3">
                                            <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                            <p class="mb-0">No deletion requests found</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($requests->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $requests->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function denyRequest(id, userName) {
    Swal.fire({
        title: 'Deny Deletion Request',
        html: 'Enter reason for denying <strong>' + userName + '</strong>\'s deletion request:',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: '<i class="fas fa-times"></i> Deny Request',
        cancelButtonText: '<i class="fas fa-arrow-left"></i> Cancel',
        confirmButtonColor: '#ea5455',
        cancelButtonColor: '#7367f0',
        input: 'textarea',
        inputPlaceholder: 'Please provide a reason...',
        inputAttributes: {
            'required': 'true',
            'rows': 3
        },
        preConfirm: () => {
            const reason = Swal.getInput().value;
            if (!reason) {
                Swal.showValidationMessage('Please enter a reason for denial');
            }
            return reason;
        }
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Processing...',
                text: 'Denying deletion request...',
                icon: 'info',
                showConfirmButton: false,
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '/admin/account-deletions/' + id + '/deny',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    reason: result.value
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Request Denied!',
                        text: 'The user has been notified that their deletion request was denied.',
                        icon: 'success',
                        confirmButtonColor: '#28c76f'
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.message || 'Failed to deny deletion request',
                        icon: 'error',
                        confirmButtonColor: '#ea5455'
                    });
                }
            });
        }
    });
}
</script>
@endpush
@endsection