@extends('layouts.auth')

@section('title', 'Fecha y Tipo de Cambio - Sistema Cosmos')

@section('content')
<div class="bg-image" style="background-image: url('{{ asset('assets/media/photos/photo14@2x.jpg') }}');">
    <div class="hero-static d-flex align-items-center bg-primary-dark-op">
        <div class="content">
            <div class="row justify-content-center push">
                <div class="col-md-8 col-lg-6 col-xl-4">
                    
                    <div class="block block-rounded shadow-none mb-0">
                        <div class="block-header block-header-default">
                            <h3 class="block-title text-center">Fecha y Tipo de Cambio</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" onclick="confirmarSalir()" data-bs-toggle="tooltip" title="Salir del Sistema">
                                    <i class="fa fa-sign-out-alt"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <div class="p-sm-3 px-lg-4 py-lg-4">
                                <div class="text-center mb-4">
                                    <i class="fa fa-2x fa-exchange-alt text-primary"></i>
                                    <p class="fw-semibold mt-2 mb-0 text-muted">Configuración Diaria</p>
                                </div>

                                <form action="{{ route('fecha-tc.store') }}" method="POST" id="formulario" onsubmit="return validaTc()">
                                    @csrf

                                    <div class="mb-4">
                                        <label class="form-label" for="fecha">Fecha de Operación</label>
                                        <input type="text"
                                               name="fecha"
                                               id="fecha"
                                               class="form-control form-control-lg form-control-alt text-center"
                                               value="{{ $hoy }}"
                                               onchange="buscarTc()"
                                               {{ session('tipo_usuario') != 1 ? 'readonly' : '' }} />
                                    </div>

                                    <div class="mb-4">
                                        <label class="form-label" for="tc">Tipo de Cambio</label>
                                        <div class="position-relative">
                                            <input type="text"
                                                   name="tc"
                                                   id="tc"
                                                   class="form-control form-control-lg form-control-alt text-center"
                                                   value="{{ $tc }}"
                                                   maxlength="5"
                                                   placeholder="0.00"
                                                   autofocus />
                                            <div class="text-center mt-1">
                                                <small id="capa" class="text-primary fw-medium"></small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row g-sm">
                                        <div class="col-8">
                                            <button type="button" class="btn w-100 btn-alt-success" onclick="validaTc()">
                                                <i class="fa fa-fw fa-check me-1"></i> Aceptar
                                            </button>
                                        </div>
                                        <div class="col-4">
                                            <button type="button" class="btn w-100 btn-alt-secondary" onclick="confirmarSalir()">
                                                Salir
                                            </button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                    </div>
            </div>
            <div class="fs-sm text-center text-white">
                <span class="fw-medium">Sistema Cosmos</span> &copy; {{ date('Y') }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    const tipousuario = {{ $tipousuario ?? 0 }};
    const fechaHoy   = "{{ $hoy }}";

    function buscarTc() {
        const fecha = document.getElementById('fecha').value;
        const capa = document.getElementById('capa');
        capa.textContent = 'Buscando...';

        fetch("{{ route('get-tc') }}?fecha=" + fecha)
            .then(r => r.text())
            .then(tc => {
                capa.textContent = '';
                const tcInput = document.getElementById('tc');
                tcInput.value = tc;

                if (tc === '' ) {
                    tcInput.disabled = false;
                } else if (tipousuario != 1) {
                    tcInput.disabled = true;
                }
            })
            .catch(() => {
                capa.textContent = 'Error al conectar';
            });
    }

    function validaTc() {
        const tc = document.getElementById('tc').value;
        const ec = /^-?(0|[1-9]{1}\d{0,})(\.\d+)?$/;

        if (tc === '' || !ec.test(tc) || parseFloat(tc) > 30) {
            // Usando OneUI/SweetAlert o alert simple como tenías
            alert('Ingrese un Tipo de Cambio válido');
            const tcInput = document.getElementById('tc');
            tcInput.value = '';
            tcInput.focus();
            return false;
        }

        document.getElementById('formulario').submit();
        return true;
    }

    function confirmarSalir() {
        if (confirm('¿Está seguro de salir del Sistema?')) {
            fetch("{{ route('logout') }}", {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => window.location.href = '/login');
        }
    }

    // Ejecución inicial
    window.addEventListener('load', () => {
        if (document.getElementById('tc').value === '') {
            buscarTc();
        }
    });
</script>
@endpush