@extends('adminlte::page')

@section('title', 'Exportar 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 exportar las tablas a un archivo para backups.</h4>
            <p>Ayuda a facilitar el translado de datos de una base de datos a otra</p>
        </div>
        <form action="{{ Route('exportingTable') }}" method="POST" id="data-prepared" class="mt-3">
            @csrf
            <div class="form-group" id="step1">
                <p><span class="text-bold">Paso 1: </span>Selecciona la tabla a exportar</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>
                </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>Estas son las columnas que se importaran</p>
                <div style="overflow-x: auto;" id="columnsTable">
                    <ul class="list-group list-group-horizontal" id="tableColumns">
                    </ul>
                </div>
            </div>
            <div class="form-group" id="step3" style="display: none;">
                <p><span class="text-bold">Paso 3: </span>Elije el tipo de archivo donde se exportaran tus datos</p>
                <label for="typeSelected">Selecciona archivo</label>
                <select name="typeSelected" id="typeSelected" class="form-control" required>
                    <option value="" selected disabled>*Selecciona un tipo de archivo*</option>
                    <option value="csv">CSV</option>
                    <option value="json">JSON</option>
                    <option value="sql">SQL</option>
                </select>
                @if ($errors->has('typeSelected'))
                    <span class="text-danger">{{ $errors->first('typeSelected') }}</span>
                @endif
            </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 "Descargar
                    datos"</p>
                <div class="row">
                    <input type="checkbox" name="onlyDraft" id="option" class="form-check"><label for="option">Exportar solo borradores (aplica solo a productos)</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">Descargar datos</button>
            </div>
        </form>
    </div>
@endsection

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