@extends('layouts.app')

@section('content')
<div class="container">
    <h2 class="mb-4">Registrar Estadísticas del Día</h2>

    {{-- Errores --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.estadisticas.store') }}" method="POST">
        @csrf

        {{-- Fecha --}}
        <div class="mb-3">
            <label class="form-label">Fecha</label>
            <input type="date" name="fecha" class="form-control" value="{{ old('fecha', now()->toDateString()) }}" required>
        </div>

        {{-- Selector de comercio y sucursal --}}
        <x-comercio-sucursal-selector 
            :comercios="$comercios" 
            :selectedComercio="old('comercio_id')" 
            :selectedSucursal="old('sucursal_id')" 
        />

        {{-- Productos --}}
        <div id="productos-container">
            <p class="text-muted">Seleccione comercio y sucursal para cargar los productos.</p>
        </div>

        {{-- Botón --}}
        <div class="mt-3">
            <button type="submit" class="btn btn-success">
                <i class="bi bi-save"></i> Guardar Estadísticas
            </button>
            <a href="{{ route('admin.estadisticas.index') }}" class="btn btn-secondary">
                <i class="bi bi-x-circle"></i> Cancelar
            </a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const comercioSelect = document.querySelector('select[name="comercio_id"]');
        const sucursalSelect = document.getElementById('sucursal_id');
        const fechaInput = document.querySelector('input[name="fecha"]');
        const productosContainer = document.getElementById('productos-container');

        function cargarProductos() {
            const comercioId = comercioSelect.value;
            const sucursalId = sucursalSelect.value;
            const fecha = fechaInput.value;

            if (!comercioId || !sucursalId || !fecha) {
                productosContainer.innerHTML = '<p class="text-muted">Seleccione comercio, sucursal y fecha para cargar los productos.</p>';
                return;
            }

            productosContainer.innerHTML = '<p>Cargando productos...</p>';

            fetch(`/comercios/${comercioId}/sucursales/${sucursalId}/productos-estadisticas?fecha=${fecha}`)
                .then(res => res.json())
                .then(data => {
                    productosContainer.innerHTML = '';

                    if (data.length === 0) {
                        productosContainer.innerHTML = '<p>No hay productos disponibles para esta sucursal.</p>';
                        return;
                    }

                    data.forEach(item => {
                        const div = document.createElement('div');
                        div.className = 'mb-3';
                        div.innerHTML = `
                            <label class="form-label">${item.nombre} (Valor: $${item.valor})</label>
                            <input type="hidden" name="productos[${item.id}][producto_id]" value="${item.id}">
                            <input type="hidden" name="productos[${item.id}][producto_nombre]" value="${item.nombre}">
                            <input type="hidden" name="productos[${item.id}][producto_valor]" value="${item.valor}">
                            <input type="number" step="1" name="productos[${item.id}][producto_inicio_dia]" class="form-control" value="${item.inicio_dia ?? 0}" required>
                        `;
                        productosContainer.appendChild(div);
                    });
                })
                .catch(() => {
                    productosContainer.innerHTML = '<p>Error al cargar productos.</p>';
                });
        }

        comercioSelect.addEventListener('change', cargarProductos);
        sucursalSelect.addEventListener('change', cargarProductos);
        fechaInput.addEventListener('change', cargarProductos);
    });
</script>
@endpush