@extends('layouts.app')
@section('title', 'Plan emitiranja')
@section('content')
<div class="top"><div><div class="eyebrow">Sve narudžbe i reklamni blokovi</div><h1>Plan emitiranja</h1></div><a class="btn secondary" href="{{ route('plan.index',['date'=>today()->format('Y-m-d')]) }}">Danas</a></div>

<div class="card plan-controls">
    <div class="plan-controls-primary">
        <a class="btn secondary" href="{{ route('plan.index',['date'=>$date->copy()->subDay()->format('Y-m-d')]) }}">← Prethodni dan</a>
        <form method="get"><input type="date" name="date" value="{{ $date->format('Y-m-d') }}" onchange="this.form.submit()"></form>
        <strong>{{ $date->translatedFormat('l, d.m.Y.') }}</strong>
        <a class="btn secondary" href="{{ route('plan.index',['date'=>$date->copy()->addDay()->format('Y-m-d')]) }}">Sljedeći dan →</a>
        <div class="plan-client-search"><select id="client-filter"><option value="">Svi oglašivači</option>@foreach($clients as $client)<option value="{{ $client->id }}">{{ $client->name }}</option>@endforeach</select></div>
    </div>
    <div class="plan-controls-secondary">
        <label class="plan-toggle"><input type="checkbox" id="only-filled"> Samo popunjeni</label><label class="plan-toggle"><input type="checkbox" id="only-over"> Prekoračeni</label><label class="plan-toggle"><input type="checkbox" id="compact-hours"> Sakrij prazne sate</label>
    </div>
</div>
<div id="plan-message" class="alert" style="display:none"></div>
@if($missingAudio->isNotEmpty())<div class="alert missing-audio-alert"><strong>⚠ Nedostaje audio datoteka:</strong> @foreach($missingAudio as $warning)<a href="{{ route('spots.edit',$warning->spot) }}">{{ $warning->order->number }} · {{ $warning->spot->code }} — {{ $warning->spot->name }}</a>@if(!$loop->last)<span> · </span>@endif @endforeach</div>@endif
@php($overloadedBlocks = $blocks->filter(function($block) use ($plays,$jingles) { $blockPlays=$plays->get($block->id,collect()); $duration=$blockPlays->sum(fn($play)=>(int)ceil(($play->orderItem->spot->duration_ms??0)/1000))+$jingles->durationFor($block); return $blockPlays->count()>$block->max_spots||$duration>$block->max_duration_seconds; }))
@if($overloadedBlocks->isNotEmpty())<div class="alert" style="background:#feeceb;color:var(--danger)"><strong>⚠ Prekoračen limit:</strong> {{ $overloadedBlocks->pluck('time_label')->join(', ') }}. Provjerite broj reklama ili ukupno trajanje blokova.</div>@endif

@if($conflicts->isNotEmpty())<details class="conflict-panel" open><summary>⚠ Konflikti u planu <span>{{$conflicts->count()}}</span></summary>@foreach($conflicts as $conflict)@php($conflictBlock=$blocks->firstWhere('id',(int)$conflict['block_id']))<div class="conflict-row"><strong>{{$conflictBlock?->time_label}} · {{$conflict['type']}}</strong><span>{{$conflict['value']}} — {{$conflict['spots']}}</span></div>@endforeach</details>@endif
<div class="hour-plan">
@foreach($blocks->groupBy(fn($block)=>substr($block->starts_at,0,2)) as $hour=>$hourBlocks)
<section class="hour-row" data-hour="{{ $hour }}">
    @php($nextHour = str_pad((int) $hour + 1, 2, '0', STR_PAD_LEFT))
    <div class="hour-label"><strong>{{ $hour }}–{{ $nextHour }}h</strong></div>
    <div class="hour-blocks" style="grid-template-columns:repeat({{ $hourBlocks->count() }},minmax(280px,1fr))">
@foreach($hourBlocks as $block)
    @php($blockPlays=$plays->get($block->id,collect()))
    @php($jingleDuration=$jingles->durationFor($block))
    @php($duration=$blockPlays->sum(fn($play)=>(int)ceil(($play->orderItem->spot->duration_ms??0)/1000))+$jingleDuration)
    @php($overLimit=$blockPlays->count()>$block->max_spots||$duration>$block->max_duration_seconds)
    @php($adWord=$blockPlays->count()===1?'reklama':($blockPlays->count()>=2&&$blockPlays->count()<=4?'reklame':'reklama'))
    <section class="plan-block {{ $overLimit?'is-over':'' }} {{ $blockPlays->isNotEmpty()?'is-filled':'' }}" data-block="{{ $block->id }}">
        <header style="{{ $overLimit?'background:#feeceb':($block->block_type==='featured'?'background:#fff0d9':'') }}"><div><strong>{{ $block->time_label }}</strong><span>{{ $block->name }} · {{ $block->block_type==='featured'?'Izdvojeni':'Redovni' }}</span></div><small class="capacity {{ $overLimit?'over':'' }}" title="Maksimum: {{ $block->max_spots }} reklama i {{ $block->max_duration_seconds }} s">{{ $overLimit?'⚠ ':'' }}{{ $blockPlays->count() }} {{ $adWord }} · {{ $duration }} s</small></header>
        <div class="drop-zone" data-block="{{ $block->id }}">
        @forelse($blockPlays as $play)
            <article class="play-card" draggable="true" data-id="{{ $play->id }}" data-client="{{ $play->orderItem->spot->client_id }}" data-category="{{ $play->orderItem->spot->category }}" data-voice="{{ $play->orderItem->spot->voice_talent }}" data-name="{{ $play->orderItem->spot->code }} — {{ $play->orderItem->spot->name }}" data-order="{{ $play->orderItem->order->number }}" data-client-name="{{ $play->orderItem->spot->client->name }}" data-duration="{{ $play->orderItem->spot->duration_label }}" data-url="{{ route('orders.show',$play->orderItem->order) }}">
                <span class="drag">⋮⋮</span><div><strong>{{ $play->orderItem->spot->code }} — {{ $play->orderItem->spot->name }}</strong><small>{{ $play->orderItem->order->number }} · {{ $play->orderItem->spot->client->name }}</small><small>{{ $play->orderItem->spot->category ?: 'Bez kategorije' }} · {{ $play->orderItem->spot->voice_talent ?: 'Bez vokala' }} · {{ $play->orderItem->spot->duration_label }}</small></div>
                <a title="Otvori narudžbu" href="{{ route('orders.show',$play->orderItem->order) }}">↗</a>
            </article>
        @empty<div class="empty">Prazan blok — povucite spot ovdje</div>@endforelse
        </div>
    </section>
@endforeach
    </div>
</section>
@endforeach
</div>
<aside id="spot-panel" class="spot-panel" aria-hidden="true"><button type="button" class="panel-close">×</button><div class="eyebrow">Detalji emitiranja</div><h2></h2><dl><dt>Narudžba</dt><dd data-value="order"></dd><dt>Klijent</dt><dd data-value="client"></dd><dt>Kategorija</dt><dd data-value="category"></dd><dt>Vokal</dt><dd data-value="voice"></dd><dt>Trajanje</dt><dd data-value="duration"></dd></dl><a class="btn" href="#">Otvori narudžbu →</a></aside>

<script>
(() => {
    const token = @json(csrf_token()), date = @json($date->format('Y-m-d')), moveUrl = @json(route('plan.plays.move',['play'=>'__PLAY__']));
    let dragged = null, sourceBlock = null, sourceOrder = [], planVersion = null, moving = false;
    const versionUrl=@json(route('plan.version',['date'=>$date->format('Y-m-d')]));
    setInterval(async()=>{if(document.hidden||dragged||moving||document.getElementById('spot-panel')?.classList.contains('open'))return;try{const response=await fetch(versionUrl,{headers:{Accept:'application/json'},cache:'no-store'});const data=await response.json();if(planVersion&&data.version!==planVersion){window.uxToast?.('Plan je izmijenjen na drugom računalu. Osvježavam prikaz…');setTimeout(()=>location.reload(),600)}planVersion=data.version}catch(e){}},10000);
    const message = document.getElementById('plan-message');
    const show = (text, error=false) => { message.textContent=text; message.style.display='block'; message.style.background=error?'#feeceb':''; message.style.color=error?'var(--danger)':''; };
    document.querySelectorAll('.play-card').forEach(card => {
        card.addEventListener('dragstart', () => { dragged=card; sourceBlock=card.closest('.drop-zone')?.dataset.block; sourceOrder=[...card.closest('.drop-zone').querySelectorAll('.play-card')].map(c=>Number(c.dataset.id)); card.classList.add('dragging'); });
        card.addEventListener('click', event => { if(event.target.closest('a'))return; const panel=document.getElementById('spot-panel');panel.querySelector('h2').textContent=card.dataset.name;panel.querySelector('[data-value=order]').textContent=card.dataset.order;panel.querySelector('[data-value=client]').textContent=card.dataset.clientName;panel.querySelector('[data-value=category]').textContent=card.dataset.category||'Bez kategorije';panel.querySelector('[data-value=voice]').textContent=card.dataset.voice||'Bez vokala';panel.querySelector('[data-value=duration]').textContent=card.dataset.duration;panel.querySelector('a').href=card.dataset.url;panel.classList.add('open');panel.setAttribute('aria-hidden','false'); });
        card.addEventListener('dragend', () => card.classList.remove('dragging'));
    });
    document.querySelectorAll('.drop-zone').forEach(zone => {
        zone.addEventListener('dragover', event => {
            event.preventDefault();
            if (!dragged) return;
            const after = [...zone.querySelectorAll('.play-card:not(.dragging)')].find(card => event.clientY <= card.getBoundingClientRect().top + card.offsetHeight/2);
            after ? zone.insertBefore(dragged, after) : zone.appendChild(dragged);
            zone.querySelector('.empty')?.remove();
        });
        zone.addEventListener('drop', async event => {
            event.preventDefault(); if (!dragged) return;
            const ids=[...zone.querySelectorAll('.play-card')].map(card=>Number(card.dataset.id));
            try { moving=true;
                const response=await fetch(moveUrl.replace('__PLAY__',dragged.dataset.id),{method:'PUT',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':token},body:JSON.stringify({block_template_id:Number(zone.dataset.block),play_date:date,ordered_ids:ids})});
                const result=await response.json();
                if(!response.ok) throw new Error(result.message||Object.values(result.errors||{})[0]?.[0]||'Premještaj nije dopušten.');
                if(window.uxToast&&sourceBlock&&sourceBlock!==zone.dataset.block) uxToast('Promjena je spremljena.','',async()=>{await fetch(moveUrl.replace('__PLAY__',dragged.dataset.id),{method:'PUT',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':token},body:JSON.stringify({block_template_id:Number(sourceBlock),play_date:date,ordered_ids:sourceOrder})});location.reload()}); else show('Promjena je spremljena.'); setTimeout(()=>location.reload(),6200);
            } catch(error) { show(error.message,true); setTimeout(()=>location.reload(),1400); } finally { moving=false; }
        });
    });
    document.getElementById('client-filter').addEventListener('change', event => document.querySelectorAll('.play-card').forEach(card => card.style.display=!event.target.value||card.dataset.client===event.target.value?'':'none'));
    const applyFilters=()=>{const filled=document.getElementById('only-filled').checked,over=document.getElementById('only-over').checked,compact=document.getElementById('compact-hours').checked;document.querySelectorAll('.plan-block').forEach(block=>block.style.display=(filled&&!block.classList.contains('is-filled'))||(over&&!block.classList.contains('is-over'))?'none':'');document.querySelectorAll('.hour-row').forEach(row=>row.style.display=compact&&![...row.querySelectorAll('.plan-block')].some(b=>b.classList.contains('is-filled')&&b.style.display!=='none')?'none':'')};
    ['only-filled','only-over','compact-hours'].forEach(id=>{const el=document.getElementById(id);el.checked=localStorage.getItem('plan:'+id)==='1';el.onchange=()=>{localStorage.setItem('plan:'+id,el.checked?'1':'0');applyFilters()}});applyFilters();
    document.querySelector('.panel-close').onclick=()=>document.getElementById('spot-panel').classList.remove('open');
})();
</script>
<style>
.missing-audio-alert{background:#fff0ef!important;color:#9f2e28!important;border-left:5px solid #d54b43}.missing-audio-alert a{font-weight:800;color:#9f2e28}
.conflict-panel{margin:0 0 18px;padding:14px 16px;border:1px solid #efc778;border-radius:12px;background:#fff8e9;color:#342819}.conflict-panel summary{cursor:pointer;font-weight:800}.conflict-panel summary span{padding:2px 7px;border-radius:999px;background:#b45d21;color:#fff}.conflict-row{display:grid;gap:2px;margin-top:9px;padding:8px 10px;border-radius:8px;background:#fff}.conflict-row span{font-size:12px;color:#68736f}.play-card{border-left:5px solid hsl(var(--spot-hue,150) 58% 43%)!important}
.plan-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.plan-controls input,.plan-controls select{width:auto}.plan-controls strong{font-size:18px}.hour-plan{display:flex;flex-direction:column;gap:14px}.hour-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:stretch}.hour-label{position:sticky;left:0;min-height:112px;padding:12px 8px;color:var(--brand);background:linear-gradient(135deg,#edf7f2,#f9fcfa);border:1px solid #d8e8e0;border-left:5px solid var(--brand);border-radius:11px;box-shadow:0 3px 10px rgba(18,105,79,.06);display:flex;align-items:center;justify-content:center}.hour-label strong{display:block;font-size:19px;line-height:1;letter-spacing:.2px;white-space:nowrap}.hour-blocks{display:grid;gap:14px;align-items:start;overflow-x:auto;padding-bottom:3px}.plan-block{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;min-width:280px}.plan-block header{padding:13px 15px;background:#eaf5f0;display:flex;justify-content:space-between;align-items:center}.plan-block header strong{font-size:20px}.plan-block header span{display:block;color:var(--muted);font-size:12px}.drop-zone{min-height:75px;padding:8px}.play-card{display:grid;grid-template-columns:18px 1fr 24px;gap:7px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:9px;margin-bottom:7px;background:#fff;cursor:grab}.play-card:hover{border-color:var(--brand)}.play-card.dragging{opacity:.45}.play-card small{display:block;color:var(--muted);font-size:11px}.drag{color:var(--muted);font-weight:800}.empty{text-align:center;color:var(--muted);font-size:12px;padding:20px 5px;border:1px dashed var(--line);border-radius:8px}.capacity{font-weight:700;color:var(--brand)}@media(max-width:760px){.hour-row{grid-template-columns:1fr}.hour-label{padding:10px 13px;min-height:0}.hour-blocks{grid-template-columns:1fr!important}.plan-block{min-width:0}}
.hour-row{padding-bottom:14px}.hour-row:not(:last-child){border-bottom:1px solid #d8e2dd}.capacity.over{color:var(--danger)}
.plan-toggle{display:flex;align-items:center;gap:6px;margin:0;font-weight:600;font-size:12px;color:var(--muted)}.plan-toggle input{width:auto}.spot-panel{position:fixed;z-index:80;right:0;top:0;height:100vh;width:min(390px,92vw);padding:30px;background:var(--paper);border-left:1px solid var(--line);box-shadow:-12px 0 35px #102b2320;transform:translateX(105%);transition:transform .22s}.spot-panel.open{transform:none}.panel-close{float:right;width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font-size:20px}.spot-panel h2{margin:12px 0 24px}.spot-panel dl{display:grid;grid-template-columns:105px 1fr;gap:10px;margin-bottom:24px}.spot-panel dt{color:var(--muted);font-size:12px}.spot-panel dd{margin:0;font-weight:700}.play-card{transition:transform .14s,box-shadow .14s}.play-card:hover{transform:translateY(-1px);box-shadow:0 5px 15px #19372c12}
.plan-controls{display:grid;align-items:initial;gap:12px}.plan-controls-primary{display:flex;align-items:center;gap:12px;min-width:0}.plan-controls-primary input,.plan-controls-primary select{width:auto}.plan-controls-primary strong{font-size:18px;white-space:nowrap}.plan-client-search{margin-left:auto;width:min(350px,28vw);min-width:230px}.plan-client-search .live-select,.plan-client-search .live-select-input{width:100%}.plan-controls-secondary{display:flex;align-items:center;gap:14px;flex-wrap:wrap}@media(max-width:1100px){.plan-controls-primary{flex-wrap:wrap}.plan-client-search{margin-left:0;width:min(100%,420px)}}@media(max-width:760px){.plan-controls-primary{align-items:stretch}.plan-controls-primary>*{flex:1 1 auto}.plan-client-search{width:100%;min-width:100%}}
</style>
@endsection