@extends('layouts.app')

@php $editing = $promotion->exists; @endphp
@section('title', $editing ? 'Editar promoción' : 'Nueva promoción')
@section('hi', $editing ? 'Editar promoción' : 'Nueva promoción')
@section('hi_sub', 'Promociones')

@section('content')
    <div class="page-head">
        <div>
            <h1 class="page-title">{{ $editing ? 'Editar promoción' : 'Nueva promoción' }}</h1>
            <p class="page-sub">Descuento que se aplicará automáticamente en el POS.</p>
        </div>
        <a href="{{ route('promotions.index') }}" class="btn-ghost">@include('partials.icon', ['name' => 'arrow-left', 'class' => 'ic-sm']) Volver</a>
    </div>

    <div class="card panel form-wrap">
        <form method="POST" action="{{ $editing ? route('promotions.update', $promotion) : route('promotions.store') }}">
            @csrf
            @if($editing) @method('PUT') @endif

            <div class="form-grid">
                <div class="col-2">
                    <label class="lbl">Nombre *</label>
                    <input class="inp" name="name" value="{{ old('name', $promotion->name) }}" placeholder="Ej: Liquidación temporada" required>
                    @error('name') <div class="err">{{ $message }}</div> @enderror
                </div>

                <div>
                    <label class="lbl">Tipo de descuento *</label>
                    <select class="sel" name="type" id="typeSel">
                        <option value="percent" @selected(old('type', $promotion->type) === 'percent')>Porcentaje (%)</option>
                        <option value="fixed" @selected(old('type', $promotion->type) === 'fixed')>Monto fijo</option>
                    </select>
                </div>
                <div>
                    <label class="lbl">Valor *</label>
                    <input class="inp" type="number" step="0.01" min="0" name="value" value="{{ old('value', $promotion->value) }}" required>
                    <div class="hint" id="valueHint">Si es porcentaje, entre 0 y 100.</div>
                    @error('value') <div class="err">{{ $message }}</div> @enderror
                </div>

                <div class="col-2">
                    <label class="lbl">Aplica a *</label>
                    <select class="sel" name="scope" id="scopeSel">
                        <option value="all" @selected(old('scope', $promotion->scope) === 'all')>Todo el catálogo</option>
                        <option value="category" @selected(old('scope', $promotion->scope) === 'category')>Una categoría</option>
                        <option value="product" @selected(old('scope', $promotion->scope) === 'product')>Un producto</option>
                    </select>
                </div>

                <div class="col-2" id="catWrap" style="display:none">
                    <label class="lbl">Categoría *</label>
                    <select class="sel" name="category_id">
                        <option value="">— Selecciona —</option>
                        @foreach($categories as $c)
                            <option value="{{ $c->id }}" @selected(old('category_id', $promotion->category_id) == $c->id)>{{ $c->name }}</option>
                        @endforeach
                    </select>
                    @error('category_id') <div class="err">{{ $message }}</div> @enderror
                </div>

                <div class="col-2" id="prodWrap" style="display:none">
                    <label class="lbl">Producto *</label>
                    <select class="sel" name="product_id">
                        <option value="">— Selecciona —</option>
                        @foreach($products as $pr)
                            <option value="{{ $pr->id }}" @selected(old('product_id', $promotion->product_id) == $pr->id)>{{ $pr->name }}</option>
                        @endforeach
                    </select>
                    @error('product_id') <div class="err">{{ $message }}</div> @enderror
                </div>

                <div>
                    <label class="lbl">Desde</label>
                    <input class="inp" type="date" name="starts_at" value="{{ old('starts_at', optional($promotion->starts_at)->format('Y-m-d')) }}">
                    <div class="hint">Vacío = sin fecha de inicio.</div>
                </div>
                <div>
                    <label class="lbl">Hasta</label>
                    <input class="inp" type="date" name="ends_at" value="{{ old('ends_at', optional($promotion->ends_at)->format('Y-m-d')) }}">
                    @error('ends_at') <div class="err">{{ $message }}</div> @enderror
                </div>

                <div class="col-2">
                    <label class="switch"><input type="checkbox" name="active" value="1" @checked(old('active', $promotion->active))> Promoción activa</label>
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('promotions.index') }}" class="btn-ghost">Cancelar</a>
                <button class="btn-primary" type="submit">@include('partials.icon', ['name' => 'check', 'class' => 'ic-sm']) {{ $editing ? 'Guardar cambios' : 'Crear promoción' }}</button>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        const scopeSel = document.getElementById('scopeSel');
        function syncScope(){
            document.getElementById('catWrap').style.display = scopeSel.value === 'category' ? 'block' : 'none';
            document.getElementById('prodWrap').style.display = scopeSel.value === 'product' ? 'block' : 'none';
        }
        scopeSel.addEventListener('change', syncScope);
        syncScope();
    </script>
    @endpush
@endsection