@extends('layouts.app')

@section('content')
<style>
    .cal-card { border: none; border-radius: 1rem; box-shadow: 0 .25rem 1rem rgba(0,0,0,.05); }
    .cal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; }
    .cal-header h2 { font-size: 1.15rem; font-weight: 700; margin: 0; text-transform: capitalize; }
    .cal-nav-btn { border: none; background: #f1f3f9; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #4e73df; }
    .cal-nav-btn:hover { background: #e2e7f9; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; padding: 0 1.25rem 1.25rem; }
    .cal-weekday { text-align: center; font-size: .74rem; font-weight: 700; color: #97a0af; text-transform: uppercase; padding-bottom: .35rem; }
    .cal-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: .6rem; text-decoration: none; color: #3a3b45; font-weight: 600; font-size: .9rem; background: #f8f9fc; transition: background-color .12s ease, transform .12s ease; }
    .cal-day:hover { background: #e8edfc; color: #2f3040; transform: translateY(-1px); }
    .cal-day-empty { background: transparent; }
    .cal-today { background: #4e73df; color: #fff !important; box-shadow: 0 .25rem .5rem rgba(78,115,223,.4); }
    .cal-today:hover { background: #3d5fc7; color: #fff; }

    .quick-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.1rem .5rem; border-radius: 1rem; text-decoration: none; color: #3a3b45; background: #fff; border: none; box-shadow: 0 .25rem 1rem rgba(0,0,0,.05); font-weight: 700; font-size: .85rem; transition: transform .12s ease, box-shadow .12s ease; height: 100%; }
    .quick-link:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); color: #3a3b45; }
    .quick-link .bi { font-size: 1.6rem; }
    .quick-link.q-primary .bi { color: #4e73df; }
    .quick-link.q-success .bi { color: #1cc88a; }
    .quick-link.q-warning .bi { color: #f6c23e; }
    .quick-link.q-info .bi { color: #36b9cc; }
    .quick-link.q-danger .bi { color: #e74a3b; }
    .quick-link.q-secondary .bi { color: #858796; }
</style>

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

    <h1 class="h4 mb-4">Hola, {{ Auth::user()->name }} 👋</h1>

    <div class="row g-4">
        <div class="col-lg-7">
            <div class="card cal-card">
                <div class="cal-header">
                    <button type="button" class="cal-nav-btn" id="calPrev"><i class="bi bi-chevron-left"></i></button>
                    <div class="text-center">
                        <h2 id="calLabel">&nbsp;</h2>
                        <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none" id="calHoy">Ir a hoy</button>
                    </div>
                    <button type="button" class="cal-nav-btn" id="calNext"><i class="bi bi-chevron-right"></i></button>
                </div>
                <div class="cal-grid" id="calGrid"></div>
                <p class="text-muted small px-3 pb-3 mb-0">Hacé clic en un día para ver el corte de caja de esa fecha.</p>
            </div>
        </div>

        <div class="col-lg-5">
            <h2 class="h6 text-muted text-uppercase mb-3">Accesos rápidos</h2>
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-2 g-3">
                <div class="col">
                    <a href="{{ route('facturacion.index') }}" class="quick-link q-primary">
                        <i class="bi bi-cash-coin"></i> Facturar
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('inventario.index') }}" class="quick-link q-success">
                        <i class="bi bi-box-seam"></i> Inventario
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('clientes.index') }}" class="quick-link q-info">
                        <i class="bi bi-people"></i> Clientes
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('notascredito.index') }}" class="quick-link q-warning">
                        <i class="bi bi-receipt-cutoff"></i> Notas de crédito
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('cortecaja.index') }}" class="quick-link q-secondary">
                        <i class="bi bi-cash-stack"></i> Corte de caja
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('reportes.index') }}" class="quick-link q-danger">
                        <i class="bi bi-bar-chart-line"></i> Reportes
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        var hoyIso = @json($hoyIso);
        var partes = hoyIso.split('-').map(Number);
        var hoyY = partes[0], hoyM = partes[1], hoyD = partes[2];
        var viewYear = hoyY, viewMonth = hoyM;

        var meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
        var diasSemana = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
        var cortecajaUrl = @json(route('cortecaja.index'));

        function pad(n) { return n < 10 ? '0' + n : '' + n; }

        function render() {
            document.getElementById('calLabel').textContent = meses[viewMonth - 1] + ' ' + viewYear;
            var grid = document.getElementById('calGrid');
            grid.innerHTML = '';

            diasSemana.forEach(function (d) {
                var el = document.createElement('div');
                el.className = 'cal-weekday';
                el.textContent = d;
                grid.appendChild(el);
            });

            var firstOfMonth = new Date(viewYear, viewMonth - 1, 1);
            var startWeekday = firstOfMonth.getDay();
            startWeekday = (startWeekday === 0) ? 6 : startWeekday - 1;

            var daysInMonth = new Date(viewYear, viewMonth, 0).getDate();

            for (var i = 0; i < startWeekday; i++) {
                var empty = document.createElement('div');
                empty.className = 'cal-day cal-day-empty';
                grid.appendChild(empty);
            }

            for (var day = 1; day <= daysInMonth; day++) {
                var iso = viewYear + '-' + pad(viewMonth) + '-' + pad(day);
                var a = document.createElement('a');
                a.className = 'cal-day';
                a.href = cortecajaUrl + '?fecha=' + iso;
                a.textContent = day;
                if (viewYear === hoyY && viewMonth === hoyM && day === hoyD) {
                    a.classList.add('cal-today');
                }
                grid.appendChild(a);
            }
        }

        document.getElementById('calPrev').addEventListener('click', function () {
            viewMonth--;
            if (viewMonth < 1) { viewMonth = 12; viewYear--; }
            render();
        });
        document.getElementById('calNext').addEventListener('click', function () {
            viewMonth++;
            if (viewMonth > 12) { viewMonth = 1; viewYear++; }
            render();
        });
        document.getElementById('calHoy').addEventListener('click', function () {
            viewYear = hoyY; viewMonth = hoyM; render();
        });

        render();
    })();
</script>
@endsection