@extends('layouts.app')

@section('page-title', '')

@section('content')
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }

    @keyframes slideInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .page-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2.5rem;
        animation: fadeIn 0.6s ease-out;
    }

    .page-header {
        margin-bottom: 2rem;
        animation: slideInDown 0.6s ease-out;
    }

    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .page-title {
        font-size: 2.25rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    .stats-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.125rem;
        background: #f3f4f6;
        border-radius: 24px;
        font-weight: 600;
        color: #6b7280;
        font-size: 0.875rem;
        border: 1px solid #e5e7eb;
    }

    .page-subtitle {
        color: #6b7280;
        font-size: 1rem;
        margin: 0;
    }

    .success-alert {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        padding: 1rem 1.25rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        border-left: 4px solid #10b981;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        animation: slideInDown 0.5s ease-out;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .success-alert .content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .success-alert i {
        font-size: 1.25rem;
        color: #10b981;
    }

    .success-alert button {
        background: rgba(255, 255, 255, 0.3);
        border: none;
        border-radius: 8px;
        padding: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .success-alert button:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    .search-header {
        padding: 1.25rem 1.5rem;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .search-label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #374151;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .search-container {
        position: relative;
        width: 100%;
        max-width: 320px;
    }

    .search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

    .search-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.125rem;
        height: 1.125rem;
        color: #9ca3af;
    }

    .table-wrapper {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid #e5e7eb;
        animation: fadeIn 0.7s ease-out 0.2s backwards;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
    }

    .table thead {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .table thead th {
        color: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 1rem 1.25rem;
        font-size: 0.8rem;
        text-align: left;
    }

    .table tbody tr {
        transition: all 0.2s ease;
        border-bottom: 1px solid #f3f4f6;
        background: white;
    }

    .table tbody tr:hover {
        background: #f9fafb;
    }

    .table tbody tr:last-child {
        border-bottom: none;
    }

    .table tbody td {
        padding: 1rem 1.25rem;
        color: #374151;
        font-size: 0.95rem;
    }

    .user-cell {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .user-avatar {
        width: 2.5rem;
        height: 2.5rem;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 0.875rem;
    }

    .user-name {
        font-weight: 600;
        color: #111827;
    }

    .contact-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6b7280;
    }

    .contact-info i {
        color: #9ca3af;
        font-size: 0.875rem;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.875rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.8rem;
        background: #fee2e2;
        color: #dc2626;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
    }

    .btn-action {
        padding: 0.5rem;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-restore {
        background: #10b981;
        color: white;
    }

    .btn-restore:hover {
        background: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .btn-delete {
        background: #ef4444;
        color: white;
    }

    .btn-delete:hover {
        background: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #9ca3af;
    }

    .empty-state-icon {
        width: 4rem;
        height: 4rem;
        margin: 0 auto 1.5rem;
        color: #d1d5db;
    }

    .empty-state h3 {
        font-size: 1.25rem;
        color: #6b7280;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .empty-state p {
        font-size: 1rem;
        color: #9ca3af;
    }

    .table-footer {
        padding: 1rem 1.5rem;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .table-footer-text {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
    }

    .table-footer-text strong {
        color: #111827;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .page-container {
            padding: 1rem;
        }

        .page-title {
            font-size: 1.75rem;
        }

        .header-top {
            flex-direction: column;
            align-items: flex-start;
        }

        .search-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .search-container {
            max-width: 100%;
        }

        .table-wrapper {
            overflow-x: auto;
        }

        .table {
            min-width: 800px;
        }

        .action-buttons {
            flex-direction: column;
        }
    }
</style>

<div class="page-container">
    <div class="page-header">
        <div class="header-top">
            <div>
                <h1 class="page-title">Rejected Submissions</h1>
                <p class="page-subtitle">Manage and restore declined entries</p>
            </div>
            <div class="stats-badge">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" style="width: 1.125rem; height: 1.125rem;">
                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <span id="totalCount">{{ count($submissions) }}</span> Total
            </div>
        </div>
    </div>

    @if(session('success'))
    <div id="successAlert" class="success-alert">
        <div class="content">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
        <button onclick="closeAlert()">
            <svg style="width: 1.25rem; height: 1.25rem;" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
        </button>
    </div>
    @endif

    <div class="table-wrapper">
        <div class="search-header">
            <div class="search-label">
                <svg style="width: 1.25rem; height: 1.25rem; color: #6b7280;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
                Rejected Records
            </div>
            <div class="search-container">
                <input type="text" id="searchInput" placeholder="Search by name or mobile..." class="search-input">
                <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Full Name</th>
                    <th>Mobile</th>
                    <th>Status</th>
                    <th style="text-align: center;">Actions</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                @forelse($submissions as $sub)
                <tr data-name="{{ $sub->first_name }} {{ $sub->surname }}" data-mobile="{{ $sub->mobile }}">
                    <td>
                        <span style="font-weight: 600; color: #6b7280;">{{ $loop->iteration }}</span>
                    </td>
                    <td>
                        <div class="user-cell">
                            <div class="user-avatar">
                                {{ strtoupper(substr($sub->first_name, 0, 1)) }}
                            </div>
                            <span class="user-name">{{ $sub->first_name }} {{ $sub->surname }}</span>
                        </div>
                    </td>
                    <td>
                        <div class="contact-info">
                            <i class="fas fa-phone"></i>
                            {{ $sub->mobile }}
                        </div>
                    </td>
                    <td>
                        <span class="status-badge">
                            {{ ucfirst($sub->status) }}
                        </span>
                    </td>
                    <td>
                        <div class="action-buttons">
                            <form action="{{ route('submissions.restore', $sub) }}" method="POST" style="margin: 0;">
                                @csrf
                                <button type="submit" onclick="return confirm('Restore this submission?')" class="btn-action btn-restore" title="Restore">
                                    <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                    </svg>
                                </button>
                            </form>

                            <form action="{{ route('submissions.destroy', $sub) }}" method="POST" style="margin: 0;" onsubmit="return confirmDelete(event, '{{ $sub->first_name }} {{ $sub->surname }}')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-action btn-delete" title="Delete Forever">
                                    <svg style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr id="emptyRow">
                    <td colspan="5">
                        <div class="empty-state">
                            <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                            </svg>
                            <h3>No Rejected Submissions</h3>
                            <p>All submissions are currently active</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <div class="table-footer">
            <p class="table-footer-text">
                Showing <strong id="visibleCount">{{ count($submissions) }}</strong> of <strong>{{ count($submissions) }}</strong> rejected submissions
            </p>
        </div>
    </div>
</div>

<script>
    function closeAlert() {
        const alert = document.getElementById('successAlert');
        if (alert) {
            alert.style.animation = 'slideInDown 0.3s ease-out reverse';
            setTimeout(() => alert.remove(), 300);
        }
    }

    setTimeout(() => {
        closeAlert();
    }, 5000);

    const searchInput = document.getElementById('searchInput');
    const tableBody = document.getElementById('tableBody');
    const visibleCount = document.getElementById('visibleCount');
    const emptyRow = document.getElementById('emptyRow');

    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();
        const rows = tableBody.querySelectorAll('tr:not(#emptyRow)');
        let visibleRows = 0;

        rows.forEach(row => {
            const name = row.getAttribute('data-name')?.toLowerCase() || '';
            const mobile = row.getAttribute('data-mobile')?.toLowerCase() || '';
            
            if (name.includes(searchTerm) || mobile.includes(searchTerm)) {
                row.style.display = '';
                visibleRows++;
            } else {
                row.style.display = 'none';
            }
        });

        if (visibleCount) {
            visibleCount.textContent = visibleRows;
        }

        if (emptyRow) {
            emptyRow.style.display = visibleRows === 0 ? '' : 'none';
        }
    });

    function confirmDelete(event, name) {
        event.preventDefault();
        const confirmed = confirm(`Are you sure you want to permanently delete "${name}"?\n\nThis action cannot be undone!`);
        if (confirmed) {
            event.target.submit();
        }
        return false;
    }
</script>
@endsection