@php
    $editing = isset($venue) && $venue;

    $savedFacilities = old(
        'facilities',
        $editing ? ($venue->facilities ?? []) : []
    );

    if (empty($savedFacilities)) {
        $savedFacilities = [''];
    }
@endphp

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

<div class="venue-form-layout">
    <div class="venue-form-main">

        {{-- Basic Information --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Basic Information</h2>
                    <p class="panel-note">
                        Main venue name, URL and descriptions.
                    </p>
                </div>
            </div>

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

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

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

                    <div class="form-group">
                        <label for="small_title" class="form-label">
                            Small Title
                        </label>

                        <input
                            type="text"
                            name="small_title"
                            id="small_title"
                            value="{{ old('small_title', $editing ? $venue->small_title : '') }}"
                            class="form-control @error('small_title') has-error @enderror"
                            placeholder="Elegant Events & Celebrations"
                        >

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

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

                        <input
                            type="text"
                            name="slug"
                            id="slug"
                            value="{{ old('slug', $editing ? $venue->slug : '') }}"
                            class="form-control @error('slug') has-error @enderror"
                            placeholder="Leave empty to generate automatically"
                        >

                        <div class="form-help">
                            Example: grand-ballroom
                        </div>

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

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

                        <textarea
                            name="short_description"
                            id="short_description"
                            rows="3"
                            maxlength="500"
                            class="form-control @error('short_description') has-error @enderror"
                            placeholder="Short introduction for venue cards..."
                        >{{ old('short_description', $editing ? $venue->short_description : '') }}</textarea>

                        <div class="form-help">
                            Maximum 500 characters.
                        </div>

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

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

                        <textarea
                            name="description"
                            id="description"
                            rows="8"
                            class="form-control @error('description') has-error @enderror"
                            placeholder="Write the complete venue description..."
                        >{{ old('description', $editing ? $venue->description : '') }}</textarea>

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

        {{-- Capacity and Pricing --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Capacity & Pricing</h2>
                    <p class="panel-note">
                        Guest capacity and starting rental price.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid form-grid-four">
                    <div class="form-group form-group-last">
                        <label for="minimum_guests" class="form-label">
                            Minimum Guests <span class="required">*</span>
                        </label>

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

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

                    <div class="form-group form-group-last">
                        <label for="maximum_guests" class="form-label">
                            Maximum Guests <span class="required">*</span>
                        </label>

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

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

                    <div class="form-group form-group-last">
                        <label for="base_price" class="form-label">
                            Base Price <span class="required">*</span>
                        </label>

                        <div class="money-field">
                            <span>৳</span>

                            <input
                                type="number"
                                name="base_price"
                                id="base_price"
                                value="{{ old('base_price', $editing ? $venue->base_price : '') }}"
                                class="form-control @error('base_price') has-error @enderror"
                                min="0"
                                step="0.01"
                                required
                            >
                        </div>

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

                    <div class="form-group form-group-last">
                        <label for="discount_price" class="form-label">
                            Discount Price
                        </label>

                        <div class="money-field">
                            <span>৳</span>

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

                        <div class="form-help">
                            Must be lower than base price.
                        </div>

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

        {{-- Venue Details --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">Venue Details</h2>
                    <p class="panel-note">
                        Venue category, size and operating hours.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="venue_type" class="form-label">
                            Venue Type
                        </label>

                        <select
                            name="venue_type"
                            id="venue_type"
                            class="form-control @error('venue_type') has-error @enderror"
                        >
                            <option value="">Select Venue Type</option>

                            @foreach([
                                'Indoor',
                                'Outdoor',
                                'Indoor & Outdoor'
                            ] as $type)
                                <option
                                    value="{{ $type }}"
                                    @selected(
                                        old(
                                            'venue_type',
                                            $editing ? $venue->venue_type : ''
                                        ) === $type
                                    )
                                >
                                    {{ $type }}
                                </option>
                            @endforeach
                        </select>

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

                    <div class="form-group">
                        <label for="venue_size" class="form-label">
                            Venue Size
                        </label>

                        <input
                            type="text"
                            name="venue_size"
                            id="venue_size"
                            value="{{ old('venue_size', $editing ? $venue->venue_size : '') }}"
                            class="form-control @error('venue_size') has-error @enderror"
                            placeholder="Example: 5,000 sq. ft."
                        >

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

                    <div class="form-group form-group-last">
                        <label for="opening_time" class="form-label">
                            Opening Time
                        </label>

                        <input
                            type="time"
                            name="opening_time"
                            id="opening_time"
                            value="{{ old(
                                'opening_time',
                                $editing && $venue->opening_time
                                    ? substr($venue->opening_time, 0, 5)
                                    : ''
                            ) }}"
                            class="form-control @error('opening_time') has-error @enderror"
                        >

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

                    <div class="form-group form-group-last">
                        <label for="closing_time" class="form-label">
                            Closing Time
                        </label>

                        <input
                            type="time"
                            name="closing_time"
                            id="closing_time"
                            value="{{ old(
                                'closing_time',
                                $editing && $venue->closing_time
                                    ? substr($venue->closing_time, 0, 5)
                                    : ''
                            ) }}"
                            class="form-control @error('closing_time') has-error @enderror"
                        >

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

        {{-- Facilities --}}
        <section class="panel form-panel">
            <div class="panel-header facility-heading">
                <div>
                    <h2 class="panel-title">Facilities</h2>
                    <p class="panel-note">
                        Add the facilities available with this venue.
                    </p>
                </div>

                <button
                    type="button"
                    id="addFacilityButton"
                    class="btn btn-secondary"
                >
                    + Add Facility
                </button>
            </div>

            <div class="panel-body">
                <div id="facilitiesContainer">
                    @foreach($savedFacilities as $facility)
                        <div class="facility-row">
                            <span class="facility-mark">✓</span>

                            <input
                                type="text"
                                name="facilities[]"
                                value="{{ $facility }}"
                                class="form-control"
                                placeholder="Example: Sound System"
                            >

                            <button
                                type="button"
                                class="btn btn-danger remove-facility-button"
                            >
                                Remove
                            </button>
                        </div>
                    @endforeach
                </div>

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

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

        {{-- SEO --}}
        <section class="panel form-panel">
            <div class="panel-header">
                <div>
                    <h2 class="panel-title">SEO Information</h2>
                    <p class="panel-note">
                        Optional search engine information.
                    </p>
                </div>
            </div>

            <div class="panel-body">
                <div class="form-grid">
                    <div class="form-group full">
                        <label for="meta_title" class="form-label">
                            Meta Title
                        </label>

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

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

                    <div class="form-group full form-group-last">
                        <label for="meta_description" class="form-label">
                            Meta Description
                        </label>

                        <textarea
                            name="meta_description"
                            id="meta_description"
                            rows="4"
                            class="form-control @error('meta_description') has-error @enderror"
                        >{{ old('meta_description', $editing ? $venue->meta_description : '') }}</textarea>

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

    {{-- Right Sidebar --}}
    <aside class="venue-form-sidebar">
        <section class="panel form-panel">
            <div class="panel-header">
                <h2 class="panel-title">Publish Settings</h2>
            </div>

            <div class="panel-body">
                <div class="switch-setting">
                    <input type="hidden" name="status" value="0">

                    <label class="switch-line" for="status">
                        <input
                            type="checkbox"
                            name="status"
                            id="status"
                            value="1"
                            @checked(
                                old(
                                    'status',
                                    $editing ? $venue->status : true
                                )
                            )
                        >

                        <span>
                            <strong>Active</strong>
                            <small>
                                Active venues can appear on the website.
                            </small>
                        </span>
                    </label>
                </div>

                <div class="switch-setting">
                    <input type="hidden" name="is_featured" value="0">

                    <label class="switch-line" for="is_featured">
                        <input
                            type="checkbox"
                            name="is_featured"
                            id="is_featured"
                            value="1"
                            @checked(
                                old(
                                    'is_featured',
                                    $editing ? $venue->is_featured : false
                                )
                            )
                        >

                        <span>
                            <strong>Featured Venue</strong>
                            <small>
                                Featured venues receive priority placement.
                            </small>
                        </span>
                    </label>
                </div>

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

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

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

        <section class="panel form-panel">
            <div class="panel-header">
                <h2 class="panel-title">Featured Image</h2>
            </div>

            <div class="panel-body">
                <div
                    id="featuredImagePreview"
                    class="featured-image-preview"
                >
                    @if($editing && $venue->featured_image)
                        <img
                            src="{{ asset('storage/' . $venue->featured_image) }}"
                            alt="{{ $venue->name }}"
                        >
                    @else
                        <div class="image-placeholder">
                            <span class="image-placeholder-mark">IMG</span>
                            <span>Image preview</span>
                        </div>
                    @endif
                </div>

                <input
                    type="file"
                    name="featured_image"
                    id="featured_image"
                    class="form-control @error('featured_image') has-error @enderror"
                    accept=".jpg,.jpeg,.png,.webp"
                >

                <div class="form-help">
                    JPG, PNG or WebP. Maximum 5 MB.
                </div>

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

                @if($editing && $venue->featured_image)
                    <button
                        type="submit"
                        form="remove-venue-image-form"
                        class="btn btn-danger remove-image-button"
                    >
                        Remove Current Image
                    </button>
                @endif
            </div>
        </section>

        <section class="panel form-panel">
            <div class="panel-header">
                <h2 class="panel-title">Button Settings</h2>
            </div>

            <div class="panel-body">
                <div class="form-group form-group-last">
                    <label for="button_text" class="form-label">
                        Button Text
                    </label>

                    <input
                        type="text"
                        name="button_text"
                        id="button_text"
                        value="{{ old(
                            'button_text',
                            $editing ? $venue->button_text : 'View Venue'
                        ) }}"
                        class="form-control @error('button_text') has-error @enderror"
                        placeholder="View Venue"
                    >

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

        <div class="sidebar-actions">
            <button type="submit" class="btn btn-primary btn-submit">
                {{ $submitText }}
            </button>

            <a
                href="{{ route('admin.venues.index') }}"
                class="btn btn-secondary btn-submit"
            >
                Cancel
            </a>
        </div>
    </aside>
</div>

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

    .form-panel {
        margin-bottom: 24px;
    }

    .panel-note {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5;
    }

    .form-grid-title {
        grid-template-columns: 2fr 1fr;
    }

    .form-grid-four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .form-group-last {
        margin-bottom: 0;
    }

    textarea.form-control {
        display: block;
        resize: vertical;
        line-height: 1.6;
    }

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

    .field-error {
        margin-top: 7px;
        font-size: 12px;
    }

    .form-control.has-error {
        border-color: var(--danger);
    }

    .money-field {
        position: relative;
    }

    .money-field > span {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: #71808a;
        font-weight: 700;
    }

    .money-field .form-control {
        padding-left: 35px;
    }

    .facility-heading {
        flex-wrap: wrap;
    }

    .facility-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 9px;
        align-items: center;
        margin-bottom: 10px;
    }

    .facility-mark {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: #e8f8ee;
        color: var(--success);
        font-weight: 700;
    }

    .featured-image-preview {
        width: 100%;
        min-height: 220px;
        margin-bottom: 15px;
        overflow: hidden;
        border: 1px dashed #cbd5da;
        border-radius: 10px;
        background: #f7f9fa;
    }

    .featured-image-preview img {
        width: 100%;
        height: 220px;
        display: block;
        object-fit: cover;
    }

    .image-placeholder {
        min-height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        color: #94a1a9;
    }

    .image-placeholder-mark {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #e8edf0;
        color: #71808a;
        font-size: 11px;
        font-weight: 700;
    }

    .venue-form-sidebar {
        position: sticky;
        top: 24px;
    }

    .switch-setting {
        padding-bottom: 18px;
        margin-bottom: 18px;
        border-bottom: 1px solid var(--border);
    }

    .switch-line {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        cursor: pointer;
    }

    .switch-line input {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin-top: 2px;
        accent-color: var(--navy);
    }

    .switch-line strong,
    .switch-line small {
        display: block;
    }

    .switch-line strong {
        color: #344955;
        font-size: 13px;
    }

    .switch-line small {
        margin-top: 5px;
        color: var(--muted);
        line-height: 1.45;
    }

    .sidebar-actions {
        display: grid;
        gap: 10px;
    }

    .btn-submit {
        width: 100%;
    }

    .remove-image-button {
        width: 100%;
        margin-top: 14px;
    }

    @media (max-width: 1250px) {
        .form-grid-four {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 1100px) {
        .venue-form-layout {
            grid-template-columns: 1fr;
        }

        .venue-form-sidebar {
            position: static;
        }
    }

    @media (max-width: 820px) {
        .form-grid-title,
        .form-grid-four {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 520px) {
        .facility-row {
            grid-template-columns: 1fr auto;
        }

        .facility-mark {
            display: none;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const facilitiesContainer =
            document.getElementById('facilitiesContainer');

        const addFacilityButton =
            document.getElementById('addFacilityButton');

        function bindRemoveButtons() {
            document
                .querySelectorAll('.remove-facility-button')
                .forEach(function (button) {
                    button.onclick = function () {
                        const rows = facilitiesContainer
                            .querySelectorAll('.facility-row');

                        if (rows.length === 1) {
                            const input = rows[0]
                                .querySelector('input');

                            input.value = '';
                            input.focus();

                            return;
                        }

                        button.closest('.facility-row').remove();
                    };
                });
        }

        if (addFacilityButton && facilitiesContainer) {
            addFacilityButton.addEventListener(
                'click',
                function () {
                    const row = document.createElement('div');

                    row.className = 'facility-row';

                    row.innerHTML =
                        '<span class="facility-mark">✓</span>' +
                        '<input type="text" name="facilities[]" ' +
                        'class="form-control" ' +
                        'placeholder="Example: Sound System">' +
                        '<button type="button" ' +
                        'class="btn btn-danger remove-facility-button">' +
                        'Remove</button>';

                    facilitiesContainer.appendChild(row);

                    bindRemoveButtons();
                    row.querySelector('input').focus();
                }
            );

            bindRemoveButtons();
        }

        const featuredInput =
            document.getElementById('featured_image');

        const featuredPreview =
            document.getElementById('featuredImagePreview');

        if (featuredInput && featuredPreview) {
            featuredInput.addEventListener(
                'change',
                function () {
                    const file = featuredInput.files[0];

                    if (
                        !file ||
                        !file.type.startsWith('image/')
                    ) {
                        return;
                    }

                    const reader = new FileReader();

                    reader.onload = function (event) {
                        featuredPreview.innerHTML =
                            '<img src="' +
                            event.target.result +
                            '" alt="Featured image preview">';
                    };

                    reader.readAsDataURL(file);
                }
            );
        }

        const removeImageButton =
            document.querySelector('.remove-image-button');

        if (removeImageButton) {
            removeImageButton.addEventListener(
                'click',
                function (event) {
                    if (
                        !window.confirm(
                            'Are you sure you want to remove the current featured image?'
                        )
                    ) {
                        event.preventDefault();
                    }
                }
            );
        }
    });
</script>
@endpush