@extends('layouts.master')

@section('title', 'Lists')

@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>Lists</h1>
    <a href="{{ route('create-list') }}" class="btn btn-primary">New</a>
</div>

<div class="mb-3">
    <form method="GET" action="{{ route('lists') }}" class="form-inline">
        <div class="form-group">
            <label for="city" class="mr-2">City:</label>
            <select name="city" id="city" class="form-control mr-2">
                <option value="">All</option>
                @foreach($cities as $city)
                    <option value="{{ $city }}" {{ request('city') == $city ? 'selected' : '' }}>{{ $city }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="search" class="mr-2">Search:</label>
            <input type="text" name="search" id="search" class="form-control mr-2" 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>City</th>
            <th>Entity Type</th>
            <th>Title</th>
            <th>Short Title</th>
            <th>Image URL</th>
            <th>Listing Order</th>
            <th class="actions-column">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($lists as $list)
        <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $list->city }}</td>
            <td>@if(isset($list->entity_type->type_name)) {{ $list->entity_type->type_name }} @else &nbsp; @endif</td>
            <td>{{ $list->title }}</td>
            <td>{{ $list->short_title }}</td>
            <td>
                @if($list->imageURL)
                    <a href="{{ $list->imageURL }}" target="_blank">{{ $list->imageURL }}</a>
                @else
                    N/A
                @endif
            </td>
            <td>{{ $list->listing_order }}</td>

            <td>
                <div class="action-buttons">
                    <a href="{{ route('view-list', encrypt($list->id)) }}" class="btn btn-info btn-sm">View</a>
                    <a href="{{ route('edit-list', encrypt($list->id)) }}" class="btn btn-warning btn-sm">Edit</a>
                    <form action="{{ route('delete-list', encrypt($list->id)) }}" method="POST" onsubmit="return confirmDeletion();" style="display:inline;">
                        @csrf
                        @method('POST')
                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                    </form>
                    <a href="{{ route('filter-events-by-list', encrypt($list->id)) }}" class="btn btn-success btn-sm">Go to Events</a>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

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

@endsection