@extends('/backend-inquiro/header_iv')
@section('main')

<main class="container-fluid mt-5 pt-5">
    <div id="seccion-regenerar-paneles-clientes">
        <div class="row justify-content-center">
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                <h3 class="text-fidelitas text-center">Paneles Clientes</h3>
            </div>
        </div>
        <!-- -->
        <form id="frmRegenerarPaneles">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <!-- -->
            <div class="row justify-content-start my-3">
                <!-- CLIENTES -->
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                    <label for="clientes" class="form-label text-secondary">Clientes</label>
                    <select name="clientes[]" id="clientes" class="form-select" multiple>
                        @foreach($clientes as $cliente)
                            <option value="{{ $cliente->cliente }}">{{ $cliente->nombre_cliente }}</option>
                        @endforeach
                    </select>
                    <small class="text-muted text-secondary">Los clientes elegidos para regenerar</small>
                </div>
                <!-- SERVICIO -->
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                    <label for="servicios" class="form-label text-secondary">Servicio</label>
                    <select name="servicios[]" id="servicios" class="form-select" multiple>
                        <option value="D">Dashboard</option>
                        <option value="P">Panel de Control</option>
                    </select>
                    <small class="text-muted text-secondary">Los servicios a regenerar</small>
                </div>
                <!-- -->
                <div class="col-xl-1 col-lg-1 seccion-config-regenerar-paneles d-none">
                    <label for="paso" class="form-label text-secondary">Paso</label>
                    <select name="paso" id="paso" class="form-select"></select>
                    <small class="text-muted text-secondary">La cantidad de pedidos por tanda de llamadas</small>
                </div>
                <!-- -->
                <!-- <div id="seccion-btn-regenerar-paneles" class="col-xl-3 col-lg-4 col-md-6 col-sm-8 mt-4"> -->
                <div class="col mt-4">
                    <button id="btn-regenerar-paneles" type="submit" class="btn btn-fidelitas-secondary"><i
                            class="bi bi-arrow-clockwise"></i> Siguiente</button>
                    <!-- -->
                    <button id="btn-cancelar-paneles" type="button" class="btn btn-danger d-none"><i
                            class="bi bi-x"></i> Cancelar</button>
                    <button id="btn-confirmar-regeneracion" type="button" class="btn btn-success d-none"><i
                            class="bi bi-arrow-clockwise"></i> Regenerar</button>
                    <!-- -->
                    <button id="btn-finalizar-proceso" type="button" class="btn btn-success d-none"><i
                            class="bi bi-box-arrow-left"></i> Finalizar</button>
                </div>
            </div>
        </form>
        <!-- -->
        <small class="text-muted">Administrador de los servicios que tiene el cliente en formato JSON</h6>
    </div>
    <!-- -->
    <div class="alert alert-danger d-none" id="error-paneles">
        <i class="bi bi-exclamation-triangle-fill"></i> <span id="texto-error"></span>
    </div>
    <!-- Texto informativo post requests -->
    <div class="d-none" id="seccion-mensaje-post-request">
        <div class="row justify-content-center my-3">
            <div class="col-xl-6 col-lg-7 col-md-8 col-sm-9 text-center" id="seccion-fin-regeneracion">
                <h6 class="text-success display-6"><i class="bi bi-check-lg"></i> Proceso de regeneracion Terminado</h6>
                <b id="texto-error-regeneracion" class="d-none">Los pedidos que fallaron pueden ser resolicitados
                    manualmente</b>
            </div>
            <!-- -->
            <div class="col-xl-6 col-lg-7 col-md-8 col-sm-9 text-center" id="seccion-en-regeneracion">
                <h6 class="display-6"><i class="bi bi-alarm"></i> Regenerando Paneles</h6>
            </div>
        </div>
    </div>
    <!-- Tabla de requests -->
    <div class="seccion-config-regenerar-paneles d-none">
        <div class="row justify-content-center my-3">
            <div class="col-xl-6 col-lg-7 col-md-8 col-sm-9">
                <table id="tabla-regenerar-paneles" class="table table-bordered">
                    <thead class="table-header-fidelitas">
                        <tr>
                            <th class="d-none"></th>
                            <th>Cliente</th>
                            <th>Servicio</th>
                            <th>Ultima vez modificado</th>
                            <th class="acciones-fila">Eliminar</th>
                            <th class="regenerar-fila d-none">Regenerar</th>
                            <th class="status-fila d-none">Status</th>
                        </tr>
                    </thead>
                    <tbody id="contenido-tabla-regenerar-paneles"></tbody>
                </table>
            </div>
        </div>
    </div>
</main>

@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/regenerar_paneles.js') }}"></script>
@endsection