@extends('Templates.PlantillaFull', ['PaginaTitulo' => 'Comercios', 'PaginaUrl' => '/comercios/abrir', 'Padre' => '1'])


@section('Contenido')
    <x-table>


        @slot('titulo')
            <i class="fas fa-toggle-off" style="font-size: 20px"></i>&nbsp;&nbsp;&nbsp;<h1 class="d-inline-block p-0"
                style="margin: -2px 0px -1px 5px;">Apertura de comercios</h1>
        @endslot

        @slot('idTabla', 'TableBody')

        {{-- @slot('filtros', [[0, 'Comercio']]) --}}

        @slot('leftElements')
            {{-- <select id="SUCU_ID" class="form-control"
                onchange="MakeRequestData('{{ route('abrirComercios.buscar') }}', '#TableBody', 'POST', 2, '','', true, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/0', 'SUCU_ID/' + $('#SUCU_ID').val()])">
                @foreach ($sucursales as $item)
                    <option value="{{ $item->SUCU_ID }}"
                        @if (session('User')->PERF_ID == '00001' && session('User')->SUCU_ID == $item->SUCU_ID)
                        selected
                        @endif
                    >{{ $item->SUCU_NOMBRE }}</option>
                @endforeach
            </select> --}}

            <div class="d-flex">
                <select id="horaAbre" class="form-control" style="margin-right: 5px"
                    onchange="MakeRequestData('{{ route('abrirComercios.buscar') }}', '#TableBody', 'POST', 2, '','', true, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/0', 'horaAbre/' + this.value, 'horaCierre/'+$('#horaCierre').val(), 'abreCierraHoy/'+$('#abreCierraHoy').val(), 'sucuIdApertura/'+$('#sucuIdApertura').val()])">
                    <option value="" disabled selected>H. Apertura</option>
                    @foreach ($horasApertura as $item)
                        <option value="{{ $item->RESH_APERTURA }}">
                            {{ DateTime::createFromFormat('H:i:s', $item->RESH_APERTURA)->format('h:i A') }}</option>
                    @endforeach
                    <option value="0" selected>TODOS</option>
                </select>

                <select id="horaCierre" class="form-control"
                    onchange="MakeRequestData('{{ route('abrirComercios.buscar') }}', '#TableBody', 'POST', 2, '','', true, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/0', 'horaCierre/' + this.value, 'horaAbre/'+$('#horaAbre').val(), 'abreCierraHoy/'+$('#abreCierraHoy').val(), 'sucuIdApertura/'+$('#sucuIdApertura').val()])">
                    <option value="" disabled selected>H. Cierre</option>
                    @foreach ($horasCierre as $item)
                        <option value="{{ $item->RESH_CIERRE }}">
                            {{ DateTime::createFromFormat('H:i:s', $item->RESH_CIERRE)->format('h:i A') }}</option>
                    @endforeach
                    <option value="0" selected>TODOS</option>
                </select>

                <select id="abreCierraHoy" class="form-control" style="margin-left: 5px"
                    onchange="MakeRequestData('{{ route('abrirComercios.buscar') }}', '#TableBody', 'POST', 2, '','', true, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/0', 'horaCierre/' + $('#horaCierre').val(), 'horaAbre/'+$('#horaAbre').val(), 'abreCierraHoy/' + this.value, 'sucuIdApertura/'+$('#sucuIdApertura').val() ])">
                    <option value="1" selected>Abren hoy</option>
                    <option value="0">Cierran hoy</option>
                    <option value="2" title="Abren con restricciones">Abren Restr.</option>
                    <option value="-1">Todos</option>
                </select>
            </div>

        @endslot

        @slot('rightElements')
            <div class="d-flex">
                <button class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top"
                    title="Cerrar comercios filtrados"
                    onclick="abrirCerrarComercios('{{ route('abrirComercios.cerrarTodos') }}', 'cerrar')">
                    <i class="fas fa-door-closed"></i>&nbsp;
                    Cerrar
                </button>
                <button class="btn btn-success" style="margin-left: 7px;" data-bs-toggle="tooltip" data-bs-placement="top"
                    title="Abrir comercios filtrados"
                    onclick="abrirCerrarComercios('{{ route('abrirComercios.abrirTodos') }}', 'abrir')">
                    <i class="fas fa-door-open"></i>&nbsp;
                    Abrir
                </button>
            </div>
        @endslot

        @slot('accionBuscar')
            onkeyup="if(event.keyCode == 13) MakeRequestData('{{ route('abrirComercios.buscar') }}', '#TableBody', 'POST', 2,
            '','', true, false, false, ['Palabra/' + $(this).val(), 'Filtro/0', 'horaCierre/' +$('#horaCierre').val(), 'horaAbre/'+$('#horaAbre').val(), 'abreCierraHoy/'+$('#abreCierraHoy').val(), 'sucuIdApertura/'+$('#sucuIdApertura').val()])"
        @endslot

        @slot('btnAgregar')
        <div style="width: 300px"><select multiple="multiple" name="sucuIdApertura[]" id="sucuIdApertura" class="form-control">
            @foreach ($sucursales as $item)
                <option @if (in_array($item->SUCU_ID, explode(',', session('sucuIdApertura')))) selected @endif value="{{ $item->SUCU_ID }}">
                    {{ $item->SUCU_NOMBRE }}</option>
            @endforeach
        </select></div>
        @endslot


        {{-- @slot('alert')
            <x-alert-banner text="* Se hicieron algunos cambios, si desea filtrar los comercios que abren en una determinada hora sin importar su hora de cierre, en 'H. Cierre' seleccione la opción 'TODOS'" color="green"/>
        @endslot --}}

        @slot('header')
            <th>ID</th>
            <th>Comercio</th>
            <th>Municipio</th>
            <th>Apertura <br> ({{ nombreDia(date('N')) }})</th>
            <th>Cierre <br> ({{ nombreDia(date('N')) }})</th>
            <th>Abre o cierra <br> los {{ nombreDia(date('N')) }}</th>
            <th style="font-weight:800;">Cerrar / abrir</th>
            <th>Horarios</th>
        @endslot

        @slot('body')
            @include('aperturar-comercio.data')
        @endslot

    </x-table>
@endsection

@section('scripts')
    <script>
        'sucuIdApertura/'+$('#sucuIdApertura').val()
        function abrirCerrarComercios(ruta, abrirCerrar) {
            if ($('#horaAbre').val() == null || $('#horaCierre').val() == null) {
                Swal.fire({
                    icon: 'error',
                    title: 'Debe filtrar los comercios primero',
                    text: 'Si desea cerrar o abrir TODOS los comercios, seleccione la opción "TODOS", la encontrará al final de ambas listas."'
                });
                return;
            }
            confirmar2('¿Está seguro de ' + abrirCerrar + ' los comercios con: \n horario apertura: '+($('#horaAbre').val()==0?'CUALQUIER HORARIO':$('#horaAbre').val())+', \n horario cierre: '+($('#horaCierre').val()==0?'CUALQUIER HORARIO':$('#horaCierre').val())+'?', 'Aceptar', () => MakeRequestData(
                ruta + '?horaAbre=' + $('#horaAbre').val() + '&horaCierre=' + $('#horaCierre').val() +
                '&abreCierraHoy=' + $('#abreCierraHoy').val()+'&sucuIdApertura=' + $('#sucuIdApertura').val(), '#restaurante-0', 'GET', 1, '', '', true, true));
        }

        $('#sucuIdApertura').select2();
    </script>
@endsection