{{-- New-Unity ERP | Modules/Sales/Resources/Views/quotes/create.blade.php | vv2.3 | 21/06/2026 --}}
{{-- v2.1 — Vencimiento readonly (hoy+10 dias politica empresa); Condicion pago automatica.    --}}
{{-- v2.0 — Rediseño completo replicando layout de billing/form.blade.php.                      --}}

@extends('layouts.vertical')

@section('content')

<style>
    #table-details-quote th, #table-details-quote td { vertical-align:middle; font-size:.75rem; }
    #table-details-quote .col-code   { width:70px;  white-space:nowrap; }
    #table-details-quote .col-qty    { width:60px;  text-align:center; }
    #table-details-quote .col-unit   { width:60px;  white-space:nowrap; }
    #table-details-quote .col-product-name { max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #table-details-quote .col-price  { width:100px; }
    #table-details-quote .col-disc   { width:75px;  text-align:center; }
    #table-details-quote .disc-input { text-align:left; padding-left:6px; }
    #table-details-quote .col-edit   { width:24px; }
    #table-details-quote .col-total  { width:90px;  text-align:right; white-space:nowrap; }
    #table-details-quote .col-del    { width:38px;  text-align:center; }
</style>

<div class="container-fluid">

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-file-alt me-2"></i>{{ __('quotes.new_quote') }}</h1>
            <p class="text-muted mb-0">{{ __('quotes.form_subtitle') }}</p>
        </div>
    </div>

    {{-- Breadcrumbs --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
            <li class="breadcrumb-item"><a href="{{ route('sales.quotes.index') }}">{{ __('quotes.quotes') }}</a></li>
            <li class="breadcrumb-item active">{{ __('quotes.new_quote') }}</li>
        </ol>
    </nav>

    {{-- Main Card --}}
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5 class="card-title mb-0"><i class="fad fa-edit me-2"></i>{{ __('quotes.new_quote') }}</h5>
        </div>
        <div class="card-body">

            <form id="formQuote" method="POST" action="{{ route('sales.quotes.store') }}" autocomplete="off">
                @csrf

                {{-- Errores de validación --}}
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <h5 class="alert-heading">{{ __('quotes.validation_heading') }}</h5>
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                {{-- ════════ General Information ════════ --}}
                <div class="mb-2">
                    <h6 class="text-primary mb-1"><i class="fad fa-info-circle me-2"></i>{{ __('quotes.general_information') }}</h6>
                    <hr class="mt-1 mb-2" style="border-top: 2px solid #dee2e6;">
                </div>

                {{-- Fila 1: Cliente + campos cortos --}}
                <div class="row g-2 mb-2">
                    <div class="col-md-4">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.customer_label') }} *</label>
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" id="customer_display"
                                   value="{{ old('customer_name', $row->customer->name ?? '') }}"
                                   placeholder="{{ __('quotes.search_customer_placeholder') }}"
                                   readonly style="cursor:pointer; background-color:#fff;"
                                   onclick="openCustomerModal()">
                            <button class="btn btn-primary" type="button" onclick="openCustomerModal()" title="{{ __('quotes.search_customer') }}">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <input type="hidden" id="customer_id" name="customer_id"
                               value="{{ old('customer_id', $row->customer_id ?? '') }}">
                    </div>
                    <div class="col-md-1">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.quote_number') }}</label>
                        <input type="text" class="form-control form-control-sm bg-light text-center"
                               name="fol" value="{{ $fol }}" readonly>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.date') }}</label>
                        <input type="text" class="form-control form-control-sm bg-light text-center"
                               value="{{ date('d-m-Y') }}" disabled>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.expiration') }}</label>
                        <input type="date" class="form-control form-control-sm bg-light" name="expiration_date"
                               id="expiration_date" value="" readonly>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.credit_days') }}</label>
                        <select name="credit_days" class="form-select form-select-sm">
                            @foreach([0, 15, 30, 45, 60, 90] as $days)
                                <option value="{{ $days }}" @selected(old('credit_days', 0) == $days)>{{ $days }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.currency') }}</label>
                        <select name="currency" id="currency" class="form-select form-select-sm">
                            @foreach($currencies as $cur)
                                <option value="{{ $cur->code }}" @selected(old('currency', 'MXN') == $cur->code)>
                                    {{ $cur->code }} — {{ $cur->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Fila 2: Dirección y datos del cliente --}}
                <div class="row g-2 mb-2">
                    <div class="col-md-6">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.domicile') }}</label>
                        <select id="customer_address_id" name="customer_address_id" class="form-select form-select-sm">
                            <option value="">{{ __('quotes.select_ph') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.business_name') }}</label>
                        <input id="customer_name" name="customer_name" type="text"
                               class="form-control form-control-sm bg-light"
                               value="{{ old('customer_name', $row->customer_name ?? '') }}" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.rfc') }}</label>
                        <input id="customer_rfc" name="customer_rfc" type="text"
                               class="form-control form-control-sm bg-light"
                               value="{{ old('customer_rfc', $row->customer_rfc ?? '') }}" readonly>
                    </div>
                </div>

                {{-- Fila 3: Contacto + Orden de Compra + Tipo de Cambio --}}
                <div class="row g-2 mb-2">
                    <div class="col-md-3">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.contact') }}</label>
                        <select name="contact_id" id="contact_id" class="form-select form-select-sm">
                            <option value="">{{ __('quotes.no_contact') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.purchase_order') }}</label>
                        <input type="text" name="purchase_order" class="form-control form-control-sm"
                               value="{{ old('purchase_order') }}" maxlength="25" placeholder="{{ __('quotes.optional') }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small mb-1">{{ __('quotes.exchange_rate') }}</label>
                        <input type="number" name="currency_to_mxn" id="currency_to_mxn"
                               class="form-control form-control-sm text-end"
                               value="{{ old('currency_to_mxn', 1) }}" step="0.0001" min="1">
                    </div>
                </div>

                <input type="hidden" id="customer_number" name="customer_number"
                       value="{{ old('customer_number') }}">

                {{-- ════════ Section: Products ════════ --}}
                <div class="mb-2 mt-3 text-center">
                    <h6 class="text-primary mb-1"><i class="fad fa-boxes me-2"></i>{{ __('quotes.products') }}</h6>
                    <hr class="mt-1 mb-2" style="border-top: 2px solid #dee2e6;">
                </div>

                <div class="row g-2 mb-2 align-items-center">
                    <div class="col-4">
                        <div class="form-check form-switch">
                            <input type="checkbox" class="form-check-input" id="multiple_products"
                                   name="multiple_products" @checked(old('multiple_products'))>
                            <label class="form-check-label" for="multiple_products">{{ __('quotes.multiple_products') }}</label>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <button id="btnSearchProduct" type="button" class="btn btn-success btn-sm">
                            <i class="fas fa-search me-1"></i>{{ __('quotes.searchproducts') }}
                        </button>
                    </div>
                </div>

                {{-- Alert producto agregado --}}
                <div id="alert-addproduct" class="alert alert-success py-1 small d-none">
                    <i class="fas fa-check-circle me-1"></i>{{ __('quotes.product_added') }}
                </div>

                {{-- Products table --}}
                <div class="table-responsive">
                    <table id="table-details-quote" class="table table-sm align-middle">
                        <thead>
                            <tr>
                                <th class="col-code">{{ __('quotes.code') }}</th>
                                <th class="col-qty text-center">{{ __('quotes.qty') }}</th>
                                <th class="col-unit">{{ __('quotes.unit_label') }}</th>
                                <th class="col-product-name">{{ __('quotes.description') }}</th>
                                <th class="col-price text-end">{{ __('quotes.unit_price') }}</th>
                                <th class="col-disc text-center">{{ __('quotes.disc_pct') }}</th>
                                <th class="col-edit"></th>
                                <th class="col-total text-end">{{ __('quotes.total') }}</th>
                                <th class="col-del"></th>
                            </tr>
                        </thead>
                        <tbody id="products-tbody">
                            @foreach($products as $nKey => $product)
                            <tr class="product-row details">
                                <input type="hidden" name="products[{{ $nKey }}][product_id]"   value="{{ $product->product_id }}">
                                <input type="hidden" name="products[{{ $nKey }}][group_code]"   value="{{ $product->group_code }}">
                                <input type="hidden" name="products[{{ $nKey }}][sku]"          value="{{ $product->sku }}">
                                <input type="hidden" name="products[{{ $nKey }}][barcode]"      value="{{ $product->barcode }}">
                                <input type="hidden" name="products[{{ $nKey }}][product_name]" value="{{ $product->product_name }}">
                                <input type="hidden" name="products[{{ $nKey }}][description]"  value="{{ $product->description }}">
                                <td class="col-code">{{ $product->sku ?: $product->product_id }}</td>
                                <td class="col-qty text-center">
                                    <input type="number" name="products[{{ $nKey }}][quantity]"
                                           value="{{ $product->quantity }}"
                                           class="form-control form-control-sm text-center qty-input"
                                           min="1" style="width:55px;" onchange="recalcRow(this)">
                                </td>
                                <td class="col-unit">{{ $product->unity }}</td>
                                <td class="col-product-name" title="{{ $product->product_name }}">{{ $product->product_name }}</td>
                                <td class="col-price text-end">
                                    <input type="text" name="products[{{ $nKey }}][sales_price]"
                                           value="{{ number_format($product->sales_price, 2, '.', ',') }}"
                                           class="form-control form-control-sm text-center input-quote-price"
                                           readonly style="background:#f8f9fa; cursor:default; width:90px;">
                                </td>
                                <td class="col-disc text-center">
                                    <input name="products[{{ $nKey }}][disc_per]" type="number"
                                           class="form-control form-control-sm text-center disc-input"
                                           value="{{ $product->disc_per ?? 0 }}"
                                           min="0" max="50" onchange="recalcRow(this)" style="width:75px;">
                                </td>
                                <td class="col-edit text-center">
                                    <i class="fas fa-pencil-alt fa-xs text-primary" style="cursor:pointer;"
                                       title="{{ __('quotes.edit_price') }}" onclick="togglePriceEdit(this)"></i>
                                </td>
                                <td class="col-total text-end fw-bold">
                                    <input type="hidden" class="subtotal" name="products[{{ $nKey }}][amount]"
                                           value="{{ $product->sales_price * $product->quantity }}">
                                    <span class="legend-subtotal">
                                        {{ number_format($product->sales_price * $product->quantity, 2, '.', ',') }}
                                    </span>
                                </td>
                                <td class="col-del text-center">
                                    <a href="#" onclick="event.preventDefault();$(this).closest('tr').remove();calcTotals()"
                                       class="btn btn-danger btn-sm">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- ════════ Footer: Condiciones + Totales ════════ --}}
                <div class="row g-3 mt-1">

                    {{-- Izquierda: condiciones y notas --}}
                    <div class="col-md-7">
                        <div class="row g-2 mb-2">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small mb-1">{{ __('quotes.payment_conditions') }}</label>
                                <input type="text" name="condition_pay" id="condition_pay"
                                       class="form-control form-control-sm"
                                       value="{{ old('condition_pay') }}" maxlength="100"
                                       placeholder="{{ __('quotes.payment_conditions_ph') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small mb-1">{{ __('quotes.delivery_time') }}</label>
                                <select name="delivery_time" id="delivery_time" class="form-select form-select-sm"
                                        onchange="if(this.value==='__custom__'){$('#delivery_time_custom').removeClass('d-none')}else{$('#delivery_time_custom').addClass('d-none').val('')}">
                                    <option value="">{{ __('quotes.select_or_type') }}</option>
                                    @foreach($deliveryTerms as $term)
                                        <option value="{{ $term }}" @selected(old('delivery_time') == $term)>{{ $term }}</option>
                                    @endforeach
                                    <option value="__custom__">{{ __('quotes.other_write') }}</option>
                                </select>
                                <input type="text" id="delivery_time_custom" name="delivery_time_custom"
                                       class="form-control form-control-sm mt-1 d-none"
                                       placeholder="{{ __('quotes.delivery_time_ph') }}" maxlength="100">
                            </div>
                        </div>
                        <div class="row g-2">
                            <div class="col-md-12">
                                <label class="form-label fw-bold small mb-1">{{ __('quotes.observations') }}</label>
                                <textarea class="form-control form-control-sm" name="notes" id="notes"
                                          rows="4" maxlength="500"
                                          placeholder="{{ __('quotes.notes_ph') }}">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- Derecha: Totales — Descuento → Subtotal → IVA → Total --}}
                    <div class="col-md-5">

                        {{-- Descuento --}}
                        <div class="d-flex align-items-center justify-content-end mb-1">
                            <span class="small fw-bold me-2">{{ __('quotes.discount') }} <span id="discount_perc_display" class="text-muted fw-normal small">0.0%</span></span>
                            <div class="input-group input-group-sm" style="width:220px;">
                                <span class="input-group-text">-$</span>
                                <input class="form-control text-end" id="discount_amount" type="text"
                                       name="discount" value="0.00" readonly>
                            </div>
                        </div>

                        {{-- Subtotal (con descuento aplicado) --}}
                        <div class="d-flex align-items-center justify-content-end mb-1">
                            <span class="small fw-bold me-2">{{ __('quotes.subtotal_label') }}</span>
                            <div class="input-group input-group-sm" style="width:220px;">
                                <span class="input-group-text">$</span>
                                <input class="form-control text-end" id="subtotal" type="text"
                                       name="subtotal" value="0.00" readonly>
                            </div>
                        </div>

                        {{-- IVA --}}
                        <div class="d-flex align-items-center justify-content-end mb-1">
                            <span class="small fw-bold me-2">{{ __('quotes.vat') }}</span>
                            <div class="input-group input-group-sm me-1" style="width:120px;">
                                <input id="tax_perc" name="tax_perc" type="number" min="0" max="100" step="0.01"
                                       class="form-control form-control-sm text-end"
                                       value="{{ old('tax_perc', 16) }}" onchange="calcTotals()">
                                <span class="input-group-text">%</span>
                            </div>
                            <div class="input-group input-group-sm" style="width:220px;">
                                <span class="input-group-text">$</span>
                                <input class="form-control form-control-sm text-end" id="taxamount" type="text"
                                       name="tax" value="0.00" readonly>
                            </div>
                        </div>

                        {{-- Total --}}
                        <div class="d-flex align-items-center justify-content-end pt-1 border-top">
                            <span class="fw-bold me-2">{{ __('quotes.total') }}</span>
                            <div class="input-group input-group-sm" style="width:220px;">
                                <span class="input-group-text fw-bold">$</span>
                                <input class="form-control text-end fw-bold" id="total_display" type="text"
                                       name="total" value="0.00" readonly>
                            </div>
                        </div>

                    </div>
                </div>

                {{-- Form actions --}}
                <div class="row mt-4">
                    <div class="col-md-12 text-end">
                        <a href="{{ route('sales.quotes.index') }}" class="btn btn-secondary">
                            <i class="fad fa-times me-1"></i>{{ __('quotes.cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fad fa-save me-1"></i>{{ __('quotes.save_quote') }}
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </div>

    {{-- Modal: buscador de productos (lo inyecta el JS) --}}
    <div id="content-products-modal"></div>

    {{-- Modal clientes --}}
    @include('sales::quotes.partials.create.modal_customers')

</div>
@endsection

@section('scripts')
<script>
    window.AppUrl     = '{{ url('') }}';
    window.quoteId    = {{ $row->id ?? 0 }};
    window.productIdx = {{ $products->count() }};
    window.CsrfToken  = '{{ csrf_token() }}';
</script>
<script src="{{ asset('modules/sales/Js/app.quote.js') }}"></script>
<script>
    window.togglePriceEdit = function(icon) {
        var input = $(icon).closest('tr').find('.input-quote-price');
        var locked = input.prop('readonly');
        if (locked) {
            input.prop('readonly', false).css({'background':'#fff','cursor':'text'}).focus();
            $(icon).removeClass('fa-pencil-alt text-primary').addClass('fa-lock text-warning');
        } else {
            input.prop('readonly', true).css({'background':'#f8f9fa','cursor':'default'});
            $(icon).removeClass('fa-lock text-warning').addClass('fa-pencil-alt text-primary');
            calcTotals();
        }
    };

    // ── Vencimiento: hoy + 10 días al cargar (política empresa) ──
    (function () {
        var date = new Date();
        date.setDate(date.getDate() + 10);
        var y = date.getFullYear();
        var m = String(date.getMonth() + 1).padStart(2, '0');
        var d = String(date.getDate()).padStart(2, '0');
        $('input[name="expiration_date"]').val(y + '-' + m + '-' + d);
    })();

</script>
@endsection