@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = empty($quote->id) ? __('Create new Quote') : __('Edit Quote');
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="quote-form" method="post" enctype="multipart/form-data"
            action="{{ empty($quote->id) ? route('quotes.store') : route('quotes.update', $quote->id) }}">
            <input type="hidden" name="_method" id="hidden-method" value="{{ empty($quote->id) ? 'POST' : 'PATCH' }}">
            <div class="row">
                <div class="col-md-9">
                    <div class="card">
                        <div class="card-body">
                            <div class="alert alert-danger" style="display:none"></div>
                            <div class="alert alert-success" style="display:none"></div>

                            <div class="notes">(*) Datos obligatorios.</div>
                            <div class="form-group">
                                <label for="quote_number">*{{ __('Quote Number') }}</label>
                                <input class="form-control" id="quote_number" name="quote_number"
                                    value="{{ $quote->quote_number ?? $quote_number_init }}">
                                <span id="quote_number-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>

                            <div class="form-group">
                                <label for="subclient_id">*{{ __('Client') }}</label>
                                <div class="row">
                                    <div class="col-11">
                                        <select class="form-control" name="subclient_id" id="subclient_id"
                                            onChange="getContactsAndProjects()">
                                            <option value="">{{ __('-- Select client --') }}</option>
                                            @foreach ($subclients as $subclient)
                                                <option value="{{ $subclient->id }}"
                                                    @if (!empty($quote->id) && $subclient->id == $quote->subclient_id) selected @endif>
                                                    {{ $subclient->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span id="subclient_id-error" class="invalid-feedback" style="font-weight:bold"
                                            role="alert"></span>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-default" onclick="openSubclientModal()"
                                            style="width: 100%;"><i class="fa-solid fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="contact_id">*{{ __('Contacto') }}</label>
                                <div class="row">
                                    <div class="col-11">
                                        <select class="form-control" name="contact_id" id="contact_id">
                                            <option value="">{{ __('-- Select contact --') }}</option>
                                            @foreach ($contacts as $contact)
                                                <option value="{{ $contact->id }}"
                                                    @if (!empty($quote->id) && $contact->id == $quote->contact_id) selected @endif>
                                                    {{ $contact->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span id="contact_id-error" class="invalid-feedback" style="font-weight:bold"
                                            role="alert"></span>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-default" id="addContactButton"
                                            onclick="openContactModal()" style="width: 100%;"
                                            @if (empty($quote->id)) disabled @endif><i
                                                class="fa-solid fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="project_id">*{{ __('Project') }}</label>
                                <div class="row">
                                    <div class="col-11">
                                        <select class="form-control" name="project_id" id="project_id">
                                            <option value="">{{ __('-- Select project --') }}</option>
                                            @foreach ($projects as $project)
                                                <option value="{{ $project->id }}"
                                                    @if (!empty($quote->id) && $project->id == $quote->project_id) selected @endif>
                                                    {{ $project->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span id="project_id-error" class="invalid-feedback" style="font-weight:bold"
                                            role="alert"></span>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-default" id="addProjectButton"
                                            onclick="openProjectModal()" style="width: 100%;"
                                            @if (empty($quote->id)) disabled @endif><i
                                                class="fa-solid fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="currency">*{{ __('Currency') }}</label>
                                <select class="form-control" name="currency" id="currency">
                                    <option value="">{{ __('-- Select currency --') }}</option>
                                    <option value="Pesos" @if (empty($quote->id) || $quote->currency == 'Pesos') selected @endif>
                                        Pesos
                                    </option>
                                    <option value="Dólares" @if (!empty($quote->id) && $quote->currency == 'Dólares') selected @endif>
                                        Dólares
                                    </option>
                                    <option value="Euros" @if (!empty($quote->id) && $quote->currency == 'Euros') selected @endif>
                                        Euros
                                    </option>
                                </select>
                                <span id="currency-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="exchange_rate">*{{ __('Exchange Rate') }}</label>
                                <input class="form-control" id="exchange_rate" name="exchange_rate" type="number"
                                    step="0.01" min="0" value="{{ $quote->exchange_rate ?? '' }}"
                                    @if (empty($quote->id) || $quote->currency == 'Pesos') disabled @endif>
                                <span id="exchange_rate-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="name">*{{ __('Quote Title') }}</label>
                                <input class="form-control" id="title" name="title"
                                    value="{{ $quote->title ?? '' }}">
                                <span id="title-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ __('Delivery time') }}</label>
                                <input class="form-control" id="delivery_time" name="delivery_time"
                                    value="{{ $quote->delivery_time ?? '' }}">
                                <span id="delivery_time-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="description">{{ __('Description') }}</label>
                                <textarea id="description" name="description">{{ empty($quote->id) ? $description : $quote->description }}</textarea>
                                <span id="description-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    @can('consultar cotizaciones')
                        <div class="card">
                            <div class="card-body">
                                @can('crear cotizaciones')
                                    <a href="javascript:openItemModal()" class="btn btn-info">
                                        <i class="fas fa-plus-circle" style="padding-right: 5px;"></i>
                                        {{ __('New Item') }}
                                    </a>
                                @endcan
                                <div class="table-responsive">
                                    <table id="quote-items-table" class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th style="text-align: left">{{ __('Image') }}</th>
                                                <th style="text-align: right">{{ __('Quantity') }}</th>
                                                <th style="text-align: left">{{ __('Description') }}</th>
                                                <th style="text-align: left">{{ __('Unit') }}</th>
                                                <th style="text-align: right">{{ __('Selling Price') }}</th>
                                                <th style="text-align: right">{{ __('Total') }}</th>

                                                <th style="width:100px">{{ __('Actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if ($quote->items->isNotEmpty())
                                                @foreach ($quote->items as $item)
                                                    <tr id="row{{ $loop->index }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][id]"
                                                            value="{{ $item->id }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][key]"
                                                            value="{{ $item->key }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][quantity]"
                                                            value="{{ $item->quantity }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][description]"
                                                            value="{{ $item->description }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][sat_key]"
                                                            value="{{ $item->sat_key }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][unit]"
                                                            value="{{ $item->unit }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][image]"
                                                            value="{{ $item->image }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][price]"
                                                            value="{{ $item->price }}">
                                                        <input type="hidden" name="items[{{ $loop->index }}][amount]"
                                                            value="{{ $item->amount }}">
                                                        <td style="text-align: left">
                                                            @if ($item->image)
                                                                <img src="{{ asset('storage/images/' . $item->image) }}"
                                                                    alt="Service Image"
                                                                    style="width: 80px; height: 80px; object-fit: contain;">
                                                            @endif
                                                        </td>
                                                        <td style="text-align: right">{{ $item->quantity }}</td>
                                                        <td style="text-align: left">{!! urldecode($item->description) !!}</td>
                                                        <td style="text-align: left">{{ $item->unit }}</td>
                                                        <td style="text-align: right">
                                                            ${{ number_format($item->price, 2) }}
                                                        </td>
                                                        <td style="text-align: right">
                                                            ${{ number_format($item->amount, 2) }}
                                                        </td>
                                                        <td style="width:100px">
                                                            @can('editar cotizaciones')
                                                                <button class="btn btn-default btn-sm" type="button"
                                                                    style="margin-left: 5px;"
                                                                    onclick="openItemModal('{{ $loop->index }}')"><i
                                                                        class="far fa-edit"></i></button>
                                                            @endcan
                                                            @can('borrar cotizaciones')
                                                                <button class="btn btn-default btn-sm" type="button"
                                                                    style="margin-left: 5px;"
                                                                    onclick="removeItemRow('{{ $loop->index }}', '{{ addslashes($item->id) }}')">
                                                                    <i class="far fa-trash-alt"></i>
                                                                </button>
                                                            @endcan
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                            <tr id="noitem" style="{{ $quote->items->isEmpty() ? '' : 'display:none;' }}">
                                                <td colspan="11" class="td-noitem">{{ __('No items added') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endcan
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="terms">{{ __('Terms') }}</label>
                                <textarea id="terms" name="terms">{{ $quote->terms ?? $default_terms }}</textarea>
                                <span id="terms-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right panel --}}
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            {{-- controls --}}
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="advance"
                                            {{ !empty($quote->id) && $quote->advance_pct > 0 ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="advance">{{ __('Advance') }}</label>
                                    </div>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="advance_pct" id="advance_pct"
                                            class="form-control form-control-sm text-right"
                                            value="{{ !empty($quote->id) && $quote->advance_pct > 0 ? $quote->advance_pct . '%' : '0%' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="discount"
                                            {{ !empty($quote->id) && $quote->discount_pct > 0 ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="discount">{{ __('Discount') }}</label>
                                    </div>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="discount_pct" id="discount_pct"
                                            class="form-control form-control-sm text-right"
                                            value="{{ !empty($quote->id) && $quote->discount_pct > 0 ? $quote->discount_pct . '%' : '0%' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="iva"
                                            {{ !empty($quote->id) && $quote->iva_pct > 0 ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="iva">{{ __('Tax') }}</label>
                                    </div>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="iva_pct" id="iva_pct"
                                            class="form-control form-control-sm text-right"
                                            value="{{ !empty($quote->id) && $quote->iva_pct > 0 ? $quote->iva_pct . '%' : '16%' }}"
                                            disabled>
                                    </div>
                                </div>
                            </div>
                            <hr class="separator" style="margin: 15px 0;">
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <label for="subtotal" class="mr-auto mb-0">{{ __('Subtotal') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="subtotal" id="subtotal"
                                            class="input-nooutline text-right" readonly
                                            value="${{ number_format($quote->subtotal, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="discount_row">
                                <div class="col d-flex align-items-center">
                                    <label for="discount_amount" class="mr-auto mb-0">{{ __('Discount') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="discount_amount" id="discount_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->discount_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="iva_row">
                                <div class="col d-flex align-items-center">
                                    <label for="iva_amount" class="mr-auto mb-0">{{ __('Tax') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="iva_amount" id="iva_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->iva_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <hr class="separator" style="margin: 15px 0;">
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <label for="total" class="mr-auto mb-0">{{ __('Total') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="total" id="total"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->total, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="advance_row">
                                <div class="col d-flex align-items-center">
                                    <label for="advance_amount" class="mr-auto mb-0">{{ __('Advance') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="advance_amount" id="advance_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($quote->advance_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <br>
                            {{-- buttons --}}
                            @can('editar cotizaciones')
                                <div class="form-group row">
                                    <button onclick="saveAndPreview(event)"
                                        class="btn btn-default w-100">{{ __('Preview') }}</button>
                                </div>
                            @endcan
                            <div class="form-group row">
                                <div class="col-6" style="padding-left: 0px;">
                                    <a href="javascript:loadContent('{{ route('quotes.index') }}')" id="cancel"
                                        name="cancel" class="btn btn-default w-100">{{ __('Cancel') }}</a>
                                </div>
                                <div class="col-6" style="padding-right: 0px;">
                                    <button type="submit" id="saveQuoteButton"
                                        class="btn btn-info w-100 text-end">{{ empty($quote->id) ? __('Create') : __('Save') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
    <!-- Subclient Modal -->
    <div class="modal fade" id="subclientModal" tabindex="-1" role="dialog" aria-labelledby="subclientModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="subclientModalLabel">{{ __('Create Client') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="quote-subclient-form" method="post" action="{{ route('subclients.store') }}">
                    <div class="modal-body" id="subclient">
                        <input type="hidden" id="modal_view" name="modal_view" value="1" />
                        <div class="form-group row">
                            <label for="name" class="col-md-2 col-form-label">*{{ __('Name') }}</label>
                            <div class="col-md-10">
                                <input class="form-control name" id="name" name="name">
                                <span id="name-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_title" class="col-md-2 col-form-label">{{ __('Executive') }}</label>
                            <div class="col-md-10">
                                <select class="form-control executive_id" name="executive_id" id="executive_id">
                                    <option value="">{{ __('-- Select executive --') }}</option>
                                    @foreach ($client_users as $user)
                                        <option value="{{ $user->id }}">
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-info" id="saveSubclientButton">
                            {{ __('Add') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Contact Modal -->
    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactModalLabel">{{ __('Create Contact') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="quote-contact-form" method="post" action="{{ route('contacts.store') }}">
                    <div class="modal-body" id="contact">
                        <input type="hidden" id="subclient_id" name="subclient_id" value="" />
                        <input type="hidden" id="modal_view" name="modal_view" value="1" />
                        <div class="form-group row">
                            <label for="contact_name" class="col-md-2 col-form-label">*{{ __('Name') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-name" id="contact_name" name="contact_name">
                                <span id="contact_name-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_title" class="col-md-2 col-form-label">{{ __('Title') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-title" id="contact_title" name="contact_title">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_phone" class="col-md-2 col-form-label">*{{ __('Phone') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-phone" id="contact_phone" name="contact_phone">
                                <span id="contact_phone-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_email" class="col-md-2 col-form-label">{{ __('Email') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-email" id="contact_email" name="contact_email">
                                <span id="contact_email-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-info" id="saveContactButton">
                            {{ __('Add') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Project Modal -->
    <div class="modal fade" id="projectModal" tabindex="-1" role="dialog" aria-labelledby="projectModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="projectModalLabel">{{ __('Create Project') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="quote-project-form" method="post" action="{{ route('projects.store') }}">
                    <div class="modal-body" id="project">
                        <input type="hidden" id="subclient_id" name="subclient_id" value="" />
                        <input type="hidden" id="modal_view" name="modal_view" value="1" />
                        <div class="form-group row">
                            <label for="name" class="col-md-2 col-form-label">*{{ __('Name') }}</label>
                            <div class="col-md-10">
                                <input class="form-control name" id="name" name="name">
                                <span id="name-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-info" id="saveProjectButton">
                            {{ __('Add') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Item Modal -->
    <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="itemModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemModalLabel">{{ __('Edit Item') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="quote-item-form" method="post">
                    <div class="modal-body" id="item">
                        <input type="hidden" id="item_id" name="item_id" value="" />
                        <div class="form-group row">
                            <label for="item_key" class="col-md-2 col-form-label">{{ __('Key') }}</label>
                            <div class="col-md-10" id="item_key_select">
                                <select class="form-control select2bs4 item-key" name="item_key" id="item_key">
                                    <option value="no_key">{{ __('No Key') }}</option>
                                    @foreach ($service_keys as $key)
                                        <option value="{{ $key['key'] }}" data-image="{{ $key['image'] }}"
                                            data-description="{{ urldecode($key['description']) }}"
                                            data-sat_key="{{ $key['sat_key'] }}" data-unit="{{ $key['unit'] }}"
                                            data-price="{{ $key['price'] }}">
                                            {{ $key['key_name'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="item_key-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="item_quantity" class="col-md-2 col-form-label">*{{ __('Quantity') }}</label>
                            <div class="col-md-10">
                                <input class="form-control item-quantity" id="item_quantity" name="item_quantity">
                                <span id="item_quantity-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="item_description"
                                class="col-md-2 col-form-label">*{{ __('Description') }}</label>
                            <div class="col-md-10">
                                <textarea id="item_description" name="item_description"></textarea>
                                <span id="item_description-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="item_sat_key" class="col-md-2 col-form-label">{{ __('SAT Key') }}</label>
                            <div class="col-md-10" id="item_sat_key_select">
                                <select class="form-control select2bs4 item-sat_key" name="item_sat_key"
                                    id="item_sat_key"></select>
                                <span id="item_sat_key-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="item_unit" class="col-md-2 col-form-label">*{{ __('Unit') }}</label>
                            <div class="col-md-10" id="item_unit_select">
                                <select class="form-control select2bs4 item-unit" name="item_unit"
                                    id="item_unit"></select>
                                <span id="item_unit-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="item_price" class="col-md-2 col-form-label">*{{ __('Selling Price') }}</label>
                            <div class="col-md-10">
                                <input class="form-control item-price" id="item_price" name="item_price">
                                <span id="item_price-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="item_amount" class="col-md-2 col-form-label">{{ __('Total') }}</label>
                            <div class="col-md-10">
                                <input class="form-control item-amount" id="item_amount" name="item_amount" disabled>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="item_image" class="col-md-2 col-form-label">{{ __('Image') }}</label>
                            <div class="col-md-7 custom-file" style="margin: 0 7.5px;">
                                <input type="file" class="custom-file-input" id="item_image" name="item_image"
                                    accept="image/*">
                                <label class="custom-file-label" for="item_image">{{ __('Choose file') }}</label>
                            </div>
                        </div>
                        <div class="form-group row offset-md-2" id="fileDetails" style="display: none;">
                            <div class="image-frame">
                                <a href="javascript:clearImage()" class="close-icon" style="float: right;">
                                    <i class="fas fa-times"></i>
                                </a>
                                <div class="text-center">
                                    <img id="fileThumbnail" src="" alt="Thumbnail"
                                        style="max-width: 150px; max-height: 150px; object-fit: contain;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="button" class="btn btn-info" id="saveItemButton">
                            {{ __('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>
        .table-responsive {
            margin-top: 15px;
            width: 100%;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        #items-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }

        #items-table th,
        #items-table td {
            white-space: nowrap;
        }

        .td-noitem {
            background-color: #f3f3f3;
            text-align: center;
        }

        .input-nooutline {
            background: transparent;
            border: none;
            outline: none;
            width: 100%;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            text-align: right;
            appearance: none;
        }

        .image-frame {
            border: 1px solid #ddd;
            border-radius: 10px;
            margin-left: 3px;
            padding: 0 8px 8px;
        }

        .close-icon i {
            font-size: 12px;
            color: grey;
            cursor: pointer;
        }

        .close-icon i:hover {
            color: black;
        }
    </style>
    <script>
        toggleAdvanceEnabled();
        toggleDiscountEnabled();
        toggleIvaEnabled();

        var isUnsaved = {{ empty($quote->id) ? 'true' : 'false' }};

        function getContactsAndProjects() {
            handleSelectChange('#quote-form #subclient_id', 'contacts', '#quote-form #contact_id',
                '{{ route('getContactsBySubclient') }}');

            handleSelectChange('#quote-form #subclient_id', 'projects', '#quote-form #project_id',
                '{{ route('getProjectsBySubclient') }}');

            if ($('#quote-form #subclient_id').val() != '') {
                $('#addContactButton').prop('disabled', false);
                $('#addProjectButton').prop('disabled', false);
            } else {
                $('#addContactButton').prop('disabled', true);
                $('#addProjectButton').prop('disabled', true);
            }
        }

        function saveAndPreview(e) {

            e.preventDefault();

            if (isUnsaved) {
                const userConfirmed = confirm(
                    '{{ __('Save quote to continue.') }}'
                );
                if (!userConfirmed) {
                    return;
                }
            }

            preview = true;

            submitForm($('#quote-form'));
        }

        function loadPreview(id) {
            const url = `{{ route('quotes.preview', ':id') }}`.replace(':id', id);

            loadContent(url);
        }

        $('#description').summernote({
            placeholder: '',
            tabsize: 2,
            height: 150,
            toolbar: [
                ['style', ['style']],
                ['font', ['fontname', 'bold', 'italic', 'underline', 'clear']],
                ['fontstyle', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['codeview']]
            ],
        });

        $('#terms').summernote({
            placeholder: '',
            tabsize: 2,
            height: 150,
            toolbar: [
                ['style', ['style']],
                ['font', ['fontname', 'bold', 'italic', 'underline', 'clear']],
                ['fontstyle', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['codeview']]
            ],
        });

        $('#item_description').summernote({
            placeholder: '',
            tabsize: 2,
            height: 100,
            toolbar: [
                ['style', ['style']],
                ['font', ['fontname', 'bold', 'italic', 'underline', 'clear']],
                ['fontstyle', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['codeview']]
            ],
        });

        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        $('#item_key').select2({
            theme: 'bootstrap4', // Use the Bootstrap 4 styling for Select2
            placeholder: "{{ __('No Key') }}", // Placeholder text
            allowClear: true, // Enable clear button
            dropdownParent: $('#item_key_select'),
            minimumResultsForSearch: 0
        });

        $('#item_key').on('select2:select', function(e) {
            const selectedOption = $(this).find(':selected');
            const value = selectedOption.val();
            const description = selectedOption.data('description');
            const sat_key = selectedOption.data('sat_key');
            const unit = selectedOption.data('unit');
            const price = selectedOption.data('price') > 0 ? currencyFormat(selectedOption.data('price')) : '$0.00';
            const image = selectedOption.data('image');

            // Reset fields if 'No Key' is selected
            if (value === 'no_key') {
                $('#item_description').summernote('code', '');
                $('#item_sat_key').val(null).trigger('change');
                $('#item_unit').val(null).trigger('change');
                $('#item_price').val('$0.00');
            } else {
                $('#item_description').summernote('code', description);

                let option_sat = new Option(sat_key, sat_key, true, true);
                $('#item_sat_key').append(option_sat).trigger('change');

                let option_unit = new Option(unit, unit, true, true);
                $('#item_unit').append(option_unit).trigger('change');

                $('#item_price').val(price);
            }

            // Handle image display (based on the selection)
            if (!$("#fileThumbnail").attr("src")) {
                const imageUrl = image ? `/storage/images/${image}` : '';
                if (image) {
                    $("#fileThumbnail").attr("src", imageUrl);
                    $("#fileDetails").show();
                    uploadedImagePath = image;
                }
            } else {

                clearImage();
            }
        });

        $('#item_unit').select2({
            theme: 'bootstrap4',
            placeholder: "{{ __('-- Select unit --') }}",
            minimumInputLength: 3,
            language: {
                inputTooShort: function(args) {
                    var remainingChars = args.minimum - args.input.length;
                    return "{{ __('Please enter') }} " + remainingChars +
                        " {{ __('or more characters') }}";
                },
                searching: function() {
                    return "{{ __('Searching...') }}";
                },
                noResults: function() {
                    return "{{ __('No results found') }}";
                }
            },
            ajax: {
                url: "{{ route('sat_units.search') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(item) {
                            return {
                                id: item.clave + ' - ' + item.descripcion,
                                text: item.clave + ' - ' + item.descripcion
                            };
                        })
                    };
                },
                cache: true
            },
            dropdownParent: $('#item_unit_select')
        });

        $('#item_sat_key').select2({
            theme: 'bootstrap4',
            placeholder: "{{ __('-- Select SAT key --') }}",
            minimumInputLength: 3,
            language: {
                inputTooShort: function(args) {
                    var remainingChars = args.minimum - args.input.length;
                    return "{{ __('Please enter') }} " + remainingChars +
                        " {{ __('or more characters') }}";
                },
                searching: function() {
                    return "{{ __('Searching...') }}";
                },
                noResults: function() {
                    return "{{ __('No results found') }}";
                }
            },
            ajax: {
                url: "{{ route('sat_keys.search') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(unit) {
                            return {
                                id: unit.clave + ' - ' + unit.descripcion,
                                text: unit.clave + ' - ' + unit.descripcion
                            };
                        })
                    };
                },
                cache: true
            },
            dropdownParent: $('#item_sat_key_select')
        });

        $("#advance").on("click", function() {
            toggleAdvanceEnabled();
        });

        $("#discount").on("click", function() {
            toggleDiscountEnabled();
        });

        $("#iva").on("click", function() {
            toggleIvaEnabled();
        });

        $("#item_image").on("change", function() {
            const file = this.files[0];
            if (file) {
                $(".custom-file-label").text(file.name); // Show filename when a new file is selected
                const reader = new FileReader();
                reader.onload = function(e) {
                    uploadedImagePath = e.target.result;
                    $("#fileThumbnail").attr("src", uploadedImagePath);
                };
                reader.readAsDataURL(file);
                $("#fileDetails").show();
            } else {
                $(".custom-file-label").text(''); // Reset to blank if no file is selected
                $("#fileThumbnail").attr("src", '');
                $("#fileDetails").hide();
                uploadedImagePath = null;
            }
        });

        $('#item_quantity, #item_price').on('focus', function() {
            $(this).select();
        });

        $('#item_quantity, #item_price').on('input', function() {
            calculateItemTotal();
        });

        $('#item_price').on('blur', function() {
            var price = parseFloat($("#item_price").val().replace(/[^0-9.]/g, '')) || 0;
            $('#item_price').val(currencyFormat(price));
        });

        $('#advance_pct, #discount_pct, #iva_pct').on('input', function() {
            calculateTotal();
        });

        document.getElementById('currency').addEventListener('change', function() {
            var selectedCurrency = this.value;

            if (selectedCurrency === 'Pesos') {
                $('#exchange_rate').prop('disabled', true);
            } else {
                $('#exchange_rate').prop('disabled', false);
            }
        });

        document.getElementById('saveItemButton').addEventListener('click', function() {

            $('.invalid-feedback').text('').css('display', 'none');

            let isValid = true;

            const itemQuantity = $('#item_quantity').val() ? $('#item_quantity').val().trim() : '';
            const itemDescription = $('#item_description').summernote('code') ? $('#item_description').summernote(
                'code').trim() : '';
            const itemUnit = $('#item_unit').val() ? $('#item_unit').val().trim() : '';
            const itemPrice = $('#item_price').val() ? $('#item_price').val().trim() : '';

            if (!itemQuantity) {
                isValid = false;
                $('#item_quantity-error').text('{{ __('Quantity is required.') }}').css('display',
                    'block');
            }

            if (!itemDescription || itemDescription === '<p><br></p>') {
                isValid = false;
                $('#item_description-error').text('{{ __('Description is required.') }}').css(
                    'display',
                    'block');
            }

            if (!itemUnit) {
                isValid = false;
                $('#item_unit-error').text('{{ __('Unit is required.') }}').css('display',
                    'block');
            }

            if (!itemPrice) {
                isValid = false;
                $('#item_price-error').text('{{ __('Price is required.') }}').css('display',
                    'block');
            }

            if (isValid) {
                addItem();
            }
        });

        function toggleAdvanceEnabled() {
            if ($("#advance").is(":checked")) {
                $("#advance_pct").prop("disabled", false);
                $("#advance_row").show();
            } else {
                $("#advance_pct").prop("disabled", true);
                $("#advance_row").hide();
            }

            calculateTotal();
        }

        function toggleDiscountEnabled() {
            if ($("#discount").is(":checked")) {
                $("#discount_pct").prop("disabled", false);
                $("#discount_row").show();
            } else {
                $("#discount_pct").prop("disabled", true);
                $("#discount_row").hide();
            }

            calculateTotal();
        }

        function toggleIvaEnabled() {
            if ($("#iva").is(":checked")) {
                $("#iva_pct").prop("disabled", false);
                $("#iva_row").show();
            } else {
                $("#iva_pct").prop("disabled", true);
                $("#iva_row").hide();
            }

            calculateTotal();
        }

        function calculateTotal() {
            var subtotal = parseFloat($("#subtotal").val().replace(/[^0-9.]/g, '')) || 0;
            var total = subtotal;
            var discount_amount = 0;
            var iva_amount = 0;
            var advance_amount = 0;

            if ($("#discount").is(":checked")) {
                var discount_pct = $("#discount_pct").val().replace(/[^0-9.]/g, '');
                discount_amount = discount_pct * subtotal / 100;
                total -= discount_amount;
            }

            if ($("#iva").is(":checked")) {
                var iva_pct = parseFloat($("#iva_pct").val().replace(/[^0-9.]/g, '')) || 0;
                iva_amount = iva_pct * total / 100;
                total += iva_amount;
            }

            if ($("#advance").is(":checked")) {
                var advance_pct = parseFloat($("#advance_pct").val().replace(/[^0-9.]/g, '')) || 0;
                advance_amount = advance_pct * total / 100;
            }

            $("#discount_amount").val(currencyFormat(discount_amount));
            $("#iva_amount").val(currencyFormat(iva_amount));
            $("#total").val(currencyFormat(total));
            $("#advance_amount").val(currencyFormat(advance_amount));
        }

        function calculateItemTotal() {
            var itemQuantity = $('#item_quantity').val().replace(/[^0-9.]/g, '');
            var itemPrice = $('#item_price').val().replace(/[^0-9.]/g, '');

            var itemAmount = 0;

            if (!isNaN(itemQuantity) && itemQuantity !== '' && !isNaN(itemPrice) && itemPrice !== '') {
                itemAmount = itemQuantity * itemPrice;
            }

            $('#item_amount').val(currencyFormat(itemAmount));
        }

        function clearImage() {
            $('#item_image').val('');
            $("#fileThumbnail").attr("src", '');
            $("#fileDetails").hide();
            $('.custom-file-label').text(''); // Set label to blank
            uploadedImagePath = null;
        }

        function openItemModal(index = null) {
            $('.invalid-feedback').text('').css('display', 'none');
            let itemData = null;
            if (index != null) {
                itemData = {
                    id: $(`input[name="items[${index}][id]"]`).val(),
                    key: $(`input[name="items[${index}][key]"]`).val(),
                    quantity: $(`input[name="items[${index}][quantity]"]`).val(),
                    description: decodeURIComponent($(`input[name="items[${index}][description]"]`).val()),
                    sat_key: $(`input[name="items[${index}][sat_key]"]`).val(),
                    unit: $(`input[name="items[${index}][unit]"]`).val(),
                    image: $(`input[name="items[${index}][image]"]`).val(),
                    price: $(`input[name="items[${index}][price]"]`).val(),
                    amount: $(`input[name="items[${index}][amount]"]`).val(),
                };
            }
            if (itemData !== null) {
                $('#item_id').val(itemData.id);
                $('#item_key').val(itemData.key).trigger('change');
                $('#item_quantity').val(itemData.quantity);
                $('#item_description').summernote('code', itemData.description);
                let option_sat = new Option(itemData.sat_key, itemData.sat_key, true, true);
                $('#item_sat_key').append(option_sat).trigger('change');
                let option_unit = new Option(itemData.unit, itemData.unit, true, true);
                $('#item_unit').append(option_unit).trigger('change');
                $('#item_price').val(currencyFormat(itemData.price));
                $('#item_amount').val(currencyFormat(itemData.amount));
                uploadedImagePath = itemData.image; // Preserve the existing image reference
                if (itemData.image) {
                    const imageSource = itemData.image.startsWith('data:image') ?
                        itemData.image : `/storage/images/${itemData.image}`;
                    $('#fileThumbnail').attr("src", imageSource);
                    $("#fileDetails").show();
                    $('#item_image').val(''); // Clear the file input
                    $('.custom-file-label').text(''); // Set label to blank when editing
                } else {
                    $('#fileThumbnail').attr('src', '');
                    $("#fileDetails").hide();
                    $('#item_image').val(''); // Clear the file input
                    $('.custom-file-label').text(''); // Set label to blank
                }
                $('#itemModalLabel').text('{{ __('Edit Item') }}');
                $('#saveItemButton').text('{{ __('Save') }}');
            } else {
                $('#item_id').val('');
                $('#item_key').val(null).trigger('change');
                $('#item_quantity').val('');
                $('#item_description').summernote('code', '');
                $('#item_sat_key').val(null).trigger('change');
                $('#item_unit').val(null).trigger('change');
                $('#item_price').val('$0.00');
                $('#item_amount').val('$0.00');
                $('#itemModalLabel').text('{{ __('New Item') }}');
                $('#saveItemButton').text('{{ __('Add') }}');
                $('#item_image').val(''); // Clear the file input
                $('.custom-file-label').text(''); // Set label to blank for new item
                clearImage();
            }
            $('#itemModal').modal('show');
        }

        function openSubclientModal() {

            $('.invalid-feedback').text('').css('display', 'none');

            $('#subclientModal #name').val('');
            $('#subclientModal #executive_id').val('{{ auth()->id() }}');

            $('#subclientModal').modal('show');
        }

        function openContactModal() {

            $('.invalid-feedback').text('').css('display', 'none');

            const subclientId = $('#quote-form #subclient_id').val();

            $('#contactModal #subclient_id').val(subclientId);
            $('#contactModal #contact_name').val('');
            $('#contactModal #contact_title').val('');
            $('#contactModal #contact_phone').val('');
            $('#contactModal #contact_email').val('');
            $('#contactModal').modal('show');
        }

        function openProjectModal() {

            $('.invalid-feedback').text('').css('display', 'none');

            const subclientId = $('#quote-form #subclient_id').val();

            $('#projectModal #subclient_id').val(subclientId);
            $('#projectModal #name').val('');
            $('#projectModal').modal('show');
        }

        function addItem() {
            // Step 1: Copy new data from another form (quote-item-form)
            let newItem = {
                id: $('#item_id').val() || Math.random().toString(36).substr(2, 9),
                key: $('#item_key').val(),
                quantity: $('#item_quantity').val(),
                description: encodeURIComponent($('#item_description').val()),
                sat_key: $('#item_sat_key').val(),
                unit: $('#item_unit').val(),
                image: uploadedImagePath,
                price: $("#item_price").val().replace(/[^0-9.]/g, ''),
                amount: $("#item_amount").val().replace(/[^0-9.]/g, ''),
            };

            // Step 2: Clear the form inputs for the new item
            $('#quote-item-form input').val('');

            // Step 3: Get initial items
            const items = getInitialItems();
            const updatedItems = [...items];

            let existingItemIndex = updatedItems.findIndex(item => item.id === newItem.id);

            if (existingItemIndex !== -1) {
                updatedItems[existingItemIndex] = newItem;
            } else {
                updatedItems.push(newItem);
            }

            rebuildHiddenInputs(updatedItems);
        }

        function addContact() {
            let newContact = {
                id: $('#contactModal #contact_id').val() || Math.random().toString(36).substr(2, 9),
                name: $('#contactModal #contact_name').val(),
                title: $('#contactModal #contact_title').val(),
                phone: $('#contactModal #contact_phone').val(),
                email: $('#contactModal #contact_email').val(),
            };

            $('#quote-contact-form input').val('');

        }

        function rebuildItemTableRows(items) {

            let tableRows = '';

            items.forEach((item, index) => {

                // Determine the image source based on whether the image is base64 or already uploaded
                const imageSource = item.image ?
                    (item.image.startsWith('data:image') ?
                        item.image // Base64 image
                        :
                        `/storage/images/${item.image}`) // Uploaded image (file path)
                    :
                    null;

                tableRows += `
            <tr id="row${index}">
                <td>
                    ${imageSource 
                        ? `<img src="${imageSource}" alt="Item Image" style="width: 80px; height: 80px; object-fit: contain;">` 
                        : ''}
                </td>
                <td style="text-align: right">${item.quantity}</td>
                <td style="text-align: left">${decodeURIComponent(item.description)}</td>
                <td style="text-align: left">${item.unit}</td>
                <td style="text-align: right">${currencyFormat(item.price)}</td>
                <td style="text-align: right">${currencyFormat(item.amount)}</td>
                <td style="width:100px">
                    @can('editar cotizaciones')
                        <button class="btn btn-default btn-sm" type="button" style="margin-left: 5px;" onclick="openItemModal('${index}')">
                            <i class="far fa-edit"></i>
                        </button>
                    @endcan
                    @can('borrar cotizaciones')
                        <button class="btn btn-default btn-sm" type="button" style="margin-left: 5px;" onclick="removeItemRow('${index}', '${item.id}')">
                            <i class="far fa-trash-alt"></i>
                        </button>
                    @endcan
                </td>
            </tr>
        `;
            });

            tableRows += `<tr id="noitem"><td colspan="11" class="td-noitem">{{ __('No items added') }}</td></tr>`;

            calculateSubtotal();

            $('#quote-items-table tbody').html(tableRows);
            $('#noitem').hide();
            $('#itemModal').modal('hide');
        }

        function removeItemRow(index, id) {
            if (confirm(`¿Estás seguro de eliminar Partida ${id}?`)) {

                $(`#row${index}`).remove();

                $(`input[name^="items[${index}]"]`).remove();

                calculateSubtotal();

                if ($('input[name^="items"]').length === 0) {
                    $("#noitem").show();
                } else {
                    $("#noitem").hide();
                }
            }
        }

        function getInitialItems() {
            let items = [];

            $('#quote-form input[name^="items"]').each(function() {
                let matches = $(this).attr('name').match(/^items\[(\d+)]\[(\w+)]$/);
                if (matches) {
                    let index = matches[1];
                    let key = matches[2];

                    if (!items[index]) {
                        items[index] = {};
                    }

                    items[index][key] = $(this).val();
                }
            });

            return items;
        }

        function rebuildHiddenInputs(items) {
            let hiddenInputs = '';
            let fileInputs = '';

            items.forEach((item, index) => {
                Object.keys(item).forEach(key => {
                    if (key !== 'image') {
                        hiddenInputs +=
                            `<input type="hidden" name="items[${index}][${key}]" value="${item[key]}">`;
                    }
                });

                if (item.image) {
                    hiddenInputs +=
                        `<input type="hidden" name="items[${index}][image]" value="${item.image}">`;
                }
            });

            $('#quote-items-table tbody').find('tr[id^="row"]').remove();
            $('#quote-form').find('input[type="hidden"][name^="items"]').remove();
            $('#quote-form').append(hiddenInputs);
            $('#quote-form').append(fileInputs);

            rebuildItemTableRows(items);
        }

        function calculateSubtotal() {
            let rowTotal = 0; // Initialize the total as a number

            // Iterate through all 'amount' inputs in the form
            $('#quote-form input[name^="items["][name$="[amount]"]').each(function() {
                const amount = parseFloat($(this).val()) || 0; // Convert value to a number or default to 0
                rowTotal += amount; // Add the numeric value to the total
            });

            $('#subtotal').val(currencyFormat(rowTotal));

            calculateTotal();
        }

        function getImageHTML(image) {
            return image ?
                `<img src="${image}" alt="Service Image" style="width: 50px; height: 50px; object-fit: cover;">` : '';
        }

        function debounce(callback, delay) {
            let timeout;
            return function(...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => callback.apply(this, args), delay);
            };
        }

        function buildSubclientsList(subclients, selectedId) {
            var select = $('#subclient_id');

            select.find('option').not(':first').remove();

            subclients.forEach(function(subclient) {
                var option = $('<option></option>')
                    .val(subclient.id)
                    .text(subclient.name);
                select.append(option);
            });

            select.val(selectedId);
            select.change();
        }

        function buildContactsList(contacts, selectedId) {
            var select = $('#contact_id');

            select.find('option').not(':first').remove();

            contacts.forEach(function(contact) {
                var option = $('<option></option>')
                    .val(contact.id)
                    .text(contact.name);
                select.append(option);
            });

            select.val(selectedId);
        }

        function buildProjectsList(projects, selectedId) {
            var select = $('#project_id');

            select.find('option').not(':first').remove();

            projects.forEach(function(project) {
                var option = $('<option></option>')
                    .val(project.id)
                    .text(project.name);
                select.append(option);
            });

            select.val(selectedId);
        }

        function setFormToUpdate(quote) {
            $("#saveQuoteButton").text("Guardar");
            $("#hidden-method").val("PATCH");

            let updateUrl = '{{ route('quotes.update', ['id' => ':id']) }}';
            updateUrl = updateUrl.replace(':id', quote.id);

            quote.itemIds.forEach((id, index) => {
                const hiddenInput = $(`input[name="items[${index}][id]"]`);
                hiddenInput.val(id);
            });

            $("#quote-form").attr("action", updateUrl);

            $("#pageTitle").text("{{ __('Edit Quote') }}");
        }
    </script>
@endsection