@extends('adminlte::page')

@section('content_header')
    <h1>Reporte de lineas</h1>
@stop

@section('content')
    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{session('status')}}
        </div>
    @endif
    
    <div class="row">
        <div class="col-md-4">
            <x-infoBox title="Lineas" icon="fas fa-mobile-alt" :number="$totalLines"/>
        </div>
        <div class="col-md-4">
            <x-infoBox title="Lineas sin promoción" icon="fas fa-exclamation-triangle" iconColor="danger" :number="$linesWithout" />
        </div>
        <div class="col-md-4">
            <a href="{{route('lines.index', ['filter' => 'carrying'])}}">
                <x-infoBox title="Lineas portadas" icon="fas fa-phone-slash" :number="$linesCarrying" iconColor="warning"/>
            </a>
        </div>
    </div>

    <x-form :action="route('lines.index')" method="GET" id="filterId">
        <x-card title="Filtros" class="card-primary">
            <x-slot name="tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
            </x-slot>
            <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Fecha de activación</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                    </span>
                                </div>
                                <input autocomplete="false" type="text" name="daterange" class="form-control float-right" value="@isset($filters['daterange']){{$filters['daterange']}} @endisset">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Fecha de portación</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                    </span>
                                </div>
                                <input autocomplete="false" type="text" name="daterangecarrying" class="form-control float-right" value="@isset($filters['daterangecarrying']){{$filters['daterangecarrying']}} @endisset">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <div class="filters-container" id="filters-container">
                                <div class="groupByActivators" id="groupByActivators">
                                    <x-filter-checkbox name="onlyWithActivator" :filter="$filters">
                                        Líneas con activadores
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="withIccid" :filter="$filters">
                                        Líneas con iccid
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="withActivationDate" :filter="$filters">
                                        Líneas con fecha de activación
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="withPortationDate" :filter="$filters">
                                        Líneas con fecha de portación
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="withCarrying" :filter="$filters">
                                        Líneas con antigüedad
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="less120Days" :filter="$filters">
                                        Mostrar solo las líneas portadas menores a 120 días de activación
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="linesWithoutBalance" :filter="$filters">
                                        Líneas sin saldo
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="activatorThirty" :filter="$filters">
                                        Líneas que aplican para evaluación de 30 días
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="activatorSixty" :filter="$filters">
                                        Líneas que aplican para evaluación de 60 días
                                    </x-filter-checkbox>
                                    <x-filter-checkbox name="activatorNinety" :filter="$filters">
                                        Líneas que aplican para evaluación de 90 días
                                    </x-filter-checkbox>
                                </div>
                                <x-filter-checkbox name="isGrouped" :filter="$filters">
                                    Agrupar por activadores
                                </x-filter-checkbox>
                            </div>
                        </div>
                    </div>
                </div>
                @if ($filters)
                    <div class="row">
                        <div class="col-md-12">
                            Filtros aplicados:
                        </div>
                        @foreach ($filters as $key => $filter)
                            @switch($key)
                                @case('onlyWithActivator')
                                    <div class="col-2">
                                        <p>Solo con activadores <i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('withIccid')
                                    <div class="col-2">
                                        <p>Líneas con iccid<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('withActivationDate')
                                    <div class="col-2">
                                        <p>Líneas con fecha de activación<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('withCarrying')
                                    <div class="col-2">
                                        <p>Líneas con antiguedad<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('less120Days')
                                    <div class="col-2">
                                        <p>Líneas con menos de 120 días de activación.<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('daterange')
                                    <div class="col-2">
                                        <p>Líneas activadas entre {{$filters['daterange']}}<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break           
                                @case('daterangecarrying')
                                    <div class="col-2">
                                        <p>Líneas portadas entre {{$filters['daterangecarrying']}}<i class="fa fa-check mx-2 text-success"></i></p>
                                        @case('isGrouped')
                                    </div>
                                    @break           
                                    <div class="col-2">
                                        <p>Líneas agrupadas por activador<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break        
                                @case('filter')
                                    <div class="col-2">
                                        <p>Líneas portadas<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('linesWithoutBalance')
                                    <div class="col-2">
                                        <p>Líneas sin saldo<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('activatorThirty')
                                    <div class="col-2">
                                        <p>Líneas que aplican para evaluación de 30 días<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('activatorSixty')
                                    <div class="col-2">
                                        <p>Líneas que aplican para evaluación de 60 días<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('activatorNinety')
                                    <div class="col-2">
                                        <p>Líneas que aplican para evaluación de 90 días<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break   
                                @default            
                            @endswitch
                        @endforeach
                    </div>
                @endif
            <x-slot name="footer">
                <div class="fa-pull-right">
                    <a class="btn btn-primary" href="{{route('line.export', ['filters' => serialize($filters)])}}"><i class="fa fa-download mx-1"></i> Descargar</a>
                    @if ($filters)
                        <a href="/reports/lines" class="btn btn-danger">Quitar filtros</a>
                    @endif
                    <button class="btn btn-success">Filtrar</button>
                </div>
            </x-slot>
        </x-card>
    </x-form>
    <x-card>
        <div class="table-responsive">
            {{$dataTable->table()}}
        </div>
    </x-card>
@stop

@section('js')
    <script type="text/javascript" src="{{asset('libs/DataTables/datatables.min.js')}}"></script>
    {{$dataTable->scripts()}}
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        const config_date_input = 
        { singleDatePicker: true,
                showDropdowns: true,
                minYear: 1901,
                maxDate: moment().format('MM/DD/YYYY'),
                "locale": {
                    "format": "MM/DD/YYYY",
                    "separator": " - ",
                    "applyLabel": "Aplicar",
                    "cancelLabel": "Cancelar",
                    "fromLabel": "De",
                    "toLabel": "a",
                    "customRangeLabel": "Personalizado",
                    "weekLabel": "S",
                    "daysOfWeek": [
                        "Dom",
                        "Lun",
                        "Mar",
                        "Mié",
                        "Jue",
                        "Vie",
                        "Sáb"
                        ],
                    "monthNames": [
                        "Enero",
                        "Febrero",
                        "Marzo",
                        "Abril",
                        "Mayo",
                        "Junio",
                        "Julio",
                        "Agosto",
                        "Septiembre",
                        "Octubre",
                        "Noviembre",
                        "Diciembre"
                    ],
                    "firstDay": 1
                },
            };

            const config_date_range_picker = 
            {
                "locale": {
                    "format": "MM/DD/YYYY",
                    "separator": " - ",
                    "applyLabel": "Aplicar",
                    "cancelLabel": "Cancelar",
                    "fromLabel": "De",
                    "toLabel": "A",
                    "customRangeLabel": "Personalizada",
                    "weekLabel": "S",
                    "daysOfWeek": [
                        "Dom",
                        "Lun",
                        "Mar",
                        "Mié",
                        "Jue",
                        "Vie",
                        "Sáb"
                    ],
                    "monthNames": [
                        "Enero",
                        "Febrero",
                        "Marzo",
                        "Abril",
                        "Mayo",
                        "Junio",
                        "Julio",
                        "Agosto",
                        "Septiembre",
                        "Octubre",
                        "Noviembre",
                        "Diciembre"
                    ],
                    "firstDay": 1
                },
                minYear: 1901,
                maxDate: moment().format('MM/DD/YYYY')
            };

        $(function() {
            $('input[name="daterange"]').daterangepicker(config_date_range_picker);
            @if(!isset($filters['daterange']))
                $('input[name="daterange"]').val('')
            @endif
            $('input[name="daterangecarrying"]').daterangepicker(config_date_range_picker);
            @if(!isset($filters['daterangecarrying']))
                $('input[name="daterangecarrying"]').val('')
            @endif
            $('input[name="datecreatedat"]').daterangepicker(config_date_input);
            $('input[name="datecreatedat"]').val('')
        });
    </script>
    <script>  
        window.addEventListener('load', (event) => {
        const container_filters = document.querySelector('#filters-container');
        const group_By_Activators = document.querySelector('#groupByActivators');
        container_filters.addEventListener('change', (event) => {
            if(event.target.id == 'isGrouped'){
            const checkboxes = group_By_Activators.querySelectorAll('input');
            console.log(checkboxes);
            for (let i = 0; i <= checkboxes.length-1; i++) {
                console.log(checkboxes[i]);
                checkboxes[i].checked = false;
            }
            }else{
                document.getElementById('isGrouped').checked = false;
            }
         });
        });  
    </script>
@endsection

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('libs/DataTables/datatables.min.css')}}">
@endsection