@extends('../layouts/partials/header')

@section('content')

    <style>
        table {
            width: 100%; /* Ocupa el 100% del ancho del contenedor */
            border-collapse: collapse; /* Opcional: para eliminar el espacio entre bordes de celdas */
        }
        .img-custom-size {
            width: 444px;
            height: 300px;
            border: 3px solid black; border-radius: 15px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }
        .table td {
            text-align: left;
        }

    </style>

    <div class="container mt-3">
        <br>
        <div class="card text-center">
            <div class="card-header">
                <!-- Nav Tabs -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ session('active_tab', 'tab1') == 'tab1' ? 'active' : '' }}" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Datos Generales</a>
                    </li>
                </ul>
            </div>

            <div class="card-header">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade  {{ session('active_tab', 'tab1') == 'tab1' ? 'show active' : '' }}" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                        <div class="container">
                            <div class="row">
                                    @if(session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <strong>OK! :</strong>{{ session('success') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                    @endif

                                    @if ( $errors->any() )
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ( $errors->all() as $error )
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                            <div class="row">
                                <div class="text-center">
                                    <strong>REGISTRO DE GASTOS</strong><br><br>
                                </div>
                            </div>
                            <div class="row">
                                Los campos marcados con (*) son mandatorios.
                            </div>

                            <div class="row">
                                <br>
                            </div>

                            <div class="row">
                                <form action="{{ route('gastos.update',$data->id) }}" method="POST" id="formCaptura" enctype="multipart/form-data">
                                    @csrf
                                    @method('put')

                                    <div class="row">
                                        <div class="col-md-1 text-start">
                                            <label for="id" style="all: unset;"><strong>Folio: </strong></label>
                                            <input type="text" name="id" class="form-control" value="{{ old('id',$data->id) }}" disabled>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-2 text-start">
                                            <label for="monto" style="all: unset;"><strong>*Monto:</strong></label>
                                            <input type="text" step="0.01" name="monto" class="form-control" value="{{ old('monto',$data->monto) }}" required>
                                        </div>
                                        <div class="col-md-4 text-start">
                                            <label for="cantidad_letra" style="all: unset;"><strong>Cantidad Letra:</strong></label>
                                            <input type="text" name="cantidad_letra" class="form-control" value="{{ old('cantidad_letra',$data->cantidad_letra) }}">
                                        </div>
                                        <div class="col-md-2 text-start">
                                            <label for="tipo_pago" style="all: unset;"><strong>*Tipo de Pago:</strong></label>
                                            <select name="tipo_pago" id="tipo_pago" class="form-control" required>
                                                <option value="" {{ old('tipo_pago') == '' ? 'selected' : '' }}>-</option>
                                                <option value="EFECTIVO" {{ old('tipo_pago',$data->tipo_pago) == 'EFECTIVO' ? 'selected' : '' }}>EFECTIVO</option>
                                                <option value="TRANSFERENCIA" {{ old('tipo_pago',$data->tipo_pago) == 'TRANSFERENCIA' ? 'selected' : '' }}>TRANSFERENCIA</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2 text-start">
                                            <label for="fecha" style="all: unset;"><strong>*Fecha:</strong></label>
                                            <input type="date" name="fecha" class="form-control" value="{{ old('fecha',$data->fecha) }}" required>
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-md-3 text-start">
                                            <label for="solicitante" style="all: unset;"><strong>*Solicitante:</strong></label>
                                            <input type="text" name="solicitante" class="form-control" value="{{ old('solicitante',$data->solicitante) }}" required>
                                        </div>
                                        <div class="col-md-3 text-start">
                                            <label for="proveedor" style="all: unset;"><strong>*Proveedor:</strong></label>
                                            <input type="text" name="proveedor" class="form-control" value="{{ old('proveedor',$data->proveedor) }}" required>
                                        </div>
                                        <div class="col-md-4 text-start">
                                            <label for="autoriza" style="all: unset;"><strong>*Autoriza:</strong></label>
                                            <input type="text" name="autoriza" class="form-control" value="{{ old('autoriza',$data->autoriza) }}" required>
                                        </div>
                                    </div>


                                    <div class="row mt-2">

                                        <div class="col-md-3 text-start">
                                            <label for="concepto" style="all: unset;"><strong>*Concepto:</strong></label>
                                            <input type="text" name="concepto" class="form-control" value="{{ old('concepto',$data->concepto) }}" required>
                                        </div>

                                        <div class="col-md-3 text-start">
                                            <label for="area" style="all: unset;"><strong>*Área:</strong></label>
                                            <select name="area" id="area" class="form-control" required>
                                                <option value="" {{ old('area') == '' ? 'selected' : '' }}>-</option>
                                                <option value="TALLER" {{ old('area',$data->area) == 'TALLER' ? 'selected' : '' }}>TALLER</option>
                                                <option value="PATIO" {{ old('area',$data->area) == 'PATIO' ? 'selected' : '' }}>PATIO</option>
                                                <option value="RH" {{ old('area',$data->area) == 'RH' ? 'selected' : '' }}>RH</option>
                                                <option value="LOGISTICA" {{ old('area',$data->area) == 'LOGISTICA' ? 'selected' : '' }}>LOGISTICA</option>
                                                <option value="AMINISTRACION" {{ old('area',$data->area) == 'AMINISTRACION' ? 'selected' : '' }}>AMINISTRACION</option>
                                                <option value="MONTACARGAS" {{ old('area',$data->area) == 'MONTACARGAS' ? 'selected' : '' }}>MONTACARGAS</option>
                                                <option value="ALAYA" {{ old('area',$data->area) == 'ALAYA' ? 'selected' : '' }}>ALAYA</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2 text-start">
                                            <label for="unidad" style="all: unset;"><strong>Unidad:</strong></label>
                                            <input type="text" name="unidad" class="form-control" value="{{ old('unidad',$data->unidad) }}">
                                        </div>
                                        <div class="col-md-2 text-start">
                                            <label for="factura" style="all: unset;"><strong>Factura:</strong></label>
                                            <input type="text" name="factura" class="form-control" value="{{ old('factura',$data->factura) }}">
                                        </div>
                                    </div>

                                    <div class="row mt-2 text-start">
                                        <div class="col-md-3">
                                            <label for="status" style="all: unset;"><strong>*Status:</strong></label>
                                            <select name="status" id="status" class="form-control" required>
                                                <option value="" {{ old('status') == '' ? 'selected' : '' }}>-</option>
                                                <option value="PAGO PENDIENTE" {{ old('status',$data->status) == 'PAGO PENDIENTE' ? 'selected' : '' }}>PAGO PENDIENTE</option>
                                                <option value="PAGADO" {{ old('status',$data->status) == 'PAGADO' ? 'selected' : '' }}>PAGADO</option>
                                                <option value="NO-AUTORIZADO" {{ old('status',$data->status) == 'NO-AUTORIZADO' ? 'selected' : '' }}>NO-AUTORIZADO</option>
                                                <option value="ANTICIPO" {{ old('status',$data->status) == 'ANTICIPO' ? 'selected' : '' }}>ANTICIPO</option>
                                            </select>

                                        </div>
                                        <div class="col-md-3 text-start">
                                            <label for="empresa" style="all: unset;"><strong>*Empresa:</strong></label>
                                            <select name="empresa" id="empresa" class="form-control" required>
                                                <option value="" {{ old('empresa') == '' ? 'selected' : '' }}>-</option>
                                                <option value="MOPSA" {{ old('empresa',$data->empresa) == 'MOPSA' ? 'selected' : '' }}>MOPSA</option>
                                                <option value="SAGSA" {{ old('empresa',$data->empresa) == 'SAGSA' ? 'selected' : '' }}>SAGSA</option>
                                                <option value="AYALA" {{ old('empresa',$data->empresa) == 'AYALA' ? 'selected' : '' }}>AYALA</option>
                                            </select>
                                        </div>

                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-md-4 text-start">
                                            <label for="fecha" style="all: unset;"><strong>Contenedores/Bookings:</strong></label>
                                            <textarea name="contenedor" class="form-control" rows="3">{{ old('contenedor',$data->contenedor) }}</textarea>
                                        </div>
                                        <div class="col-md-6 text-start">
                                            <label for="descripcion" style="all: unset;"><strong>Descripción:</strong></label>
                                            <textarea name="descripcion" class="form-control" rows="3">{{ old('descripcion',$data->descripcion) }}</textarea>
                                        </div>
                                    </div>



                                    <div class="row mt-2">
                                        <div class="col-md-2 text-start">
                                            <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab',session('active_tab', 'tab1')) }}">
                                            <button type="submit" class="btn btn-primary">Actualizar Gasto</button>
                                        </div>
                                        <div class="col-md-1 text-start">
                                            <a href="{{ route('gastos.generarPDF', $data->id) }}">
                                                <img src="{{ asset('images/icono_pdf.png') }}" alt="Ícono PDF" width="40" height="40">
                                            </a>
                                        </div>
                                        <div class="col-md-9 text-end">
                                            <i>
                                                {{ optional($data->user)->name }}<br>
                                                {{ $data->created_at?->format('Y-m-d H:i') }}
                                            </i>
                                        </div>
                                    </div>
                                </form>
                            </div>



                        </div>
                    </div>


                </div>
            </div>

        </div>



    </div>



    <script>
        document.addEventListener('DOMContentLoaded', function () {
        // Capturar el cambio de pestaña
        const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
        tabs.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function (e) {
                // Guardar el id de la pestaña activa en el input oculto
                document.getElementById('active_tab').value = e.target.getAttribute('href').substring(1);
            });
        });

        // Activar la pestaña correcta al cargar la página
        const activeTab = '{{ old('active_tab',session('active_tab', 'tab1')) }}';
        const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
        if (tabElement) {
            const tabInstance = new bootstrap.Tab(tabElement);
            tabInstance.show();
        }
        });

    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const montoInput = document.querySelector('input[name="monto"]');
            const cantidadLetraInput = document.querySelector('input[name="cantidad_letra"]');

            montoInput.addEventListener('input', function () {
                const valor = parseFloat(this.value.replace(/,/g, ''));
                if (!isNaN(valor)) {
                    cantidadLetraInput.value = numeroALetras(valor);
                } else {
                    cantidadLetraInput.value = '';
                }
            });

            function numeroALetras(num) {
                const unidades = ["", "UNO", "DOS", "TRES", "CUATRO", "CINCO", "SEIS", "SIETE", "OCHO", "NUEVE"];
                const decenas = ["", "", "VEINTE", "TREINTA", "CUARENTA", "CINCUENTA", "SESENTA", "SETENTA", "OCHENTA", "NOVENTA"];
                const especiales = ["DIEZ", "ONCE", "DOCE", "TRECE", "CATORCE", "QUINCE", "DIECISÉIS", "DIECISIETE", "DIECIOCHO", "DIECINUEVE"];
                const centenas = ["", "CIENTO", "DOSCIENTOS", "TRESCIENTOS", "CUATROCIENTOS", "QUINIENTOS", "SEISCIENTOS", "SETECIENTOS", "OCHOCIENTOS", "NOVECIENTOS"];

                function convertir(n) {
                    if (n === 0) return "CERO";
                    if (n === 100) return "CIEN";
                    if (n < 10) return unidades[n];
                    if (n >= 10 && n < 20) return especiales[n - 10];
                    if (n < 100) return decenas[Math.floor(n / 10)] + (n % 10 !== 0 ? " Y " + unidades[n % 10] : "");
                    if (n < 1000) return centenas[Math.floor(n / 100)] + (n % 100 !== 0 ? " " + convertir(n % 100) : "");
                    if (n < 1000000) return convertir(Math.floor(n / 1000)) + " MIL" + (n % 1000 !== 0 ? " " + convertir(n % 1000) : "");
                    return "NÚMERO MUY GRANDE";
                }

                return convertir(Math.floor(num)).trim();
            }
        });
    </script>


@endsection


@extends('../layouts/partials/footer')