@extends('layouts.admin')

@section('content')
    <div class="row mb-3 align-items-center">
        <div class="col-md-6">
            <h1 class="m-0 font-weight-bold text-dark" style="font-size: 1.8rem;">
                <i class="bi bi-geo-alt-fill text-primary mr-2"></i> Puntos de Emisión / Cajas
            </h1>
            <p class="text-muted mb-0">Configuración de establecimientos, puntos de venta y control de secuenciales</p>
        </div>
        <div class="col-md-6 text-md-right mt-3 mt-md-0">
            <button type="button" class="btn btn-primary shadow-sm mr-2 font-weight-bold" data-toggle="modal" data-target="#crearPuntoModal">
                <i class="fas fa-plus-circle mr-1"></i> Nuevo Punto de Emisión
            </button>
            <a href="{{ route('admin.facturas.index') }}" class="btn btn-outline-secondary shadow-sm mr-2">
                <i class="bi bi-receipt mr-1"></i> Facturas
            </a>
            <a href="{{ route('admin.facturacion.configuracion') }}" class="btn btn-outline-info shadow-sm">
                <i class="bi bi-gear-fill mr-1"></i> Configuración
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <h6 class="font-weight-bold"><i class="fas fa-exclamation-circle mr-2"></i> Por favor verifique los siguientes errores:</h6>
            <ul class="mb-0 pl-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <!-- Tarjeta informativa -->
    <div class="alert alert-info border-0 shadow-sm d-flex align-items-center py-2 px-3 mb-4">
        <i class="fas fa-info-circle fa-2x mr-3 text-info"></i>
        <div class="small">
            <b>Información SRI:</b> La serie de un comprobante electrónico se conforma de 6 dígitos: <b>Código de Establecimiento</b> (3 dígitos, ej: 001) + <b>Código del Punto de Emisión</b> (3 dígitos, ej: 001), seguido del <b>Secuencial</b> de 9 dígitos (ej: 000000001).
        </div>
    </div>

    <!-- Listado de Puntos de Emisión -->
    <div class="card card-outline card-primary shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title font-weight-bold">
                <i class="fas fa-cash-register mr-1"></i> Puntos de Emisión Registrados
            </h3>
            <span class="badge badge-light border text-muted">
                Total: {{ count($puntos) }} puntos
            </span>
        </div>

        <div class="card-body table-responsive p-0">
            <table class="table table-hover table-striped align-middle mb-0 text-nowrap">
                <thead class="thead-light">
                    <tr>
                        <th class="text-center" style="width: 130px;">Serie SRI</th>
                        <th>Nombre del Punto / Caja</th>
                        <th class="text-center" style="width: 140px;">Secuencial Siguiente</th>
                        <th class="text-center" style="width: 120px;">Facturas Emitidas</th>
                        <th class="text-center" style="width: 110px;">Principal</th>
                        <th class="text-center" style="width: 110px;">Estado</th>
                        <th>Descripción</th>
                        <th class="text-center" style="width: 140px;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($puntos as $punto)
                        <tr>
                            <td class="text-center">
                                <span class="badge badge-primary px-3 py-2 font-weight-bold" style="font-size: 0.95rem; letter-spacing: 1px;">
                                    {{ $punto->serie_completa }}
                                </span>
                            </td>
                            <td>
                                <span class="font-weight-bold text-dark">{{ $punto->nombre }}</span>
                                <br><small class="text-muted">Establecimiento: {{ $punto->codigo_establecimiento }} | Punto: {{ $punto->codigo_punto_emision }}</small>
                            </td>
                            <td class="text-center">
                                <span class="badge badge-light border px-2 py-1 font-family-monospace font-weight-bold text-primary" style="font-size: 0.95rem;">
                                    {{ $punto->getProximoSecuencialFormateado() }}
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="badge badge-secondary px-2 py-1">
                                    {{ $punto->facturas_count }} facturas
                                </span>
                            </td>
                            <td class="text-center">
                                @if($punto->es_principal)
                                    <span class="badge badge-success px-2 py-1 font-weight-bold">
                                        <i class="fas fa-star mr-1"></i> Principal
                                    </span>
                                @else
                                    <span class="text-muted small">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <form action="{{ route('admin.puntos_emision.toggle', $punto->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-xs {{ $punto->activo ? 'btn-success' : 'btn-secondary' }}" title="Click para cambiar estado">
                                        <i class="fas {{ $punto->activo ? 'fa-check' : 'fa-times' }} mr-1"></i>
                                        {{ $punto->activo ? 'Activo' : 'Inactivo' }}
                                    </button>
                                </form>
                            </td>
                            <td class="small text-muted text-wrap" style="max-width: 250px;">
                                {{ $punto->descripcion ?: 'Sin descripción' }}
                            </td>
                            <td class="text-center">
                                <div class="btn-group shadow-sm" role="group">
                                    <!-- Editar -->
                                    <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#editarPuntoModal{{ $punto->id }}" title="Editar Punto de Emisión">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <!-- Eliminar -->
                                    @if($punto->facturas_count == 0)
                                        <form action="{{ route('admin.puntos_emision.destroy', $punto->id) }}" method="POST" class="d-inline" onsubmit="return confirm('¿Está seguro de eliminar este punto de emisión?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger" title="Eliminar">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    @else
                                        <button type="button" class="btn btn-sm btn-secondary disabled" title="No se puede eliminar porque ya tiene facturas emitidas">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    @endif
                                </div>

                                <!-- Modal Editar Punto de Emisión -->
                                <div class="modal fade" id="editarPuntoModal{{ $punto->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content text-left">
                                            <form action="{{ route('admin.puntos_emision.update', $punto->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="modal-header bg-primary text-white">
                                                    <h5 class="modal-title font-weight-bold">
                                                        <i class="fas fa-edit mr-2"></i> Editar Punto de Emisión {{ $punto->serie_completa }}
                                                    </h5>
                                                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Cerrar">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>

                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="font-weight-bold small text-muted">Cód. Establecimiento (3 dígitos): <span class="text-danger">*</span></label>
                                                                <input type="text" name="codigo_establecimiento" class="form-control" maxlength="3" pattern="[0-9]{3}" value="{{ old('codigo_establecimiento', $punto->codigo_establecimiento) }}" required>
                                                                <small class="text-muted">Ej: 001</small>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label class="font-weight-bold small text-muted">Cód. Punto Emisión (3 dígitos): <span class="text-danger">*</span></label>
                                                                <input type="text" name="codigo_punto_emision" class="form-control" maxlength="3" pattern="[0-9]{3}" value="{{ old('codigo_punto_emision', $punto->codigo_punto_emision) }}" required>
                                                                <small class="text-muted">Ej: 001, 002</small>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="font-weight-bold small text-muted">Nombre Descriptivo de la Caja: <span class="text-danger">*</span></label>
                                                        <input type="text" name="nombre" class="form-control" value="{{ old('nombre', $punto->nombre) }}" required placeholder="Ej: Caja Consulta Externa">
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="font-weight-bold small text-muted">Próximo Secuencial a Emitir: <span class="text-danger">*</span></label>
                                                        <input type="number" name="secuencial_actual" class="form-control font-weight-bold text-primary" min="1" value="{{ old('secuencial_actual', $punto->secuencial_actual) }}" required>
                                                        <small class="text-muted">El número se formateará automáticamente a 9 dígitos (ej: 000000001).</small>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="font-weight-bold small text-muted">Descripción u Observación:</label>
                                                        <textarea name="descripcion" class="form-control" rows="2" placeholder="Ubicación o detalle del punto...">{{ old('descripcion', $punto->descripcion) }}</textarea>
                                                    </div>

                                                    <div class="row mt-3">
                                                        <div class="col-6">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="editActivo{{ $punto->id }}" name="activo" value="1" {{ $punto->activo ? 'checked' : '' }}>
                                                                <label class="custom-control-label font-weight-bold" for="editActivo{{ $punto->id }}">Punto Activo</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="editPrincipal{{ $punto->id }}" name="es_principal" value="1" {{ $punto->es_principal ? 'checked' : '' }}>
                                                                <label class="custom-control-label font-weight-bold text-success" for="editPrincipal{{ $punto->id }}">Punto Principal</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                                                    <button type="submit" class="btn btn-primary font-weight-bold">
                                                        <i class="fas fa-save mr-1"></i> Guardar Cambios
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="bi bi-geo-alt" style="font-size: 3rem; color: #cbd5e1;"></i>
                                <h5 class="mt-2 font-weight-bold">No hay puntos de emisión configurados</h5>
                                <button type="button" class="btn btn-primary font-weight-bold mt-2" data-toggle="modal" data-target="#crearPuntoModal">
                                    <i class="fas fa-plus mr-1"></i> Crear Primer Punto de Emisión
                                </button>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal Crear Nuevo Punto de Emisión -->
    <div class="modal fade" id="crearPuntoModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.puntos_emision.store') }}" method="POST">
                    @csrf
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title font-weight-bold">
                            <i class="fas fa-plus-circle mr-2"></i> Nuevo Punto de Emisión / Caja
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold small text-muted">Cód. Establecimiento (3 dígitos): <span class="text-danger">*</span></label>
                                    <input type="text" name="codigo_establecimiento" class="form-control" maxlength="3" pattern="[0-9]{3}" value="{{ old('codigo_establecimiento', '001') }}" required placeholder="001">
                                    <small class="text-muted">Ej: 001 (Casa Matriz)</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold small text-muted">Cód. Punto Emisión (3 dígitos): <span class="text-danger">*</span></label>
                                    <input type="text" name="codigo_punto_emision" class="form-control" maxlength="3" pattern="[0-9]{3}" value="{{ old('codigo_punto_emision', '001') }}" required placeholder="001">
                                    <small class="text-muted">Ej: 001, 002, 003</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold small text-muted">Nombre Descriptivo de la Caja: <span class="text-danger">*</span></label>
                            <input type="text" name="nombre" class="form-control" value="{{ old('nombre') }}" required placeholder="Ej: Caja Principal / Consultorio 1">
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold small text-muted">Secuencial Inicial / Actual: <span class="text-danger">*</span></label>
                            <input type="number" name="secuencial_actual" class="form-control font-weight-bold text-primary" min="1" value="{{ old('secuencial_actual', 1) }}" required>
                            <small class="text-muted">Número del cual arrancará la facturación (ej: 1 generará 000000001).</small>
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold small text-muted">Descripción u Observación:</label>
                            <textarea name="descripcion" class="form-control" rows="2" placeholder="Ubicación o uso específico de esta caja...">{{ old('descripcion') }}</textarea>
                        </div>

                        <div class="row mt-3">
                            <div class="col-6">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="nuevoActivo" name="activo" value="1" checked>
                                    <label class="custom-control-label font-weight-bold" for="nuevoActivo">Punto Activo</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="nuevoPrincipal" name="es_principal" value="1" {{ count($puntos) == 0 ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold text-success" for="nuevoPrincipal">Punto Principal</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary font-weight-bold">
                            <i class="fas fa-check mr-1"></i> Guardar Punto de Emisión
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection