@extends('layouts.dashboard')

@section('content')
@php
/**
 * Admin house-ad form — place a free promotion on any placement, assigned to a restaurant.
 * House ads carry the same "Sponsored" disclosure as paid vendor ads; they simply cost
 * nothing and go live immediately.
 * @var array $placements  AdCampaign::placements() [key => ['label','desc']]
 * @var array $restaurants [['id','name'], ...] approved restaurants
 * @var array $menuItems   [['id','restaurant_id','name','category_name'], ...] every approved venue's dishes
 * @var array $tags        [['name','slug'], ...]
 * @var array $cuisines    [['name','slug'], ...]
 */
$oldVal = static function (string $k, string $def = '') { return (string) \App\Support\Session::old($k, $def); };
$placementKeys = array_keys($placements);
$selPlacement = $oldVal('placement', (string) ($placementKeys[0] ?? ''));
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php /* Back rides the floating top bar, as on every detail/editor page — never inside a card. */
@endphp
<div class="qm-od-topbar">
    <a href="{{ route('admin.campaigns') }}" class="qm-btn qm-btn-outline qm-btn-sm"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
</div>
<div class="qm-card">
    <div class="qm-ops-head">
        <h2 class="mb-0">{{ t_raw('admin.campaigns.form_heading') }}</h2>
    </div>

    <form method="post" action="{{ route('admin.campaigns') }}" enctype="multipart/form-data" id="qm-house-ad-form">
        @csrf

        <div class="mb-3">
            <label class="form-label" for="house-restaurant">{{ t_raw('admin.campaigns.assign_restaurant_label') }}</label>
            <select class="form-select" id="house-restaurant" name="restaurant_id" required>
                <option value="">{{ t_raw('admin.campaigns.assign_restaurant_placeholder') }}</option>
                @foreach ($restaurants as $rr)
                <option value="{{ (int) $rr['id'] }}"{!! $oldVal('restaurant_id') === (string) $rr['id'] ? ' selected' : '' !!}>{{ $rr['name'] }}</option>
                @endforeach
            </select>
        </div>

        @php /* What the ad sells. Every placement renders a subject (AdCampaign::fieldsFor), and the
                 same column and the same renderers serve a house ad as a paid one, so this is the
                 VENDOR form's field with the venue chosen above deciding which dishes it offers.
                 Options for every approved venue are present and hidden per selection, which keeps the
                 ownership rule the server enforces and the rule the browser shows identical. */
@endphp
        <div class="mb-3">
            <label class="form-label" for="house-subject">{{ t_raw('vendor.campaigns.subject_label') }}</label>
            <select class="form-select" id="house-subject" name="menu_item_id">
                <option value="0">{{ t_raw('vendor.campaigns.subject_restaurant_option') }}</option>
                @foreach ($menuItems as $mi)
                <option value="{{ (int) $mi['id'] }}" data-restaurant="{{ (int) $mi['restaurant_id'] }}"{!! $oldVal('menu_item_id') === (string) $mi['id'] ? ' selected' : '' !!}>{{ $mi['name'] }}{!! !empty($mi['category_name']) ? ' — ' . e($mi['category_name']) : '' !!}</option>
                @endforeach
            </select>
        </div>

        <fieldset class="qm-ad-fieldset">
            <legend class="form-label mb-2">{{ t_raw('admin.campaigns.col_placement') }}</legend>
            <div class="qm-ad-place-list">
                @foreach ($placements as $key => $p)
                <label class="qm-ad-place">
                    <input type="radio" name="placement" value="{{ $key }}" data-place="{{ $key }}" {{ $selPlacement === $key ? 'checked' : '' }} required>
                    <span class="qm-ad-place-body">
                        <span class="qm-ad-place-top"><strong>{{ $p['label'] }}</strong></span>
                        <span class="qm-ad-place-desc">{{ $p['desc'] }}</span>
                    </span>
                </label>
                @endforeach
            </div>
        </fieldset>

        <div class="qm-ad-target mt-3" id="qm-ad-target" hidden>
            <div class="row g-3">
                <div class="col-sm-4">
                    <label class="form-label" for="house-target-type">{{ t_raw('vendor.campaigns.target_by_label') }}</label>
                    <select class="form-select" id="house-target-type" name="target_type">
                        <option value="none"{!! $oldVal('target_type') === 'none' ? ' selected' : '' !!}>{{ t_raw('vendor.campaigns.choose_placeholder') }}</option>
                        <option value="tag"{!! $oldVal('target_type') === 'tag' ? ' selected' : '' !!}>{{ t_raw('status.ad_target_type.tag') }}</option>
                        <option value="cuisine"{!! $oldVal('target_type') === 'cuisine' ? ' selected' : '' !!}>{{ t_raw('status.ad_target_type.cuisine') }}</option>
                    </select>
                </div>
                <div class="col-sm-8" id="house-target-tag-wrap" hidden>
                    <label class="form-label" for="house-tag-slug">{{ t_raw('status.ad_target_type.tag') }}</label>
                    <select class="form-select" id="house-tag-slug" name="tag_slug">
                        <option value="">{{ t_raw('vendor.campaigns.select_tag_placeholder') }}</option>
                        @foreach ($tags as $tg)
                        <option value="{{ $tg['slug'] }}"{!! $oldVal('tag_slug') === $tg['slug'] ? ' selected' : '' !!}>{{ $tg['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-8" id="house-target-cuisine-wrap" hidden>
                    <label class="form-label" for="house-cuisine-slug">{{ t_raw('status.ad_target_type.cuisine') }}</label>
                    <select class="form-select" id="house-cuisine-slug" name="cuisine_slug">
                        <option value="">{{ t_raw('vendor.campaigns.select_cuisine_placeholder') }}</option>
                        @foreach ($cuisines as $cz)
                        <option value="{{ $cz['slug'] }}"{!! $oldVal('cuisine_slug') === $cz['slug'] ? ' selected' : '' !!}>{{ $cz['name'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div class="mb-3 mt-3">
            <label class="form-label" for="house-headline">{{ t_raw('vendor.campaigns.col_headline') }}</label>
            <input type="text" class="form-control" id="house-headline" name="headline" maxlength="120" value="{!! $oldVal('headline') !!}" required placeholder="{{ t_raw('admin.deals.title_placeholder') }}">
        </div>

        <div class="mb-3">
            <label class="form-label" for="house-body">{{ t_raw('vendor.campaigns.body_text_label') }}</label>
            <textarea class="form-control" id="house-body" name="body" placeholder="{{ t_raw('checkout.notes_placeholder') }}" rows="2" maxlength="240">{!! $oldVal('body') !!}</textarea>
        </div>

        <div class="mb-4">
            <label class="form-label" for="house-image">{{ t_raw('vendor.campaigns.media_label') }} <span class="qm-hint">{{ t_raw('vendor.campaigns.image_hint') }}</span></label>
            @php // Same shared media field the VENDOR campaign form uses — one creative picker, not two.
@endphp
            {!! media_field_html('image', null, ['accept' => 'both', 'id' => 'house-image']) !!}
        </div>

        <div class="d-flex gap-2 justify-content-end">
            <button type="submit" class="qm-btn">{{ t_raw('admin.campaigns.publish_house_btn') }}</button>
            <a href="{{ route('admin.campaigns') }}" class="qm-btn qm-btn-outline">{{ t_raw('common.cancel') }}</a>
        </div>
    </form>
</div>

<script>
(function () {
    var form = document.getElementById('qm-house-ad-form');
    if (!form) { return; }
    var targetRow = document.getElementById('qm-ad-target');
    var typeSel = document.getElementById('house-target-type');
    var tagWrap = document.getElementById('house-target-tag-wrap');
    var cuisineWrap = document.getElementById('house-target-cuisine-wrap');
    var radios = Array.prototype.slice.call(form.querySelectorAll('input[name="placement"]'));

    // The dish list follows the venue picked above. Options are detached rather than hidden,
    // because `hidden` on an <option> is not honoured everywhere and a dish that is merely invisible
    // is still submittable — the server would reject it, but only after the admin filled the form in.
    var venueSel = document.getElementById('house-restaurant');
    var subjectSel = document.getElementById('house-subject');
    var allOptions = subjectSel ? Array.prototype.slice.call(subjectSel.options, 1) : [];
    var anyOption = subjectSel ? subjectSel.options[0] : null;

    function fillSubjects() {
        if (!subjectSel || !venueSel) { return; }
        var rid = venueSel.value;
        var keep = subjectSel.value;
        subjectSel.innerHTML = '';
        subjectSel.appendChild(anyOption);
        for (var i = 0; i < allOptions.length; i++) {
            if (allOptions[i].getAttribute('data-restaurant') === rid) { subjectSel.appendChild(allOptions[i]); }
        }
        // A dish belonging to the venue that was just deselected cannot stay chosen.
        subjectSel.value = keep;
        if (subjectSel.selectedIndex < 0) { subjectSel.selectedIndex = 0; }
        // With no venue chosen there is nothing to sponsor yet, so say so instead of offering an
        // empty list the admin cannot act on.
        subjectSel.disabled = (rid === '');
    }
    if (venueSel) { venueSel.addEventListener('change', fillSubjects); }
    fillSubjects();

    function selected() {
        for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { return radios[i].value; } }
        return '';
    }
    function toggleTarget() {
        var isListing = selected() === 'listing';
        targetRow.hidden = !isListing;
        if (!isListing) { return; }
        var t = typeSel.value;
        tagWrap.hidden = (t !== 'tag');
        cuisineWrap.hidden = (t !== 'cuisine');
    }
    radios.forEach(function (r) { r.addEventListener('change', toggleTarget); });
    if (typeSel) { typeSel.addEventListener('change', toggleTarget); }
    toggleTarget();
})();
</script>

</div>@php /* /.qm-d2 */
@endphp
@endsection