@extends('layouts.app')
@section('title', $client->exists ? 'Uredi klijenta' : 'Novi klijent')
@section('content')
<div class="top"><div><div class="eyebrow">Klijenti</div><h1>{{ $client->exists ? 'Uredi klijenta' : 'Novi klijent' }}</h1></div></div>

<form class="card form" method="post" action="{{ $client->exists ? route('clients.update', $client) : route('clients.store') }}">
    @csrf
    @if($client->exists) @method('put') @endif
    <div class="fields">
        <div class="field"><label>Naziv *</label><input name="name" id="client-name" value="{{ old('name', $client->name) }}">@error('name')<div class="error">{{ $message }}</div>@enderror</div>
        <div class="field">
            <label>OIB</label>
            <div class="oib-lookup"><input name="oib" id="client-oib" value="{{ old('oib', $client->oib) }}" maxlength="11" inputmode="numeric"><button type="button" class="btn secondary" id="sudreg-button">Dohvati iz Sudrega</button></div>
            <div class="help" id="sudreg-status">Za d.o.o., d.d. i druge subjekte upisane u Sudski registar.</div>
            @error('oib')<div class="error">{{ $message }}</div>@enderror
        </div>
        @foreach(['email' => 'E-mail', 'phone' => 'Telefon'] as $name => $label)
            <div class="field"><label>{{ $label }}</label><input name="{{ $name }}" value="{{ old($name, $client->$name) }}">@error($name)<div class="error">{{ $message }}</div>@enderror</div>
        @endforeach

        <div class="field full"><label>Adresa</label><input name="address" id="client-address" value="{{ old('address', $client->address) }}">@error('address')<div class="error">{{ $message }}</div>@enderror</div>

        <div class="field full">
            <label>Država *</label>
            <select name="country_code" id="country-code">
                @foreach($countries as $code => $country)
                    <option value="{{ $code }}" @selected(old('country_code', $client->country_code ?: 'HR') === $code)>{{ $country }}</option>
                @endforeach
            </select>
            @error('country_code')<div class="error">{{ $message }}</div>@enderror
        </div>

        <div class="field">
            <label>Poštanski broj</label>
            <input name="postal_code" id="postal-code" value="{{ old('postal_code', $client->postal_code) }}" maxlength="20" autocomplete="postal-code">
            @error('postal_code')<div class="error">{{ $message }}</div>@enderror
        </div>
        <div class="field">
            <label>Grad / mjesto</label>
            <input name="city" id="city" value="{{ old('city', $client->city) }}" list="croatian-places" autocomplete="address-level2" placeholder="Počnite upisivati naziv mjesta">
            <datalist id="croatian-places"></datalist>
            <div class="help" id="city-help">Odaberite hrvatsko mjesto i poštanski broj ispunit će se automatski.</div>
            @error('city')<div class="error">{{ $message }}</div>@enderror
        </div>

        <div class="field full"><label>Zadana kategorija reklama</label><select name="category"><option value="">Bez zadane kategorije</option>@foreach($categories as $category)<option value="{{ $category }}" @selected(old('category', $client->category) === $category)>{{ $category }}</option>@endforeach</select><div class="help">Novi spotovi ovog klijenta automatski će dobiti odabranu kategoriju. Na pojedinom spotu kategoriju je i dalje moguće promijeniti.</div></div>
        <div class="field full"><label>Napomena</label><textarea name="notes" rows="4">{{ old('notes', $client->notes) }}</textarea></div>
        <div class="field full"><label><input style="width:auto" type="checkbox" name="active" value="1" @checked(old('active', $client->exists ? $client->active : true))> Aktivan klijent</label></div>
    </div>
    <div class="toolbar" style="margin-top:20px"><button class="btn">Spremi</button><a class="btn secondary" href="{{ route('clients.index') }}">Odustani</a></div>
</form>

<script>
(() => {
    const sudregButton = document.getElementById('sudreg-button');
    const sudregStatus = document.getElementById('sudreg-status');
    const oib = document.getElementById('client-oib');
    const name = document.getElementById('client-name');
    const address = document.getElementById('client-address');
    const email = document.querySelector('[name="email"]');
    const country = document.getElementById('country-code');
    const city = document.getElementById('city');
    const postal = document.getElementById('postal-code');
    const list = document.getElementById('croatian-places');
    const help = document.getElementById('city-help');
    let places = [];

    async function lookupSudreg() {
        const value = oib.value.replace(/\D/g, '');
        oib.value = value;
        if (value.length !== 11) {
            sudregStatus.textContent = 'OIB mora imati točno 11 znamenki.';
            sudregStatus.className = 'help sudreg-error';
            oib.focus();
            return;
        }

        sudregButton.disabled = true;
        sudregButton.textContent = 'Dohvaćam…';
        sudregStatus.textContent = 'Povezivanje sa Sudskim registrom…';
        sudregStatus.className = 'help';
        try {
            const response = await fetch(`{{ route('clients.sudreg.lookup') }}?oib=${encodeURIComponent(value)}`, {headers: {'Accept': 'application/json'}});
            const payload = await response.json();
            if (!response.ok) throw new Error(payload.message || 'Podaci nisu pronađeni.');
            const data = payload.data;
            if (data.name) name.value = data.name;
            if (data.address) address.value = data.address;
            if (data.email) email.value = data.email;
            if (data.city) city.value = data.city;
            country.value = data.country_code || 'HR';
            updateMode();
            if (data.postal_code) postal.value = data.postal_code;
            else matchPlace();
            sudregStatus.textContent = `Podaci su preuzeti iz Sudskog registra${data.mbs ? ` · MBS ${data.mbs}` : ''}. Provjerite ih prije spremanja.`;
            sudregStatus.className = 'help sudreg-success';
        } catch (error) {
            sudregStatus.textContent = error.message;
            sudregStatus.className = 'help sudreg-error';
        } finally {
            sudregButton.disabled = false;
            sudregButton.textContent = 'Dohvati iz Sudrega';
        }
    }

    fetch('{{ asset('data/croatia-postal-places.json') }}')
        .then(response => response.ok ? response.json() : Promise.reject())
        .then(data => { places = data; renderPlaces(); if (!postal.value) matchPlace(); })
        .catch(() => { help.textContent = 'Popis mjesta nije učitan; grad i poštanski broj možete upisati ručno.'; });

    function renderPlaces() {
        if (country.value !== 'HR' || !places.length) { list.innerHTML = ''; return; }
        list.innerHTML = '';
        const fragment = document.createDocumentFragment();
        places.forEach(place => {
            const option = document.createElement('option');
            option.value = place.city;
            option.label = `${place.postal_code} · ${place.post_office}`;
            fragment.appendChild(option);
        });
        list.appendChild(fragment);
    }
    function updateMode() {
        const croatia = country.value === 'HR';
        city.setAttribute('list', croatia ? 'croatian-places' : '');
        city.placeholder = croatia ? 'Počnite upisivati naziv mjesta' : 'Ručno upišite grad / mjesto';
        help.textContent = croatia ? 'Odaberite hrvatsko mjesto i poštanski broj ispunit će se automatski.' : 'Za odabranu državu grad i poštanski broj upisuju se ručno.';
        renderPlaces();
    }
    function matchPlace() {
        if (country.value !== 'HR') return;
        const matches = places.filter(place => place.city.toLocaleLowerCase('hr') === city.value.trim().toLocaleLowerCase('hr'));
        if (matches.length === 1 || (matches.length > 1 && !postal.value)) postal.value = matches[0].postal_code;
    }
    country.addEventListener('change', updateMode);
    sudregButton.addEventListener('click', lookupSudreg);
    oib.addEventListener('keydown', event => { if (event.key === 'Enter') { event.preventDefault(); lookupSudreg(); } });
    city.addEventListener('change', matchPlace);
    city.addEventListener('blur', matchPlace);
    updateMode();
})();
</script>
<style>.oib-lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.oib-lookup .btn{white-space:nowrap;padding-inline:13px}.sudreg-success{color:var(--brand)!important;font-weight:700}.sudreg-error{color:var(--danger)!important;font-weight:700}@media(max-width:650px){.oib-lookup{grid-template-columns:1fr}.oib-lookup .btn{width:100%}}</style>
@endsection