@extends('layouts.user')

@section('title', 'All Events')

@section('content')

        <div class="row g-2 mb-2 align-items-center">
            <div class="col-12">
                              
                <div class="row g-2 mb-2 align-items-center">
                    <div class="col-md-7 col-12">
                        <form class="d-flex gap-2 align-items-center" id="application-search-form" autocomplete="off">
                            <select class="form-select form-select-sm w-auto" id="search_by" name="search_by" style="min-width:130px;">
                                <option value="title">Title</option>
                                <option value="location">Location</option>
                            </select>
                            <input type="text" class="form-control form-control-sm w-auto" id="search_key" name="search_key" placeholder="Enter search..." style="min-width:160px;">

                            <select id="state_filter" name="state_id" class="form-select form-select-sm w-auto" data-choices="data-choices" data-options='{"placeholder":true,"searchEnabled":true}' style="min-width:160px;">
                                <option value="">All States</option>
                                @if(isset($states))
                                    @foreach($states as $s)
                                        <option value="{{ $s->id }}">{{ $s->name }}</option>
                                    @endforeach
                                @endif
                            </select>

                            <button type="submit" class="btn btn-phoenix-primary btn-sm px-3" onclick="searchByKey()">Go</button>
                           
                        </form>
                    </div>
                    <div class="col-md-5 col-12 text-md-end mt-2 mt-md-0">
                        <div class="d-flex justify-content-md-end align-items-center gap-2 flex-wrap">
                           
                            <label for="date_range" class="form-label mb-0 me-2 small">Date Range:</label>
                            <input class="form-control datetimepicker form-control-sm w-auto" id="reportrange" name="date_range" placeholder="d/m/y to d/m/y" data-options='{"mode":"range","dateFormat":"d/m/y","disableMobile":true}' readonly style="min-width:200px;" />
                        </div>
                    </div>
                </div>

                <div class="row" id="allEventsCardGrid" style="max-height:calc(100vh - 156px); overflow:auto;"></div>
            </div>
        </div>

@endsection

@section('footer_paginator')
    <div id="laravel_paginator" class=""></div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="/js/pages/user/event.js?v=1769070450"></script>
@endpush