@extends('layouts.panel')

@section('content')

<!-- BREADCRUMB -->
<div class="panel-breadcrumb">
    <a href="{{ route('admin.clientes.index') }}">Clientes</a>
    <span class="separator">›</span>
    <span class="current">Nueva Orden Manual</span>
</div>

<!-- ERRORES DE VALIDACIÓN -->
@if ($errors->any())
    <div class="panel-alert-error">
        <strong>Hay errores en el formulario:</strong>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row">
    <!-- FORMULARIO -->
    <div class="col-lg-8">
        <form method="POST" action="{{ route('admin.ordenes.store') }}" data-loading-msg="Creando orden">
            @csrf

            <!-- Datos del Cliente -->
            <div class="panel-card">
                <div class="panel-card-header">
                    <h5>Datos del Cliente</h5>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="panel-form-group">
                            <label for="full_name">Nombre completo</label>
                            <input type="text" name="full_name" id="full_name"
                                   class="panel-form-control {{ $errors->has('full_name') ? 'has-error' : '' }}"
                                   value="{{ old('full_name') }}" required>
                            @error('full_name')
                                <span class="panel-error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-form-group">
                            <label for="email">Correo electrónico</label>
                            <input type="email" name="email" id="email"
                                   class="panel-form-control {{ $errors->has('email') ? 'has-error' : '' }}"
                                   value="{{ old('email') }}" required>
                            @error('email')
                                <span class="panel-error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-form-group">
                            <label for="phone">Teléfono</label>
                            <input type="text" name="phone" id="phone"
                                   class="panel-form-control"
                                   value="{{ old('phone') }}">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Selección de Asientos -->
            <div class="panel-card">
                <div class="panel-card-header">
                    <h5>Selección de Asientos</h5>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="panel-form-group">
                            <label for="seccionSelect">Sección</label>
                            <select name="seccion" id="seccionSelect" class="panel-form-control" required>
                                <option value="">Selecciona sección...</option>
                                <option value="Entrada General Bogotá">🎟️ Entrada General Bogotá (130 cupos)</option>
                            </select>
                            <div class="precio-badge" id="precioBadge" style="display: none;">
                                <span class="precio-actual" id="precioActual">—</span>
                                <span class="precio-antes" id="precioAntes"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" id="filaContainer">
                        <div class="panel-form-group">
                            <label for="filaSelect">Columna</label>
                            <select name="fila" id="filaSelect" class="panel-form-control" disabled>
                                <option value="">Selecciona columna...</option>
                            </select>
                        </div>
                    </div>

                    <!-- Campo de cantidad para entrada general -->
                    <div class="col-md-6" id="cantidadContainer" style="display: none;">
                        <div class="panel-form-group">
                            <label for="cantidadEntradaGeneral">Cantidad de entradas</label>
                            <input type="number" name="cantidad" id="cantidadEntradaGeneral" class="panel-form-control" min="1" max="10" value="1">
                        </div>
                    </div>
                </div>

                <!-- Sillas disponibles (solo para asientos numerados) -->
                <div class="panel-form-group" id="sillasContainer">
                    <label>Sillas disponibles</label>
                    <div class="admin-silla-grid" id="sillaGrid">
                        <p style="color: #6b6b7b; font-size: 0.85rem;">Selecciona una sección y columna</p>
                    </div>
                    @error('sillas')
                        <span class="panel-error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Nota -->
                <div class="panel-form-group">
                    <label for="nota">Método de pago</label>
                    <input type="text" name="nota" id="nota" class="panel-form-control"
                           value="Pago Manual" readonly>
                </div>
            </div>

            <!-- Botones -->
            <div class="d-flex justify-content-end gap-3">
                <a href="{{ route('admin.clientes.index') }}" class="btn-panel-secondary">Cancelar</a>
                <button type="submit" id="btnCrearOrden" class="btn-panel-primary" disabled>Crear Orden</button>
            </div>
        </form>
    </div>

    <!-- RESUMEN (columna derecha) -->
    <div class="col-lg-4">
        <div class="panel-card" style="position: sticky; top: 24px;">
            <div class="panel-card-header">
                <h5>Resumen</h5>
            </div>
            <div class="panel-resumen">
                <div class="panel-resumen-row">
                    <span>Sillas seleccionadas</span>
                    <span id="totalSillas">0</span>
                </div>
                <div class="panel-resumen-row">
                    <span>Precio unitario</span>
                    <span id="precioResumen">—</span>
                </div>
                <div class="panel-resumen-row total">
                    <span>Total</span>
                    <span id="totalMonto">$ 0</span>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection