@extends('layouts.app')
@section('title', 'Nova narudžba')
@section('content')
<div class="top"><div><div class="eyebrow">Narudžbe</div><h1>Nova narudžba</h1></div></div>
<form class="card form" method="post" action="{{ route('orders.store') }}">
@csrf
@if($offer)<input type="hidden" name="offer_id" value="{{ $offer->id }}">@endif
<div class="fields">
    <div class="field"><label>Broj narudžbe *</label><input name="number" value="{{ old('number', $order->number) }}" readonly><div class="help">Automatski dodijeljen sljedeći broj.</div></div>
    <div class="field"><label>Datum narudžbe *</label><input type="date" name="ordered_at" value="{{ old('ordered_at', now()->format('Y-m-d')) }}"></div>
    @foreach(['advertiser_id'=>'Oglašivač *','customer_id'=>'Naručitelj *'] as $name=>$label)
    <div class="field"><label>{{ $label }}</label><select id="{{ $name }}" name="{{ $name }}"><option value="">Odaberite…</option>@foreach($clients as $client)<option value="{{ $client->id }}" @selected(old($name, $offer?->{$name})==$client->id)>{{ $client->name }}</option>@endforeach</select></div>
    @endforeach
    <div class="field full"><label>Napomena</label><textarea name="notes" rows="2">{{ old('notes') }}</textarea></div>
</div>

<h2 class="section-title">Prvi spot kampanje</h2>
<div class="fields">
    <div class="field full"><label>Spot *</label><div class="spot-picker"><select id="spot-select" name="spot_id"><option value="">Odaberite odobreni spot…</option>@foreach($spots as $spot)<option value="{{ $spot->id }}" data-client="{{ $spot->client_id }}" @selected(old('spot_id')==$spot->id)>{{ $spot->code }} — {{ $spot->name }} ({{ $spot->client->name }})</option>@endforeach</select><button type="button" class="btn secondary" id="quick-spot-open">+ Novi spot</button><button type="button" class="btn secondary proposal-toggle" id="proposal-toggle">Prijedlog plana</button></div><div class="help">Odaberite stvarni spot ili izradite prijedlog plana s privremenim blank spotom.</div></div>
    <div class="field full proposal-fields" id="proposal-fields" style="display:none"><input type="hidden" id="use-placeholder" name="use_placeholder" value="0"><div class="proposal-box"><div><label>Naziv blank spota *</label><input name="placeholder_name" value="{{ old('placeholder_name') }}" placeholder="npr. Reklama klijenta – prijedlog"></div><div><label>Predviđeno trajanje (sekunde) *</label><input type="number" min="1" step="0.1" name="placeholder_duration_seconds" value="{{ old('placeholder_duration_seconds',30) }}"></div><button type="button" class="btn secondary" id="proposal-cancel">Koristi stvarni spot</button></div><div class="help">Blank spot služi samo za prijedlog terminskog plana i neće se prikazivati u biblioteci spotova.</div></div>
    <div class="field"><label>Početak emitiranja *</label><input type="date" name="starts_on" value="{{ old('starts_on', $offerStartsOn) }}">@error('starts_on')<div class="error">{{ $message }}</div>@enderror</div>
    <div class="field"><label>Završetak emitiranja *</label><input type="date" name="ends_on" value="{{ old('ends_on', $offerEndsOn) }}">@error('ends_on')<div class="error">{{ $message }}</div>@enderror</div>
    <div class="field"><label>Ukupno emitiranja *</label><input type="number" min="1" name="total_plays" value="{{ old('total_plays', $offer?->items->sum('quantity') ?: '') }}"></div>
    <div class="field"><label>Pozicija u bloku</label><select name="block_position"><option value="any">Proizvoljna</option><option value="first">Prva reklama</option><option value="last">Zadnja reklama</option></select></div>
    <div class="field"><label>Izdvojeno emitiranje</label><label style="display:flex;gap:8px;align-items:center;padding:10px 0"><input style="width:auto" type="checkbox" name="is_featured" value="1" @checked(old('is_featured'))> Koristi samo izdvojene / istaknute termine</label></div>
    <div class="field full"><label>Dani emitiranja *</label><div class="toolbar" style="margin-bottom:10px"><button type="button" class="btn secondary day-preset" data-days="1,2,3,4,5,6,7">Svaki dan</button><button type="button" class="btn secondary day-preset" data-days="1,2,3,4,5">Radni dani</button><button type="button" class="btn secondary day-preset" data-days="6,7">Vikend</button></div><div class="hours">@foreach([1=>'Pon',2=>'Uto',3=>'Sri',4=>'Čet',5=>'Pet',6=>'Sub',7=>'Ned'] as $day=>$label)<label><input type="checkbox" name="allowed_weekdays[]" value="{{ $day }}" @checked(in_array($day, old('allowed_weekdays', range(1,7))))> {{ $label }}</label>@endforeach</div><div class="help">Automatski raspored koristi samo označene dane.</div></div>
    <div class="field full"><label>Dozvoljeni sati</label><div class="hours">@for($h=0;$h<24;$h++)<label><input type="checkbox" name="allowed_hours[]" value="{{ $h }}" @checked(in_array($h, old('allowed_hours', [])))> {{ sprintf('%02d', $h) }}</label>@endfor</div><div class="help">Bez odabira znači da su dozvoljeni svi sati.</div></div>
</div>
@if($errors->any())<div class="error" style="margin-top:15px">{{ $errors->first() }}</div>@endif
<div class="toolbar" style="margin-top:20px"><button class="btn">Izradi narudžbu</button><a class="btn secondary" href="{{ route('orders.index') }}">Odustani</a></div>
</form>

<dialog id="quick-spot-dialog" class="quick-spot-dialog">
    <div class="quick-spot-head"><div><div class="eyebrow">Bez napuštanja narudžbe</div><h2>Novi spot</h2></div><button type="button" class="dialog-close" aria-label="Zatvori">×</button></div>
    <div id="quick-spot-error" class="error" style="display:none"></div>
    <div class="fields">
        <div class="field full"><label>Naziv spota *</label><input id="quick-spot-name" placeholder="Naziv reklame"></div>
        <div class="field"><label>Kategorija</label><select id="quick-spot-category"><option value="">Kategorija klijenta</option>@foreach($spotCategories as $category)<option value="{{ $category }}">{{ $category }}</option>@endforeach</select></div>
        <div class="field"><label>Vokal / glas</label><select id="quick-spot-voice"><option value="">Bez dodijeljenog vokala</option>@foreach($voiceTalents as $voiceTalent)<option value="{{ $voiceTalent }}">{{ $voiceTalent }}</option>@endforeach</select></div>
        <div class="field"><label>Trajanje (sekunde)</label><input id="quick-spot-duration" type="number" min="0.01" step="0.01" placeholder="30"></div>
        <div class="field"><label>Audio datoteka</label><input id="quick-spot-audio" type="file" accept="audio/mpeg,audio/wav,audio/mp4,audio/aac,audio/ogg,audio/flac,.mp3,.wav,.m4a,.aac,.ogg,.flac"></div>
        <div class="field full"><audio id="quick-audio-preview" controls style="display:none;width:100%"></audio></div>
    </div>
    <div class="toolbar" style="margin-top:18px"><button type="button" class="btn" id="quick-spot-save">Spremi i odaberi</button><button type="button" class="btn secondary dialog-close">Odustani</button></div>
</dialog>

<style>
.spot-picker{display:grid;grid-template-columns:1fr auto auto;gap:9px}.proposal-toggle{border-color:#9eb9d6!important;color:#315d88!important}.proposal-box{display:grid;grid-template-columns:1fr 220px auto;align-items:end;gap:12px;padding:16px;border:1px solid #cad9e8;border-radius:11px;background:#f3f7fb}.quick-spot-dialog{width:min(720px,calc(100% - 30px));border:0;border-radius:16px;padding:24px;box-shadow:0 24px 80px #0b221b55}.quick-spot-dialog::backdrop{background:#102b2375}.quick-spot-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.quick-spot-head h2{margin:0}.quick-spot-head>.dialog-close{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;padding:0;font-size:20px;cursor:pointer;flex:0 0 34px}.quick-spot-dialog>.toolbar{display:flex;gap:10px;flex-wrap:wrap}.quick-spot-dialog>.toolbar .btn{width:auto;white-space:nowrap}@media(max-width:750px){.spot-picker,.proposal-box{grid-template-columns:1fr}.quick-spot-dialog .fields{grid-template-columns:1fr}}
</style>
<script>
(() => {
    const advertiser = document.getElementById('advertiser_id'), spot = document.getElementById('spot-select');
    const options = [...spot.options].slice(1);
    function filterSpots() { const client = advertiser.value; options.forEach(option => option.hidden = !!client && option.dataset.client !== client); if (spot.selectedOptions[0]?.hidden) spot.value = ''; }
    advertiser.addEventListener('change', filterSpots); filterSpots();
    document.querySelectorAll('.day-preset').forEach(button => button.addEventListener('click', () => { const days = button.dataset.days.split(','); document.querySelectorAll('[name="allowed_weekdays[]"]').forEach(box => box.checked = days.includes(box.value)); }));
    const proposalFields = document.getElementById('proposal-fields'), usePlaceholder = document.getElementById('use-placeholder');
    function proposalMode(active) { proposalFields.style.display = active ? 'block' : 'none'; usePlaceholder.value = active ? '1' : '0'; spot.disabled = active; if (active) spot.value = ''; }
    document.getElementById('proposal-toggle').addEventListener('click', () => proposalMode(true));
    document.getElementById('proposal-cancel').addEventListener('click', () => proposalMode(false));
    if (@json((bool) old('use_placeholder'))) proposalMode(true);

    const dialog = document.getElementById('quick-spot-dialog'), openButton = document.getElementById('quick-spot-open'), saveButton = document.getElementById('quick-spot-save');
    const audioInput = document.getElementById('quick-spot-audio'), audioPreview = document.getElementById('quick-audio-preview'), durationInput = document.getElementById('quick-spot-duration'), errorBox = document.getElementById('quick-spot-error');
    let audioUrl;
    openButton.addEventListener('click', () => { if (!advertiser.value) { alert('Prvo odaberite oglašivača.'); advertiser.focus(); return; } errorBox.style.display = 'none'; dialog.showModal(); document.getElementById('quick-spot-name').focus(); });
    dialog.querySelectorAll('.dialog-close').forEach(button => button.addEventListener('click', () => dialog.close()));
    audioInput.addEventListener('change', () => { const file = audioInput.files[0]; if (!file) return; if (audioUrl) URL.revokeObjectURL(audioUrl); audioUrl = URL.createObjectURL(file); audioPreview.src = audioUrl; audioPreview.style.display = 'block'; const name = document.getElementById('quick-spot-name'); if (!name.value.trim()) name.value = file.name.replace(/\.[^.]+$/, '').replace(/[_-]+/g, ' '); });
    audioPreview.addEventListener('loadedmetadata', () => { if (Number.isFinite(audioPreview.duration)) durationInput.value = audioPreview.duration.toFixed(2); });
    saveButton.addEventListener('click', async () => {
        const data = new FormData(); data.append('client_id', advertiser.value); data.append('name', document.getElementById('quick-spot-name').value); data.append('category', document.getElementById('quick-spot-category').value); data.append('voice_talent', document.getElementById('quick-spot-voice').value); data.append('duration_seconds', durationInput.value); if (audioInput.files[0]) data.append('audio_file', audioInput.files[0]);
        saveButton.disabled = true; saveButton.textContent = 'Spremanje…'; errorBox.style.display = 'none';
        try { const response = await fetch(@json(route('spots.quick-store')), {method:'POST', headers:{'X-CSRF-TOKEN':@json(csrf_token()),'Accept':'application/json'}, body:data}); const result = await response.json(); if (!response.ok) throw new Error(Object.values(result.errors || {}).flat()[0] || result.message || 'Spot nije spremljen.'); const option = new Option(`${result.label} (novi spot)`, result.id, true, true); option.dataset.client = String(result.client_id); spot.add(option); dialog.close(); }
        catch (error) { errorBox.textContent = error.message; errorBox.style.display = 'block'; }
        finally { saveButton.disabled = false; saveButton.textContent = 'Spremi i odaberi'; }
    });
})();
</script>
@endsection