@extends('app')

@push('css')
    <style> 
    .container {
        max-width: 1350px !important;
        }
    </style>
@endpush

@section('container')
<h1>Excel Muttator</h1>

@if (session()->has('message'))
    <div class="alert alert-success alert-dismissible fade show" style="display:none;" role="alert">
        {{ session('message') }}
    </div>
@endif

<section class="intro" style="margin-top: 30px;">
    <div class="gradient-custom-2 h-100">
        <div class="mask d-flex align-items-center h-100">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="container mt-5">
                            <form action="{{ route('excel.mutation') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <label for="excelFile">Selecciona un archivo Excel (.xlsx):</label>
                                    <input type="file" class="form-control" name="excelFile" id="excelFile" required>
                                </div> <br><br>
                                <button type="submit" class="btn btn-primary">Subir Archivo</button>
                            </form>
                        </div>
                    </div>
                </div>

                <hr>

                <div class="row mt-5">
                    <h2 class="mb-4">Formulario para generar Funciones para excel</h2>
                    <form action="{{ route('excel.colors.fn') }}" method="post">
                        @csrf
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <input type="text"  name="first_col" placeholder="Ejemplo: C">
                                    <br>
                                    <label for="input1">Columna Inicial:</label>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input type="text"  name="first_row" placeholder="Ejemplo: 5">
                                    <br>
                                    <label for="input1">Primer Fila:</label>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input type="text"  name="last_col" placeholder="Ejemplo: YZ">
                                    <br>
                                    <label for="input1">Ultima Columna:</label>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input type="text"  name="last_row" placeholder="Ejemplo: 265">
                                    <br>
                                    <label for="input1">Ultima Fila:</label>
                                </div>
                            </div>

                        </div>
                        <br>
                        <br>
                        <div class="col">
                            <label for="input1">
                                <span style="color: red;">C</span>
                                <span style="color: orange;">O</span>
                                <span style="color: purple;">L</span>
                                <span style="color: green;">O</span>
                                <span style="color: blue;">R</span>
                                <span style="color: indigo;">:</span>
                            </label>

                            <select name="color" id="select-colors" style="background-color: yellow;" onchange="changeBackgroundColor()">
                                <option value="countYellowCells" style="background-color: yellow;"> Amarillas </option>
                                <option value="countGreenCells" style="background-color: green;"> Verdes </option>
                                <option value="countOrangeCells" style="background-color: orange;"> Naranjas </option>
                            </select>
                        </div>
                        <br>
                        <br>
                        <button type="submit" class="btn btn-primary">Generar TXT</button>
                    </form>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
    <script>
        function changeBackgroundColor() {
            var select = document.getElementById("select-colors");
            var selectedOption = select.options[select.selectedIndex];
            var color = selectedOption.style.backgroundColor;
            select.style.backgroundColor = color;
        }
    </script>
@endpush