@extends('layouts.app')

@section('content')
<div class="top">
    <div><div class="eyebrow">Prodaja i dokumenti</div><h1>Ponude</h1></div>
    <a class="btn" href="{{ route('offers.create') }}">+ Nova ponuda</a>
</div>

<form class="ux-filter" method="get"><input name="q" value="{{ request('q') }}" placeholder="Pretraži broj, oglašivača ili naručitelja…"><select name="client_id"><option value="">Svi klijenti</option>@foreach($filterClients as $client)<option value="{{ $client->id }}" @selected(request('client_id')==$client->id)>{{ $client->name }}</option>@endforeach</select><select name="status"><option value="">Sva stanja</option><option value="offer" @selected(request('status')==='offer')>Ponuda</option><option value="progress" @selected(request('status')==='progress')>U realizaciji</option><option value="invoiced" @selected(request('status')==='invoiced')>Fakturirano</option></select><input type="date" name="date_from" value="{{ request('date_from') }}"><input type="date" name="date_to" value="{{ request('date_to') }}"><a class="ux-filter-clear" href="{{ route('offers.index') }}">Očisti</a></form>
<div class="offer-legend" aria-label="Legenda statusa ponuda">
    <span><i class="legend-dot offer-dot"></i>Ponuda</span>
    <span><i class="legend-dot progress-dot"></i>U realizaciji</span>
    <span><i class="legend-dot invoiced-dot"></i>Fakturirano</span>
</div>

<div class="table-scroll">
    <table>
        <thead><tr><th>Broj</th><th>Oglašivač</th><th>Naručitelj</th><th>Datum</th><th>Ukupno</th><th>Status</th><th>Akcije</th></tr></thead>
        <tbody>
        @forelse($offers as $offer)
            @php
                $workflowStatus = $offer->invoices_exists ? 'invoiced' : ($offer->orders_exists ? 'progress' : 'offer');
                $workflowLabel = ['offer' => 'Ponuda', 'progress' => 'U realizaciji', 'invoiced' => 'Fakturirano'][$workflowStatus];
            @endphp
            <tr class="offer-row status-{{ $workflowStatus }}">
                <td><a class="row-edit-link" href="{{ route('offers.edit',$offer) }}" title="Uredi ponudu"><strong>{{ $offer->number }}</strong></a></td>
                <td><a class="row-edit-link" href="{{ route('offers.edit',$offer) }}" title="Uredi ponudu">{{ $offer->advertiser->name }}</a></td>
                <td><a class="row-edit-link" href="{{ route('offers.edit',$offer) }}" title="Uredi ponudu">{{ $offer->customer->name }}</a></td>
                <td>{{ $offer->offered_at->format('d.m.Y.') }}</td>
                <td>{{ number_format($offer->gross_total,2,',','.') }} €</td>
                <td><span class="workflow-pill {{ $workflowStatus }}">{{ $workflowLabel }}</span></td>
                <td><div class="document-actions">
                    <a title="Pregled" href="{{ route('offers.show',$offer) }}">◉</a>
                    <a title="Uredi" href="{{ route('offers.edit',$offer) }}">✎</a>
                    <a class="pdf-button" title="PDF / Ispis" target="_blank" href="{{ route('offers.pdf',$offer) }}">PDF</a>
                    <a class="order-button" title="Izradi narudžbu" href="{{ route('orders.create',['offer'=>$offer]) }}">Narudžba</a>
                    <a class="invoice-button" title="Izradi račun" href="{{ route('offers.invoice',$offer) }}">Račun</a>
                    <form method="post" action="{{ route('offers.destroy',$offer) }}" onsubmit="return confirm('Trajno obrisati ponudu {{ $offer->number }}?')">@csrf @method('delete')<button title="Obriši">×</button></form>
                </div></td>
            </tr>
        @empty
            <tr><td colspan="7">Još nema ponuda.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
<div class="pagination">{{ $offers->links() }}</div>

<style>
.offer-legend{display:flex;justify-content:flex-end;gap:16px;margin:-11px 3px 12px;color:var(--muted);font-size:12px}.offer-legend span{display:flex;align-items:center;gap:6px}.legend-dot{width:10px;height:10px;border:1px solid #d8dfdc;border-radius:50%;background:#fff}.progress-dot{background:#edf0ef}.invoiced-dot{background:#dff4e9;border-color:#b8dfce}
.table-scroll{overflow:auto}.offer-row.status-offer{background:#fff}.offer-row.status-progress{background:#f0f2f1}.offer-row.status-invoiced{background:#eaf8f0}.offer-row.status-invoiced td:first-child{box-shadow:inset 4px 0 0 #168b64}
.workflow-pill{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#fff;border:1px solid #e0e5e2}.workflow-pill.progress{background:#e4e8e6;color:#4c5c55}.workflow-pill.invoiced{background:#d6f0e2;color:#087443;border-color:#c5e7d5}
.document-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}.document-actions a,.document-actions button{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--brand);font-size:17px;cursor:pointer}.document-actions .pdf-button{width:44px;font-size:11px;font-weight:800}.document-actions .invoice-button,.document-actions .order-button{display:inline-flex;width:auto;padding:0 10px;background:var(--brand);color:#fff;font-size:11px;font-weight:800}.document-actions .order-button{background:#315047}.document-actions button{color:var(--danger)}
.row-edit-link,.row-edit-link:hover{color:inherit;text-decoration:none}.row-edit-link:hover{color:var(--brand)}
body.dark .offer-row.status-offer td{background:#172a24;color:var(--ink)}
body.dark .offer-row.status-progress td{background:#1c302a;color:var(--ink)}
body.dark .offer-row.status-invoiced td{background:#17372c;color:var(--ink)}
body.dark .offer-row .row-edit-link{color:inherit}
body.dark .offer-row .row-edit-link:hover{color:#55d2a5}
body.dark .offer-row .document-actions a,
body.dark .offer-row .document-actions button{background:#fff;color:#087657;border-color:#b9c8c2}
body.dark .offer-row .document-actions .invoice-button{background:#2fb58d;color:#fff;border-color:#249875}
body.dark .offer-row .document-actions .order-button{background:#315047;color:#fff;border-color:#315047}
body.dark .offer-row .document-actions button{color:#c9271b}
</style>
@endsection