@extends('layouts/contentNavbarLayout')

@section('title', 'Employee Delete Requests')

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active">Employee Delete Requests</li>
    </ol>
</nav>
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-1 fw-bold text-primary">
                        <i class="mdi mdi-account-remove-outline me-2"></i>Employee Delete Requests
                    </h1>
                    <p class="text-muted mb-0">Review and manage employee account deletion requests</p>
                </div>
                <div class="badge bg-info fs-6 px-3 py-2">
                    Total Requests: {{ $deleteRequests->total() }}
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $stats['pending'] }}</h4>
                            <small>Pending</small>
                        </div>
                        <i class="mdi mdi-clock-outline mdi-24px"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $stats['accepted'] }}</h4>
                            <small>Accepted</small>
                        </div>
                        <i class="mdi mdi-check-circle-outline mdi-24px"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $stats['refused'] }}</h4>
                            <small>Refused</small>
                        </div>
                        <i class="mdi mdi-close-circle-outline mdi-24px"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0">{{ $stats['total'] }}</h4>
                            <small>Total</small>
                        </div>
                        <i class="mdi mdi-file-document-outline mdi-24px"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('employee-delete-requests.index') }}">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Search</label>
                        <input type="text" class="form-control" name="search" value="{{ request('search') }}" 
                               placeholder="Search by employee name, email, username...">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="status">
                            <option value="">All Status</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>Accepted</option>
                            <option value="refused" {{ request('status') == 'refused' ? 'selected' : '' }}>Refused</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="mdi mdi-magnify me-1"></i>Filter
                            </button>
                            <a href="{{ route('employee-delete-requests.index') }}" class="btn btn-outline-secondary">
                                <i class="mdi mdi-refresh me-1"></i>Reset
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Requests Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Delete Requests</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Company</th>
                            <th>Reason</th>
                            <th>Status</th>
                            <th>Requested</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($deleteRequests as $request)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-sm me-2">
                                        <span class="avatar-initial rounded-circle bg-label-primary">
                                            {{ strtoupper(substr($request->employee->name ?? 'N', 0, 1)) }}
                                        </span>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ $request->employee->name ?? 'N/A' }}</h6>
                                        <small class="text-muted">{{ $request->employee->email ?? 'N/A' }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                {{ $request->employee->company->name ?? 'N/A' }}
                            </td>
                            <td>
                                <span class="text-truncate d-block" style="max-width: 250px;" title="{{ $request->reason }}">
                                    {{ $request->reason }}
                                </span>
                            </td>
                            <td>
                                @php
                                    $statusClasses = [
                                        'pending' => 'bg-warning',
                                        'accepted' => 'bg-success',
                                        'refused' => 'bg-danger'
                                    ];
                                @endphp
                                <span class="badge {{ $statusClasses[$request->status] ?? 'bg-secondary' }}">
                                    {{ ucfirst($request->status) }}
                                </span>
                            </td>
                            <td>
                                <small>{{ $request->created_at->format('M d, Y') }}</small><br>
                                <small class="text-muted">{{ $request->created_at->format('h:i A') }}</small>
                            </td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                        <i class="mdi mdi-dots-vertical"></i>
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="{{ route('employee-delete-requests.show', $request->id) }}">
                                            <i class="mdi mdi-eye-outline me-2"></i>View Details
                                        </a>
                                        @if($request->status === 'pending')
                                        <a class="dropdown-item" href="{{ route('employee-delete-requests.edit', $request->id) }}">
                                            <i class="mdi mdi-pencil-outline me-2"></i>Review Request
                                        </a>
                                        @endif
                                        <div class="dropdown-divider"></div>
                                        <form method="POST" action="{{ route('employee-delete-requests.destroy', $request->id) }}" 
                                              onsubmit="return confirm('Are you sure you want to delete this request?')" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="dropdown-item text-danger">
                                                <i class="mdi mdi-delete-outline me-2"></i>Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <div class="empty-state">
                                    <i class="mdi mdi-account-remove-outline mdi-48px text-muted mb-3"></i>
                                    <h5 class="text-muted">No delete requests found</h5>
                                    <p class="text-muted">There are no delete requests matching your criteria.</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($deleteRequests->hasPages())
                <div class="d-flex justify-content-center mt-4">
                    {{ $deleteRequests->appends(request()->query())->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

@endsection