@extends('layouts.app')

@section('content')
    <div class="container">
        <h2>Historial de Pedidos - {{ $nombreSucursal }}</h2>

        @if($isAdmin)
        <div class="row" style="display: flex; align-items: center;">
            <div class="col-md-6">
                <select name="sucursal" onchange="cambiarSucursalHistorial()" class="form-control">
                    @foreach($sucursales as $sucursal)
                    <option value="{{ $sucursal->SucursalID }}" {{ $sucursal->SucursalID == session('sucursal_admin') ? 'selected' : '' }}>
                        {{ $sucursal->NombreSucursal }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6" style="display: flex; align-items: center;">
                <form style="display: flex; align-items: center;" action="{{ route('historial.index') }}" method="GET">
                    <div style="display: flex; align-items: center; margin-right: 10px;">
                        <label for="fecha_inicio" style="margin-right: 5px;">Inicio</label>
                        <input type="date" id="fecha_inicio" name="fecha_inicio" class="form-control" value="{{ isset($fechaInicio) ? $fechaInicio : '' }}" style="margin-right: 10px;">
                    </div>
                    <div style="display: flex; align-items: center; margin-right: 10px;">
                        <label for="fecha_fin" style="margin-right: 5px;">Fin</label>
                        <input type="date" id="fecha_fin" name="fecha_fin" class="form-control" value="{{ isset($fechaFin) ? $fechaFin : '' }}" style="margin-right: 10px;">
                    </div>
                    <button type="submit" class="btn btn-primary">Buscar</button>
                </form>
            </div>
        </div>
        @else
        <div class="row" style="display: flex; align-items: center;">
            <div class="col-md-6 offset-md-6" style="display: flex; align-items: center;">
                <form style="display: flex; align-items: center;" action="{{ route('historial.index') }}" method="GET">
                    <div style="display: flex; align-items: center; margin-right: 10px;">
                        <label for="fecha_inicio" style="margin-right: 5px;">Inicio</label>
                        <input type="date" id="fecha_inicio" name="fecha_inicio" class="form-control" value="{{ isset($fechaInicio) ? $fechaInicio : '' }}" style="margin-right: 10px;">
                    </div>
                    <div style="display: flex; align-items: center; margin-right: 10px;">
                        <label for="fecha_fin" style="margin-right: 5px;">Fin</label>
                        <input type="date" id="fecha_fin" name="fecha_fin" class="form-control" value="{{ isset($fechaFin) ? $fechaFin : '' }}" style="margin-right: 10px;">
                    </div>
                    <button type="submit" class="btn btn-primary">Buscar</button>
                </form>
            </div>
        </div>
        @endif

        <div id="loading-indicator" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div>Cargando...</div>
        </div>

        <div id="historial-pedidos-grid" data-is-admin="{{ $isAdmin }}"></div>

        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
    </div>
@endsection