@extends('adminlte::page')

@section('title', 'Webinar Registration')

@push('css')
    <style>

        .form-label {
            font-weight: 600;
            color: #495057;
        }

        .btn-filter {
            margin-right: 10px;
        }

        .results-info {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .badge {
            font-size: 0.875em;
        }
    </style>
@endpush

@section('content_header')
    <h1>Webinar Registration</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">All Webinar Registrations</h3>
        </div>
        <div class="card-body">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            <!-- Filter Form -->
            <div class="card mb-4 filter-card">
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.event-applications.index') }}" class="row g-3"
                        id="filterForm">
                        <div class="col-md-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name"
                                value="{{ request('name') }}" placeholder="Search by name...">
                        </div>
                        <div class="col-md-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email"
                                value="{{ request('email') }}" placeholder="Search by email...">
                        </div>
                        <div class="col-md-3">
                            <label for="phone" class="form-label">Phone</label>
                            <input type="text" class="form-control" id="phone" name="phone"
                                value="{{ request('phone') }}" placeholder="Search by phone...">
                        </div>
                        <div class="col-md-3">
                            <label for="marketing_consent" class="form-label">Marketing Consent</label>
                            <select class="form-control" id="marketing_consent" name="marketing_consent">
                                <option value="">All</option>
                                <option value="yes" {{ request('marketing_consent') == 'yes' ? 'selected' : '' }}>Yes
                                </option>
                                <option value="no" {{ request('marketing_consent') == 'no' ? 'selected' : '' }}>No
                                </option>
                            </select>
                        </div>
                        <div class="col-12 mt-3">
                            <button type="submit" class="btn btn-primary btn-filter">
                                Filter
                            </button>
                            <a href="{{ route('admin.event-applications.index') }}" class="btn btn-secondary btn-filter">
                                Clear
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Results Count -->
            <div class="mb-3">
                <span class="badge badge-info">
                    Showing {{ $applications->count() }} of {{ $applications->total() }} registrations
                </span>
                @php
                    $hasActiveFilters = false;
                    $filterParams = request()->only(['name', 'email', 'phone', 'marketing_consent']);
                    foreach ($filterParams as $value) {
                        if ($value !== '' && $value !== null) {
                            $hasActiveFilters = true;
                            break;
                        }
                    }
                @endphp
                @if ($hasActiveFilters)
                    <span class="badge badge-warning ml-2">
                        <i class="fas fa-filter"></i> Filtered Results
                    </span>
                @endif
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Sr. No.</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Marketing Consent</th>
                            <th>Registered On</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($applications as $index => $application)
                            <tr>
                                <td>{{ $applications->firstItem() + $index }}</td>
                                <td>{{ $application->first_name }} {{ $application->last_name }}</td>
                                <td>{{ $application->email }}</td>
                                <td>{{ $application->phone }}</td>
                                <td>
                                    @if ($application->marketing_consent)
                                        <span class="badge badge-success">Yes</span>
                                    @else
                                        <span class="badge badge-secondary">No</span>
                                    @endif
                                </td>
                                <td>{{ $application->created_at->format('M d, Y h:i A') }}</td>
                                <td>
                                    <a href="{{ route('admin.event-applications.show', $application) }}"
                                        class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                    <form action="{{ route('admin.event-applications.destroy', $application) }}"
                                        method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger"
                                            onclick="return confirm('Are you sure you want to delete this registration?')">
                                            <i class="fas fa-trash"></i> Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center">No webinar registrations found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $applications->links() }}
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .table th,
        .table td {
            vertical-align: middle;
        }

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

        .table th,
        .table td {
            white-space: nowrap;
            min-width: 100px;
        }

        .table th:nth-child(1),
        .table td:nth-child(1) {
            min-width: 50px;
        }

        /* ID */
        .table th:nth-child(2),
        .table td:nth-child(2) {
            min-width: 150px;
        }

        /* Name */
        .table th:nth-child(3),
        .table td:nth-child(3) {
            min-width: 200px;
        }

        /* Email */
        .table th:nth-child(4),
        .table td:nth-child(4) {
            min-width: 120px;
        }

        /* Phone */
        .table th:nth-child(5),
        .table td:nth-child(5) {
            min-width: 120px;
        }

        /* Marketing Consent */
        .table th:nth-child(6),
        .table td:nth-child(6) {
            min-width: 150px;
        }

        /* Registered On */
        .table th:nth-child(7),
        .table td:nth-child(7) {
            min-width: 120px;
        }

        /* Actions */
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Auto-hide success messages after 5 seconds
            setTimeout(function() {
                $('.alert-success').fadeOut();
            }, 5000);

            // No JavaScript needed - server-side handling will clean up URLs
        });
    </script>
@stop