@extends('layouts.app')

@section('content')
@php($guideJson = json_encode($filterGuide['brands'], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT))
<div class="max-w-3xl mx-auto rounded-[1.8rem] bg-white p-4 shadow sm:p-6 md:p-8">
    <h2 class="mb-6 text-xl font-bold sm:text-2xl">Form Rekomendasi Kamera</h2>

    @if(session('error'))
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            {{ session('error') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            <p class="font-semibold mb-1">Input belum valid:</p>
            <ul class="list-disc ml-5">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('proses') }}">
        @csrf

        <div class="mb-4">
            <label class="block font-semibold">Jenis Penggunaan</label>
            <select name="penggunaan" class="w-full border rounded-lg p-2" required>
                <option value="outdoor_day" {{ old('penggunaan') == 'outdoor_day' ? 'selected' : '' }}>Outdoor - Day (Siang)</option>
                <option value="outdoor_night" {{ old('penggunaan') == 'outdoor_night' ? 'selected' : '' }}>Outdoor - Night (Malam)</option>
                <option value="indoor_cerah" {{ old('penggunaan') == 'indoor_cerah' ? 'selected' : '' }}>Indoor - Cerah</option>
                <option value="indoor_gelap" {{ old('penggunaan') == 'indoor_gelap' ? 'selected' : '' }}>Indoor - Gelap</option>
                <option value="all" {{ old('penggunaan') == 'all' ? 'selected' : '' }}>Semua Kondisi</option>
            </select>
            @error('penggunaan')
                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label class="block font-semibold">Merek Kamera</label>
            <select name="merek" class="w-full border rounded-lg p-2" data-brand-select>
                <option value="semua" {{ old('merek') === 'semua' || old('merek') === null ? 'selected' : '' }}>Semua Merek</option>
                @foreach($merekList as $merek)
                    <option value="{{ $merek }}" {{ old('merek') === $merek ? 'selected' : '' }}>{{ $merek }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-4 rounded-xl border border-[#dceceb] bg-[#f7fbfa] p-4 text-sm text-gray-600"
             data-filter-guide
             data-guide-all='@json($filterGuide["all"])'
             data-guide-brands='{{ $guideJson }}'>
            <p class="font-semibold text-gray-800">Panduan Input</p>
            <p class="mt-1">Merek terpilih: <span class="font-medium text-[#edc039]" data-guide-label>Semua Merek</span></p>
            <p class="mt-1">Budget yang tersedia: <span data-guide-price>Rp {{ number_format($filterGuide['all']['min_price'], 0, ',', '.') }} - Rp {{ number_format($filterGuide['all']['max_price'], 0, ',', '.') }}</span></p>
            <p class="mt-1">Rentang ISO yang tersedia: <span data-guide-iso>{{ number_format($filterGuide['all']['min_iso'], 0, ',', '.') }} - {{ number_format($filterGuide['all']['max_iso'], 0, ',', '.') }}</span></p>
            <p class="mt-1">AF Point yang tersedia: <span data-guide-af>{{ number_format($filterGuide['all']['min_af_point'], 0, ',', '.') }} - {{ number_format($filterGuide['all']['max_af_point'], 0, ',', '.') }}</span></p>
            <p class="mt-2 text-xs text-gray-500">Saran: jika masih bingung, pilih merek dulu lalu kosongkan budget dan ISO agar sistem menampilkan hasil awal.</p>
        </div>

        <div class="mb-4">
            <label class="block font-semibold">Rentang ISO (opsional)</label>
            <div class="grid gap-2 sm:grid-cols-2">
                <input type="number" name="iso_min" value="{{ old('iso_min') }}" placeholder="Min" class="border rounded p-2 w-full">
                <input type="number" name="iso_max" value="{{ old('iso_max') }}" placeholder="Max" class="border rounded p-2 w-full">
            </div>
        </div>

        <div class="mb-4">
            <label class="block font-semibold">Budget Maksimal (Rp)</label>
            <input type="number" name="budget" value="{{ old('budget') }}" class="w-full border rounded-lg p-2" placeholder="Misal 2000000">
        </div>

        <button type="submit" class="btn-dark px-6 py-3 w-full font-semibold">Proses Rekomendasi</button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const guideElement = document.querySelector('[data-filter-guide]');
    const brandSelect = document.querySelector('[data-brand-select]');

    if (!guideElement || !brandSelect) {
        return;
    }

    const allGuide = JSON.parse(guideElement.dataset.guideAll);
    const brandGuides = JSON.parse(guideElement.dataset.guideBrands);

    const formatNumber = (value) => new Intl.NumberFormat('id-ID').format(value);

    const renderGuide = () => {
        const selectedBrand = brandSelect.value;
        const guide = brandGuides[selectedBrand] ?? allGuide;

        guideElement.querySelector('[data-guide-label]').textContent = guide.label;
        guideElement.querySelector('[data-guide-price]').textContent = `Rp ${formatNumber(guide.min_price)} - Rp ${formatNumber(guide.max_price)}`;
        guideElement.querySelector('[data-guide-iso]').textContent = `${formatNumber(guide.min_iso)} - ${formatNumber(guide.max_iso)}`;
        guideElement.querySelector('[data-guide-af]').textContent = `${formatNumber(guide.min_af_point)} - ${formatNumber(guide.max_af_point)}`;
    };

    renderGuide();
    brandSelect.addEventListener('change', renderGuide);
});
</script>
@endsection