@extends('dashboard.body.main')

@section('container')
<style>
/* ── Ticket Preview ─────────────────────────────────────────── */
#ticket-preview {
    font-family: 'Courier New', Courier, monospace;
    background: #fff;
    color: #111;
    width: 100%;
    max-width: 310px;
    padding: 20px 14px 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    position: relative;
    line-height: 1.55;
    font-size: 13px;
    border-radius: 8px;
    margin: 0 auto;
}
#ticket-preview .tk-name  { font-size: 18px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
#ticket-preview .tk-sub   { font-size: 12px; }
#ticket-preview .tk-meta  { font-size: 11px; color: #555; }
#ticket-preview .tk-hr    { border: none; border-top: 1px dashed #666; margin: 8px 0; }
#ticket-preview .tk-hr-s  { border: none; border-top: 1px solid #111; margin: 5px 0; }
#ticket-preview .tk-hr-d  { border: none; border-top: 2.5px solid #111; margin: 4px 0; }
#ticket-preview .tk-label { font-size: 11px; font-weight: bold; display: flex; justify-content: space-between; padding-bottom: 3px; border-bottom: 1px solid #111; }
#ticket-preview .tk-item  { display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px; }
#ticket-preview .tk-prod  { flex: 1; }
#ticket-preview .tk-qty   { width: 32px; text-align: center; }
#ticket-preview .tk-tot   { width: 56px; text-align: right; }
#ticket-preview .tk-row   { display: flex; justify-content: space-between; font-size: 12px; }
#ticket-preview .tk-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 900; padding: 3px 0; }
#ticket-preview .tk-foot  { text-align: center; font-size: 12px; color: #444; font-style: italic; }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 mb-4">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h4 class="mb-1 font-weight-bold text-dark"><i class="fa-solid fa-gear text-primary mr-2"></i> Ajustes del Sistema y Ticket</h4>
                    <p class="mb-0 text-muted font-size-13">Administre la configuración de su negocio y diseñe su comprobante de venta.</p>
                </div>
            </div>
            @if (session()->has('success'))
                <div class="alert alert-success border-0 shadow-sm mt-3 mb-0 d-flex align-items-center">
                    <i class="fa-solid fa-circle-check mr-2"></i> <strong>{{ session('success') }}</strong>
                </div>
            @endif
        </div>

        {{-- ══ COLUMNA IZQUIERDA: CONFIGURACIÓN DE IMPRESIÓN Y DATOS DEL NEGOCIO ══ --}}
        <div class="col-xl-7 col-lg-6 mb-4">
            {{-- Tarjeta de Estado de Impresión --}}
            <div class="card shadow-sm border-0 rounded-lg mb-4">
                <div class="card-header bg-white border-bottom py-3 d-flex align-items-center justify-content-between">
                    <h5 class="mb-0 font-weight-bold text-primary">
                        <i class="fa-solid fa-print mr-2"></i> Impresión de Tickets
                    </h5>
                    <span class="badge badge-success px-3 py-1 font-size-12" style="border-radius: 20px;">
                        <i class="fa-solid fa-bolt mr-1"></i> Sistema Plug & Play Activo
                    </span>
                </div>
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3 p-3 rounded" style="background-color: #F0FDF4; border: 1px solid #BBF7D0;">
                        <div class="mr-3 text-success" style="font-size: 28px;">
                            <i class="fa-solid fa-circle-check"></i>
                        </div>
                        <div>
                            <h6 class="font-weight-bold text-success mb-1">Impresión Automática en Segundo Plano</h6>
                            <p class="mb-0 text-muted font-size-12">
                                Al cobrar en el Punto de Venta, el ticket se emite de forma instantánea a su ticketera física sin salir de la pantalla de ventas.
                            </p>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end">
                        <button id="btn-test-print" class="btn btn-outline-primary font-weight-bold">
                            <i class="fa-solid fa-receipt mr-2"></i> Imprimir Ticket de Prueba
                        </button>
                    </div>
                </div>
            </div>

            {{-- Formulario Datos del Negocio --}}
            <div class="card shadow-sm border-0 rounded-lg">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 font-weight-bold text-primary">
                        <i class="fa-solid fa-store mr-2"></i> Datos del Comercio en el Ticket
                    </h5>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('settings.ticket.save') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label class="font-weight-bold font-size-13">Nombre del Comercio</label>
                                <input type="text" name="store_name" id="inp-name" class="form-control" 
                                       value="{{ $settings['store_name'] ?? 'MINIMARKET LOS HÉROES' }}" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="font-weight-bold font-size-13">R.U.T. Comercio</label>
                                <input type="text" name="store_rut" id="inp-rut" class="form-control" 
                                       value="{{ $settings['store_rut'] ?? '76.123.456-K' }}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label class="font-weight-bold font-size-13">Dirección del Local</label>
                                <input type="text" name="store_address" id="inp-address" class="form-control" 
                                       value="{{ $settings['store_address'] ?? 'Av. Principal 123, Santiago' }}">
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="font-weight-bold font-size-13">Teléfono de Contacto</label>
                                <input type="text" name="store_phone" id="inp-phone" class="form-control" 
                                       value="{{ $settings['store_phone'] ?? '+56 9 1234 5678' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold font-size-13">Mensaje de Encabezado</label>
                            <input type="text" name="ticket_header" id="inp-header" class="form-control" 
                                   value="{{ $settings['ticket_header'] ?? '¡BIENVENIDO A AURORA POS!' }}">
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold font-size-13">Mensaje Pie de Página</label>
                            <input type="text" name="ticket_footer" id="inp-footer" class="form-control" 
                                   value="{{ $settings['ticket_footer'] ?? '¡Gracias por su compra! Vuelva pronto' }}">
                        </div>

                        <div class="text-right mt-4">
                            <button type="submit" class="btn btn-primary px-4 font-weight-bold" style="border-radius: 8px;">
                                <i class="fa-solid fa-floppy-disk mr-2"></i> Guardar Ajustes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- ══ COLUMNA DERECHA: PREVISUALIZACIÓN DEL TICKET ══ --}}
        <div class="col-xl-5 col-lg-6 mb-4 text-center">
            <div class="card shadow-sm border-0 rounded-lg">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 font-weight-bold text-primary">
                        <i class="fa-solid fa-eye mr-2"></i> Vista Previa del Ticket (80mm)
                    </h5>
                </div>
                <div class="card-body p-4 d-flex justify-content-center bg-light">
                    <div id="ticket-preview">
                        <div class="tk-name text-center" id="pv-name">{{ $settings['store_name'] ?? 'MINIMARKET LOS HÉROES' }}</div>
                        <div class="tk-sub text-center text-muted mb-1" id="pv-header">{{ $settings['ticket_header'] ?? '¡BIENVENIDO A AURORA POS!' }}</div>
                        <div class="tk-meta text-center" id="pv-address">{{ $settings['store_address'] ?? 'Av. Principal 123, Santiago' }}</div>
                        <div class="tk-meta text-center" id="pv-rut">R.U.T: {{ $settings['store_rut'] ?? '76.123.456-K' }}</div>
                        <div class="tk-meta text-center" id="pv-phone">Tel: {{ $settings['store_phone'] ?? '+56 9 1234 5678' }}</div>
                        
                        <div class="tk-hr-d"></div>
                        <div class="tk-meta d-flex justify-content-between">
                            <span><strong>Nº Ticket:</strong> #000184</span>
                            <span><strong>Fecha:</strong> {{ date('d/m/Y') }}</span>
                        </div>
                        <div class="tk-meta d-flex justify-content-between">
                            <span><strong>Cajero:</strong> {{ Auth::user()->name ?? 'Caja 1' }}</span>
                            <span><strong>Cliente:</strong> General</span>
                        </div>
                        <div class="tk-hr"></div>

                        <div class="tk-label">
                            <span class="tk-prod">ARTÍCULO</span>
                            <span class="tk-qty">CANT</span>
                            <span class="tk-tot">TOTAL</span>
                        </div>
                        <div class="tk-item">
                            <span class="tk-prod">BEBIDA COCA COLA 1.5L</span>
                            <span class="tk-qty">2</span>
                            <span class="tk-tot">$3.780</span>
                        </div>
                        <div class="tk-item">
                            <span class="tk-prod">PAN DE MOLDE INTEGRAL</span>
                            <span class="tk-qty">1</span>
                            <span class="tk-tot">$1.890</span>
                        </div>

                        <div class="tk-hr-s"></div>
                        <div class="tk-row"><span>Subtotal:</span><span>$5.670</span></div>
                        <div class="tk-row"><span>IVA (19%):</span><span>$905</span></div>
                        <div class="tk-hr-s"></div>
                        <div class="tk-total"><span>TOTAL:</span><span>$5.670</span></div>
                        <div class="tk-row mt-1"><span>Efectivo:</span><span>$10.000</span></div>
                        <div class="tk-row font-weight-bold"><span>Vuelto:</span><span>$4.330</span></div>
                        <div class="tk-hr-d"></div>

                        <div class="tk-foot mt-2" id="pv-footer">{{ $settings['ticket_footer'] ?? '¡Gracias por su compra! Vuelva pronto' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<iframe id="test-print-iframe" style="display:none; width:0; height:0; border:0;"></iframe>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Actualización en tiempo real de la vista previa
    const bind = (idInp, idPv, prefix = '') => {
        const el = document.getElementById(idInp);
        const pv = document.getElementById(idPv);
        if (el && pv) {
            el.addEventListener('input', () => {
                pv.textContent = prefix + (el.value || '---');
            });
        }
    };

    bind('inp-name',    'pv-name');
    bind('inp-header',  'pv-header');
    bind('inp-address', 'pv-address');
    bind('inp-rut',     'pv-rut', 'R.U.T: ');
    bind('inp-phone',   'pv-phone', 'Tel: ');
    bind('inp-footer',  'pv-footer');

    // Botón de Ticket de Prueba
    const btnTest = document.getElementById('btn-test-print');
    if (btnTest) {
        btnTest.addEventListener('click', function() {
            let iframe = document.getElementById('test-print-iframe');
            if (!iframe) {
                iframe = document.createElement('iframe');
                iframe.id = 'test-print-iframe';
                iframe.style.display = 'none';
                document.body.appendChild(iframe);
            }
            iframe.src = "{{ route('settings.ticket.demo') }}";
        });
    }
});
</script>
@endsection