@extends('layouts.state')

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

@section('content')
<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;">
      <!-- State filter (all states) for open events -->
  <select class="form-select form-select-sm w-auto" id="state_filter" name="state_filter" title="Filter by State" style="min-width:180px;" data-choices="data-choices" data-options='{"placeholder":true,"searchEnabled":true}'>
        <option value="">All States</option>
        @isset($states)
            @foreach($states as $s)
                <option value="{{ $s->id }}">{{ $s->name }}</option>
            @endforeach
        @endisset
      </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">

        
           

            <label for="reportrange" class="form-label mb-0 me-2 small">Date Range:</label>
            <input class="form-control datetimepicker form-control-sm w-auto" id="reportrange" name="by_date" 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 g-3" >
    <div class="col-12" >
       
            <!-- <div class="card-header border-bottom bg-body">
                <div class="row align-items-center py-0" style="min-height:22px;">
                    <div class="col">
                        <h4 class="mb-0 fw-semibold small" style="line-height:1.2;">All Applications</h4>
                    </div>
                </div>
            </div> -->
            
                <div class="row" id="allOpenEventsCardGrid" style="max-height:calc(100vh - 180px); overflow:auto;">
                  <!-- Event cards will be rendered by JS -->
                </div>
        
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div  class="modal-dialog" role="document">
    {{-- <form action="/upload" method="POST" enctype="multipart/form-data" class="modal-content"> --}}
      <!-- CSRF token for Laravel (if needed) -->
       <input type="hidden" name="_token" value="{{ csrf_token() }}">

      <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="uploadModalLabel">Upload File</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="fileInput" class="form-label">Choose file</label>
          <input class="form-control" type="file" id="fileInput" name="file" required>
        </div>
      </div>
       <div class="modal-footer">
        <button type="submit" class="btn btn-success" onclick="checkValidUsers();">Upload</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
 </div>

    {{-- </form> --}}
  </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/state/event.js?v=1768951184"></script>
@endpush