@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;">
                                <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.store') }}" autocomplete="off">
                            @csrf

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

                        <h6 class="heading-small text-muted mb-4">{{ __('Información de la Estimación') }}</h6>
                            <div class="pl-lg-4">
                                <div class="row">
                                    <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" 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">
                                                    <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="customer_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 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',1) }}" readonly autofocus min="1" 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;">{{ __('Ingresa la cantidad de meses para diferir las parcialidades') }}</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>
                            <div class="row justify-content-center">
                                <button type="submit" id="btn-save" class="btn btn-gradient mt-3" disabled>Guardar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </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 developmentData = '';
            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);

            $('#customer-select').prop('disabled', true).select2('enable', false);

            $('#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: `/estimate/typologies/${typologyId}`, // Ruta para obtener la información de la tipología
                        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');
                        }
                    });
                }
            });

            $('#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: `/estimate/units/${unitId}`, // Ruta para obtener la información de la tipología
                        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");
                }
            });

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

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

                    btnCalculate.disabled = false;
            });

            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');
                    }
                });
            }

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

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

            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) {
                        console.log(">>DATRA: ", data.data);
                        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 }) {
                        console.log(">>> PAYMENT PLANS: ", paymentPlans);
                        const formattedPlans = {};
                        $.each(paymentPlans, function(id, plan) {
                            formattedPlans[id] = plan;
                        });
                        populateSelect('#payment-plans-select', formattedPlans, 'Seleccione un Plan de Pago',false);
                    }
                });
            }

            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]);

                    console.log("Enganche:", downPaymentPercentage);
                    console.log("Mensualidad:", monthlyPaymentPercentage);
                    console.log("Liquidación:", lastPaymentPercentage);
                    console.log("Descuento:", discountPercentage);

                    //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;
            }

            document.getElementById('calculate-estimation').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     = partialPaymentsSelect.value;
                let partialPaymentPercentage        = partialPaymentsPerEl.value;

                console.log(">>> Parcialidades: ", partialPaymentPercentage);

                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
                    ;
                if(partialPaymentsInstallments <= 0) {
                    partialPaymentsInstallments = 1;
                }

                let 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 - 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';

                hiddenOrigin.value = 'portal';
                hiddenStatus.value = 'pending_assignment';

                btnSave.disabled = false;
            });

            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');
                        }
                    }
                });
            });
        });

    </script>
@endpush