@extends('layouts.app')
@section('title','Jingleovi reklamnog bloka')
@section('content')
<div class="top"><div><div class="eyebrow">Postavke · Audio elementi</div><h1>Jingleovi reklamnog bloka</h1></div><a class="btn secondary" href="{{ route('settings.index') }}">← Postavke</a></div>
<div class="card" style="margin-bottom:18px">Početni i završni jingle automatski će se dodavati u buduće .fps datoteke. Ne računaju se kao reklame, ali njihovo trajanje ulazi u kapacitet bloka.</div>
<form class="card form" method="post" enctype="multipart/form-data" action="{{ route('settings.jingles.update') }}">@csrf @method('put')
@foreach(['intro'=>'Početni jingle','outro'=>'Završni jingle'] as $type=>$label)
<h2 class="section-title">{{ $label }}</h2><div class="fields">
    <div class="field full"><label><input style="width:auto" type="checkbox" name="{{ $type }}_enabled" value="1" @checked(old($type.'_enabled',$jingles->{$type.'_enabled'}))> Aktivan</label></div>
    <div class="field full"><label>Audio datoteka</label><input class="jingle-file" data-type="{{ $type }}" type="file" name="{{ $type }}_audio" accept="audio/*,.mp3,.wav,.m4a,.aac,.ogg,.flac"><audio id="{{ $type }}-preview" controls style="display:{{ $jingles->{$type.'_file_name'}?'block':'none' }};width:100%;margin-top:10px" @if($jingles->{$type.'_file_name'}) src="{{ route('settings.jingles.audio',$type) }}" @endif></audio></div>
    <div class="field"><label>Trajanje (sekunde)</label><input id="{{ $type }}-duration" type="number" step=".01" min=".01" name="{{ $type }}_duration_seconds" value="{{ old($type.'_duration_seconds',$jingles->{$type.'_duration_ms'}?round($jingles->{$type.'_duration_ms'}/1000,2):'') }}"></div>
    <div class="field"><label>Playout putanja</label><input id="{{ $type }}-path" name="{{ $type }}_playout_path" value="{{ old($type.'_playout_path',$jingles->{$type.'_playout_path'}) }}" placeholder="{{ $playoutBasePath }}\jingle.mp3"></div>
</div>
@endforeach
@if($errors->any())<div class="error">{{ $errors->first() }}</div>@endif
<button class="btn" style="margin-top:20px">Spremi jingleove</button></form>
<script>document.querySelectorAll('.jingle-file').forEach(input=>input.addEventListener('change',()=>{const file=input.files[0],type=input.dataset.type;if(!file)return;const audio=document.getElementById(type+'-preview');audio.src=URL.createObjectURL(file);audio.style.display='block';audio.onloadedmetadata=()=>document.getElementById(type+'-duration').value=audio.duration.toFixed(2);const safe=(type+'-'+file.name.replace(/\.[^.]+$/,'')).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').replace(/[^a-z0-9]+/g,'_').replace(/^_+|_+$/g,'');document.getElementById(type+'-path').value=@json(rtrim($playoutBasePath,'\\/'))+'\\'+safe+'.'+file.name.split('.').pop().toLowerCase()}));</script>
@endsection