@extends('layouts.app', ['page' => __('Editar Precio Tipología'), 'pageSlug' => 'tipologies', 'section' => 'settings'])

@section('content')
    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col-xl-12 order-xl-1">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <h3 class="mb-0">{{ __('Editar Precio de Tipología') }} : {{ $typology->name }}</h3>
                            </div>
                            <div class="col-6 text-right">
                              <a href="{{ route('typologies.edit', ['typology' => $typology]) }}" class="btn btn-sm btn-gradient">{{ __('Seguir editando') }} {{ $typology->name }}</a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <form id="typology-price-form" enctype="multipart/form-data" method="post" action="{{ route('typologies.updateTypologyPrice', ['typology' => $typology]) }}" autocomplete="off">
                            @csrf
                            @method('post')

                            <h6 class="heading-small text-muted mb-4">{{ __('Editar Precio de Tipología') }}</h6>
                            <div class="pl-lg-4">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group{{ $errors->has('price') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-price">{{ __('Precio desde') }}</label>
                                            <input type="text" name="price" id="input-price" class="form-control form-control-alternative{{ $errors->has('price') ? ' is-invalid' : '' }}" placeholder="{{ __('Precio') }}" value="{{ number_format(old('price', $typology->price)) }}">
                                            @include('alerts.feedback', ['field' => 'price'])
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div id="units-form" style="display: none;">
                                            <br/>
                                            <h3>Unidades disponibles</h3>
                                            <h4>Por favor, marca la casilla de aquellas unidades disponibles de <span class="bw-card-text-bold">{{ $typology->name }}</span> a las que tambien quieras cambiar el precio.</h4>
                                            <br/>
                                            <table class="table tablesorter text-center">
                                                    <thead class="th-gradient">
                                                        <th class="th-text-color">Unidad</th>
                                                        <th class="th-text-color">Precio desde</th>
                                                        <th class="th-text-color">¿Modificar precio?</th>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($unitsDisponibles as $unitDisponible)
                                                        <tr>
                                                            <td>{{ $unitDisponible->name }}</td>
                                                            <td>${{ number_format($unitDisponible->price, 2)}}</td>
                                                            <td><input type="checkbox" name="units[]" value="{{ $unitDisponible->id }}"> Si</td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>
                                <br/>
                                <div class="text-center"><button type="submit" class="btn btn-sm btn-gradient">{{ __('Guardar') }}</button></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            let inputPrice = document.getElementById('input-price');   
            const originalPrice = "{{ number_format($typology->price) }}";
            let unitsForm = document.getElementById('units-form');

            console.log(originalPrice);
            console.log(inputPrice.value);

            function priceUpdateTypology() {
                if (inputPrice.value !== originalPrice) {
                    unitsForm.style.display = 'block';
                } else {
                    unitsForm.style.display = 'none';
                }
            }

            priceUpdateTypology();
            inputPrice.addEventListener('input', priceUpdateTypology);

            inputPrice.addEventListener("input", function (event) {
                let value = inputPrice.value.replace(/\D/g, ''); // Elimina caracteres no numéricos
                if (value) {
                    value = Number(value).toLocaleString("es-MX"); // Formatea con separadores de miles
                }
                inputPrice.value = value;
            });

            inputPrice.addEventListener("blur", function () {
                let value = inputPrice.value.replace(/\D/g, ''); // Asegura que solo haya números
                if (value) {
                    inputPrice.value = Number(value).toLocaleString("es-MX"); // Reaplica formato
                }
            });
        });
    </script>
@endpush