@extends('adminlte::page')

@section('content_header')
    <h1>Logs de importación</h1>
@stop

@section('content')
    <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('logs.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 creació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" id="date" name="date" class="form-control float-right" value="@isset($filters['date']){{$filters['date']}} @endisset">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <x-filter-checkbox name="activators" :filter="$filters">
                                Mostrar solo de activadores
                            </x-filter-checkbox>

                            <x-filter-checkbox name="lines" :filter="$filters">
                                Mostrar solo de líneas
                            </x-filter-checkbox>

                            <x-filter-checkbox name="ported_lines" :filter="$filters">
                                Mostrar solo de líneas portadas
                            </x-filter-checkbox>

                            <x-filter-checkbox name="onlyWithErrors" :filter="$filters">
                                Mostrar solo con errores
                            </x-filter-checkbox>
                        </div>
                    </div>
                </div>
                @if ($filters)
                    <div class="row">
                        <div class="col-md-12">
                            Filtros aplicados:
                        </div>
                        @foreach ($filters as $key => $filter)
                            @switch($key)
                                @case('activators')
                                    <div class="col-2">
                                        <p>Solo de tipo activadores <i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('lines')
                                    <div class="col-2">
                                        <p>Solo tipo líneas <i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('ported_lines')
                                    <div class="col-2">
                                        <p>Solo tipo líneas portadas<i class="fa fa-check mx-2 text-success"></i></p>
                                    </div>
                                    @break
                                @case('date')
                                    <div class="col-2">
                                        <p>Logs creados el: {{$filters['date']}}</p>
                                    </div>
                                    @break
                                @case('onlyWithErrors')
                                    <div class="col-2">
                                        <p>Solo con algun error presente <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">
                    @if ($filters)
                    <a href="/logs" 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
                },
            };

        $(function() {
            $('input[name="date"]').daterangepicker(config_date_input);
            $('input[name="date"]').val('')
        });
    </script>
@endsection

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