@extends('layouts.app', ['page' => __('Administración de Estimaciones'), 'pageSlug' => 'estimates', 'section' => 'estimates'])

@push('css')
    <style>
        .info-label {
            font-size: 1.2rem;
            color: #000000;
            font-weight: 600;
            margin-right: 10px;
        }

        .info-value {
            font-size: 1rem;
            color: #333;
            font-weight: 400;
        }

        p {
            margin-bottom: 10px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            background-color: #6f4e37; /* Café oscuro */
            color: #fff; /* Texto blanco para contraste */
            padding: 10px;
            text-align: center;
            vertical-align: middle;
        }

        .table td {
            padding: 10px;
            border: 1px solid #ddd; /* Borde gris claro para celdas */
            text-align: center;
            vertical-align: middle;
        }

        .table-bordered {
            border: 1px solid #ddd; /* Borde gris claro para la tabla */
        }

        .select2-container--default .select2-selection--single {
            width: 95% !important; /* Asegúrate de que el select2 ocupe el ancho completo del contenedor */
        }

        .is-invalid {
            border-color: red !important;
        }

        .custom-radio .custom-control-label::before {
            background-color: #cbcfd7;
        }

        .custom-radio .custom-control-label::after {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23ffffff'/%3E%3C/svg%3E");
        }


    </style>
@endpush

@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-8">
                                <h3 class="mb-0">{{ __('Administración de Estimaciones') }}</h3>
                            </div>
                            <div class="col-4 text-right" style="margin-bottom: 20px;">
                                @if ($estimate->status !== 'winned')
                                    <form action="{{ route('estimates.complete', $estimate) }}" method="POST" id="form-complete">
                                        @csrf
                                        <input type="hidden" name="customer" id="customer-hidden" value="">
                                        <input type="hidden" name="unit" id="unit-hidden" value="">
                                        @can('ganar_cotizacion')
                                            <button type="submit" id="btn-complete" class="btn btn-gradient mt-3" style="padding:5px 15px;float: right;margin-top: 4px !important;margin-left: 10px;border-radius: 0.2857rem;">
                                                Ganada
                                            </button>
                                        @endcan
                                    </form>
                                @endif
                                <a href="{{ route('estimates.index') }}" class="btn btn-sm btn-primary btn-gradient">{{ __('Regresar a listado') }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('estimates.update',$estimate) }}" autocomplete="off">
                            @csrf
                            @method('PUT')

                            <input type="hidden" name="total_down_payment" value="{{ old('total_down_payment', $estimate->total_down_payment ?? '') }}">
                            <input type="hidden" name="monthly_down_payment_amount" value="{{ old('monthly_down_payment_amount', $estimate->monthly_down_payment_amount ?? '') }}">
                            <input type="hidden" name="down_payment_installments" value="{{ old('down_payment_installments', $estimate->down_payment_installments ?? '') }}">
                            <input type="hidden" name="down_payment_percentage" value="{{ old('down_payment_percentage', $estimate->down_payment_percentage ?? '') }}">
                            <input type="hidden" name="total_partial_payments" value="{{ old('total_partial_payments', $estimate->total_partial_payments ?? '') }}">
                            <input type="hidden" name="monthly_partial_payments_amount" value="{{ old('monthly_partial_payments_amount', $estimate->monthly_partial_payments_amount ?? '') }}">
                            <input type="hidden" name="partial_payments_installments" value="{{ old('partial_payments_installments', $estimate->partial_payments_installments ?? '') }}">
                            <input type="hidden" name="partial_payments_percentage" value="{{ old('partial_payments_percentage', $estimate->partial_payments_percentage ?? '') }}">
                            <input type="hidden" name="settlement_amount" value="{{ old('settlement_amount', $estimate->settlement_amount ?? '') }}">
                            <input type="hidden" name="settlement_amount_percentage" value="{{ old('settlement_amount_percentage', $estimate->settlement_amount_percentage ?? '') }}">
                            <input type="hidden" name="list_price" value="{{ old('list_price', $estimate->list_price ?? '') }}">
                            <input type="hidden" name="origin" value="{{ old('origin', $estimate->origin ?? '') }}">
                            <input type="hidden" name="status" value="{{ old('status', $estimate->status ?? '') }}">

                            <h6 class="heading-small text-muted mb-4">{{ __('Información de la Estimación') }}</h6>
                            <div class="pl-lg-4">
                                <div class="row" id="type-radio-btn">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-control-label">{{ __('Seleccionar Tipo') }}</label>
                                            <div class="d-flex justify-content-start">
                                                <div class="custom-control custom-radio mr-3">
                                                    <input type="radio" id="radio-prospect" name="type" value="prospect" class="custom-control-input" {{ !is_null($estimate->prospect_id) ? 'checked' : '' }} >
                                                    <label class="custom-control-label" for="radio-prospect">{{ __('Prospecto') }}</label>
                                                </div>
                                                <div class="custom-control custom-radio mr-3">
                                                    <input type="radio" id="radio-client" name="type" value="client" class="custom-control-input" {{ !is_null($estimate->customer_id) ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="radio-client">{{ __('Cliente') }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <div class="row">
                                    <!-- Prospect -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="prospect-select">{{ __('Prospecto') }}</label>
                                            <select id="prospect-select" name="prospect_id" class="form-control">
                                                <option value="" disabled selected>{{ __('Seleccione un Prospecto') }}</option>
                                                @foreach ($prospects as $id => $name)
                                                    <option value="{{ $id }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <!-- Customers -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="customer-select">{{ __('Cliente') }}</label>
                                            <select id="customer-select" name="prospect_id" class="form-control">
                                                <option value="" disabled selected>{{ __('Seleccione un Cliente') }}</option>
                                                @foreach ($customers as $id => $name)
                                                    <option value="{{ $id }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="development-select">{{ __('Desarrollo') }}</label>
                                            <select id="development-select" name="development_id" class="form-control">
                                                <option value="" disabled selected>{{ __('Seleccione un Desarrollo') }}</option>
                                                @foreach ($developments as $id => $name)
                                                    <option value="{{ $id }}">{{ $name }}</option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>
                                    <!-- TIPOLOGIA -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="typology-select">{{ __('Tipologia') }}</label>
                                            <select id="typology-select" name="typology_id" class="form-control" disabled>
                                                <option value="" disabled selected>{{ __('Seleccione una Tipologia') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="unit-select">{{ __('Departamento') }}</label>
                                            <select id="unit-select" name="unit_id" class="form-control" disabled>
                                                <option value="" disabled selected>{{ __('Seleccione un Departamento') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="payment-plans-select">{{ __('Plan financiero') }}</label>
                                            <select id="payment-plans-select" name="payment_plan_id" class="form-control" disabled>
                                                <option value="" disabled selected>{{ __('Seleccione un Plan de Pago') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <hr>
                                <div class="row justify-content-center">
                                    <h2>Cotizacion</h2>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <h3 class="text-center" id="label-information">Datos generales</h3>
                                        <p><span class="info-label">Cliente:</span> <span id="prospect-name" class="info-value"></span></p>
                                        <p><span class="info-label">Correo:</span> <span id="prospect-email" class="info-value"></span></p>
                                        <p><span class="info-label">Celular:</span> <span id="prospect-phone" class="info-value"></span></p>
                                        <br/>
                                        <p><span class="info-label">Desarrollo:</span> <span class="info-value" id="housedevelopment"></span></p>
                                        <p><span class="info-label">Departamento:</span> <span class="info-value" id="unit"></span></p>
                                        <p><span class="info-label">Tipologia:</span> <span class="info-value" id="typology"></span></p>
                                        <p><span class="info-label">Área interior:</span> <span class="info-value" id="constructionmeters"></span></p>
                                        <p><span class="info-label">Área exterior:</span> <span class="info-value" id="metersoffreearea"></span></p>
                                        <p><span class="info-label">Nivel:</span> <span class="info-value" id="levels"></span></p>
                                    </div>
                                    <div class="col-md-6">
                                        <h3 class="text-center">Condiciones</h3>
                                        <p><span class="info-label">Precio de lista:</span> <span id="unit-price" class="info-value"></span></p>
                                        <p><span class="info-label">Plan financiero:</span> <span id="payment-plan" class="info-value"></span></p>
                                        <p><span class="info-label">Descuento:</span> <span id="discount-price" class="info-value"></span></p>
                                        <p><span class="info-label">Precio final:</span> <span id="list-price" class="info-value"></span></p>
                                        <p><span class="info-label">Fecha de Entrega:</span> <span id="development-delivery-date" class="info-value"></span></p>
                                        <p><span class="info-label">Fecha de Expiración:</span> <span id="development-expiration-date" class="info-value"> {{ $estimate->formatted_expiration_date }} </span></p>
                                        <p style="display:none;"><span class="info-label">Pago 1 Enganche:</span> <span id="advance-price" class="info-value"></span></p>


                                        <hr>
                                        <div class="form-group">
                                            <label class="form-control-label" for="monthly-down-payment-select">{{ __('Pago 1 Enganche') }}</label>
                                            <input type="number" name="monthly-down-payment-select" id="monthly-down-payment-select" class="form-control form-control-alternative{{ $errors->has('monthly-down-payment-select') ? ' is-invalid' : '' }}" placeholder="{{ __('Meses para pagar el enganche') }}" value="{{ old('monthly-down-payment-select') }}" readonly autofocus min="0" step="1">
                                            <span id="monthly-down-payment-error" class="error-message" style="display:none; color:red;">{{ __('Por favor selecciona una opción válida') }}</span>

                                        </div>

                                        <div class="form-group{{ $errors->has('partial_payments_percentage') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-partial-payments-percentage">{{ __('Pago 2 durante la obra') }}</label>
                                            <input type="number" name="partial_payments_percentage" id="input-partial-payments-percentage" class="form-control form-control-alternative{{ $errors->has('partial_payments_percentage') ? ' is-invalid' : '' }}" placeholder="{{ __('Porcentaje') }}" value="{{ old('partial_payments_percentage') }}" readonly required autofocus min="0" max="100" step="1">
                                            @include('alerts.feedback', ['field' => 'partial_payments_percentage'])
                                            <span id="partial-payment-percentage-error" class="error-message" style="display:none; color:red;">{{ __('Ingresa un porcentage valido') }}</span>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-control-label" for="monthly-partial-payments-select">{{ __('Mensualidades') }}</label>
                                            <input type="number" name="monthly-partial-payments-select" id="monthly-partial-payments-select" class="form-control form-control-alternative{{ $errors->has('monthly-partial-payments-select') ? ' is-invalid' : '' }}" placeholder="{{ __('Meses para pagos parciales') }}" value="{{ old('monthly-partial-payments-select') }}" required autofocus min="0" step="1" disabled>
                                            <span id="monthly-partial-payment-error" class="error-message" style="display:none; color:red;">{{ __('Por favor selecciona una opción válida') }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="row justify-content-center">
                                    <button type="button" id="calculate-estimation" class="btn btn-gradient" disabled> Calcular </button>
                                </div>

                                <hr>

                                <div class="row justify-content-center" id="table-estimation-results" style="display: none;">
                                    <h4>CONDICIONES</h4>
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Concepto</th>
                                                <th>Monto($)(MXN)</th>
                                                <th>Porcentaje</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Precio de Lista</td>
                                                <td><span id="calculatelistPrice-tb"></span></td>
                                                <td> - </td>
                                            </tr>
                                            <tr>
                                                <td>Descuento</td>
                                                <td><span id="calculateDiscountPrice-tb"></span></td>
                                                <td><span id="calculateDiscountPercentage-tb"></span></td>
                                            </tr>
                                            <tr>
                                                <td>Precio Final</td>
                                                <td><span id="calculateFinalPrice-tb"></span></td>
                                                <td> - </td>
                                            </tr>
                                            <tr>
                                                <td>Pago 1 Enganche</td>
                                                <td><span id="advance-price-tb"></span></td>
                                                <td><span id="advance-percentage-tb"></span></td>
                                                <td style="display:none;"><span id="advance-installments-tb"></span></td>
                                                <td style="display:none;"><span id="advance-partial-amount-tb"></span></td>
                                            </tr>
                                            <tr>
                                                <td>Pago 2 Durante la Obra</td>
                                                <td><span id="partial-payments-price-tb"></span></td>
                                                <td><span id="partial-payments-percentage-tb"></span></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>Mensualidades</td>
                                                <td><span id="partial-payments-amount-tb"></span></td>
                                                <td><span id="partial-payments-installments-tb"></span></td>
                                            </tr>
                                            <tr>
                                                <td>Pago 3 Liquidación</td>
                                                <td><span id="settlement-price-tb"></span></td>
                                                <td><span id="settlement-percentage-tb"></span></td>
                                                <td style="display:none;">1 mes</td>
                                                <td style="display:none;"><span id="settlement-price-second-tb"></span></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>


                                <hr>

                            </div>
                            @if($estimate->status != 'winned')
                                <div class="row justify-content-center">
                                    <button type="submit" id="btn-save" class="btn btn-gradient mt-3" disabled>Guardar</button>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="customerInfoModal" tabindex="-1" aria-labelledby="customerInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="customerInfoForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="customerInfoModalLabel">Información Requerida</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                                <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="close_date" class="form-label">Fecha de Cierre</label>
                            <input type="date" class="form-control" id="close_date" name="close_date" required>
                        </div>
                        <div class="mb-3">
                            <label for="birthdate" class="form-label">Fecha de Nacimiento</label>
                            <input type="date" class="form-control" id="birthdate" name="birthdate">
                        </div>
                        <div class="mb-3">
                            <label for="gender" class="form-label">Género</label>
                            <select class="form-select" id="gender" name="gender" style="height: 30px; width: 100%;" required>
                                <option value="" selected>Seleccione un genero</option>
                                <option value="Masculino">Masculino</option>
                                <option value="Femenino">Femenino</option>
                                <option value="Otro">Otro</option>
                            </select>
                        </div>


                        @php
			    if(!is_null($estimate->customer_id) && !is_null($estimate->customer))
				$phoneNumber =  $estimate->customer->phone;
			    else if(!is_null($estimate->prospect_id) && !is_null($estimate->prospect))
				$phoneNumber = $estimate->prospect->phonenumber;
			    else
				$phoneNumber = 'N/A';
                        @endphp

                        <div class="mb-3">
                            <label for="phone" class="form-label">Teléfono</label>
                            <input type="text" class="form-control" id="phone" value="{{ $phoneNumber }}" name="phone" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-gradient" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary btn-gradient" id="saveCustomerInfoButton">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="close-date-modal" tabindex="-1" aria-labelledby="close-date-modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="close-date-form">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="close-date-modalLabel">Información Requerida</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                                <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="close_date" class="form-label">Fecha de Cierre</label>
                            <input type="date" class="form-control" id="close_date_customer" name="close_date" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-gradient" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary btn-gradient" id="saveCloseDateButton">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


@endsection

@push('js')
    <script>
        $(document).ready(function() {
            let listPrice       = 0;
            let advanceAmount   = 0;
            let discountAmount  = 0;
            let deliveryDate    = '';
            let currentDate     = new Date();
            let monthsAvailable = 0;
            let discountPercentage;

            //Hidden Inputs
            const hiddenTotalDownPayment                = document.querySelector('input[name="total_down_payment"]');
            const hiddenMonthlyDownPaymentAmount        = document.querySelector('input[name="monthly_down_payment_amount"]');
            const hiddenDownPaymentInstallments         = document.querySelector('input[name="down_payment_installments"]');
            const hiddenDownPaymentPercentage           = document.querySelector('input[name="down_payment_percentage"]');
            const hiddenTotalPartialPayments            = document.querySelector('input[name="total_partial_payments"]');
            const hiddenMonthlyPartialPaymentsAmount    = document.querySelector('input[name="monthly_partial_payments_amount"]');
            const hiddenPartialPaymentsInstallments     = document.querySelector('input[name="partial_payments_installments"]');
            const hiddenPartialPaymentsPercentage       = document.querySelector('input[name="partial_payments_percentage"]');
            const hiddenSettlementAmount                = document.querySelector('input[name="settlement_amount"]');
            const hiddenSettlementAmountPercentage      = document.querySelector('input[name="settlement_amount_percentage"]');
            const hiddenListPrice                       = document.querySelector('input[name="list_price"]');
            const hiddenOrigin                          = document.querySelector('input[name="origin"]');
            const hiddenStatus                          = document.querySelector('input[name="status"]');

            //Elements of view
            const listPriceEl           = document.getElementById('list-price');
            const paymentPlan           = document.getElementById('payment-plan');
            const unitPrice             = document.getElementById('unit-price');
            const prospectName          = document.getElementById('prospect-name');
            const prospectEmail         = document.getElementById('prospect-email');
            const prospectPhone         = document.getElementById('prospect-phone');
            const advanceAmountEl       = document.getElementById('advance-price');
            const discountAmountEl      = document.getElementById('discount-price');
            const deliveryDateEl        = document.getElementById('development-delivery-date');
            const downPaymentSelect     = document.getElementById('monthly-down-payment-select');
            const partialPaymentsSelect = document.getElementById('monthly-partial-payments-select');
            const partialPaymentsPerEl  = document.getElementById('input-partial-payments-percentage');
            const btnCalculate          = document.getElementById('calculate-estimation');
            const btnSave               = document.getElementById('btn-save');

            //TABLE ELEMENTS
            const calculatelistPrice     = document.getElementById('calculatelistPrice-tb');
            const calculateDiscountPrice = document.getElementById('calculateDiscountPrice-tb');
            const calculateDiscountPercentage = document.getElementById('calculateDiscountPercentage-tb');
            const calculateFinalPrice    = document.getElementById('calculateFinalPrice-tb');

            const advancePercentage     = document.getElementById('advance-percentage-tb');
            const advancePrice          = document.getElementById('advance-price-tb');
            const advancePartialAmount  = document.getElementById('advance-partial-amount-tb');
            const advanceInstallments   = document.getElementById('advance-installments-tb');

            const partialPaymentsPercentage     = document.getElementById('partial-payments-percentage-tb');
            const partialPaymentsPrice          = document.getElementById('partial-payments-price-tb');
            const partialPaymentsAmount         = document.getElementById('partial-payments-amount-tb');
            const partialPaymentsInstallmentsEl = document.getElementById('partial-payments-installments-tb');

            const settlementPercentage  = document.getElementById('settlement-percentage-tb');
            const settlementSecondPrice = document.getElementById('settlement-price-second-tb');
            const settlementPrice       = document.getElementById('settlement-price-tb');


            initializeSelect2('#prospect-select', 'Seleccione un Prospecto');
            initializeSelect2('#customer-select', 'Seleccione un Cliente');
            initializeSelect2('#typology-select', 'Seleccione una Tipologia', true);
            initializeSelect2('#unit-select', 'Seleccione un Departamento', true);
            initializeSelect2('#development-select', 'Seleccione un Desarrollo');
            initializeSelect2('#payment-plans-select', 'Seleccione un Plan de Pago', true);

            $('#prospect-select').on('change', function() {
                const prospectId = $(this).val();
                if (prospectId) {
                    fetchProspectInfo(prospectId);
                }
            });

            $('#customer-select').on('change', function() {
                const customerId = $(this).val();
                if (customerId) {
                    fetchCustomerInfo(customerId);
                }
            });

            $('#development-select').on('change', function() {
                resetSelect('#unit-select', 'Seleccione un Departamento');
                resetSelect('#typology-select', 'Seleccione una Tipologia');
                resetSelect('#payment-plans-select', 'Seleccione un Plan de Pago');

                resetSpan('#unit');
                resetSpan('#typology');
                resetSpan('#constructionmeters');
                resetSpan('#metersoffreearea');
                resetSpan('#levels');

                const developmentId = $(this).val();
                if (developmentId) {
                    developmentData = getDeliveryDate(developmentId);
                    fetchTypologies(developmentId);
                    fetchPaymentPlans(developmentId);

                    // Mostrar nombre del desarrollo
                    const developmentText = $('#development-select option:selected').text();
                    $('#housedevelopment').text(developmentText);
                }

            });

            $('#typology-select').on('change', function() {
                resetSelect('#unit-select', 'Seleccione un Departamento');
                resetSpan('#levels');

                const typologyId = $(this).val();
                if (typologyId) {
                    fetchUnits(typologyId);

                    // Mostrar nombre de la tipologia
                    const typologyText = $('#typology-select option:selected').text();
                    $('#typology').text(typologyText);

                    $.ajax({
                        url: "{{ route('estimate.typologies.data', ['typologyId' => ':typologyId']) }}".replace(':typologyId', typologyId),
                        type: 'GET',
                        success: function(response) {
                            if (response.construction_meters) {
                                $('#constructionmeters').text(response.construction_meters + ' m²');
                            }
                            if (response.meters_of_free_area) {
                                $('#metersoffreearea').text(response.meters_of_free_area + ' m²');
                            }
                        },
                        error: function() {
                            $('#constructionmeters').text('Error al obtener datos');
                        }
                    });
                }

                document.getElementById('typology-select').disabled = true;
            });

            $('#unit-select').on('change', async function() {
                const unitId = $(this).val();
                if (unitId) {
                    try {
                        await fetchUnitDetails(unitId);
                        calculateRates();
                    } catch (error) {
                        console.error("Error al obtener detalles del Departamento:", error);
                    }

                    // Mostrar nombre de la unidad
                    const unitText = $('#unit-select option:selected').text();
                    $('#unit').text(unitText);

                    $.ajax({
                        url: "{{ route('estimate.units.data', ['unitId' => ':unitId']) }}".replace(':unitId', unitId),
                        type: 'GET',
                        success: function(response) {
                            if (response.levels) {
                                $('#levels').text(response.levels + ' m²');

                                if (response.has_own_measurement) {
                                    $('#constructionmeters').text(response.construction_meters + ' m²');
                                    $('#metersoffreearea').text(response.meters_of_free_area + ' m²');
                                }

                            }else {
                                $('#levels').text('N/A');
                            }
                        },
                        error: function() {
                            $('#levels').text('Error al obtener datos');
                        }
                    });
                } else {
                    console.log("No se logró obtener la información del Departamento");
                }

                document.getElementById('unit-select').disabled = true;
            });

            $('#payment-plans-select').on('change', function() {
                    calculateRates();

                    paymentPlan.innerHTML = $('#payment-plans-select option:selected').text();

                    btnCalculate.disabled = false;

                    document.getElementById('payment-plans-select').disabled = true;
            });

            function initializeSelect2(selector, placeholder, disabled = false) {
                $(selector).select2({
                    placeholder: placeholder,
                    allowClear: true,
                    disabled: disabled
                });
            }

            function resetSelect(selector, placeholder) {
                $(selector).empty().append(`<option value="" disabled selected>${placeholder}</option>`).prop('disabled', true);
            }

            function resetSpan(selector) {
                $(selector).text('');
            }

            function populateSelect(selector, items, placeholder, disabled = true) {
                const $select = $(selector);
                $select.empty().append(`<option value="" disabled selected>${placeholder}</option>`);
                $.each(items, function(id, name) {
                    $select.append(`<option value="${id}">${name}</option>`);
                });

                if(disabled)
                    $select.prop('disabled', false);
            }

            function fetchTypologies(developmentId) {
                $.ajax({
                    url: "{{ route('typologies.by.house-development') }}",
                    type: 'GET',
                    data: {
                        id: developmentId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function({ typologies }) {
                        populateSelect('#typology-select', typologies, 'Seleccione una Tipologia');

                        $('#typology-select').val('{{ $estimate->unit->typology->id }}').trigger('change');
                    }
                });
            }

            function fetchUnits(typologyId) {
                $.ajax({
                    url: "{{ route('units.by.development') }}",
                    type: 'GET',
                    data: {
                        id: typologyId,
                        source: 'edit',
                        _token: '{{ csrf_token() }}'
                    },
                    success: function({ units }) {
                        populateSelect('#unit-select', units, 'Seleccione un Departamento');

                        const $unitSelect = $('#unit-select');
                        $unitSelect.prop('disabled', false);

                        $select = $('#payment-plans-select');
                        //$select.prop('disabled', false);

                        const unitId = '{{ $estimate->unit_id }}';
                        const unitName = '{{ $estimate->unit->name }}';
                        const estimateStatus = '{{ $estimate->status }}';

                        if ($unitSelect.find(`option[value="${unitId}"]`).length > 0) {
                            $unitSelect.val(unitId).trigger('change');
                        }
                    }
                });
            }

            function fetchProspectInfo(prospectId) {
                $.ajax({
                    url: "{{ route('prospects.get.details') }}",
                    type: 'GET',
                    data: {
                        id: prospectId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function({ data }) {
                        prospectName.innerHTML = data.name;
                        prospectEmail.innerHTML = data.email;
                        prospectPhone.innerHTML = data.phonenumber;
                    }
                });
            }

            function fetchCustomerInfo(customerId) {
                $.ajax({
                    url: "{{ route('customers.get.details') }}",
                    type: 'GET',
                    data: {
                        id: customerId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function({ data }) {
                        $("#label-information").html('Datos generales');
                        prospectName.innerHTML = data.name;
                        prospectEmail.innerHTML = data.email;
                        prospectPhone.innerHTML = data.phone;
                        $('#prospect-select').val(null).trigger('change');
                    }
                });
            }

            const getDeliveryDate = async (id) => {
                try {
                    const deliveryDateRoute = "{{ route('house-developments.get.deliveryDate') }}";

                    const response = await fetch(`${deliveryDateRoute}?id=${id}`, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                    });

                    if (!response.ok) {
                        const errorData = await response.json();
                        console.error('Error:', errorData.message || 'Unknown error');
                        return;
                    }

                    const data = await response.json();

                    if (data.success) {
                        deliveryDateEl.innerHTML = data.data.deliveryHumanDate;

                        const currentDate = new Date();

                        const deliveryDateObj = new Date(data.data.deliveryDate);

                        let monthsDifference = (deliveryDateObj.getFullYear() - currentDate.getFullYear()) * 12;
                        monthsDifference -= currentDate.getMonth();
                        monthsDifference += deliveryDateObj.getMonth();

                        if (monthsDifference < 0) {
                            monthsDifference = 0;
                        }

                        //partialPaymentsSelect.value = monthsDifference;
                    } else {
                        console.error('Error:', data.message || 'Unknown error');
                    }
                } catch (error) {
                    console.error('Fetch Error:', error);
                }
            };


            async function fetchUnitDetails(unitId) {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: "{{ route('units.get-details') }}",
                        type: 'GET',
                        data: {
                            id: unitId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(res) {
                            if (res.data.price) {
                                // Asegúrate de que data.price sea un número
                                const price = Number(res.data.price);
                                if (!isNaN(price)) {
                                    listPrice = price;

                                    // Asegúrate de que unitPrice sea un elemento del DOM
                                    if (unitPrice) {
                                        unitPrice.innerHTML = formatCurrency(price);
                                    } else {
                                        console.error("Elemento unitPrice no encontrado");
                                    }
                                    resolve(res.data); // Resuelve la promesa con los datos
                                } else {
                                    console.error("El precio recibido no es un número válido");
                                    reject("El precio recibido no es un número válido");
                                }
                            } else {
                                console.error("No se recibió el campo price en la respuesta");
                                reject("No se recibió el campo price en la respuesta");
                            }
                        },
                        error: function(error) {
                            console.error("Error en la solicitud AJAX:", error);
                            reject(error); // Rechaza la promesa en caso de error
                        }
                    });
                });
            }

            function fetchPaymentPlans(developmentId) {
                $.ajax({
                    url: "{{ route('payment-plans.by.developmentv2') }}",
                    type: 'GET',
                    data: {
                        id: developmentId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function({ paymentPlans }) {
                        const formattedPlans = {};
                        $.each(paymentPlans, function(id, plan) {
                            formattedPlans[id] = plan;
                        });
                        populateSelect('#payment-plans-select', formattedPlans, 'Seleccione un Plan de Pago',false);
                        $('#payment-plans-select').val('{{ $estimate->payment_plan_id }}').trigger('change');
                    }
                });
            }

            function formatCurrency(amount, locale = 'es-MX', currency = 'MXN') {
                if (isNaN(amount)) {
                    console.error("El valor proporcionado no es un número válido:", amount);
                    return '';
                }
                return new Intl.NumberFormat(locale, {
                    style: 'currency',
                    currency: currency
                }).format(amount);
            }

            function calculateRates()
            {
                const selectedText = $('#payment-plans-select option:selected').text();

                const regex = /Enganche:\s*(\d+\.\d+)%\s*-\s*Mensualidad:\s*(\d+\.\d+)%\s*-\s*Liquidación:\s*(\d+\.\d+)%\s*-\s*Descuento:\s*(\d+\.\d+)%/;
                const matches = regex.exec(selectedText);

                advanceAmount = 0;
                discountAmount = 0;

                if (matches) {

                    hiddenDownPaymentPercentage.value = parseFloat(matches[1]);
                    let downPaymentPercentage = parseFloat(matches[1]);
                    let monthlyPaymentPercentage = parseFloat(matches[2]);
                    let lastPaymentPercentage = parseFloat(matches[3]);
                    discountPercentage = parseFloat(matches[4]);

                    //Set percentage on monthly payments
                    partialPaymentsPerEl.value = monthlyPaymentPercentage;

                    let discount  = (listPrice / 100) * discountPercentage;
                    let newPrice  = listPrice - discount;
                    let advance = (newPrice / 100) * downPaymentPercentage;

                    advanceAmount = advance;
                    discountAmount = discount;

                    advanceAmountEl.innerHTML   = formatCurrency(advance);
                    discountAmountEl.innerHTML  = formatCurrency(discount);

                    listPriceEl.innerHTML       = formatCurrency(newPrice);
                    hiddenListPrice.value       = formatCurrency(newPrice);

                    hiddenTotalDownPayment.value = formatCurrency(advance);
                }
            }

            function fillSelect(selectElement, maxMonths,selectMsg) {
                selectElement.innerHTML = '';

                let option = document.createElement('option');
                option.value = 0;
                option.text = selectMsg;
                selectElement.appendChild(option);

                for (let i = 1; i <= maxMonths; i++) {
                    option = document.createElement('option');
                    option.value = i;
                    option.text = i;
                    selectElement.appendChild(option);
                }

                selectElement.disabled = false;
            }

            function getMonthsBetweenDates(startDate, endDate) {
                const start = new Date(startDate); // fecha actual
                const end = new Date(endDate); // fecha de entrega

                const yearsDifference = end.getFullYear() - start.getFullYear();
                const monthsDifference = end.getMonth() - start.getMonth();

                const totalMonths = yearsDifference * 12 + monthsDifference;

                return totalMonths - 1;
            }

            btnCalculate.addEventListener('click', function() {

                const tbEstimationResult = document.getElementById('table-estimation-results');

                //Error elements
                const errorDownPaymentSelect                = document.getElementById('monthly-down-payment-error');
                const errorPartialPaymentSelect             = document.getElementById('monthly-partial-payment-error');
                const errorPartialPercentagePaymentSelect   = document.getElementById('partial-payment-percentage-error');

                let finalUnitPrice = listPrice - discountAmount;

                let downPaymentPartialInstallments  = downPaymentSelect.value;
                let partialPaymentsInstallments     = '{{ $estimate->partial_payments_installments }}';
                let partialPaymentPercentage        = partialPaymentsPerEl.value;

                if (downPaymentPartialInstallments === "0") {
                    errorDownPaymentSelect.style.display = 'block';
                    downPaymentSelect.classList.add('is-invalid');
                    return;
                } else {
                    errorDownPaymentSelect.style.display = 'none';
                    downPaymentSelect.classList.remove('is-invalid');
                }

                const selectedText = $('#payment-plans-select option:selected').text();

                const regex = /Enganche:\s*(\d+\.\d+)%\s*-\s*Mensualidad:\s*(\d+\.\d+)%\s*-\s*Liquidación:\s*(\d+\.\d+)%\s*-\s*Descuento:\s*(\d+\.\d+)%/;
                const matches = regex.exec(selectedText);

                const advPartialAmount = advanceAmount / downPaymentPartialInstallments;

                //Precio de lista
                calculatelistPrice.innerHTML            = formatCurrency(listPrice);

                //Descuento
                calculateDiscountPrice.innerHTML        = formatCurrency(discountAmount);
                calculateDiscountPercentage.innerHTML   = `${discountPercentage}%`;;

                //Precio Final
                calculateFinalPrice.innerHTML           = formatCurrency(finalUnitPrice);

                //Enganche
                advancePercentage.innerHTML             = `${parseFloat(matches[1])}%`;
                advancePrice.innerHTML                  = formatCurrency(advanceAmount);
                advancePartialAmount.innerHTML          = formatCurrency(advPartialAmount);
                hiddenMonthlyDownPaymentAmount.value    = formatCurrency(advPartialAmount);
                advanceInstallments.innerHTML           = `${downPaymentPartialInstallments} mes`;
                hiddenDownPaymentInstallments.value     = downPaymentPartialInstallments;

                //Parcialidades
                let partialPaymentTotal                  = (finalUnitPrice / 100) * partialPaymentPercentage;
                let partialPaymentAmount                 = 0;

                if(partialPaymentPercentage != 0) {
                    partialPaymentAmount = partialPaymentTotal / partialPaymentsInstallments;
                }

                partialPaymentsPercentage.innerHTML      = `${partialPaymentPercentage}%`;
                hiddenPartialPaymentsPercentage.value    = partialPaymentPercentage;
                partialPaymentsPrice.innerHTML           = formatCurrency(partialPaymentTotal);
                hiddenTotalPartialPayments.value         = formatCurrency(partialPaymentTotal);
                partialPaymentsAmount.innerHTML          = formatCurrency(partialPaymentAmount);
                hiddenMonthlyPartialPaymentsAmount.value = formatCurrency(partialPaymentAmount);
                partialPaymentsInstallmentsEl.innerHTML  = `${partialPaymentsInstallments} meses`;
                hiddenPartialPaymentsInstallments.value  = partialPaymentsInstallments;

                //Liquidacion
                let settlementPercent                   = `${parseFloat(matches[3])}`;

                if(settlementPercent == 0)
                    settlementPercent = (100.00 - parseFloat(matches[1])) - parseFloat(matches[2]);

                let settlementTotal                     = (finalUnitPrice / 100) * settlementPercent;
                settlementPercentage.innerHTML          = `${settlementPercent}%`;
                hiddenSettlementAmountPercentage.value  = settlementPercent;
                settlementPrice.innerHTML               = formatCurrency(settlementTotal);
                hiddenSettlementAmount.value            = formatCurrency(settlementTotal);
                settlementSecondPrice.innerHTML         = formatCurrency(settlementTotal);

                tbEstimationResult.style.display = 'block';
            });

            prepareEditInformation();
        });

        function prepareEditInformation()
        {
            const unitStatus        = '{{ $estimate->unit->unit_stage_id }}';
            const unitName          = '{{ $estimate->unit->name }}';
            const btnCalculate      = document.getElementById('calculate-estimation');
            const estimateId        = '{{ $estimate->id }}';
            const customer_id       = '{{ $estimate->customer_id }}';
            const prospect_id       = '{{ $estimate->prospect_id }}';

            document.getElementById('customer-select').disabled = true;
            document.getElementById('prospect-select').disabled = true;
            document.getElementById('development-select').disabled = true;

            if(document.getElementById('btn-save'))
                document.getElementById('btn-save').style.display = 'none';

            btnCalculate.style.display = 'none';

	    if(document.getElementById('type-radio-btn'))
            	document.getElementById('type-radio-btn').style.display = 'none';


            if(unitStatus != 1) {
		if(document.getElementById('btn-complete'))
                    document.getElementById('btn-complete').style.display = 'none';

		if('{{ $estimate->status }}' != 'winned') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Departamento no disponible',
                        text: `El Departamento [ ${unitName} ] seleccionada ya no está disponible.`,
                        confirmButtonText: 'Entendido'
                    });
    		}
            }

            if(estimateId) {
                $('#prospect-select').val(prospect_id).trigger('change');
                $('#customer-select').val(customer_id).trigger('change');
                $("#monthly-down-payment-select").val('{{ $estimate->down_payment_installments }}');
                $("#input-partial-payments-percentage").val('{{ $estimate->partial_payments_percentage }}');
                $("#monthly-partial-payments-select").val('{{ $estimate->partial_payments_installments }}');
                @if ($estimate->paymentPlan) $('#development-select').val('{{ $estimate->paymentPlan->houseDevelopment->id }}').trigger('change'); @endif

                setTimeout(function() {
                    btnCalculate.click();
                }, 1000);

            }

            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            const formComplete = document.getElementById('form-complete');
            const customerSelect = document.getElementById('customer-select');
            const unitSelect = document.getElementById('unit-select');
            const customerHidden = document.getElementById('customer-hidden');
            const unitHidden = document.getElementById('unit-hidden');

            // Elementos del modal
            const customerInfoModal = new bootstrap.Modal(document.getElementById('customerInfoModal'));

            const closeDateModal = new bootstrap.Modal(document.getElementById('close-date-modal'));

            const closeDate = document.getElementById('close_date');
            const closeDateCustomer = document.getElementById('close_date_customer');
            const birthdateInput = document.getElementById('birthdate');
            const genderInput = document.getElementById('gender');
            const phoneInput = document.getElementById('phone');
            const saveCustomerInfoButton = document.getElementById('saveCustomerInfoButton');
            const saveCloseDateButton = document.getElementById('saveCloseDateButton');

            if(formComplete) {
                formComplete.addEventListener('submit', function (e) {
                    // Asigna los valores s(eleccionados a los campos ocultos
                    customerHidden.value = customerSelect.value;
                    unitHidden.value = unitSelect.value;

                    // Validar si falta seleccionar cliente o unidad
                    if (!customerHidden.value) {
                        e.preventDefault();
                        customerInfoModal.show(); // Mostrar el modal
                    } else {
                        e.preventDefault();
                        closeDateModal.show(); // Mostrar el modal
                    }
                });
            }


            // Manejar el botón "Guardar" del modal

            saveCloseDateButton.addEventListener('click', function () {
                if (!closeDateCustomer.value) {
                    alert('Por favor complete todos los campos.');
                    return;
                }

                const closeDateHidden = document.createElement('input');
                closeDateHidden.type = 'hidden';
                closeDateHidden.name = 'close_date';
                closeDateHidden.value = closeDateCustomer.value;

                formComplete.appendChild(closeDateHidden);

                closeDateModal.hide();
                formComplete.submit();
            });

            saveCustomerInfoButton.addEventListener('click', function () {
                // Validar los campos del modal
                if (!genderInput.value || !phoneInput.value || !closeDate.value) {
                    alert('Por favor complete todos los campos.');
                    return;
                }

                // Crear inputs ocultos para los datos del modal

                const closeDateHidden = document.createElement('input');
                closeDateHidden.type = 'hidden';
                closeDateHidden.name = 'close_date';
                closeDateHidden.value = closeDate.value;

                const birthdateHidden = document.createElement('input');
                birthdateHidden.type = 'hidden';
                birthdateHidden.name = 'birthdate';
                birthdateHidden.value = birthdateInput.value;

                const genderHidden = document.createElement('input');
                genderHidden.type = 'hidden';
                genderHidden.name = 'gender';
                genderHidden.value = genderInput.value;

                const phoneHidden = document.createElement('input');
                phoneHidden.type = 'hidden';
                phoneHidden.name = 'phone';
                phoneHidden.value = phoneInput.value;

                // Agregar los campos ocultos al formulario
                formComplete.appendChild(closeDateHidden);
                formComplete.appendChild(birthdateHidden);
                formComplete.appendChild(genderHidden);
                formComplete.appendChild(phoneHidden);

                // Cerrar el modal y enviar el formulario
                customerInfoModal.hide();
                formComplete.submit();
            });

            const radios = document.querySelectorAll('input[name="type"]');

            radios.forEach(radio => {
                radio.addEventListener('change', function () {
                    if (this.checked) {
                        const selectedValue = this.value;

                        if (selectedValue === 'prospect') {
                            document.getElementById('customer-select').disabled = true;
                            document.getElementById('prospect-select').disabled = false;
                            $('#customer-select').val(null).trigger('change');
                        } else if (selectedValue === 'client') {
                            document.getElementById('prospect-select').disabled = true;
                            document.getElementById('customer-select').disabled = false;
                            $('#prospect-select').val(null).trigger('change');
                        }
                    }
                });
            });

            $('#customerInfoModal').on('hidden.bs.modal', function () {
                $('#btn-complete').prop('disabled', false);
            });

            $('#close-date-modal').on('hidden.bs.modal', function () {
                $('#btn-complete').prop('disabled', false);
            });
        });




    </script>
@endpush