@extends('layout.administrator.index')
@section('title', 'Templates')
@section('style')
    <style>
        .hand {
            cursor: pointer !important;
        }

        .tab-template {
            padding: 10px 20px;
        }

        .tab-template ul {
            gap: 10px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .tab-content {
            width: 100%;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}">
                        <i class="fa fa-dashboard"></i>Inicio</a>
                </li>
                <li class="breadcrumb-item active">Templates</li>
            </ol>
        </section>

        <section class="content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul>
                        @foreach ($errors->all() as $item)
                            <li>{{ $item }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('danger'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('danger') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div>
                <div class="row tab-template">
                    <div class="col-12">
                        <ul class="nav nav-pills" id="myTab">
                            <li class="nav-item">
                                <a class="nav-link active" id="list-template-tab" data-toggle="tab" href="#list-template"
                                    role="tab" aria-controls="list-template" aria-selected="true">Templates</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="create-template-tab" data-toggle="tab" href="#create-template"
                                    role="tab" aria-controls="create-template" aria-selected="false">Create Template</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="list-template" role="tabpanel"
                            aria-labelledby="list-template-tab">
                            <div class="col">
                                <div id="idContentFilter" class="box box-solid bg_dark hide">
                                    <div class="box-header with-border">
                                        <div class="row align-items-center">
                                            <div class="col-12">
                                                <h4 class="box-title">Busqueda avanzada</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <form id="filterForm">
                                            @csrf
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="name" class="control-label">Nombre</label>
                                                        <input type="text" name="name" class="form-control" id="name" placeholder="Nombre">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="type_frecuency" class="control-label">Frecuencia</label>
                                                        <select name="type_frecuency" class="form-control" id="type_frecuency">
                                                            <option value="">Todos</option>
                                                             <option value="1">Diaria</option>
                                                             <option value="2">Semanal</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="State" class="control-label">Estado</label>
                                                        <select name="state" class="form-control" id="state">
                                                            <option value="">Todos</option>
                                                            @foreach (Config::get('constants.active') as $key => $state)
                                                                <option value="{{$key}}">{{$state['name']}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 text-left">
                                                    <button type="button" id="btnClear" class="btn btn-danger">
                                                        <i class="fa fa-refresh"></i> Limpiar
                                                    </button>
                                                </div>
                                                <div class="col-md-6 text-right">
                                                    <button type="submit" class="btn btn-info">
                                                        <i class="fa fa-search"></i> Buscar
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="box">
                                    <div class="box-header with-border">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <h4 class="box-title">Templates</h4>
                                            </div>
                                            <div class="col-6">
                                                <div class="box-controls pull-right">
                                                    <div class="box-header-actions">
                                                        <button type="button" class="btn btn-sm btn-info"
                                                            id="idBtnFilter"><i class="fa fa-filter"></i> Filtro</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <div class="table-responsive">
                                            <table class="table table-sm table-hover" id="customTable">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">Nombre</th>
                                                        <th class="text-center">Frecuencia</th>
                                                        <th class="text-center">Fecha de ejecución</th>
                                                        <th class="text-center">Fecha de creación</th>
                                                        <th class="text-center">Estado</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="create-template" role="tabpanel"
                            aria-labelledby="create-template-tab">
                            <div class="col">
                                <div class="box">
                                    <div class="box-header with-border">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <h4 class="box-title">Create template</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <form action="{{ route('templates.store') }}" method="post">
                                            @csrf
                                            <div class="row">
                                                <div class="col">
                                                    <div class="form-group">
                                                        <label for="name">Nombre</label>
                                                        <input type="text" class="form-control" name="name"
                                                            required id="name" aria-describedby="helpId"
                                                            placeholder="Ingrese nombre de plantilla">
                                                        <small id="helpId" class="form-text text-muted">Ej:platilla
                                                            para
                                                            clientes
                                                            tipo empresa</small>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="form-group">
                                                        <label for="name">Condición general</label>
                                                        <select name="conditions[]" class="form-control select2"
                                                            multiple="multiple">
                                                            <option value="{{ null }}">TODAS</option>
                                                            @foreach (config('constants.semaphore') as $condition => $value)
                                                                <option value="{{ $condition }}">{{ $value['name'] }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                @if (!empty($customers))
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="idLubricant"
                                                                class="control-label">Customer</label>
                                                            <select required class="form-control select2 selectCustomer"
                                                                data-input="accountForm" data-component="componentForm"
                                                                required name="customer_id">
                                                                <option value="{{ null }}">TODOS</option>
                                                                @foreach ($customers as $item)
                                                                    <option
                                                                        {{ request()->customer == $item->id ? 'selected ' : ' ' }}
                                                                        value="{{ $item->id }}">{{ $item->company }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                @endif
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="idAccountConsult"
                                                            class="control-label">Account</label>
                                                        <select class="form-control select2 idAccountConsult"
                                                            data-input="unitIdConsult" data-component="componentForm"
                                                            id="accountForm" name="account" required>
                                                            <option value="{{ null }}">TODOS</option>
                                                            @foreach ($accounts as $account)
                                                                <option value="{{ $account->id }}">{{ $account->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="unitIdConsult" class="control-label">Unit ID</label>
                                                        <select class="form-control select2" id="unitIdConsult"
                                                            name="unit_id">
                                                            <option value="{{ null }}">TODOS</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="comConsult" class="control-label">System Type</label>
                                                        <select class="form-control select2" id="systemType"
                                                            name="system_type">
                                                            <option value="{{ null }}">TODOS</option>
                                                            @foreach ($systems as $key => $value)
                                                                <option value="{{ $value->id }}">{{ $value->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="idCategory" class="control-label">Category</label>
                                                        <select class="form-control select2" id="idCategory"
                                                            name="category_id">
                                                            <option value="{{ null }}">TODOS</option>
                                                            @foreach ($categories as $category)
                                                                <option value="{{ $category->id }}">{{ $category->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="componentForm" class="control-label">Component
                                                            Location</label>
                                                        <select class="form-control select2" id="componentForm"
                                                            name="component">
                                                            <option value="{{ null }}">TODOS</option>
                                                            {{-- foreach ($component as $item) --}}
                                                            {{-- endforeach --}}
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="idSOS" class="control-label">SOS</label>
                                                        <select class="form-control select2" id="idSOS"
                                                            name="sos">
                                                            <option value="{{ null }}">TODOS</option>
                                                            <option value="1">SOS</option>
                                                            <option value="0">Estandar</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="idMake" class="control-label">Unit Mark</label>
                                                        <select class="form-control select2 selectMake" id="idMake"
                                                            data-model="idModel" name="make">
                                                            <option value="{{ null }}">TODOS</option>
                                                            @foreach ($make as $item)
                                                                <option value="{{ $item->id }}">{{ $item->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="idModel" class="control-label">Unit Model</label>
                                                        <select class="form-control select2" id="idModel"
                                                            name="model">
                                                            <option value="{{ null }}">TODOS</option>
                                                            @foreach ($model as $item)
                                                                <option value="{{ $item->id }}">{{ $item->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="idFormat" class="control-label">Format</label>
                                                        <select class="form-control select2" id="idFormat"
                                                            name="format">
                                                            <option value="1">Excel</option>
                                                            <option value="2">PDF</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <h4 class="box-title">Asignar reporte</h4>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label for="idSelectCustomers"
                                                                    class="control-label">Usuarios</label>
                                                            </div>
                                                            <div class="col-md-6 text-right">
                                                                <a href="javascript:;" id="idSelectAllCustomers"
                                                                    data-select="false">
                                                                    <small><i class="fa fa-square-o"
                                                                            aria-hidden="true"></i> Select
                                                                        all</small>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <select class="form-control select2 idSelectUsers"
                                                            id="idSelectCustomers" name="users[]" multiple="multiple">
                                                            @foreach ($recievers as $item)
                                                                <option value="{{ $item->id }}">
                                                                    {{ $item->name . ' ' . $item->last_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="idSelectEmail" class="control-label">E-mail</label>
                                                    </div>
                                                    <div class="col-md-6 text-right">
                                                        <a href="javascript:;" id="idSelectEmail" data-select="false">
                                                            <small><i class="fa fa-square-o" aria-hidden="true"></i>
                                                                Select
                                                                all</small>
                                                        </a>
                                                    </div>
                                                </div>
                                                <select class="form-control emailSelected" id="idSelectEmails"
                                                    multiple="multiple" name="email[]">
                                                    @foreach ($emails as $item)
                                                        <option value="{{ $item->email }}">{{ $item->email }}</option>
                                                    @endforeach
                                                </select>

                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="">Frecuencia de envio</label>
                                                        <select class="form-control select2" name="type_frecuency"
                                                            id="typeFrecuency" required>
                                                            <option value="1">Diario</option>
                                                            <option value="2">Semanal</option>
                                                            {{-- <option value="3">Mensual</option> --}}
                                                        </select>
                                                        <small id="helpId" class="form-text text-muted">Si escoge
                                                            mensual por favor
                                                            evitar escoger dias como 31 ya que todos los meses no cuentan
                                                            con 31 dias en
                                                            dado se tendra en cuenta los meses que tengan dicha cantidad de
                                                            dias</small>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 col-frecuency-wm" style="display:none;">
                                                    <div class="form-group">
                                                        <label for="">Dia de la semana</label>
                                                        <div id="idSpecificFrequencyTime">
                                                            <input class="form-control" name="frecuency-wm"
                                                                id="frecuency-wm" type="time">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-frecuency">
                                                    <div class="form-group">
                                                        <label for="">Frecuencia especifica</label>
                                                        <div id="idSpecificFrequency">
                                                            <input class="form-control" name="frecuency" id="frecuency"
                                                                type="time">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col">
                                                    <button type="submit" name="button"
                                                        class="btn  btn_admin btn-block" value="pdf">
                                                        <i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    @include('system.administrator.templates.modals.modals-layout')

@endsection

@section('js')
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
       $(function () {
            var tableData = $('#customTable').DataTable({
                processing: true,
                searching: true,
                info: true,
                ordering: true,
                pageLength: 10,
                ajax: {
                    type: 'POST',
                    url : "{{route('templates.templateData')}}",
                    data : function(d){
                        d.name = $("#name").val();
                        d.type_frecuency = $("#type_frecuency").val();
                        d.execution = $("#execution").val();
                        d.create_at = $("#create_at").val();
                        d.state = $("#state").val();

                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                },

                columns: [
                    { data: 'name', name: 'name' },
                    { data: 'type_frecuency', name: 'type_frecuency' },
                    { data: 'execution', name: 'execution' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'state', name: 'state' }
                ],
                columnDefs: [
                    { targets: '_all', className: 'text-center' }
                ]
            });

            $('#filterForm').on('submit', function(e){
                e.preventDefault();
                tableData.ajax.reload();
            });

            $('#btnClear').on('click', function(e){
                e.preventDefault();
                $('#filterForm')[0].reset();
                tableData.ajax.reload();
            });

            $('#idBtnFilter').on('click', function () {
                $("#idContentFilter").slideToggle("slow");
            });

            tableData.ajax.reload();
        });
    </script>


    <script>
        $(document).ready(function() {
            $('.emailSelected').select2({
                tags: true
            });
        })

        $('#btn_asign_template').on('click', function(e) {
            if ($('.idSelectUsers').val() == "" && $('#idSelectEmails').val() == "") {
                e.preventDefault();
                alert("Selecciona un usuario o un email para continuar");
            }
        })
    </script>
    <script type="text/javascript">
        $('.formatSelect').change(function() {
            $('#' + $(this).attr('data-input')).val($(this).val())
        })

        function buscarTemplate(id) {
            $('.list-group').children().not(`li[data-template='${id}']`).hide();
            $('.list-group').children(`li[data-template='${id}']`).show();
        }

        function mostrarTodos() {
            $('.list-group').children().show();
        }
        $('#searchTemplate').change(function() {
            if ($(this).val() == -1) {
                mostrarTodos()
            } else {
                buscarTemplate($(this).val())
            }
        })

        $(function() {
            /*=====================================*/
            $('.idSampleDateTaken').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });


            $('.idSampleDateReceived').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('.idSampleDateTaken').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                    'MM/DD/YYYY'));
            });

            $('.idSampleDateTaken').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            /*=====================================*/


            $('.idSampleDateReceived').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                    'MM/DD/YYYY'));
            });

            $('.idSampleDateReceived').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            $('body').on('change', '.selectAccount', function() {
                var value = $(this).val();

                $("#unitId").empty();
                $("#unitId").append('<option value="">TODOS</option>');

                $.ajax({
                    type: 'POST',
                    url: '/options/unitId',
                    data: {
                        "id": value
                    },
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $(".content_loading").fadeIn("slow");
                    },
                    success: function(response) {
                        $(".content_loading").fadeOut("slow");

                        $.each(response, function(index, dataUnit) {
                            $("#unitId").append('<option value="' + dataUnit.id + '">' +
                                dataUnit.unit_id + '</option>');
                        });
                    },
                    error: function(xhr) {
                        $(".content_loading").fadeOut("slow");
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                });
            });
        });

        $('body').on('change', '.selectCustomer', function() {
            var value = $(this).val();

            let select = $(this).attr('data-input');
            $('#' + $(this).attr('data-input')).empty();
            $('#' + $(this).attr('data-input')).append('<option value="">TODOS</option>'); //Account

            let selectComp = $(this).attr('data-component');
            $('#' + $(this).attr('data-component')).empty();
            $('#' + $(this).attr('data-component')).append('<option value="">TODOS</option>'); //Component

            $.ajax({
                type: 'POST',
                url: '/options/customers/all',
                data: {
                    "id": value
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");

                    $.each(response.data.accounts, function(index, account) {
                        $('#' + select).append('<option value="' + account.id + '">' + account
                            .name + '</option>');
                    });

                    $.each(response.data.components, function(index, component) {
                        $('#' + selectComp).append('<option value="' + component.id + '">' +
                            component.name + '</option>');
                    });
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        });

        $('body').on('change', '.selectMake', function() {
            var value = $(this).val();

            let slModel = $(this).attr('data-model');
            $('#' + $(this).attr('data-model')).empty();
            $('#' + $(this).attr('data-model')).append('<option value="">TODOS</option>'); //model

            $.ajax({
                type: 'POST',
                url: '/options/model',
                data: {
                    "id": value
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");

                    $.each(response, function(index, model) {
                        $('#' + slModel).append('<option value="' + model.id + '">' + model
                            .name + '</option>');
                    });
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        });


        $(".btnSampleDateTaken").on("click", function() {
            $("#" + $(this).attr("data-input")).val('');
        });

        $(".btnSampleDateReceived").on("click", function() {
            $("#" + $(this).attr("data-input")).val('');
        });

        $('#filtro').click(() => {
            $("#idContentFilter").slideToggle("slow");
        });

        function openValidate(id, code) {
            swal({
                title: "Estás seguro?",
                text: "El template " + code + " sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteTemplate(id);
            });
        }

        function deleteTemplate(id) {
            var urlPath = urlHost + "/administrator/templates/" + id;
            $.ajax({
                type: 'DELETE',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                },
                success: function(response) {
                    if (response.code == 200) {
                        swal({
                            title: "Eliminado!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            location.reload();
                        });
                    } else if (response.code == 400) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>
    <script type="text/javascript">
        $('#idSelectAllCustomers').on("click", function(e) {
            var lengthV = $('#idSelectCustomers > option').length;
            if (lengthV > 0) {
                var select = $(this).data("select");
                if (!select) {
                    //False
                    $("#idSelectCustomers > option").prop("selected", true);
                    $("#idSelectCustomers").trigger("change");
                    $(this).data("select", true);
                    $(this).html(
                        '<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>'
                    );
                } else {
                    //True
                    $("#idSelectCustomers > option").prop("selected", false);
                    $("#idSelectCustomers").trigger("change");
                    $(this).data("select", false);
                    $(this).html(
                        '<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>'
                    );
                }
            }
        });

        $('#idSelectCustomers').on('select2:select', function(e) {
            var lengthOption = $('#idSelectCustomers > option').length;
            var lengthSelected = $('#idSelectCustomers > option:selected').length;
            if (parseInt(lengthOption) == parseInt(lengthSelected)) {
                $('#idSelectAllCustomers').data("select", true);
                $('#idSelectAllCustomers').html(
                    '<small class="text-right"><i class="fa fa-square" aria-hidden="true"></i> Deselect all</small>'
                );
            }
        });

        $('#idSelectCustomers').on('select2:unselect', function(e) {
            $('#idSelectAllCustomers').data("select", false);
            $('#idSelectAllCustomers').html(
                '<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>'
            );
        });

        //------------------------------------------------------------------------//


        $(function() {
            $('body').on('change', '#idSelectTemplate', function() {
                var idTemplate = $(this).val();

                let input = $(this).attr('data-customer');
                $('#' + input).empty().trigger("change");
                $('#idSelectAllCustomers').data("select", false);
                $('#idSelectAllCustomers').html(
                    '<small class="text-right"><i class="fa fa-square-o" aria-hidden="true"></i> Select all</small>'
                );

                $.ajax({
                    type: 'POST',
                    url: '/administrator/templates/customers',
                    data: {
                        "id": idTemplate
                    },
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $(".content_loading").fadeIn("slow");
                    },
                    success: function(response) {
                        $(".content_loading").fadeOut("slow");

                        if (response != "") {
                            $.each(response.get_customers, function(index, getUser) {
                                $("#" + input).append('<option value="' + getUser.id +
                                    '">' + getUser.name + ' ' + getUser.last_name +
                                    '</option>');
                            });
                            $('#' + input).trigger("change");
                        }
                    },
                    error: function(xhr) {
                        $(".content_loading").fadeOut("slow");
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                });
            });

            $('body').on('change', '.idAccountConsult', function() {
                var value = $(this).val();
                let input = $(this).attr('data-input')
                let dataComponent = $(this).attr('data-component');
                $('#' + input).empty();
                $('#' + dataComponent).empty();
                $("#" + input).append('<option value="">TODOS</option>');
                $("#" + dataComponent).append('<option value="">TODOS</option>');

                $.ajax({
                    type: 'POST',
                    url: '/options/unitId',
                    data: {
                        "id": value
                    },
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $(".content_loading").fadeIn("slow");
                    },
                    success: function(response) {
                        $(".content_loading").fadeOut("slow");

                        $.each(response.equipments, function(index, dataUnit) {
                            $("#" + input).append('<option value="' + dataUnit.id +
                                '">' + dataUnit.unit_id + '</option>');
                        });
                        $.each(response.components, function(index, c) {
                            $("#" + dataComponent).append('<option value="' + c
                                .component_id + '">' + c.components.name +
                                '</option>');
                        });
                    },
                    error: function(xhr) {
                        $(".content_loading").fadeOut("slow");
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                });
            });
        });
        $('body').on('change', '#typeFrecuencyModal', function() {
            //   Frecuency Modal
            let id = $(this).attr('data-id');
            $('#idSpecificFrequencyTimeModal' + id).empty();
            let colFreModal = '.col-frecuency-modal-' + id;
            let colFreModalW = '.col-frecuency-w-modal-' + id;
            let colFreModalM = '.col-frecuency-m-modal-' + id;
            switch ($(this).val()) {
                case "1":
                    $(colFreModal).removeClass('col-md-3');
                    $(colFreModal).addClass('col-md-6');
                    $(colFreModalW).hide();
                    $(colFreModalM).hide();
                    $(colFreModal).show();
                    $('#idFormatModal' + id + ' option[value=2]').unwrap();
                    break;
                case "2":
                    $(colFreModal).removeClass('col-md-6');
                    $(colFreModal).addClass('col-md-3');
                    $(colFreModalM).hide();
                    $(colFreModalW).show();
                    $('#idFormatModal' + id + ' option[value=2]').wrap('<span/>');
                    break;
                case "3":
                    $(colFreModal).removeClass('col-md-6');
                    $(colFreModal).addClass('col-md-3');
                    $(colFreModalW).hide();
                    $(colFreModalM).show();
                    $('#idFormatModal' + id + ' option[value=2]').wrap('<span/>');
                    break;
                default:
                    break;
            }
        })
        $('#typeFrecuency').change(function() {
            $('#idSpecificFrequencyTime').empty();
            switch ($(this).val()) {
                case "1":
                    // $('#idSpecificFrequency').append('<input class="form-control" name="frecuency" id="frecuency" type="time">');
                    $('.col-frecuency').removeClass('col-md-3');
                    $('.col-frecuency').addClass('col-md-6');
                    $('.col-frecuency-wm').hide();
                    $('#idFormat option[value=2]').show();
                    $('#idFormat option[value=2]').unwrap();

                    break;
                case "2":
                    $('.col-frecuency').removeClass('col-md-6');
                    $('.col-frecuency').addClass('col-md-3');
                    $('.col-frecuency-wm label').text('Dia de la semana');
                    $('.col-frecuency-wm').show();
                    $('#idFormat option[value=2]').wrap('<span/>');
                    $('#idSpecificFrequencyTime').append(
                        '<select class="form-control" name="frecuency_w" id="frecuency"></select>');

                    var newState =
                        '<option value="6">Domingo</option><option value="0">Lunes</option><option value="1">Martes</option>' +
                        '<option value="2">Miércoles</option><option value="3">Jueves</option><option value="4">Viernes</option><option value="5">Sábado</option>';

                    $("#frecuency").select2().append(newState);
                    break;
                case "3":
                    var today = new Date();
                    var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

                    $('.col-frecuency').removeClass('col-md-6');
                    $('.col-frecuency').addClass('col-md-3');
                    $('.col-frecuency-wm').show();
                    $('.col-frecuency-wm label').text('Fecha mensual');
                    $('#idFormat option[value=2]').wrap('<span/>');
                    $('#idSpecificFrequencyTime').append(
                        '<input class="form-control" name="frecuency_m" id="frecuency-wm" type="date" min="' +
                        date + '">');
                    break;
                default:
                    break;
            }


        })

        function exportInfo() {
            $("#idModalExport").modal();
        }

        function swatDelete(id, code) {
            swal({
                title: "Estás seguro?",
                text: "El template en el usuario " + code + " sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteUser(id);
            });
        }

        function deleteUser(user) {
            var urlPath = "{{ route('administrator.templates.deleteUser') }}";
            console.log(urlPath);

            $.ajax({
                type: 'post',
                url: urlPath,
                data: {
                    "user": user,
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                },
                success: function(response) {
                    if (response.code == 200) {
                        swal({
                            title: "Eliminado!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            location.reload();
                        });
                    } else if (response.code == 400) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        $('.btn-filterTemplate').click(function() {
            let frecuency = $(this).attr('data-id');
            if (frecuency == 0) {
                $('.list-templates').show();
                return 0;
            }
            $('.list-templates').hide();
            $('li[data-frecuency=' + frecuency + ']').show();
        })
    </script>
@endsection