@extends('layouts.app')
@section('title', $item->exists ? 'Uredi spot kampanje' : 'Dodaj spot')
@section('content')
<div class="top"><div><div class="eyebrow">{{ $order->number }}</div><h1>{{ $item->exists ? 'Uredi spot kampanje' : 'Dodaj spot u narudžbu' }}</h1></div></div>
<form class="card form" method="post" action="{{ $item->exists ? route('orders.items.update', [$order,$item]) : route('orders.items.store', $order) }}">
@csrf @if($item->exists) @method('put') @endif
<div class="fields">
    <div class="field full"><label>{{ $item->spot?->is_placeholder ? 'Zamijeni blank spot stvarnim spotom *' : 'Spot *' }}</label><div class="spot-picker"><select id="campaign-spot" name="spot_id"><option value="">Odaberite spot…</option>@foreach($spots as $spot)<option value="{{ $spot->id }}" data-category="{{ $spot->category }}" @selected(old('spot_id',$item->spot_id)==$spot->id)>{{ $spot->is_placeholder ? 'PRIJEDLOG — ' : '' }}{{ $spot->code }} — {{ $spot->name }} ({{ $spot->client->name }})</option>@endforeach</select><button type="button" class="btn secondary" id="quick-spot-open">+ Novi spot</button></div>@if($item->spot?->is_placeholder)<div class="help">Učitajte ili odaberite stvarni spot kada bude spreman. Postojeći terminski plan ostat će sačuvan.</div>@endif</div>
    <div class="field full"><label>Kategorija reklame</label><select id="campaign-category" name="spot_category"><option value="">Bez kategorije</option>@foreach($categories as $category)<option value="{{ $category->name }}" @selected(old('spot_category',$item->spot?->category)===$category->name)>{{ $category->name }}</option>@endforeach</select><div class="help">Kategorija se sprema uz odabrani spot i koristi za sprječavanje emitiranja konkurentskih reklama u istom bloku.</div></div>
    <div class="field"><label>Početak emitiranja *</label><input type="date" name="starts_on" value="{{ old('starts_on',$item->starts_on?->format('Y-m-d')) }}"></div>
    <div class="field"><label>Završetak emitiranja *</label><input type="date" name="ends_on" value="{{ old('ends_on',$item->ends_on?->format('Y-m-d')) }}"></div>
    <div class="field"><label>Ukupno emitiranja *</label><input type="number" min="1" name="total_plays" value="{{ old('total_plays',$item->total_plays) }}"></div>
    <div class="field"><label>Pozicija u bloku</label><select name="block_position">@foreach(['any'=>'Proizvoljna','first'=>'Prva reklama','last'=>'Zadnja reklama'] as $value=>$label)<option value="{{ $value }}" @selected(old('block_position',$item->block_position?:'any')===$value)>{{ $label }}</option>@endforeach</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',$item->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',$item->allowed_weekdays?:range(1,7))))> {{ $label }}</label>@endforeach</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',$item->allowed_hours??[])))> {{ sprintf('%02d',$h) }}</label>@endfor</div><div class="help">Bez odabira znači da su dozvoljeni svi sati.</div></div>
    <div class="field full"><label>Napomena uz spot</label><textarea name="notes" rows="3">{{ old('notes',$item->notes) }}</textarea></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">Spremi spot</button><a class="btn secondary" href="{{ route('orders.show',$order) }}">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 kampanje</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($categories as $category)<option value="{{ $category->name }}">{{ $category->name }}</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->name }}">{{ $voiceTalent->name }}</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;gap:9px}.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{grid-template-columns:1fr}.quick-spot-dialog .fields{grid-template-columns:1fr}}
</style>
<script>
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))}));
document.getElementById('campaign-spot').addEventListener('change', function () {
    const category = this.options[this.selectedIndex]?.dataset.category || '';
    const select = document.getElementById('campaign-category');
    if ([...select.options].some(option => option.value === category)) select.value = category;
});
(() => {
    const spot = document.getElementById('campaign-spot'), category = document.getElementById('campaign-category');
    const dialog = document.getElementById('quick-spot-dialog'), saveButton = document.getElementById('quick-spot-save');
    const audioInput = document.getElementById('quick-spot-audio'), audioPreview = document.getElementById('quick-audio-preview');
    const durationInput = document.getElementById('quick-spot-duration'), errorBox = document.getElementById('quick-spot-error');
    let audioUrl;
    document.getElementById('quick-spot-open').addEventListener('click', () => { 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', @json($order->advertiser_id)); 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.category = document.getElementById('quick-spot-category').value; spot.add(option); if (option.dataset.category && [...category.options].some(item => item.value === option.dataset.category)) category.value = option.dataset.category; dialog.close(); }
        catch (error) { errorBox.textContent = error.message; errorBox.style.display = 'block'; }
        finally { saveButton.disabled = false; saveButton.textContent = 'Spremi i odaberi'; }
    });
})();
</script>
@endsection