@extends('layouts.app')
@section('title', $order->number)

@section('content')
<div class="top">
    <button class="btn secondary" type="button" onclick="document.getElementById('copy-order').showModal()">⧉ Kopiraj narudžbu</button>
    <div><div class="eyebrow">Narudžba</div><h1>{{ $order->number }}</h1></div>
    <div class="toolbar"><a class="btn secondary" href="{{ route('orders.index') }}">← Narudžbe</a><a class="btn" href="{{ route('orders.items.create',$order) }}">+ Dodaj spot</a><a class="btn" href="{{ route('orders.schedule-all',$order) }}">Raspored emitiranja →</a></div>
</div>

<form class="card order-inline-form" method="post" action="{{ route('orders.update',$order) }}">
    @csrf @method('put')
    <div class="inline-form-head"><div><h2>Podaci narudžbe</h2><div class="eyebrow">Podatke možete urediti izravno na ovom ekranu.</div></div><button class="btn">Spremi izmjene</button></div>
    <div class="fields">
        <div class="field"><label>Broj narudžbe *</label><input name="number" value="{{ old('number',$order->number) }}"></div>
        <div class="field"><label>Datum narudžbe *</label><input type="date" name="ordered_at" value="{{ old('ordered_at',$order->ordered_at->format('Y-m-d')) }}"></div>
        <div class="field"><label>Oglašivač *</label><select name="advertiser_id">@foreach($clients as $client)<option value="{{ $client->id }}" @selected(old('advertiser_id',$order->advertiser_id)==$client->id)>{{ $client->name }}</option>@endforeach</select></div>
        <div class="field"><label>Naručitelj *</label><select name="customer_id">@foreach($clients as $client)<option value="{{ $client->id }}" @selected(old('customer_id',$order->customer_id)==$client->id)>{{ $client->name }}</option>@endforeach</select></div>
        <div class="field"><label>Status</label><select name="status">@foreach(['draft'=>'Nije spremna','planning'=>'Prijedlog plana','confirmed'=>'Potvrđena / U realizaciji','published'=>'Potvrđena / U realizaciji','completed'=>'Završena','cancelled'=>'Otkazana'] as $value=>$label)<option value="{{ $value }}" @selected(old('status',$order->status)===$value)>{{ $label }}</option>@endforeach</select></div>
        <div class="field full"><label>Napomena</label><textarea name="notes" rows="3">{{ old('notes',$order->notes) }}</textarea></div>
    </div>
    @if($errors->any())<div class="error" style="margin-top:12px">{{ $errors->first() }}</div>@endif
</form>

<div class="section-heading"><h2>Spotovi i kampanje</h2><span>{{ $order->items->count() }} {{ $order->items->count() === 1 ? 'spot' : 'spotova' }}</span></div>
<div class="table-scroll">
<table>
    <thead><tr><th>Spot</th><th>Razdoblje</th><th>Traženo</th><th>Raspoređeno</th><th>Pozicija</th><th>Akcije</th></tr></thead>
    <tbody>
    @foreach($order->items as $item)
        <tr>
            <td><strong>{{ $item->spot->code }} — {{ $item->spot->name }}</strong></td>
            <td>{{ $item->starts_on->format('d.m.Y.') }} – {{ $item->ends_on->format('d.m.Y.') }}</td>
            <td>{{ $item->total_plays }}</td><td>{{ $item->scheduledPlays->count() }}</td>
            <td>{{ ['any'=>'Proizvoljna','first'=>'Prva','last'=>'Zadnja'][$item->block_position] }}</td>
            <td><div class="item-actions"><a class="edit-item" href="{{ route('orders.items.edit',[$order,$item]) }}">✎ Uredi spot</a>@if($order->items->count()>1)<form method="post" action="{{ route('orders.items.destroy',[$order,$item]) }}" onsubmit="return confirm('Ukloniti spot i njegov raspored?')">@csrf @method('delete')<button>× Ukloni</button></form>@endif</div></td>
        </tr>
    @endforeach
    </tbody>
</table>
</div>

<dialog id="copy-order" class="copy-dialog"><form method="post" action="{{route('orders.duplicate',$order)}}">@csrf<h2>Kopiraj narudžbu</h2><p>Kopirat će se svi spotovi, pravila i kompletan raspored emitiranja.</p><label>Novi početak kampanje</label><input type="date" name="target_start" required value="{{ $order->items->min('starts_on')?->copy()->addMonthNoOverflow()->format('Y-m-d') }}"><div class="toolbar"><button class="btn">Kopiraj sve</button><button class="btn secondary" type="button" onclick="this.closest('dialog').close()">Odustani</button></div></form></dialog>

@foreach($order->items as $campaign)
<dialog id="replace-spot-{{$campaign->id}}" class="copy-dialog"><form method="post" action="{{route('orders.items.replace-spot',[$order,$campaign])}}">@csrf<h2>Zamijeni spot</h2><p>Termini, blokovi i redoslijed emitiranja ostat će nepromijenjeni.</p><label>Novi spot</label><select name="new_spot_id" required><option value="">Odaberite…</option>@foreach($replacementSpots->where('client_id',$order->advertiser_id) as $spot)@if($spot->id!==$campaign->spot_id)<option value="{{$spot->id}}">{{$spot->code}} — {{$spot->name}}</option>@endif @endforeach</select><div class="fields" style="margin-top:14px"><div class="field"><label>Zamijeni od</label><input type="date" name="replace_from" required value="{{$campaign->starts_on->format('Y-m-d')}}"></div><div class="field"><label>Zamijeni do</label><input type="date" name="replace_to" required value="{{$campaign->ends_on->format('Y-m-d')}}"></div></div><div class="toolbar"><button class="btn">Potvrdi zamjenu</button><button class="btn secondary" type="button" onclick="this.closest('dialog').close()">Odustani</button></div></form></dialog>
@endforeach
<script>document.querySelectorAll('.edit-item').forEach(link=>{const id=link.href.match(/\/items\/(\d+)\/edit/)?.[1];if(!id)return;const button=document.createElement('button');button.type='button';button.textContent='⇄ Zamijeni spot';button.onclick=()=>document.getElementById('replace-spot-'+id).showModal();link.after(button)})</script>
<style>
.copy-dialog{border:0;border-radius:16px;padding:24px;max-width:500px;box-shadow:0 20px 70px #0004}.copy-dialog::backdrop{background:#102b2599}.copy-dialog input{display:block;width:100%;margin:8px 0 20px}
.order-inline-form{margin-bottom:24px}.inline-form-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.inline-form-head h2{margin:0}.section-heading{display:flex;align-items:center;gap:10px;margin:26px 0 12px}.section-heading h2{margin:0}.section-heading span{padding:3px 8px;border-radius:999px;background:var(--brand2);color:var(--brand);font-size:12px;font-weight:700}.table-scroll{overflow:auto}.item-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.item-actions a,.item-actions button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 9px;color:var(--brand);cursor:pointer;font:inherit}.item-actions button{color:var(--danger)}@media(max-width:650px){.inline-form-head{align-items:flex-start;flex-direction:column}.inline-form-head .btn{width:100%}}
</style>
@endsection