@extends('admin.layouts.app')

@section('title', 'Gallery Categories')
@section('page_title', 'Gallery Categories')

@section('content')
    <div class="page-heading">
        <div>
            <h1>Gallery Categories</h1>

            <p>
                Organise resort photographs into
                manageable gallery collections.
            </p>
        </div>

        <a
            href="{{
                route(
                    'admin.gallery-categories.create'
                )
            }}"
            class="btn btn-primary"
        >
            + Add Category
        </a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <div class="panel filter-panel">
        <form
            action="{{
                route(
                    'admin.gallery-categories.index'
                )
            }}"
            method="GET"
            class="gallery-category-filters"
        >
            <div class="filter-field">
                <label
                    for="search"
                    class="form-label"
                >
                    Search
                </label>

                <input
                    type="text"
                    name="search"
                    id="search"
                    value="{{ request('search') }}"
                    class="form-control"
                    placeholder="Name, slug or description..."
                >
            </div>

            <div class="filter-field">
                <label
                    for="status"
                    class="form-label"
                >
                    Status
                </label>

                <select
                    name="status"
                    id="status"
                    class="form-control"
                >
                    <option value="">
                        All Statuses
                    </option>

                    <option
                        value="active"
                        @selected(
                            request('status')
                            === 'active'
                        )
                    >
                        Active
                    </option>

                    <option
                        value="inactive"
                        @selected(
                            request('status')
                            === 'inactive'
                        )
                    >
                        Inactive
                    </option>
                </select>
            </div>

            <div class="filter-field">
                <label
                    for="featured"
                    class="form-label"
                >
                    Placement
                </label>

                <select
                    name="featured"
                    id="featured"
                    class="form-control"
                >
                    <option value="">
                        All Categories
                    </option>

                    <option
                        value="yes"
                        @selected(
                            request('featured')
                            === 'yes'
                        )
                    >
                        Featured
                    </option>

                    <option
                        value="no"
                        @selected(
                            request('featured')
                            === 'no'
                        )
                    >
                        Regular
                    </option>
                </select>
            </div>

            <div class="filter-actions">
                <button
                    type="submit"
                    class="btn btn-primary"
                >
                    Filter
                </button>

                <a
                    href="{{
                        route(
                            'admin.gallery-categories.index'
                        )
                    }}"
                    class="btn btn-secondary"
                >
                    Reset
                </a>
            </div>
        </form>
    </div>

    <div class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">
                    Gallery Category List
                </h2>

                <div class="panel-subtitle">
                    Total
                    {{ $galleryCategories->total() }}
                    categories
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="gallery-category-table">
                <thead>
                    <tr>
                        <th>SL</th>
                        <th>Category</th>
                        <th>Description</th>
                        <th class="text-center">
                            Featured
                        </th>
                        <th class="text-center">
                            Status
                        </th>
                        <th class="text-center">
                            Order
                        </th>
                        <th class="text-right">
                            Actions
                        </th>
                    </tr>
                </thead>

                <tbody>
                    @forelse(
                        $galleryCategories
                        as $galleryCategory
                    )
                        <tr>
                            <td>
                                {{
                                    $galleryCategories
                                        ->firstItem()
                                    + $loop->index
                                }}
                            </td>

                            <td>
                                <div
                                    class="gallery-category-summary"
                                >
                                    <div
                                        class="category-icon"
                                    >
                                        G
                                    </div>

                                    <div>
                                        <div
                                            class="category-name"
                                        >
                                            {{
                                                $galleryCategory
                                                    ->name
                                            }}
                                        </div>

                                        <div class="slug-text">
                                            {{
                                                $galleryCategory
                                                    ->slug
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td>
                                <div
                                    class="description-text"
                                >
                                    {{
                                        $galleryCategory
                                            ->description
                                            ?: 'No description provided.'
                                    }}
                                </div>
                            </td>

                            <td class="text-center">
                                <form
                                    action="{{ route(
                                        'admin.gallery-categories.toggle-featured',
                                        $galleryCategory
                                    ) }}"
                                    method="POST"
                                >
                                    @csrf
                                    @method('PATCH')

                                    <button
                                        type="submit"
                                        class="status-button {{
                                            $galleryCategory
                                                ->is_featured
                                                ? 'is-featured'
                                                : ''
                                        }}"
                                    >
                                        {{
                                            $galleryCategory
                                                ->is_featured
                                                ? 'Featured'
                                                : 'Regular'
                                        }}
                                    </button>
                                </form>
                            </td>

                            <td class="text-center">
                                <form
                                    action="{{ route(
                                        'admin.gallery-categories.toggle-status',
                                        $galleryCategory
                                    ) }}"
                                    method="POST"
                                >
                                    @csrf
                                    @method('PATCH')

                                    <button
                                        type="submit"
                                        class="badge status-button {{
                                            $galleryCategory->status
                                                ? 'badge-success'
                                                : 'badge-danger'
                                        }}"
                                    >
                                        {{
                                            $galleryCategory->status
                                                ? 'Active'
                                                : 'Inactive'
                                        }}
                                    </button>
                                </form>
                            </td>

                            <td class="text-center">
                                <span class="badge badge-role">
                                    {{
                                        $galleryCategory
                                            ->sort_order
                                    }}
                                </span>
                            </td>

                            <td class="text-right">
                                <div
                                    class="action-group
                                        action-group-end"
                                >
                                    <a
                                        href="{{ route(
                                            'admin.gallery-categories.edit',
                                            $galleryCategory
                                        ) }}"
                                        class="btn
                                            btn-secondary
                                            btn-small"
                                    >
                                        Edit
                                    </a>

                                    <form
                                        action="{{ route(
                                            'admin.gallery-categories.destroy',
                                            $galleryCategory
                                        ) }}"
                                        method="POST"
                                        class="delete-gallery-category-form"
                                    >
                                        @csrf
                                        @method('DELETE')

                                        <button
                                            type="submit"
                                            class="btn
                                                btn-danger
                                                btn-small"
                                        >
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7">
                                <div class="empty-state">
                                    <div
                                        class="empty-state-mark"
                                    >
                                        G
                                    </div>

                                    <h3>
                                        No gallery category found
                                    </h3>

                                    <p>
                                        Add your first category to
                                        organise resort photographs.
                                    </p>

                                    <a
                                        href="{{ route(
                                            'admin.gallery-categories.create'
                                        ) }}"
                                        class="btn btn-primary"
                                    >
                                        + Add Category
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($galleryCategories->hasPages())
            <div class="panel-footer pagination">
                {{ $galleryCategories->links() }}
            </div>
        @endif
    </div>
@endsection

@push('styles')
<style>
    .filter-panel {
        margin-bottom: 24px;
    }

    .gallery-category-filters {
        padding: 20px 24px;
        display: grid;
        grid-template-columns:
            minmax(250px, 2fr)
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            auto;
        gap: 14px;
        align-items: end;
    }

    .filter-actions {
        display: flex;
        gap: 8px;
    }

    .panel-subtitle,
    .slug-text {
        color: var(--muted);
        font-size: 12px;
    }

    .panel-subtitle {
        margin-top: 5px;
    }

    .slug-text {
        margin-top: 3px;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .gallery-category-table {
        min-width: 960px;
    }

    .gallery-category-summary {
        min-width: 240px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .category-icon {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #edf2f5;
        color: var(--navy);
        font-family: Georgia, serif;
        font-size: 18px;
        font-weight: 700;
    }

    .category-name {
        color: var(--navy);
        font-weight: 700;
    }

    .description-text {
        max-width: 380px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .action-group-end {
        justify-content: flex-end;
    }

    .status-button {
        cursor: pointer;
    }

    .is-featured {
        border-color: #d9ad5b;
        background: #fff4d9;
        color: #8a6218;
    }

    @media (max-width: 980px) {
        .gallery-category-filters {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }

        .filter-actions {
            grid-column: span 2;
        }
    }

    @media (max-width: 620px) {
        .gallery-category-filters {
            grid-template-columns: 1fr;
        }

        .filter-actions {
            grid-column: auto;
            flex-direction: column;
        }

        .filter-actions .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document
        .querySelectorAll(
            '.delete-gallery-category-form'
        )
        .forEach(function (form) {
            form.addEventListener(
                'submit',
                function (event) {
                    const confirmed = window.confirm(
                        'Are you sure you want to delete this gallery category?'
                    );

                    if (!confirmed) {
                        event.preventDefault();
                    }
                }
            );
        });
</script>
@endpush