@extends('layouts.app')

@section('title', $schema['title'] . ' — Field Visit')

@section('content')

{{-- ── Page header ─────────────────────────────────────────────────────────── --}}
<div class="mb-5">
    <a href="{{ route('landing') }}"
       class="inline-flex items-center gap-1.5 text-sm text-indigo-600 hover:text-indigo-800 hover:underline">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
        </svg>
        All forms
    </a>
    <h1 class="text-xl font-bold text-gray-900 mt-2 leading-snug">{{ $schema['title'] }}</h1>
</div>

{{-- ── Validation error summary ────────────────────────────────────────────── --}}
@if ($errors->any())
<div class="mb-5 bg-red-50 border border-red-300 rounded-xl p-4">
    <p class="font-semibold text-red-700 text-base">Please fix the errors below:</p>
    <ul class="mt-2 space-y-1 list-disc list-inside text-sm text-red-600">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form
    method="POST"
    action="{{ route('submissions.store', $slug) }}"
    enctype="multipart/form-data"
    id="field-form"
    novalidate
>
    @csrf

    @foreach ($schema['sections'] as $sectionIndex => $section)

        {{-- ── Section card ──────────────────────────────────────────────────── --}}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm mb-5 overflow-hidden">

            {{-- Section header strip --}}
            <div class="flex items-center gap-3 px-5 py-4 bg-gray-50 border-b border-gray-200">
                <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 text-sm font-bold shrink-0">
                    {{ $sectionIndex + 1 }}
                </span>
                <h2 class="text-base font-semibold text-gray-800">{{ $section['title'] }}</h2>
            </div>

            {{-- Fields --}}
            <div class="px-5 py-5 space-y-6">
                @foreach ($section['fields'] as $field)
                    @php
                        $isConditional = ($field['required'] === 'conditional');
                        $dependsOn     = $field['depends_on'] ?? null;
                        $isIndented    = $field['_indent'] ?? false;
                        $wrapperClass  = $isIndented ? 'ml-5 pl-4 border-l-2 border-indigo-100' : '';
                        $hiddenAttr    = ($isConditional && $dependsOn) ? 'hidden' : '';
                        $dataAttrs     = '';
                        if ($isConditional && $dependsOn) {
                            $dataAttrs = 'data-depends-on="' . e($dependsOn['field']) . '" '
                                       . 'data-depends-values="' . e(implode(';', $dependsOn['values'])) . '"';
                        }
                    @endphp

                    <div class="{{ $wrapperClass }}" {{ $hiddenAttr }} {!! $dataAttrs !!}>
                        @include('partials.fields.' . $field['type'], ['field' => $field])
                    </div>
                @endforeach
            </div>
        </div>

    @endforeach

    {{-- ── Footer card: Submitted By + Submit ─────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="flex items-center gap-3 px-5 py-4 bg-gray-50 border-b border-gray-200">
            <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
            </span>
            <h2 class="text-base font-semibold text-gray-800">Submitted by / কে জমা দিচ্ছেন</h2>
        </div>

        <div class="px-5 py-5">
            @php $sbOptions = $schema['submitted_by_options'] ?? []; @endphp

            <div>
                <label for="submitted_by" class="block text-base font-medium text-gray-800 leading-relaxed">
                    Select your name
                    <span class="text-red-500" aria-hidden="true"> *</span>
                </label>
                <p class="text-sm text-gray-500">আপনার নাম বেছে নিন</p>

                <select
                    id="submitted_by"
                    name="submitted_by"
                    required
                    aria-required="true"
                    class="mt-2 w-full rounded-md border border-gray-300 px-3 py-3 text-base bg-white
                           focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500
                           @error('submitted_by') border-red-500 @enderror"
                >
                    <option value="">-- select --</option>
                    @foreach($sbOptions as $name)
                        <option value="{{ $name }}" @if(old('submitted_by') === $name) selected @endif>
                            {{ $name }}
                        </option>
                    @endforeach
                </select>

                @error('submitted_by')
                    <p class="mt-1 text-sm text-red-600" role="alert">{{ $message }}</p>
                @enderror
            </div>

            <div class="mt-6 pt-5 border-t border-gray-100">
                <button
                    type="submit"
                    id="submit-btn"
                    class="w-full md:w-auto inline-flex items-center justify-center gap-2
                           bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800
                           text-white text-base font-semibold rounded-xl px-8 py-3 min-h-[48px]
                           transition-colors disabled:opacity-60"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Submit / জমা দিন
                </button>
            </div>
        </div>
    </div>

</form>

{{-- ── Vanilla JS: conditional show/hide + disable-on-submit ─────────────── --}}
<script>
(function () {
    function getVal(id) {
        var radio = document.querySelector('[name="data[' + id + ']"]:checked');
        if (radio) return radio.value;
        var sel = document.querySelector('select[name="data[' + id + ']"]');
        if (sel) return sel.value;
        var checks = document.querySelectorAll('[name="data[' + id + '][]"]:checked');
        if (checks.length) return Array.from(checks).map(function(c){ return c.value; });
        return '';
    }

    function refresh() {
        document.querySelectorAll('[data-depends-on]').forEach(function (wrapper) {
            var parentId = wrapper.dataset.dependsOn;
            var allowed  = wrapper.dataset.dependsValues.split(';');
            var current  = getVal(parentId);
            var match    = Array.isArray(current)
                ? current.some(function(v){ return allowed.indexOf(v) !== -1; })
                : allowed.indexOf(current) !== -1;
            wrapper.hidden = !match;
            wrapper.querySelectorAll('input, select, textarea').forEach(function (el) {
                el.disabled = !match;
            });
        });
    }

    document.addEventListener('change', refresh);
    refresh();

    document.getElementById('field-form').addEventListener('submit', function () {
        var btn = document.getElementById('submit-btn');
        btn.disabled = true;
        btn.textContent = 'Submitting…';
    });
})();
</script>

{{-- ── Shop autocomplete combobox (only active when shop_autocomplete fields are present) ── --}}
<script>
    const shopSearchUrl = "{{ route('shops.search') }}";
(function () {
    document.querySelectorAll('[data-shop-autocomplete]').forEach(function (wrap) {
        var input       = wrap.querySelector('[data-shop-input]');
        var hidden      = wrap.querySelector('[data-shop-id-input]');
        var resultsList = wrap.querySelector('[data-shop-results]');
        var addressId   = wrap.dataset.addressField;
        var timer;

        // On focus / click: show all shops immediately (empty query returns full list)
        input.addEventListener('focus', function () {
            clearTimeout(timer);
            var q = input.value.trim();
            doFetch(q);
        });

        // On typing: debounce 250 ms then search
        input.addEventListener('input', function () {
            hidden.value = ''; // break the link to a previously picked shop
            clearTimeout(timer);
            var q = input.value.trim();
            timer = setTimeout(function () { doFetch(q); }, 250);
        });

        function doFetch(q) {
            fetch(shopSearchUrl + '?q=' + encodeURIComponent(q))
                .then(function (r) { return r.json(); })
                .then(function (json) { renderResults(json.results, q); })
                .catch(function () { resultsList.classList.add('hidden'); });
        }

        function renderResults(matches, typed) {
            resultsList.innerHTML = '';

            matches.forEach(function (m) {
                var li = document.createElement('li');
                li.className = 'px-3 py-3 text-base cursor-pointer hover:bg-gray-50 active:bg-gray-100';
                li.textContent = m.label;
                li.setAttribute('role', 'option');
                li.addEventListener('mousedown', function (e) {
                    // mousedown fires before blur so we can safely set values
                    e.preventDefault();
                    input.value  = m.name;
                    hidden.value = m.id;
                    resultsList.classList.add('hidden');
                    input.setAttribute('aria-expanded', 'false');
                    if (addressId) {
                        var addressField = document.getElementById(addressId);
                        if (addressField && !addressField.value && m.address) {
                            addressField.value = m.address;
                        }
                    }
                });
                resultsList.appendChild(li);
            });

            // Offer free-typed value only when the user has actually typed something
            if (typed.length > 0) {
                var addLi = document.createElement('li');
                addLi.className = 'px-3 py-3 text-base text-gray-500 italic border-t border-gray-100 cursor-pointer hover:bg-gray-50';
                addLi.textContent = 'Use "' + typed + '" (not in list)';
                addLi.addEventListener('mousedown', function (e) {
                    e.preventDefault();
                    hidden.value = '';
                    resultsList.classList.add('hidden');
                    input.setAttribute('aria-expanded', 'false');
                });
                resultsList.appendChild(addLi);
            }

            var show = matches.length > 0 || typed.length > 0;
            resultsList.classList.toggle('hidden', !show);
            input.setAttribute('aria-expanded', show ? 'true' : 'false');
        }

        // Close on outside click / blur
        input.addEventListener('blur', function () {
            // Small delay so mousedown on a result fires first
            timer = setTimeout(function () {
                resultsList.classList.add('hidden');
                input.setAttribute('aria-expanded', 'false');
            }, 150);
        });

        document.addEventListener('click', function (e) {
            if (!wrap.contains(e.target)) {
                resultsList.classList.add('hidden');
                input.setAttribute('aria-expanded', 'false');
            }
        });
    });
})();
</script>

@endsection