@extends('layouts.dashboard')

@section('dashboard')

    <style type="text/css">
        /*#table-accordion tr .icon-down {
            transition: 0.5s;
        }*/
        .table tr[aria-expanded=true] .icon-down {
            transform: rotate(180deg);
        }
    </style>

    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Reporte de Caja</strong></li>
    </ul>
    @if (session('message'))
        <div class="alert {{ session('alert') }} mb-3">
            {!! session('message') !!}
        </div>
    @endif
    <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 cargarReporteCaja(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>
                        {{-- <option value="meses">Mes</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('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="cargarExcelReporteCajaVentas()"><i class="fa fa-file-excel-o"></i> Descargar Excel</button>
            </form>
        </div>
    </div>

    <div class="card list-reporte-caja">
    	<div class="card-body">
    		<table class="table table-hover">
    			<thead>
                    <tr>
        				<th class="text-left">Sucursal / Folio</th>
                        <th class="text-left">Forma de Pago</th>
                        <th>Total</th>
                    </tr>
    			</thead>
    			<tbody>
                    <tr class="text-center">
        				<td colspan="3">Busque ventas a traves del filtro</td>
                    </tr>
    			</tbody>
    		</table>
    	</div>
    </div>
@endsection

@section('scripts')

    <script>
        $(document).on('click', ".total", function () {
            $(".sucursal-venta").collapse('hide');
        });

        function cargarExcelReporteCajaVentas() {
            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();
            }
            }
    </script>

@endsection