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

<form class="card form" method="post" enctype="multipart/form-data" action="{{ $spot->exists ? route('spots.update', $spot) : route('spots.store') }}">
    @csrf
    @if($spot->exists) @method('put') @endif

    <div class="fields">
        <div class="field">
            <label>Klijent *</label>
            <select id="spot-client" name="client_id"><option value="">Odaberite…</option>@foreach($clients as $client)<option value="{{ $client->id }}" data-category="{{ $client->category }}" @selected(old('client_id', $spot->client_id) == $client->id)>{{ $client->name }}</option>@endforeach</select>
        </div>
        <div class="field">
            <label>Šifra *</label>
            <input id="spot-code" name="code" value="{{ old('code', $spot->code) }}" readonly>
            <div class="help">Automatski dodijeljena sljedeća slobodna šifra.</div>
        </div>
        <div class="field full">
            <label>Naziv *</label>
            <input id="spot-name" name="name" value="{{ old('name', $spot->name) }}">
        </div>
        <div class="field">
            <label>Kategorija</label>
            <select id="spot-category" name="category"><option value="">Bez kategorije</option>@foreach($categories as $category)<option value="{{ $category }}" @selected(old('category',$spot->category)===$category)>{{ $category }}</option>@endforeach</select>
            <div class="help">Koristi se za razdvajanje konkurentskih reklama.</div>
        </div>
        <div class="field">
            <label>Vokal / glas</label>
            <select name="voice_talent"><option value="">Bez dodijeljenog vokala</option>@foreach($voiceTalents as $voiceTalent)<option value="{{ $voiceTalent }}" @selected(old('voice_talent',$spot->voice_talent)===$voiceTalent)>{{ $voiceTalent }}</option>@endforeach</select>
            <div class="help">Spotovi istog vokala neće biti u istom bloku.</div>
        </div>
        <div class="field">
            <label>Trajanje (sekunde)</label>
            <input id="duration-seconds" type="number" step="0.01" min="0.01" name="duration_seconds" value="{{ old('duration_seconds', $spot->duration_ms ? round($spot->duration_ms / 1000, 2) : '') }}" placeholder="30">
            <div class="help">Kod uploada detektira se automatski.</div>
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status">@foreach(['draft'=>'Priprema','approved'=>'Odobren','active'=>'Aktivan','expired'=>'Istekao','archived'=>'Arhiviran'] as $value=>$label)<option value="{{ $value }}" @selected(old('status', $spot->status ?: 'draft') === $value)>{{ $label }}</option>@endforeach</select>
        </div>
        <div class="field full">
            <label>Audio datoteka</label>
            <input id="audio-file" type="file" name="audio_file" accept="audio/mpeg,audio/wav,audio/mp4,audio/aac,audio/ogg,audio/flac,.mp3,.wav,.m4a,.aac,.ogg,.flac">
            <div class="help">MP3, WAV, M4A, AAC, OGG ili FLAC, najviše 50 MB.</div>
            <audio id="audio-preview" controls style="display:{{ $spot->exists && $spot->file_name ? 'block' : 'none' }};width:100%;margin-top:12px" @if($spot->exists && $spot->file_name) src="{{ route('spots.audio', $spot) }}" @endif></audio>
        </div>
        <div class="field full audio-editor" id="spot-audio-editor"
             data-existing-url="{{ $spot->exists && $spot->file_name ? route('spots.audio', $spot) : '' }}">
            <div class="audio-editor-head">
                <div><strong>Waveform i tehnička provjera</strong><div class="help">Original ostaje sačuvan. Rezanje, fade i normalizacija stvaraju zasebnu WAV verziju.</div></div>
                <button class="btn secondary" type="button" id="analyze-audio">Analiziraj audio</button>
            </div>
            <canvas id="audio-waveform" height="150"></canvas>
            <div class="audio-metadata" id="audio-metadata">
                <span>Format: <b id="meta-format">—</b></span><span>Sample rate: <b id="meta-rate">—</b></span>
                <span>Kanali: <b id="meta-channels">—</b></span><span>Bitrate: <b id="meta-bitrate">—</b></span>
                <span>Peak: <b id="meta-peak">—</b></span><span>RMS: <b id="meta-rms">—</b></span>
            </div>
            <div class="fields audio-controls">
                <div class="field"><label>Početak (s)</label><input id="trim-start" type="number" step="0.01" min="0" value="{{ old('trim_start_seconds', ($spot->trim_start_ms ?? 0) / 1000) }}"></div>
                <div class="field"><label>Završetak (s)</label><input id="trim-end" type="number" step="0.01" min="0" value="{{ old('trim_end_seconds', $spot->trim_end_ms ? $spot->trim_end_ms / 1000 : '') }}"></div>
                <div class="field"><label>Fade-in (ms)</label><input id="fade-in" name="fade_in_ms" type="number" min="0" max="30000" value="{{ old('fade_in_ms', $spot->fade_in_ms ?? 0) }}"></div>
                <div class="field"><label>Fade-out (ms)</label><input id="fade-out" name="fade_out_ms" type="number" min="0" max="30000" value="{{ old('fade_out_ms', $spot->fade_out_ms ?? 0) }}"></div>
            </div>
            <div class="toolbar">
                <button class="btn secondary" type="button" id="preview-selection">▶ Poslušaj odabir</button>
                <button class="btn" type="button" id="render-processed">Izradi obrađenu WAV verziju</button>
                <span class="help" id="audio-editor-status"></span>
            </div>
            @if($spot->exists && $spot->processed_file_name)
                <div class="processed-ready"><strong>Obrađena verzija postoji</strong><audio controls src="{{ route('spots.processed-audio', $spot) }}"></audio></div>
            @endif
            <input type="file" id="processed-audio-file" name="processed_audio_file" accept="audio/wav" hidden>
            <input type="hidden" id="audio-format" name="audio_format" value="{{ old('audio_format', $spot->audio_format) }}">
            <input type="hidden" id="audio-bitrate" name="audio_bitrate_kbps" value="{{ old('audio_bitrate_kbps', $spot->audio_bitrate_kbps) }}">
            <input type="hidden" id="audio-rate" name="audio_sample_rate" value="{{ old('audio_sample_rate', $spot->audio_sample_rate) }}">
            <input type="hidden" id="audio-channels" name="audio_channels" value="{{ old('audio_channels', $spot->audio_channels) }}">
            <input type="hidden" id="audio-peak" name="audio_peak_db" value="{{ old('audio_peak_db', $spot->audio_peak_db) }}">
            <input type="hidden" id="audio-rms" name="audio_rms_db" value="{{ old('audio_rms_db', $spot->audio_rms_db) }}">
            <input type="hidden" id="trim-start-ms" name="trim_start_ms" value="{{ old('trim_start_ms', $spot->trim_start_ms ?? 0) }}">
            <input type="hidden" id="trim-end-ms" name="trim_end_ms" value="{{ old('trim_end_ms', $spot->trim_end_ms) }}">
        </div>
        <div class="field full">
            <details>
                <summary style="cursor:pointer;font-weight:700">Verzija i povezanost spota</summary>
                <div class="fields" style="margin-top:12px">
                    <div class="field"><label>Vrsta verzije</label><select name="version_type"><option value="">Nije određeno</option>@foreach(['original'=>'Original','hr'=>'Hrvatska','it'=>'Talijanska','short'=>'Skraćena','alternate'=>'Alternativna'] as $value=>$label)<option value="{{ $value }}" @selected(old('version_type',$spot->version_type)===$value)>{{ $label }}</option>@endforeach</select></div>
                    <div class="field"><label>Povezan izvorni spot</label><select name="parent_spot_id"><option value="">Bez povezanog spota</option>@foreach($relatedSpots as $related)<option value="{{ $related->id }}" @selected(old('parent_spot_id',$spot->parent_spot_id)==$related->id)>{{ $related->code }} — {{ $related->name }}</option>@endforeach</select></div>
                </div>
            </details>
        </div>
        <div class="field full">
            <label>Playout putanja</label>
            <input id="playout-path" name="playout_path" value="{{ old('playout_path', $spot->playout_path) }}" placeholder="{{ $playoutBasePath }}\naziv-spota.mp3">
            <div class="help">Popunjava se iz naziva uploadane datoteke, a po potrebi je možete ručno izmijeniti.</div>
        </div>
        <div class="field full">
            <details>
                <summary style="cursor:pointer;font-weight:700">Napredno: razdoblje valjanosti spota</summary>
                <div class="help" style="margin:8px 0 12px">Opcionalno ograničava kada se spot smije koristiti. Korisno je za akcije, događaje i spotove sa zakonskim rokom. Ostavite prazno ako spot nema rok.</div>
                <div class="fields">
                    <div class="field"><label>Vrijedi od</label><input type="date" name="valid_from" value="{{ old('valid_from', $spot->valid_from?->format('Y-m-d')) }}"></div>
                    <div class="field"><label>Vrijedi do</label><input type="date" name="valid_until" value="{{ old('valid_until', $spot->valid_until?->format('Y-m-d')) }}"></div>
                </div>
            </details>
        </div>
    </div>

    @if($errors->any())<div class="error" style="margin-top:15px">Provjerite označena polja: {{ $errors->first() }}</div>@endif
    <div class="toolbar" style="margin-top:20px"><button class="btn">Spremi</button><a class="btn secondary" href="{{ route('spots.index') }}">Odustani</a></div>
</form>

<script>window.spotAudioConfig = { basePath: @json(rtrim($playoutBasePath, '\\/')) };</script>
<script src="{{ asset('spot-audio-editor.js') }}?v=109"></script>
@endsection