@extends('layouts.dashboard.inface', ['section' => 'purchases'])

@section('extra-styles')
    <style type="text/tailwindcss">
        .form-input-custom {
            @apply block w-full px-4 py-3 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 rounded-xl text-sm focus:ring-primary/50 focus:border-primary transition-all text-slate-900 dark:text-white;
        }

        .form-label-custom {
            @apply block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2;
        }
    </style>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6 lg:p-10">
        <div class="max-w-2xl mx-auto">
            <div class="mb-10 text-center">
                <nav class="flex items-center justify-center gap-2 text-sm text-slate-500 mb-4">
                    <a class="hover:text-primary transition-colors" href="#">Gastos</a>
                    <span class="text-slate-300">/</span>
                    <span class="text-primary font-medium">Registrar Gasto</span>
                </nav>
                <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Registrar Nuevo
                    Gasto</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-2">Completa la información del comprobante para
                    el seguimiento financiero.</p>
            </div>
            <div
                class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xl overflow-hidden">
                <form class="p-8 space-y-6">
                    <div>
                        <label class="form-label-custom" for="categoria">Categoría</label>
                        <div class="relative">
                            <select class="form-input-custom appearance-none pr-10" id="categoria">
                                <option disabled="" selected="" value="">Selecciona una categoría
                                </option>
                                <option value="marketing">Marketing</option>
                                <option value="nomina">Nómina</option>
                                <option value="mantenimiento">Mantenimiento</option>
                                <option value="servicios">Servicios (Agua, Luz, Internet)</option>
                                <option value="tecnologia">Tecnología / Software</option>
                                <option value="otros">Otros</option>
                            </select>

                        </div>
                    </div>
                    <div>
                        <label class="form-label-custom" for="proveedor">Proveedor</label>
                        <input class="form-input-custom" id="proveedor" placeholder="Ej. Meta Ads, CFE, Papelería S.A."
                            type="text" />
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="form-label-custom" for="monto">Monto (MXN)</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-slate-400 font-medium">

                                </div>
                                <input class="form-input-custom pl-8" id="monto" placeholder="0.00" step="0.01"
                                    type="number" />
                            </div>
                        </div>
                        <div>
                            <label class="form-label-custom" for="fecha">Fecha</label>
                            <div class="relative">
                                <input class="form-input-custom" id="fecha" type="date" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="form-label-custom" for="sucursal">Sucursal</label>
                        <div class="relative">
                            <select class="form-input-custom appearance-none pr-10" id="sucursal">
                                <option disabled="" selected="" value="">Selecciona la sucursal
                                </option>
                                <option value="cdmx_centro">CDMX Centro</option>
                                <option value="polanco">Polanco</option>
                                <option value="guadalajara">Guadalajara</option>
                                <option value="monterrey">Monterrey</option>
                                <option value="general">General / Corporativo</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="form-label-custom">Estatus</label>
                        <div class="grid grid-cols-2 gap-4">
                            <label
                                class="relative flex cursor-pointer rounded-xl border border-slate-200 dark:border-slate-700 p-4 focus:outline-none hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                <input class="sr-only peer" name="estatus" type="radio" value="pagado" />
                                <div class="flex flex-1 items-center gap-3">
                                    <div
                                        class="flex-shrink-0 w-5 h-5 rounded-full border-2 border-slate-300 peer-checked:border-primary peer-checked:bg-primary flex items-center justify-center transition-all">
                                        <div class="w-2 h-2 rounded-full bg-white opacity-0 peer-checked:opacity-100">
                                        </div>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-white">Pagado</span>
                                    </div>
                                </div>
                                <div
                                    class="absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-primary pointer-events-none">
                                </div>
                            </label>
                            <label
                                class="relative flex cursor-pointer rounded-xl border border-slate-200 dark:border-slate-700 p-4 focus:outline-none hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
                                <input class="sr-only peer" name="estatus" type="radio" value="pendiente" />
                                <div class="flex flex-1 items-center gap-3">
                                    <div
                                        class="flex-shrink-0 w-5 h-5 rounded-full border-2 border-slate-300 peer-checked:border-primary peer-checked:bg-primary flex items-center justify-center transition-all">
                                        <div class="w-2 h-2 rounded-full bg-white opacity-0 peer-checked:opacity-100">
                                        </div>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-white">Pendiente</span>
                                    </div>
                                </div>
                                <div
                                    class="absolute inset-0 rounded-xl border-2 border-transparent peer-checked:border-primary pointer-events-none">
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="pt-6 border-t border-slate-100 dark:border-slate-800 flex flex-col gap-3">
                        <button
                            class="w-full flex items-center justify-center gap-2 bg-primary hover:bg-blue-700 text-white px-6 py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all active:scale-[0.98] font-bold text-lg"
                            type="submit">
                            <span class="material-symbols-outlined">save</span>
                            Registrar Gasto
                        </button>
                        <button
                            class="w-full px-6 py-3 rounded-xl text-sm font-semibold text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                            type="button">
                            Cancelar y volver
                        </button>
                    </div>
                </form>
            </div>
            <div
                class="mt-8 bg-blue-50/50 dark:bg-primary/5 rounded-xl p-4 border border-blue-100/50 dark:border-primary/10 flex items-start gap-3">
                <span class="material-symbols-outlined text-primary text-xl">info</span>
                <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                    Asegúrate de que el monto coincida exactamente con la factura o recibo. Podrás adjuntar
                    archivos PDF o imágenes una vez guardado el registro básico.
                </p>
            </div>
        </div>
    </div>
@endsection