@php
    $editing = isset($galleryCategory)
        && $galleryCategory;
@endphp

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

<div class="gallery-category-form-layout">
    <div class="gallery-category-form-main">
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">
                        Category Information
                    </h2>

                    <p class="panel-note">
                        Enter the gallery category name,
                        URL slug and description.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid">
                    <div class="form-group">
                        <label
                            for="name"
                            class="form-label"
                        >
                            Category Name
                            <span class="required">*</span>
                        </label>

                        <input
                            type="text"
                            name="name"
                            id="name"
                            value="{{ old(
                                'name',
                                $editing
                                    ? $galleryCategory->name
                                    : ''
                            ) }}"
                            class="form-control @error('name')
                                has-error
                            @enderror"
                            placeholder="Example: Resort Views"
                            required
                        >

                        @error('name')
                            <div class="field-error">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label
                            for="slug"
                            class="form-label"
                        >
                            URL Slug
                        </label>

                        <input
                            type="text"
                            name="slug"
                            id="slug"
                            value="{{ old(
                                'slug',
                                $editing
                                    ? $galleryCategory->slug
                                    : ''
                            ) }}"
                            class="form-control @error('slug')
                                has-error
                            @enderror"
                            placeholder="Automatically generated"
                        >

                        <div class="field-help">
                            Leave empty to generate it
                            automatically from the category name.
                        </div>

                        @error('slug')
                            <div class="field-error">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="form-group full">
                        <label
                            for="description"
                            class="form-label"
                        >
                            Description
                        </label>

                        <textarea
                            name="description"
                            id="description"
                            rows="7"
                            class="form-control @error('description')
                                has-error
                            @enderror"
                            placeholder="Describe this gallery category..."
                        >{{ old(
                            'description',
                            $editing
                                ? $galleryCategory->description
                                : ''
                        ) }}</textarea>

                        <div class="field-help">
                            Maximum 2,000 characters.
                        </div>

                        @error('description')
                            <div class="field-error">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>
            </div>
        </section>
    </div>

    <aside class="gallery-category-form-sidebar">
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">
                        Publishing
                    </h2>

                    <p class="panel-note">
                        Control category visibility and order.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-group">
                    <label
                        for="status"
                        class="form-label"
                    >
                        Status
                        <span class="required">*</span>
                    </label>

                    <select
                        name="status"
                        id="status"
                        class="form-control @error('status')
                            has-error
                        @enderror"
                        required
                    >
                        <option
                            value="1"
                            @selected(
                                (string) old(
                                    'status',
                                    $editing
                                        ? (int)
                                            $galleryCategory
                                                ->status
                                        : 1
                                ) === '1'
                            )
                        >
                            Active
                        </option>

                        <option
                            value="0"
                            @selected(
                                (string) old(
                                    'status',
                                    $editing
                                        ? (int)
                                            $galleryCategory
                                                ->status
                                        : 1
                                ) === '0'
                            )
                        >
                            Inactive
                        </option>
                    </select>

                    @error('status')
                        <div class="field-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <div class="form-group">
                    <label
                        for="is_featured"
                        class="form-label"
                    >
                        Placement
                        <span class="required">*</span>
                    </label>

                    <select
                        name="is_featured"
                        id="is_featured"
                        class="form-control @error('is_featured')
                            has-error
                        @enderror"
                        required
                    >
                        <option
                            value="0"
                            @selected(
                                (string) old(
                                    'is_featured',
                                    $editing
                                        ? (int)
                                            $galleryCategory
                                                ->is_featured
                                        : 0
                                ) === '0'
                            )
                        >
                            Regular
                        </option>

                        <option
                            value="1"
                            @selected(
                                (string) old(
                                    'is_featured',
                                    $editing
                                        ? (int)
                                            $galleryCategory
                                                ->is_featured
                                        : 0
                                ) === '1'
                            )
                        >
                            Featured
                        </option>
                    </select>

                    @error('is_featured')
                        <div class="field-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <div class="form-group">
                    <label
                        for="sort_order"
                        class="form-label"
                    >
                        Sort Order
                    </label>

                    <input
                        type="number"
                        name="sort_order"
                        id="sort_order"
                        value="{{ old(
                            'sort_order',
                            $editing
                                ? $galleryCategory->sort_order
                                : 0
                        ) }}"
                        class="form-control @error('sort_order')
                            has-error
                        @enderror"
                        min="0"
                        step="1"
                    >

                    <div class="field-help">
                        Lower numbers appear first.
                    </div>

                    @error('sort_order')
                        <div class="field-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>
        </section>

        <section class="panel action-panel">
            <div class="panel-body">
                <button
                    type="submit"
                    class="btn btn-primary action-button"
                >
                    {{ $submitText }}
                </button>

                <a
                    href="{{
                        route(
                            'admin.gallery-categories.index'
                        )
                    }}"
                    class="btn btn-secondary action-button"
                >
                    Cancel
                </a>
            </div>
        </section>
    </aside>
</div>

@push('styles')
<style>
    .gallery-category-form-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 340px);
        gap: 24px;
        align-items: start;
    }

    .gallery-category-form-main,
    .gallery-category-form-sidebar {
        min-width: 0;
    }

    .gallery-category-form-sidebar {
        display: grid;
        gap: 20px;
    }

    .form-panel {
        overflow: hidden;
    }

    .panel-note,
    .field-help {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .panel-note {
        margin: 5px 0 0;
    }

    .field-help {
        margin-top: 7px;
    }

    .required {
        color: var(--danger);
    }

    .action-panel .panel-body {
        display: grid;
        gap: 10px;
    }

    .action-button {
        width: 100%;
        justify-content: center;
    }

    @media (max-width: 900px) {
        .gallery-category-form-layout {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush