@extends('layouts.app')

@section('content')
<style>
    .price-actions { display:flex; align-items:center; gap:6px; }
    .price-action { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d8e0dc; border-radius:8px; background:#fff; color:var(--brand); text-decoration:none; font-size:16px; font-weight:700; cursor:pointer; }
    .price-action:hover { background:#eef7f3; border-color:#bdd6cb; }
    .price-action.confirm { color:#fff !important; background:var(--brand) !important; border-color:var(--brand) !important; }
    .price-action.danger { color:var(--danger); }
    .inline-form { display:inline; margin:0; }
    .update-form { display:flex; align-items:center; gap:6px; }
    .item-editor { display:none; }
    .item-editor input, .item-editor select { width:100%; min-width:90px; padding:9px 10px; }
    .item-editor.compact { grid-template-columns:1fr auto 1fr auto; align-items:center; gap:5px; }
    .price-row.editing .item-display { display:none; }
    .price-row.editing .item-editor { display:grid; }
    .price-row.editing .delete-action { display:none; }
    .cancel-action { display:none; }
    .price-row.editing .cancel-action { display:inline-flex; }
    .items-heading { display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }
    .items-heading h2 { margin:0; }
    .new-price-row { display:none; background:#f8fbfa; }
    .new-price-row.open { display:table-row; }
    .new-price-row input, .new-price-row select { width:100%; min-width:90px; padding:9px 10px; }
    .new-price-fields { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:5px; }
</style>

<div class="top">
    <div>
        <div class="eyebrow">{{ $list->active ? 'Aktivan' : 'Neaktivan' }} · {{ $list->valid_from->format('d.m.Y.') }} – {{ $list->valid_until?->format('d.m.Y.') ?? 'bez završetka' }}</div>
        <h1>{{ $list->name }}</h1>
    </div>
    <div class="toolbar">
        <a class="btn secondary" href="{{ route('prices.pdf', $list) }}" target="_blank">▤ PDF / Ispis</a>
        <a class="btn secondary" href="{{ route('prices.edit', $list) }}">✎ Uredi cjenik</a>
        <a class="btn secondary" href="{{ route('prices.index') }}">← Cjenici</a>
    </div>
</div>

<div class="items-heading">
    <h2>Stavke cjenika</h2>
    <button class="btn secondary" type="button" id="add-price-item">+ Dodaj stavku</button>
</div>

<table>
    <thead><tr><th>Stavka</th><th>Vrsta</th><th>Jedinica</th><th>Trajanje</th><th>Vrijeme</th><th>Cijena</th><th>Akcije</th></tr></thead>
    <tbody>
        @forelse($list->items as $item)
            @php($formId = 'price-item-' . $item->id)
            <tr class="price-row" data-price-row>
                <td>
                    <span class="item-display">{{ $item->name }}</span>
                    <span class="item-editor"><input form="{{ $formId }}" name="name" value="{{ $item->name }}" required disabled></span>
                </td>
                <td>
                    <span class="item-display">{{ ['broadcast'=>'Emitiranje','production'=>'Produkcija','web'=>'Web / portal','sponsorship'=>'Sponzorstvo / emisija','other'=>'Ostalo'][$item->service_type] ?? 'Emitiranje' }}</span>
                    <span class="item-editor"><select form="{{ $formId }}" name="service_type" data-service-type disabled>@foreach(['broadcast'=>'Emitiranje','production'=>'Produkcija','web'=>'Web / portal','sponsorship'=>'Sponzorstvo / emisija','other'=>'Ostalo'] as $value=>$label)<option value="{{ $value }}" @selected(($item->service_type ?: 'broadcast')===$value)>{{ $label }}</option>@endforeach</select></span>
                </td>
                <td>
                    <span class="item-display">{{ $item->unit ?: 'emitiranje' }}</span>
                    <span class="item-editor"><select form="{{ $formId }}" name="unit" disabled>@foreach(['emitiranje','komad','usluga','paket','mjesec','minuta'] as $unit)<option value="{{ $unit }}" @selected(($item->unit ?: 'emitiranje')===$unit)>{{ ucfirst($unit) }}</option>@endforeach</select></span>
                </td>
                <td>
                    <span class="item-display">{{ $item->service_type==='broadcast' ? $item->duration_from_seconds.' s' : '—' }}</span>
                    <span class="item-editor compact broadcast-fields"><input form="{{ $formId }}" type="number" min="1" name="duration_seconds" value="{{ $item->duration_from_seconds ?: 10 }}" disabled><span>s</span></span>
                </td>
                <td>
                    <span class="item-display">{{ $item->service_type==='broadcast' ? substr($item->time_from, 0, 5).'–'.substr($item->time_to, 0, 5) : '—' }}</span>
                    <span class="item-editor compact broadcast-fields">
                        <input form="{{ $formId }}" type="time" name="time_from" value="{{ $item->time_from ? substr($item->time_from, 0, 5) : '07:00' }}" disabled><span>–</span>
                        <input form="{{ $formId }}" type="time" name="time_to" value="{{ $item->time_to ? substr($item->time_to, 0, 5) : '19:00' }}" disabled><span></span>
                    </span>
                </td>
                <td>
                    <span class="item-display">{{ number_format($item->unit_price, 2, ',', '.') }} €</span>
                    <span class="item-editor compact"><input form="{{ $formId }}" type="number" min="0" step=".01" name="unit_price" value="{{ $item->unit_price }}" required disabled><span>€</span></span>
                </td>
                <td>
                    <div class="price-actions">
                        <form id="{{ $formId }}" class="inline-form update-form" method="post" action="{{ route('prices.items.update', [$list, $item]) }}">
                            @csrf
                            @method('PUT')
                            <button class="price-action edit-action" type="submit" title="Uredi stavku" aria-label="Uredi stavku"><span class="edit-icon">✎</span></button>
                            <button class="price-action cancel-action" type="button" title="Odustani" aria-label="Odustani">×</button>
                        </form>
                        <form class="inline-form delete-action" method="post" action="{{ route('prices.items.destroy', [$list, $item]) }}" onsubmit="return confirm('Obrisati ovu stavku cjenika?')">
                            @csrf
                            @method('DELETE')
                            <button class="price-action danger" type="submit" title="Obriši stavku" aria-label="Obriši stavku">×</button>
                        </form>
                    </div>
                </td>
            </tr>
        @empty
            <tr><td colspan="7">Cjenik još nema tarifnih stavki.</td></tr>
        @endforelse
        <tr class="new-price-row" id="new-price-row">
            <td><input form="new-price-item-form" name="name" placeholder="Naziv stavke" required disabled></td>
            <td><select form="new-price-item-form" name="service_type" data-service-type disabled><option value="broadcast">Emitiranje</option><option value="production">Produkcija</option><option value="web">Web / portal</option><option value="sponsorship">Sponzorstvo / emisija</option><option value="other">Ostalo</option></select></td>
            <td><select form="new-price-item-form" name="unit" disabled>@foreach(['emitiranje','komad','usluga','paket','mjesec','minuta'] as $unit)<option value="{{ $unit }}">{{ ucfirst($unit) }}</option>@endforeach</select></td>
            <td>
                <span class="new-price-fields broadcast-fields"><input form="new-price-item-form" type="number" min="1" name="duration_seconds" value="10" disabled><span>s</span></span>
            </td>
            <td>
                <span class="new-price-fields broadcast-fields">
                    <input form="new-price-item-form" type="time" name="time_from" value="07:00" disabled><span>–</span>
                    <input form="new-price-item-form" type="time" name="time_to" value="19:00" disabled><span></span>
                </span>
            </td>
            <td><span class="new-price-fields"><input form="new-price-item-form" type="number" step=".01" min="0" name="unit_price" placeholder="0,00" required disabled><span>€</span></span></td>
            <td>
                <form id="new-price-item-form" class="price-actions" method="post" action="{{ route('prices.items.store', $list) }}">
                    @csrf
                    <button class="price-action confirm" type="submit" title="Spremi novu stavku" aria-label="Spremi novu stavku">✓</button>
                    <button class="price-action danger" type="button" id="cancel-new-price-item" title="Odustani" aria-label="Odustani">×</button>
                </form>
            </td>
        </tr>
    </tbody>
</table>

<script>
const newPriceRow = document.getElementById('new-price-row');
const newPriceForm = document.getElementById('new-price-item-form');
const newPriceInputs = newPriceRow.querySelectorAll('input,select');

function syncServiceFields(container) {
    const type = container.querySelector('[data-service-type]');
    if (!type) return;
    const broadcast = type.value === 'broadcast';
    container.querySelectorAll('.broadcast-fields input').forEach(function (input) {
        input.required = broadcast;
        input.closest('.broadcast-fields').style.visibility = broadcast ? 'visible' : 'hidden';
    });
}

document.getElementById('add-price-item').addEventListener('click', function () {
    newPriceRow.classList.add('open');
    newPriceInputs.forEach(function (input) { input.disabled = false; });
    syncServiceFields(newPriceRow);
    newPriceInputs[0].focus();
});

document.getElementById('cancel-new-price-item').addEventListener('click', function () {
    newPriceForm.reset();
    newPriceInputs.forEach(function (input) { input.disabled = true; });
    newPriceRow.classList.remove('open');
});

document.querySelectorAll('[data-price-row]').forEach(function (row) {
    const editButton = row.querySelector('.edit-action');
    const cancelButton = row.querySelector('.cancel-action');
    const form = editButton.closest('form');
    const inputs = row.querySelectorAll('.item-editor input, .item-editor select');
    row.querySelector('[data-service-type]').addEventListener('change', function(){ syncServiceFields(row); });

    editButton.addEventListener('click', function (event) {
        if (!row.classList.contains('editing')) {
            event.preventDefault();
            document.querySelectorAll('[data-price-row].editing').forEach(function (openRow) {
                if (openRow !== row) openRow.querySelector('.cancel-action').click();
            });
            row.classList.add('editing');
            inputs.forEach(function (input) { input.disabled = false; });
            syncServiceFields(row);
            editButton.classList.add('confirm');
            editButton.querySelector('.edit-icon').textContent = '✓';
            editButton.title = 'Spremi izmjene';
            inputs[0].focus();
        }
    });

    cancelButton.addEventListener('click', function () {
        form.reset();
        inputs.forEach(function (input) { input.disabled = true; });
        row.classList.remove('editing');
        editButton.classList.remove('confirm');
        editButton.querySelector('.edit-icon').textContent = '✎';
        editButton.title = 'Uredi stavku';
    });
});
newPriceRow.querySelector('[data-service-type]').addEventListener('change', function(){ syncServiceFields(newPriceRow); });
</script>
@endsection