@extends('adminlte::page')

@section('title', 'Importar tablas')

@section('content_header')
    <h1>Dashboard<span class="text-bold"> (Beta)</span></h1>
@endsection

@section('content')
    <div class="container">
        <div id="intro">
            <h4>Esta es una herramienta para agregar de manera mas sencilla datos antiguos</h4>
            <p><span class="text-bold">Nota: </span>Es necesario comentar que la herramienta necesita un numero de columnas
                especificadas al subir el archivo por cada tabla para que el proceso funcione</p>
        </div>
        <form action="{{ Route('importingTable') }}" method="post" id="data-prepared" class="mt-3"
            enctype="multipart/form-data">
            @csrf
            <div class="form-group" id="step1">
                <p><span class="text-bold">Paso 1: </span> Selecciona a que tabla quieres ingresarle los datos</p>
                <label for="tableSelected">Selecciona la tabla</label>
                <select name="tableSelected" id="tableSelected" class="form-control" required>
                    <option value="" selected disabled>*Selecciona una tabla*</option>
                    <option value="iam_brands">Marcas</option>
                    <option value="iam_categories">Categorias</option>
                    <option value="iam_products">Productos</option>
                    <option value="iam_services_categories">Categorias en servicios</option>
                </select>
                @if ($errors->has('tableSelected'))
                    <span class="text-danger">{{ $errors->first('tableSelected') }}</span>
                @endif
            </div>
            <div class="form-group" id="step2" style="display: none;">
                <p><span class="text-bold">Paso 2: </span>Ingresa el archivo para subir los datos (Las
                    columnas deben estar en la primera fila)</p>
                <label for="fileData">Ingresa el archivo de los datos</label>
                <input type="file" name="fileData" id="fileData" class="form-control" accept=".csv,.json" required>
                <small>Por ahora solo se admiten archivos tipo CSV, aunque tambien json para marcas se acepta</small>
                @if ($errors->has('fileData'))
                    <span class="text-danger">{{ $errors->first('fileData') }}</span>
                @endif
            </div>
            <div class="form-group" id="step3" style="display: none;">
                <p><span class="text-bold">Paso 3: </span>Asegurate que el nombre
                    sea igual que con el campo, de lo contrario la herramienta no funcionara correctamente</p>
                <div class="row">
                    <div class="col">
                        <p>Columnas del archivo</p>
                        <ul id="csvData"></ul>
                    </div>
                    <div class="col">
                        <p>Columnas de la tabla</p>
                        <ul id="tableData"></ul>
                        <div id="showTableData"></div>
                    </div>
                </div>
            </div>
            <div class="form-group" id="step4" style="display: none;">
                <p><span class="text-bold">Paso 4:</span> Selecciona opcionalmente alguna opcion y presiona en "procesar
                    datos"</p>
                <div class="row">
                    <input type="checkbox" name="option" id="option" class="form-check"><label for="option">Ni idea de
                        que meter</label>
                    <input type="checkbox" name="option2" id="option2" class="form-check"><label for="option2">Lo mismo
                        pero en otra funcion</label>
                </div>

                <button type="submit" class="btn btn-success">Procesar datos</button>
            </div>
        </form>
    </div>
@endsection

@section('js')
    @vite('resources/js/importData.js')
@endsection