@extends('layouts.dashboard')

@section('dashboard')

@php
    use Carbon\Carbon;

    $fechaDesde = Carbon::now()->startOfMonth()->format('Y-m-d');
    $fechaHasta = Carbon::today()->format('Y-m-d');
@endphp

    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Reporte de caja</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Reporte de caja</h1>
        </div>

        <div class="col-md">
            <form class="row align-items-end justify-content-end form-registro form-enter" method="post" class="form-inline" id="form-reporte-caja" onsubmit="return cargarReporteDeCaja(this.id)">
                <div class="col-auto form-group pl-0 agregar-fecha-dia">
                    <label for="tipo-fecha" class="d-block small mb-0">Tipo Fecha:</label>
                    <select name="tipo-fecha" id="tipo-fecha" class="form-control form-control-sm select2" required="required" onchange="agregarCampoFecha(this.value)">
                    	<option value="hoy">Hoy</option>
                    	{{-- <option value="semana">Última Semana</option> --}}
                    	<option value="mes">Mes Actual</option>
                        <option value="dia">Día Específico</option>
                        <option value="rango-fecha">Rango de fecha</option>
                    </select>
                </div>
                <div class="col-auto form-group pl-0">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Buscar</button>
                </div>
            </form>
        </div>
        <div class="col-md-auto pl-1">
            <form method="POST" action="{{ route('descargar-excel-reporte-caja') }}" id="form-excel-reporte-caja">
                {{ csrf_field() }}
                <input type="hidden" name="tipo-fecha" value="hoy">
                <input type="hidden" name="fecha">
                <input type="hidden" name="fecha-hasta">
                <button type="button" class="btn btn-success btn-sm" onclick="descargarExcelReporteDeCaja()"><i class="fa fa-file-excel-o"></i> Descargar Excel</button>
            </form>
        </div>

    </div>


    <div class="card">
        {{-- <div class="card-body border-top border-primary rounded-top box-resumen-cuentas-por-pagar" style="border-width: 4px !important;">
            @include('dashboard.cuentas-por-cobrar.div-resumen-cuentas-por-cobrar')
        </div> --}}
        <div class="card-body">
            <div class="table-responsive box-table-reporte-de-caja">
                {{-- @include('dashboard.cuentas-por-cobrar.table-cuentas-por-cobrar') --}}
                
                @include('dashboard.caja.table-reporte-de-caja')
               

            </div>
        </div>
    </div>

            
@endsection

@section('scripts')

    <script>

        function descargarExcelReporteDeCaja() {
            var tipoFecha = $('#form-reporte-caja [name=tipo-fecha]').val();
            var fecha = $('#form-reporte-caja [name=fecha]').val();
            var fechaHasta = $('#form-reporte-caja [name=fecha-hasta]').val();

            $('#form-excel-reporte-caja [name=tipo-fecha]').val(tipoFecha);
            $('#form-excel-reporte-caja [name=fecha]').val(fecha);
            $('#form-excel-reporte-caja [name=fecha-hasta]').val(fechaHasta);

            $('#form-excel-reporte-caja').submit();
        }

        function agregarCampoFecha(tipo) {
            if (tipo == "dia") {
                $(".campo-fecha").remove();
                var fecha = new Date();
                var anio = fecha.getFullYear();
                var mes = ("0" + (fecha.getMonth() + 1)).slice(-2); // Los meses en JavaScript van de 0 a 11
                var dia = ("0" + fecha.getDate()).slice(-2);
                var hoy = anio + "-" + mes + "-" + dia;
                if ($(".campo-fecha").length == 0) {
                $(".agregar-fecha-dia").after(
                    `<div class="col-auto form-group pl-1 campo-fecha">
                                                <label for="tipo-fecha" class="d-block small mb-0">Fecha:</label>
                                                <input type="date" name="fecha" class="form-control form-control-sm input-date" value="` +
                    hoy +
                    `" max="` +
                    hoy +
                    `" required="required">
                                                </div>`
                );
                } else {
                $(".campo-fecha").remove();
                }
            } else if (tipo == "meses") {
                $(".campo-fecha").remove();
                var fecha = new Date();
                var anio = fecha.getFullYear();
                var mes = ("0" + (fecha.getMonth() + 1)).slice(-2);

                var fechaMax = anio + "-" + mes;

                if ($(".campo-fecha").length == 0) {
                $(".agregar-fecha-dia")
                    .after(`<div class="col-auto form-group pl-1 campo-fecha">
                                                    <label for="tipo-fecha" class="d-block small mb-0">Mes:</label>
                                                    <input type="month" name="fecha" class="form-control form-control-sm input-date" required="required" max="${fechaMax}">
                                                </div>`);
                } else {
                $(".campo-fecha").remove();
                }
            }else if(tipo == "rango-fecha"){
                $(".campo-fecha").remove();
                var fecha = new Date();
                var anio = fecha.getFullYear();
                var mes = ("0" + (fecha.getMonth() + 1)).slice(-2); // Formatear el mes
                var dia = ("0" + fecha.getDate()).slice(-2);
                var hoy = anio + "-" + mes + "-" + dia;

                $(".agregar-fecha-dia").after(
                `<div class="row campo-fecha">
                    <div class="col-auto form-group pr-1">
                    <label for="fecha-desde" class="d-block small mb-0">Fecha Desde:</label>
                    <input type="date" name="fecha" class="form-control form-control-sm input-date" max="${hoy}" required="required">
                    </div>
                    <div class="col-auto form-group pl-1 mr-2">
                    <label for="fecha-hasta" class="d-block small mb-0">Fecha Hasta:</label>
                    <input type="date" name="fecha-hasta" class="form-control form-control-sm input-date" max="${hoy}" required="required">
                    </div>
                </div>`
                );
            } else {
                $(".campo-fecha").remove();
            }
        }

        // function cargarReporteDeCaja(formId) {
        //     modalCargando();

        //     const form = document.getElementById(formId);
        //     const formData = new FormData(form);
        //     const formBody = new URLSearchParams(formData).toString(); // igual a serialize()
        //     // /dashboard/cargar-reporte-caja
        //     fetch("/dashboard/cargar-reporte-de-caja", {
        //         method: "POST",
        //         headers: {
        //             "Content-Type": "application/x-www-form-urlencoded",
        //             "X-CSRF-TOKEN": token // asegúrate que la variable token esté definida
        //         },
        //         body: formBody
        //     })
        //     .then(response => {
        //         if (!response.ok) throw new Error("Error en la respuesta del servidor");
        //         return response.json(); // o .json() si tu backend devuelve JSON
        //     })
        //     .then(data => {
        //         cerrarCargando();
        //         if (data.success) {
        //             document.querySelector(".box-table-reporte-de-caja").innerHTML = data.viewTableReporteDeCaja;
        //         }
                
        //     })
        //     .catch(error => {
        //         cerrarCargando();
        //         console.error("Error:", error);
        //     });

        //     return false;
        // }

        function cargarReporteDeCaja(formId) {
            modalCargando();

            const form = document.getElementById(formId);
            const formData = new FormData(form);
            const formBody = new URLSearchParams(formData).toString();

            fetch("{{ route('cargar-reporte-de-caja') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "X-CSRF-TOKEN": '{{ csrf_token() }}'
                },
                body: formBody
            })
            .then(response => response.json())
            .then(data => {
                cerrarCargando();
                if (data.success) {
                    document.querySelector(".box-table-reporte-de-caja").innerHTML = data.viewTableReporteDeCaja;
                }
            })
            .catch(error => {
                cerrarCargando();
                console.error("Error al cargar el modal:", error);
            });

            return false;
        }
    </script>

@endsection