@extends('layouts.master')

@section('content')

<style>
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .action-buttons a, .action-buttons form {
        flex: 1;
    }
    .table th, .table td {
        vertical-align: middle;
    }
    .actions-column {
        width: 180px; /* Adjust this value as needed */
    }
</style>

<div class="d-flex justify-content-between mb-3">
    <h1>Events</h1>
    <a href="{{ route('create-event') }}" class="btn btn-primary">New</a>
</div>

<div class="mb-3">
    <form method="GET" action="{{ route('events') }}" class="form-inline">
        <div class="form-group mr-3">
            <label for="city" class="mr-2">City:</label>
            <select name="city" id="city" class="form-control">
                <option value="">All</option>
                @foreach($cities as $city)
                    <option value="{{ $city }}" {{ request('city') == $city ? 'selected' : '' }}>{{ $city }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group mr-3">
            <label for="list_id" class="mr-2">List:</label>
            <select name="list_id" id="list_id" class="form-control">
                <option value="">All</option>
            </select>
        </div>
        <div class="form-group mr-3">
            <label for="search" class="mr-2">Search:</label>
            <input type="text" name="search" id="search" class="form-control" value="{{ request('search') }}">
        </div>
        <button type="submit" class="btn btn-primary">Filter</button>
    </form>
</div>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Sl:No</th>
            <th>List</th>
            <th>Description</th>
            <th>Short Title</th>
            <th>Price</th>
            <th>Image URL</th>
            <th class="actions-column">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($events as $event)
        <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $event->list ? $event->list->title : 'No List' }}</td>
            <td>{{ $event->description }}</td>
            <td>{{ $event->short_title }}</td>
            <td>{{ $event->price }}</td>
            <td>
                @if($event->imageURL)
                    <a href="{{ $event->imageURL }}" target="_blank">{{ $event->imageURL }}</a>
                @else
                    N/A
                @endif
            </td>
            <td>
                <div class="action-buttons">
                    <a href="{{ route('view-event', encrypt($event->id)) }}" class="btn btn-info btn-sm">View</a>
                    <a href="{{ route('edit-event', encrypt($event->id)) }}" class="btn btn-warning btn-sm">Edit</a>
                    <form action="{{ route('delete-event', encrypt($event->id)) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this event?');" style="display:inline;">
                        @csrf
                        @method('POST')
                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<script>
    function confirmDeletion() {
        return confirm('Are you sure you want to delete this item?');
    }

    // Fetch lists based on selected city
    document.getElementById('city').addEventListener('change', function() {
        var city = this.value;
        var listSelect = document.getElementById('list_id');
        
        // Clear existing options
        listSelect.innerHTML = '<option value="">All</option>';
        
        if (city) {
            fetch(`/get-lists-by-city-request?city=${city}`)
                .then(response => response.json())
                .then(data => {
                    for (var key in data) {
                        if (data.hasOwnProperty(key)) {
                            var option = document.createElement('option');
                            option.value = key;
                            option.text = data[key];
                            listSelect.appendChild(option);
                        }
                    }
                });
        }
    });

    // Pre-populate lists if city is selected
    window.addEventListener('load', function() {
        var city = document.getElementById('city').value;
        if (city) {
            var event = new Event('change');
            document.getElementById('city').dispatchEvent(event);
        }
    });
</script>

@endsection