@extends('crudbooster::admin_template')

@section('content')
    <style>
        #main-data-container
        {
            overflow-x: scroll;
        }
        .d-flex
        {
            display: flex;
        } 
        
        .justify-content-end
        {
            justify-content: end;
        }

        #buttons-row
        {
            display: flex;
            width: 100%;
            justify-content: space-between;
        }

        .mx-4
        {
            margin-right: 1rem;
            margin-left: 1rem;
        }

        td
        {
            line-height: 1.42857143;
            font-size: 12px;
            min-width: 100px;
        }
        td.min-w-50
        {
            min-width: 50px;
        }
        .loader {
            width: 48px;
            height: 48px;
            border: 5px solid #FFF;
            border-bottom-color: #919191;
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }

        .btn-light
        {
            background-color: #ddd;
        }

        .link-disabled
        {
            color: #e3e3e3;
        }

        .pagination-btn
        {
            margin-right: 1rem;
            margin-left: 1rem;
        }

        #error_filter
        {
            display: none;
            color: #910000;
            font-weight: bold;
        }

        @keyframes rotation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        } 
    </style>
    <div class="row d-flex justify-content-end mx-4">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Exporte
        </button>
    </div>
    <div class="row d-flex justify-content-end mx-4">
        <button class="btn btn-warning" onclick="regenerateTxts()">Regenerar TXT seleccionados</button>
    </div>

    <div class="row mx-4">
        <p>
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Filtro
            </a>
            <div class="collapse" id="collapseExample">
                <div class="card card-body">
                    Coloque las opciones deseadas para filtrar la información:

                    <div class="row">
                        <div class="col-12 col-md-6">
                            <label for="estado">Estado</label>
                            <select name="estado" id="estado" class="form-control">
                                <option value="" selected disabled>Seleccionar</option>
                                <option value="0">Pendiente</option>
                                <option value="1">Facturado</option>
                                <option value="2">Pago</option>
                            </select>
                            <br />
                        </div>

                        <div class="col-12 col-md-6">
                            <label for="currency">Moneda</label>
                            <input type="text" name="currency" id="currency" list="currencies-list" class="form-control" placeholder="Ingrese la moneda" />
                            <datalist id="currencies-list">
                                @foreach($currencies as $currency)
                                    <option value="{{ $currency->id }}">{{ $currency->nombre }}</option>
                                @endforeach
                            </datalist>
                            <br />
                        </div>
                        
                    </div>

                    <div class="row">
                        <div class="col-12 col-md-6">
                            <label for="client">Cliente</label>
                            <input type="text" name="client" id="client" list="clients-list" class="form-control" placeholder="Ingrese el cliente" />
                            <datalist id="clients-list">
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}">{{ $client->nombre }}</option>
                                @endforeach
                            </datalist>
                            <br />
                        </div>

                        <div class="col-12 col-md-6">
                            <label for="cuenta-status">Validación de cuentas</label>
                            <select id="cuenta-status" name="cuenta-status" class="form-control">
                                <option value="3">Todos</option>
                                <option value="1">Validadas</option>
                                <option value="2">No Validadas</option>
                            </select>
                            <br />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 col-md-6">
                            <label for="date_from">Fecha Desde</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" />
                            <br />

                            <label for="date_to">Fecha Hasta</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" />
                            <br />
                        </div>

                    </div>

                    <div class="row" id="error_filter">
                        Por favor, seleccione al menos un filtro
                    </div>
                    <div class="row" id="buttons-row">
                        <button class="btn btn-danger" onclick="filterData()">Filtrar</button>
                        <button class="btn btn-light" onclick="clearFilters()">Limpiar filtros</button>
                    </div>
                </div>
            </div>
        </p>
    </div>
    
    <div id="main-data-container">
        <table class="table table-custom">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Fecha</th>
                    <th scope="col">Nota de Pedido</th>
                    <th scope="col">Concepto</th>
                    <th scope="col">Cliente</th>
                    <th scope="col">Razón Social</th>
                    <th scope="col">Proyecto</th>
                    <th scope="col">Servicio</th>
                    <th scope="col">Empresa</th>
                    <th scope="col">Unidad de negocio</th>
                    <th scope="col">Moneda</th>
                    <th scope="col">Importe</th>
                    <th scope="col">Validada</th>
                    <th scope="col">Estado</th>
                    <th scope="col">N° Factura</th>
                    <th scope="col">Fecha de Factura</th>
                </tr>
            </thead>
            <tbody id="data-body-table">
                <span class="loader"></span>
            </tbody>
        </table>

        <div class="row d-flex justify-content-end mx-4" id="pagination-custom">

        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Exporte Simple</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="modal-body" action="{{ url('/exporte-custom-simple') }}" method="post">
                @csrf
                <label for="file_name">Nombre del fichero</label>
                <input type="text" name="file_name" id="file_name" class="form-control" placeholder="Ingrese el nombre del archivo deseado" required />
                <br />

                <label for="file_name">Validación de cuentas</label>
                <select class="form-control" name="validadas_cuentas" id="validadas_cuentas">
                    <option value="1">Validadas</option>
                    <option value="2">No Validadas</option>
                    <option value="3">Todos</option>
                </select>
                <br />

                <!--label for="rows">Cantidad de Filas</label>
                <input type="number" name="rows" id="rows" class="form-control" placeholder="Ingrese la cantidad de filas a exportar" required />
                <br /-->

                <label for="extension">Formato de exporte</label>
                <select class="form-control" name="extension" id="extension" required>
                    <option value="2">Excel (XLSX)</option>
                    <option value="1">Excel (2003, xls)</option>                    
                    <option value="3">CSV</option>
                </select>
                <br />
                
                <button type="submit" class="btn btn-primary">Exportar</button>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>

        window.addEventListener("load", () => {
            
            //const page = window.location.href;
            let params = new URLSearchParams(document.location.search);
            let page = params.get("page");


            url = "";
            if(!page)
            {
                url = "api/reporte-completo-data";
            }
            else
            {
                url = "api/reporte-completo-data/?page="+page;
            }

            fetch(url)
                .then(response => response.json())
                .then(res => {
                    $(".loader").hide();
                    console.log(res.data);
                    const dataBody = document.getElementById("data-body-table");
                    const bodyTable = $("#data-body-table");

                    for(x in res.data)
                    {
                        bodyTable.append(`<tr>
                            <td><input class="checkbox" type="checkbox" value="${res.data[x].id}" id="check-row-${res.data[x].id}" /></td>
                            <td>${formatDate(new Date(res.data[x].fecha))}</td>
                            <td style="font-weight: bold;">NP-000000${res.data[x].id}</td>
                            <td>${res.data[x].concepto}</td>
                            <td>${(res.data[x].proyecto.cliente) ? res.data[x].proyecto.cliente.nombre : "-"}</td>
                            <td>${(res.data[x].proyecto.cliente) ? res.data[x].proyecto.cliente.razon_social: "-"}</td>
                            <td>${res.data[x].proyecto.nombre}</td>
                            <td>${res.data[x].servicio.nombre}</td>
                            <td>${(res.data[x].proyecto.empresa) ? res.data[x].proyecto.empresa.nombre : "-"}</td>
                            <td>${res.data[x].proyecto.unidad_negocio.nombre}</td>
                            <td>${res.data[x].proyecto.moneda.nombre}</td>
                            <td>$ ${res.data[x].importe}</td>
                            <td>${ (res.data[x].validada!==null) ? (res.data[x].validada==1 ? "Si" : "No") : "No"}</td>
                            <td>${returnState(res.data[x].facturado)}</td>
                            <td style="font-weight: bold;">${(res.data[x].factura) ? res.data[x].factura : "-"}</td>
                            <td>${(res.data[x].fecha_factura) ? formatDate(new Date(res.data[x].fecha_factura)) : "-"}</td>
                        </tr>`);
                    }
                    

                    const pagination_custom = $("#pagination-custom");

                    if(res.prev_page_url)
                    {
                        pagination_custom.append(`
                            <a href="http://softland.devuocloud.com/reporte-completo?page=${res.current_page-1}" class="pagination-btn">&lt; Prev </a>
                        `)
                    }
                    else
                    {
                        pagination_custom.append(`
                            <span class="link-disabled pagination-btn">&lt; Prev </span>
                        `)
                    }
                    
                    if(res.next_page_url)
                    {
                        pagination_custom.append(`
                            <a href="http://softland.devuocloud.com/reporte-completo?page=${res.current_page+1}" class="pagination-btn"> Next &gt;</a>
                        `)
                    }
                    else
                    {
                        pagination_custom.append(`
                            <span class="link-disabled pagination-btn"> Next &gt;</span>
                        `)
                    }
                });
        });

        function padTo2Digits(num) {
            return num.toString().padStart(2, '0');
        }


        function formatDate(date) {
            return [
                padTo2Digits(date.getDate()),
                padTo2Digits(date.getMonth() + 1),
                date.getFullYear(),
            ].join('/');
        }

        function returnState(facturado)
        {
            if(!facturado)
            {
                return "<span class='btn btn-light'>Pendiente</span>";
            }

            if(facturado==1)
            {
                return "<span class='btn btn-primary'>Facturado</span>";
            }

            if(facturado==2)
            {
                return "<span class='btn btn-success'>Pago</span>";
            }

            return ;
        }

        function filterData()
        {
            $(".loader").show();
            $("#error_filter").hide();
            $("#pagination-custom").hide();

            const currency = $("#currency").val();
            const estado = $("#estado").val();
            const client = $("#client").val();
            const validation_cuentas = $("#cuenta-status").val();
            const date_from = $("#date_from").val();
            const date_to = $("#date_to").val();

            /* Validation */
            
            if(!date_from && !date_to)
            {
                $("#error_filter").show();
                $("#error_filter").html("Seleccione fechas.");
                $(".loader").hide();
                return;
            }
            
            if(date_from > date_to)
            {
                $("#error_filter").show();
                $("#error_filter").html("La fecha desde debe ser menor a la fecha final");
                $(".loader").hide();
                return;
            }
            /* End of Validation */

            const data = {
                estado: estado,
                currency: currency,
                client: client,
                validation_cuentas: validation_cuentas,
                date_from: date_from,
                date_to: date_to,
            }

            console.log(data);

            const options = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(data),
            };


            fetch("api/reporte-filter", options)
                .then(response => response.json())
                .then(res => {
                    const bodyTable = $("#data-body-table");
                    bodyTable.html("");

                    for(x in res)
                    {
                        bodyTable.append(`<tr>
                            <td><input class="checkbox" type="checkbox" value="${res[x].id}" id="check-row-${res[x].id}" /></td>
                            <td>${formatDate(new Date(res[x].fecha))}</td>
                            <td style="font-weight: bold;">NP-000000${res[x].id}</td>
                            <td>${res[x].concepto}</td>
                            <td>${(res[x].proyecto.cliente) ? res[x].proyecto.cliente.nombre : "-"}</td>
                            <td>${(res[x].proyecto.cliente) ? res[x].proyecto.cliente.razon_social : "-"}</td>
                            <td>${res[x].proyecto.nombre}</td>
                            <td>${res[x].servicio.nombre}</td>
                            <td>${(res[x].proyecto.empresa) ? res[x].proyecto.empresa.nombre : "-"}</td>
                            <td>${(res[x].proyecto.unidad_negocio) ? res[x].proyecto.unidad_negocio.nombre : "-"}</td>
                            <td>${res[x].proyecto.moneda.nombre}</td>
                            <td>$ ${res[x].importe}</td>
                            <td>${ (res[x].validada!==null) ? (res[x].validada==1 ? "Si" : "No") : "No"}</td>
                            <td>${returnState(res[x].facturado)}</td>
                            <td style="font-weight: bold;">${(res[x].factura) ? res[x].factura : "-"}</td>
                            <td>${(res[x].fecha_factura) ? formatDate(new Date(res[x].fecha_factura)) : "-"}</td>
                        </tr>`);
                    }

                    $(".loader").hide();
                });
        }

        function clearFilters()
        {
            $("#currency").val("");
            $("#estado").val("");
            $("#client").val("");
            $("#date_from").val("");
            $("#date_to").val("");
        }


        function regenerateTxts()
        {
            console.log("generando...");
            const selected = document.querySelectorAll(".checkbox:checked");
            let values = [];
    
            if(selected.length==0)
            {
                alert("Seleccione al menos 1 cuota");
                return;
            }
    
            for(let i = 0; i<selected.length;i++)
            {
                values.push(selected[i].value);
            }
    
            const options = {
                method: "POST",
                headers: {
                "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    cuotas: values,
                }),
            };
    
            fetch(`/api/regenerar-txt-masive`, options)
                .then((response) => response.json())
                .then(
                    async (result) => {
                        console.log(result);
                    },
                    (error) => {
                        console.log(error);
                    }
                );
        }
    </script>
    
@endsection