@extends('layouts.dashboard')

@section('title', trans('dashboard.nav_saved_items'))
@section('header_title', trans('dashboard.nav_saved_items'))

@section('content')
<div class="space-y-6">
    <form method="POST" action="{{ route('dashboard.items.store') }}" class="p-4 rounded-2xl bg-navy-900 border border-slate-800 grid grid-cols-1 md:grid-cols-6 gap-3 text-xs">
        @csrf
        <input type="text" name="name" placeholder="{{ trans('dashboard.line_name') }}" required class="md:col-span-2 rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 focus:border-brand-500 focus:outline-none">
        <input type="text" name="sku" placeholder="SKU" class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 focus:border-brand-500 focus:outline-none">
        <input type="number" step="0.01" min="0" name="unit_price" placeholder="{{ trans('dashboard.line_price') }}" required class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 focus:border-brand-500 focus:outline-none">
        <select name="vat_rate" class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 focus:border-brand-500 focus:outline-none">
            <option value="15">15%</option>
            <option value="5">5%</option>
            <option value="0">0%</option>
        </select>
        <button type="submit" class="px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold">{{ trans('dashboard.add_item') }}</button>
        <input type="hidden" name="unit" value="PCE">
    </form>

    <div class="p-4 rounded-2xl bg-navy-900 border border-slate-800">
        <form method="GET" class="flex items-center gap-3 text-xs mb-4">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ trans('dashboard.search_items') }}" class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 w-64 focus:border-brand-500 focus:outline-none">
            <button class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold">{{ trans('dashboard.filter_btn') }}</button>
        </form>

        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead class="text-slate-400 border-b border-slate-800">
                    <tr>
                        <th class="pb-3 text-start">{{ trans('dashboard.line_name') }}</th>
                        <th class="pb-3 text-start">SKU</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.line_price') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.line_vat') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60">
                    @forelse($items as $item)
                        <tr>
                            <td colspan="5" class="py-3">
                                <form method="POST" action="{{ route('dashboard.items.update', $item->uuid) }}" class="grid grid-cols-1 md:grid-cols-6 gap-2 items-center">
                                    @csrf
                                    @method('PUT')
                                    <input type="text" name="name" value="{{ $item->name }}" class="rounded-lg bg-navy-950 border border-slate-700 text-slate-100 px-2 py-1.5">
                                    <input type="text" name="sku" value="{{ $item->sku }}" class="rounded-lg bg-navy-950 border border-slate-700 text-slate-100 px-2 py-1.5">
                                    <input type="number" step="0.01" name="unit_price" value="{{ $item->unit_price }}" class="rounded-lg bg-navy-950 border border-slate-700 text-slate-100 px-2 py-1.5">
                                    <select name="vat_rate" class="rounded-lg bg-navy-950 border border-slate-700 text-slate-100 px-2 py-1.5">
                                        <option value="15" @selected((int) $item->vat_rate === 15)>15%</option>
                                        <option value="5" @selected((int) $item->vat_rate === 5)>5%</option>
                                        <option value="0" @selected((int) $item->vat_rate === 0)>0%</option>
                                    </select>
                                    <input type="hidden" name="unit" value="{{ $item->unit }}">
                                    <button class="px-3 py-1.5 rounded-lg bg-slate-800 text-white font-bold">{{ trans('dashboard.save') }}</button>
                                </form>
                                <form method="POST" action="{{ route('dashboard.items.destroy', $item->uuid) }}" class="mt-2" onsubmit="return confirm('{{ trans('dashboard.confirm_delete') }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="text-rose-400 font-semibold">{{ trans('dashboard.delete') }}</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-12 text-slate-500">{{ trans('dashboard.no_items') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($items->hasPages())
            <div class="pt-4">{{ $items->links() }}</div>
        @endif
    </div>
</div>
@endsection