@extends("layout.base")

@section("styles")
    <title>ARB | Reporte Gastos</title>
@endsection

@section("header")
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Reportes</h5>
    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
    <span class="text-danger font-weight-bold mr-4">Gastos</span>
@endsection

@section("content")
    <div class="card card-custom">
        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Reporte de gastos</h3>
            </div>
            <form class="col-md-4 mt-5">
                <div class="input-group">
                    <div class="input-group-prepend"><span class="input-group-text">Rango fechas</span></div>
                    <input type="text" id="fechas" name="fechas" class="form-control" readonly="" value="" placeholder="Seleccionar fechas">
                    <div class="input-group-append"><button class="btn btn-icon btn-primary" id="btnBuscar"><i class="fas fa-search"></i></button></div>
                </div>
            </form>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6  d-flex flex-column">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>Categoría</th>
                            <th>Total colones</th>
                            <th>Total dolares</th>
                            <th>Convertido a dolares</th>
                        </tr>
                        </thead>
                        @php
                            $totalGastoConvertidoDolares=0;
                        @endphp

                        @foreach($categorias as $categoria)
                            <tr>
                                <td>{{ $categoria->gasto_categoria }}</td>
                                <td>
                                    @php
                                        $totalColones = 0;
                                        $totalColonesADolar = 0;
                                        foreach($gastos as $gasto) {
                                            if ($gasto->id_gasto_categoria == $categoria->id_gasto_categoria && $gasto->id_moneda == 2) {
                                                $totalColones += $gasto->monto;
                                                $compra_dolar=($gasto->compra_dolar)?$gasto->compra_dolar:1;
                                                $totalColonesADolar += ($gasto->monto/$compra_dolar);
                                            }
                                        }
                                        echo '₡' . number_format($totalColones, 2);
                                    @endphp
                                </td>
                                <td>
                                    @php
                                        $totalDolares = 0;
                                        foreach($gastos as $gasto) {
                                            if ($gasto->id_gasto_categoria == $categoria->id_gasto_categoria && $gasto->id_moneda == 1) {
                                                $totalDolares += $gasto->monto;
                                            }
                                        }
                                        echo '$' . number_format($totalDolares, 2);
                                    @endphp
                                </td>
                                <td>
                                    @php
                                        $totalDolares = 0;
                                        foreach($gastos as $gasto) {
                                            if ($gasto->id_gasto_categoria == $categoria->id_gasto_categoria && $gasto->id_moneda == 1) {
                                                $totalDolares += $gasto->monto;
                                            }
                                        }
                                        $totalGastoConvertidoDolares+=$totalColonesADolar+$totalDolares;
                                        echo '$' . number_format($totalColonesADolar+$totalDolares, 2);
                                    @endphp
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>
                <div class="row">
                    <div class="col-md-6" style="max-height: 200px;">
                        <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100 bg-danger align-self-start">
                            <div class="card-header pt-5 mb-3 d-flex flex-center">
                                <div class="d-flex flex-center rounded-circle h-80px w-80px bg-danger">
                                    <i class="fas fa-cash-register text-white fa-2x lh-0"></i>
                                </div>
                            </div>
                            <div class="card-body  mb-0 pt-0" >
                                <div class="text-center" >
                                    <small class="text-white mb-4">Total gastos convertido </small><br>
                                    <small class="text-white mb-4"><span class="inicio">{{date("d/m/Y",strtotime($fechaInicio))}}</span> al <span class="fin">{{date("d/m/Y",strtotime($fechaFin))}}</span></small>
                                    <h4 class="text-white text-center">$ <label id="totalGasto">{{number_format($totalGastoConvertidoDolares,2)}}</label> </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="max-height: 200px;">
                        <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100 bg-danger align-self-start">
                            <div class="card-header pt-5 mb-3 d-flex flex-center">
                                <div class="d-flex flex-center rounded-circle h-80px w-80px bg-danger">
                                    <i class="fas fa-calculator text-white fa-2x lh-0"></i>
                                </div>
                            </div>
                            <div class="card-body  mb-0 pt-0" >
                                <div class="text-center" >
                                    <small class="text-white mb-4">Cantidad de gastos </small><br>
                                    <small class="text-white mb-4"><span class="inicio">{{date("d/m/Y",strtotime($fechaInicio))}}</span> al <span class="fin">{{date("d/m/Y",strtotime($fechaFin))}}</span></small>
                                    <h4 class="text-white text-center"><label>{{count($gastos)}}</label> </h4>
                                </div>
                            </div>
                        </div>
                    </div>
{{--                    <div class="col-md-12" style="max-height: 200px;">--}}
{{--                        <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-xl-100 bg-danger align-self-start">--}}
{{--                            <div id="chart_1" class="d-flex justify-content-center"></div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/es.js"></script>

    <script>
        $( document ).ready(function() {


            $("#fechas").flatpickr({
                locale: "es",
                mode: "range",
                altInput: true,
                altFormat: "d/m/Y",
                defaultDate: ['{{$fechaInicio}}', '{{$fechaFin}}']
            });

            {{--chart = new ApexCharts(document.querySelector("#chart_1"));--}}
            {{--chart.render();--}}

            {{--$("#fechas").flatpickr({--}}
            {{--    locale: "es",--}}
            {{--    mode: "range",--}}
            {{--    altInput: true,--}}
            {{--    altFormat: "d/m/Y",--}}
            {{--    defaultDate: ['{{$fechaInicio}}', '{{$fechaFin}}']--}}
            {{--});--}}

            {{--let gastosPorCategoria = @json($grafica1);--}}
            {{--let chart;--}}
            {{--const N = '#910815';--}}
            {{--let options = {--}}
            {{--    series: gastosPorCategoria,--}}
            {{--    chart: {--}}
            {{--        type: 'pie',--}}
            {{--        height: 350--}}
            {{--    },--}}
            {{--    plotOptions: {--}}
            {{--        bar: {--}}
            {{--            horizontal: false,--}}
            {{--            columnWidth: '55%',--}}
            {{--            endingShape: 'rounded'--}}
            {{--        },--}}
            {{--    },--}}
            {{--    dataLabels: {--}}
            {{--        enabled: false--}}
            {{--    },--}}
            {{--    stroke: {--}}
            {{--        show: true,--}}
            {{--        width: 2,--}}
            {{--        colors: ['transparent']--}}
            {{--    },--}}
            {{--    yaxis: {--}}
            {{--        title: {--}}
            {{--            text: 'Monto total gasto'--}}
            {{--        },--}}

            {{--    },--}}
            {{--    fill: {--}}
            {{--        opacity: 1--}}
            {{--    },--}}
            {{--    colors: [N]--}}
            {{--};--}}
            {{--chart = new ApexCharts(document.querySelector("#chart_1"), options);--}}
            {{--chart.render();--}}

        });
    </script>
@endsection