@extends('layouts.admin-layout')
@section('title', 'Vendor Events')
@section('content')

    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12 mt-3">

                        <div class="card card-primary card-box-shadow">
                            <div class="card-body">
                                <h2>Vendor Events</h2>

                                <form method="GET" action="{{ route('admin.vendor.events') }}" class="mb-4">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select name="vendor_id" class="form-control" onchange="this.form.submit()">
                                                <option value="" disabled selected>Select a Vendor</option>
                                                @foreach($vendors as $vendor)
                                                    <option value="{{ $vendor->id }}" {{ $selectedVendorId == $vendor->id ? 'selected' : '' }}>
                                                        {{ $vendor->first_name . ' ' . $vendor->last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </form>

                                <!-- Events Table -->
                                <table id="eventsTable" class="table table-striped table-bordered" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>S.N.</th>
                                        <th>Name</th>
                                        <th>Event Name</th>
                                        <th>Event Date</th>
                                        <th>Price</th>
                                        <th>Number</th>
                                        <th>Email</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    @forelse($events as $event)
                                        <tr>
                                            <td>{{ $loop->iteration ?? '-'}}</td>
                                            <td>{{ $event->name ?? '-'}}</td>
                                            <td>{{ $event->event ?? '-'}}</td>
                                            <td>
                                                {{ $event->selected_date
                                                    ? \Carbon\Carbon::parse($event->selected_date)->format('m/d/Y')
                                                    : '-'
                                                }}
                                            </td>
                                            <td>{{ $event->price ?? '-'}}</td>
                                            <td>{{ $event->number ?? '-' }}</td>
                                            <td>{{ $event->email ?? '-' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">No events found for this vendor.</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>

{{--                                <a href="{{ route('admin.users') }}" class="btn btn-secondary mt-3">Back to Users</a>--}}
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </section>
    </div>

@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $("#eventsTable").DataTable();
        });
    </script>
@endsection