@extends('layouts.panel')
@section('title', 'Nuevo pedido')
@section('content')
    <div class="page-header">
        <div class="page-header-title">
            <h1>Nuevo pedido</h1>
            <p class="page-header-subtitle">Registra una nueva orden de servicio</p>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('orders.store') }}">
                @include('orders._form')
            </form>
        </div>
    </div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // --- Manejo de filas de prendas (items) ---
    const wrapper = document.getElementById('items-wrapper');
    const addBtn = document.getElementById('add-item-row');
    let index = wrapper.querySelectorAll('.item-row').length;

    function buildRow(i) {
        const row = document.createElement('div');
        row.className = 'row g-3 align-items-start item-row mb-3';
        row.innerHTML = `
            <div class="col-md-4">
                <label class="form-label small">Prenda</label>
                <input type="text" name="items[${i}][garment_type]" class="form-control" placeholder="Ej: Overol, Parka térmica">
            </div>
            <div class="col-md-2">
                <label class="form-label small">Cantidad</label>
                <input type="number" min="1" name="items[${i}][quantity]" class="form-control" value="1">
            </div>
            <div class="col-md-2">
                <label class="form-label small">Unidad</label>
                <select name="items[${i}][unit]" class="form-select">
                    <option value="unidad" selected>Unidad</option>
                    <option value="kg">Kg</option>
                    <option value="docena">Docena</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small">Notas</label>
                <input type="text" name="items[${i}][notes]" class="form-control">
            </div>
            <div class="col-md-1 d-flex align-items-end">
                <button type="button" class="btn btn-outline-danger remove-item-row w-100">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        return row;
    }

    addBtn.addEventListener('click', function () {
        wrapper.appendChild(buildRow(index));
        index++;
    });

    wrapper.addEventListener('click', function (e) {
        const btn = e.target.closest('.remove-item-row');
        if (btn) {
            btn.closest('.item-row').remove();
        }
    });

    // Si no hay ninguna fila al cargar (pedido nuevo), agrega una por defecto
    if (wrapper.querySelectorAll('.item-row').length === 0) {
        wrapper.appendChild(buildRow(index));
        index++;
    }

    // --- Selección de tarifa y cálculo de total en vivo ---
    (function () {
        const clientSelect  = document.querySelector('select[name="client_id"]');
        const serviceSelect = document.querySelector('select[name="service_line"]');
        const weightInput   = document.querySelector('input[name="weight_kg"]');
        const tariffSelect  = document.getElementById('tariff-select');
        const totalDisplay  = document.getElementById('total-amount-display');

        if (!clientSelect || !serviceSelect || !weightInput || !tariffSelect || !totalDisplay) {
            return;
        }

        const formatCLP = (n) => '$' + Number(n).toLocaleString('es-CL', { maximumFractionDigits: 0 });

        function recalcTotal() {
            const opt = tariffSelect.options[tariffSelect.selectedIndex];
            const price = opt ? parseFloat(opt.dataset.price || 0) : 0;
            const weight = parseFloat(weightInput.value);

            totalDisplay.value = (price && weight > 0) ? formatCLP(price * weight) : '—';
        }

        function loadTariffOptions() {
            const clientId = clientSelect.value;
            const serviceLine = serviceSelect.value;

            if (!clientId || !serviceLine) {
                tariffSelect.innerHTML = '<option value="">Selecciona cliente y línea primero</option>';
                recalcTotal();
                return;
            }

            const url = `{{ route('orders.tariff-options') }}?client_id=${clientId}&service_line=${serviceLine}`;

            fetch(url, { headers: { 'Accept': 'application/json' } })
                .then(res => res.json())
                .then(options => {
                    if (!options.length) {
                        tariffSelect.innerHTML = '<option value="">Sin tarifa vigente para esta combinación</option>';
                        recalcTotal();
                        return;
                    }

                    tariffSelect.innerHTML = options.map(o =>
                        `<option value="${o.id}" data-price="${o.price_per_kg}">${o.label}</option>`
                    ).join('');

                    recalcTotal();
                })
                .catch(() => {
                    tariffSelect.innerHTML = '<option value="">Error al consultar tarifas</option>';
                    recalcTotal();
                });
        }

        clientSelect.addEventListener('change', loadTariffOptions);
        serviceSelect.addEventListener('change', loadTariffOptions);
        tariffSelect.addEventListener('change', recalcTotal);
        weightInput.addEventListener('input', recalcTotal);

        // Si ya viene un cliente/línea preseleccionado (o precargado desde un ingreso), consulta al cargar
        if (clientSelect.value && serviceSelect.value) {
            loadTariffOptions();
        }
    })();
});
</script>
@endpush
@endsection