@extends('layout.backoffice')
@section('content')
<div class="row">

    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h3 class="card-title">Canales de Integración</h3>
            </div>
            <div class="card-body">
                <div id="logs">
                    <p id="buttons" style="display: none;">
                        <a class="btn btn-default btn-sm" data-toggle="collapse" href="#logsContainer" aria-expanded="false" aria-controls="logsContainer">
                            Mostrar logs
                        </a>
                        <button id="logs-download" class="btn btn-sm btn-default">Descargar</button>
                        <button id="logs-qty" class="btn btn-sm btn-danger" disabled></button>

                    </p>
                    <div id="logsContainer" class="collapse" data-parent="#logs">
                        <div id="logsContent" class="card card-body">

                        </div>
                    </div>
                </div>

                <table id="canal-integracion-tabla" class="table table-sm">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Nombre</th>
                            <th>Lista Precio</th>
                            <th>Es automatico</th>
                            <th>Lista Precio Auto</th>
                            <th>Auto Inicio</th>
                            <th>Auto Fin</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                                            </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    Gestion de Canales de Integración<b>{{ isset($editar) ? ': '.$editar['nombre'] : '' }}</b>
                </h3>
            </div>
            <div class="card-body">
                <form autocomplete="off" id="canal_integracion_form">
                    <div class="row">
                        <div class="col-md-3 col-4 form-group">
                            <label for="codigo">Codigo</label>
                            <input value="" name="codigo" class="form-control form-control form-control-border border-width-2 system_validador_vacio" />
                        </div>
                        <div class="col-md-3 col-4 form-group">
                            <label for="nombre">Nombre</label>
                            <input value="" name="nombre" class="form-control form-control form-control-border border-width-2 system_validador_vacio" />
                        </div>
                        <div class="col-md-3 col-4 form-group">
                            <label for="id_lista_precio">Lista Precio</label>
                            <select id="id_lista_precio" name="id_lista_precio" class="form-control form-control form-control-border border-width-2 system_validador_vacio">
                                <option value=""></option>
                                                            </select>
                        </div>
                        <div class="col-md-3 col-4 form-group">
                            <label for="metodo_integracion">Metodo Integración</label>
                            <select id="metodo_integracion" name="metodo_integracion" class="form-control form-control form-control-border border-width-2 system_validador_vacio">
                                <option value=""></option>
                                                            </select>
                        </div>

                        <div class="col-md-3 col-4 form-group">
                            <label for="es_automatico">Es Automatico</label>
                            <select id="es_automatico" name="es_automatico" class="form-control form-control form-control-border border-width-2 system_validador_vacio">
                                <option value=""></option>
                                <option value="0">No</option>
                                <option value="1">Si</option>
                                <option value="2">Recursivo</option>
                            </select>
                        </div>

                        <div class="col-md-3 col-4 form-group canal_auto">
                            <label for="id_lista_precio_auto">Lista Precio Auto</label>
                            <select multiple id="id_lista_precio_auto" name="id_lista_precio_auto[]" class="canal_auto form-control form-control-border border-width-2">
                                <option value=""></option>
                                                            </select>
                        </div>


                        <div class="col-md-3 col-4 form-group canal_auto">
                            <label for="auto_inicio">Auto inicio</label>
                            <input value="{{ $editar['auto_inicio'] ?? '' }}" type="text" name="recurrencia[auto_inicio]" class="datepicker canal_auto form-control form-control form-control-border border-width-2">
                        </div>

                        <div class="col-md-3 col-4 form-group canal_auto">
                            <label for="auto_inicio">Auto Fin</label>
                            <input value="{{ $editar['auto_fin'] ?? '' }}" type="text" name="recurrencia[auto_fin]" class="datepicker canal_auto form-control form-control form-control-border border-width-2">
                        </div>

                        <div class="col-md-3 col-4 form-group canal_recurrencia">
                            <label for="es_recursiva">Dias con horario personalizado</label>
                            <div class="d-flex" style="gap: 2px">
                                <div class="d-flex flex-column">
                                    <label for="recurrencia[lunes][selected]">L</label>
                                    <input class="check-dia" data-dia="L" type="checkbox" name="recurrencia[lunes][selected]">
                                </div>
                                <div class="d-flex flex-column">
                                    <label for="recurrencia[martes][selected]">M</label>
                                    <input class="check-dia" data-dia="M" type="checkbox" name="recurrencia[martes][selected]">
                                </div>
                                <div class="d-flex flex-column">
                                    <label for="recurrencia[miercoles][selected]">W</label>
                                    <input class="check-dia" data-dia="W" type="checkbox" name="recurrencia[miercoles][selected]">
                                </div>
                                <div class="d-flex flex-column">
                                    <label for="recurrencia[jueves][selected]">J</label>
                                    <input class="check-dia" data-dia="J" type="checkbox" name="recurrencia[jueves][selected]">
                                </div>
                                <div class="d-flex flex-column">
                                    <label for="recurrencia[viernes][selected]">V</label>
                                    <input class="check-dia" data-dia="V" type="checkbox" name="recurrencia[viernes][selected]">
                                </div>
                                <div class="d-flex flex-column">
                                    <label for="recurrencia[sabado][selected]">S</label>
                                    <input class="check-dia" data-dia="S" type="checkbox" name="recurrencia[sabado][selected]">
                                </div>
                                <div class="d-flex flex-column">
                                    <label for="recurrencia[domingo][selected]">D</label>
                                    <input class="check-dia" data-dia="D" type="checkbox" name="recurrencia[domingo][selected]">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row canal_recurrencia">
                        <table class="col-md-6 col-lg-4 table table-sm">
                            <thead>
                                <tr>
                                    <th>Día</th>
                                    <th>Hora Inicio</th>
                                    <th>Hora Fin</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-dia="L" class="form-group group-dia" style="display: none;">
                                    <td>
                                        Lunes
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[lunes][auto_inicio]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[lunes][auto_fin]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                </tr>
                                <tr data-dia="M" class="form-group group-dia" style="display: none;">
                                    <td>
                                        Martes
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[martes][auto_inicio]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[martes][auto_fin]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                </tr>
                                <tr data-dia="W" class="form-group group-dia" style="display: none;">
                                    <td>
                                        Miercoles
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[miercoles][auto_inicio]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[miercoles][auto_fin]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                </tr>
                                <tr data-dia="J" class="form-group group-dia" style="display: none;">
                                    <td>
                                        Jueves
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[jueves][auto_inicio]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[jueves][auto_fin]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                </tr>
                                <tr data-dia="V" class="form-group group-dia" style="display: none;">
                                    <td>
                                        Viernes
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[viernes][auto_inicio]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[viernes][auto_fin]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                </tr>
                                <tr data-dia="S" class="form-group group-dia" style="display: none;">
                                    <td>
                                        Sábado
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[sabado][auto_inicio]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[sabado][auto_fin]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                </tr>
                                <tr data-dia="D" class="form-group group-dia" style="display: none;">
                                    <td>
                                        Domingo
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[domingo][auto_inicio]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                    <td>
                                        <input readonly type="text" name="recurrencia[domingo][auto_fin]" class="timep form-control form-control-border border-width-2">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
                <div class="d-flex justify-content-between">
                    <div>
                        <button id="btn-save" idedit="" type="button" class="btn btn-flat btn-sm btn-primary">Guardar</button>
                                            </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var baseUrl = "{{ URL::asset('backoffice/canal_integracion') }}"
    var editar = "{{isset($editar)}}"
    
    $(document).ready(function() {
        jQuery("#id_lista_precio_auto").val(valoresLista);
    })
</script>

<style>
    #canal_auto {
        display: flex;
    }
</style>
@endsection