@extends('layouts.panel')

@section('title', 'Nueva Orden de Trabajo')

@section('content')

    <div class="page-header mb-4">
        <div class="page-header-title">
            <h1 class="h3 fw-bold text-dark mb-1">Nueva Orden de Trabajo</h1>
            <p class="page-header-subtitle text-muted mb-0">Selecciona el cliente y añade las prendas mediante el catálogo de servicios.</p>
        </div>
    </div>

    <form method="POST" action="{{ route('orders.store') }}" id="order-form">
        @csrf

        {{-- TARJETA: SELECCIÓN DE CLIENTE Y TARIFA --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <div class="row g-3">
                    
                    {{-- BUSCADOR Y SELECTOR DE CLIENTE --}}
                    <div class="col-md-7">
                        <label class="form-label fw-bold">Cliente <span class="text-danger">*</span></label>
                        <div class="input-group mb-2">
                            <span class="input-group-text bg-light"><i class="bi bi-search"></i></span>
                            <input type="text" id="client_search_input" class="form-control" placeholder="Escribe para buscar por nombre o RUT...">
                        </div>
                        <select name="client_id" id="client_select" class="form-select" size="4" required style="height: 110px;">
                            <option value="">-- Selecciona un cliente de la lista --</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}" data-search="{{ strtolower(($client->business_name ?? $client->contact_name) . ' ' . $client->rut) }}">
                                    {{ $client->business_name ?? $client->contact_name }} (RUT: {{ $client->rut ?? 'Sin RUT' }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- INFORMACIÓN DE TARIFA ASIGNADA Y TOTAL --}}
                    <div class="col-md-5">
                        <div class="p-3 bg-light rounded border h-100 d-flex flex-column justify-content-between">
                            <div>
                                <span class="text-muted small fw-bold text-uppercase d-block mb-1">Tarifa / Lista Aplicada</span>
                                <div id="tariff_info_badge" class="badge bg-secondary-subtle text-secondary fs-6 px-3 py-2 mb-2">
                                    <i class="bi bi-building me-1"></i> Selecciona un cliente
                                </div>
                                <p class="text-muted extra-small mb-0" id="tariff_desc">Los precios de cada servicio se ajustarán automáticamente según la lista de precios asignada al cliente o la lista base.</p>
                            </div>

                            <div class="pt-3 border-top mt-2">
                                <span class="text-muted small d-block">Monto Total Estimado:</span>
                                <h3 class="fw-bold text-primary mb-0" id="total_amount_display">$0</h3>
                                <input type="hidden" name="total_amount" id="total_amount_input" value="0">
                            </div>
                        </div>
                    </div>

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

        {{-- TARJETA: DETALLE DE PRENDAS Y SERVICIOS --}}
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div>
                        <h5 class="fw-bold mb-0">Detalle de Prendas</h5>
                        <p class="text-muted small mb-0">Añade los servicios desde el catálogo con la tarifa correspondiente.</p>
                    </div>
                    <button type="button" class="btn btn-primary" id="btn-open-catalog" disabled>
                        <i class="bi bi-plus-lg me-1"></i> Buscar en Catálogo
                    </button>
                </div>

                {{-- TABLA DE ITEMS AGREGADOS --}}
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="items-table">
                        <thead class="table-light">
                            <tr>
                                <th>Servicio / Prenda</th>
                                <th style="width: 130px;">Precio Unit.</th>
                                <th style="width: 120px;">Cantidad</th>
                                <th style="width: 140px;">Subtotal</th>
                                <th>Notas</th>
                                <th style="width: 50px;" class="text-center">#</th>
                            </tr>
                        </thead>
                        <tbody id="selected-items-body">
                            <tr id="empty-row">
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i class="bi bi-basket2 text-secondary fs-3 d-block mb-1"></i>
                                    No hay prendas o servicios agregados a esta orden.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                    <a href="{{ route('orders.index') }}" class="btn btn-outline-secondary">Cancelar</a>
                    <button type="submit" class="btn btn-success px-4" id="btn-submit-order" disabled>
                        <i class="bi bi-check-lg me-1"></i> Guardar Orden de Trabajo
                    </button>
                </div>
            </div>
        </div>
    </form>

    {{-- MODAL DE BÚSQUEDA DE SERVICIOS / CATÁLOGO --}}
    <div class="modal fade" id="modalCatalog" tabindex="-1" aria-labelledby="modalCatalogLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="modalCatalogLabel">Catálogo de Servicios y Tarifas</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" id="service_search_input" class="form-control" placeholder="Buscar servicio por nombre...">
                    </div>

                    <div id="catalog-services-list" class="row g-2">
                        {{-- Los ítems del catálogo se cargan por AJAX según la tarifa del cliente --}}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary rounded-pill px-4" data-bs-dismiss="modal">Listo</button>
                </div>
            </div>
        </div>
    </div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const clientSearchInput = document.getElementById('client_search_input');
    const clientSelect      = document.getElementById('client_select');
    const tariffBadge       = document.getElementById('tariff_info_badge');
    const tariffDesc        = document.getElementById('tariff_desc');
    const btnOpenCatalog    = document.getElementById('btn-open-catalog');
    const btnSubmitOrder    = document.getElementById('btn-submit-order');
    const catalogList       = document.getElementById('catalog-services-list');
    const serviceSearchInput= document.getElementById('service_search_input');
    const itemsTableBody    = document.getElementById('selected-items-body');
    const emptyRow          = document.getElementById('empty-row');
    const totalDisplay      = document.getElementById('total_amount_display');
    const totalInput        = document.getElementById('total_amount_input');

    let availableServices = [];
    let selectedOrderItems = [];

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

    // 1. BÚSQUEDA DE CLIENTE EN TIEMPO REAL
    clientSearchInput.addEventListener('input', function () {
        const filter = this.value.toLowerCase().trim();
        Array.from(clientSelect.options).forEach(opt => {
            if (!opt.value) return;
            const text = opt.getAttribute('data-search') || '';
            opt.style.display = text.includes(filter) ? '' : 'none';
        });
    });

    // 2. SELECCIÓN DE CLIENTE Y DETECCIÓN DE LISTA ASIGNADA O BASE
    clientSelect.addEventListener('change', function () {
        const clientId = this.value;
        if (!clientId) {
            btnOpenCatalog.disabled = true;
            tariffBadge.className = 'badge bg-secondary-subtle text-secondary fs-6 px-3 py-2 mb-2';
            tariffBadge.innerHTML = '<i class="bi bi-building me-1"></i> Selecciona un cliente';
            tariffDesc.textContent = 'Los precios de cada servicio se ajustarán automáticamente según la lista de precios asignada al cliente o la lista base.';
            return;
        }

        tariffBadge.className = 'badge bg-info-subtle text-info fs-6 px-3 py-2 mb-2';
        tariffBadge.innerHTML = '<i class="bi bi-arrow-repeat me-1"></i> Consultando tarifa...';

        const url = `{{ route('price-lists.client-services') }}?client_id=${clientId}`;

        fetch(url, {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(res => res.json())
        .then(response => {
            // Se soporta respuesta formateada con metadatos de la lista o un arreglo de servicios
            const data = response.services || response;
            const priceListName = response.price_list_name || null;
            const isCustomList  = response.is_custom_list ?? false;

            availableServices = data;
            btnOpenCatalog.disabled = false;

            // Muestra dinámicamente si es lista asignada o lista base predeterminada
            if (isCustomList && priceListName) {
                tariffBadge.className = 'badge bg-success-subtle text-success fs-6 px-3 py-2 mb-2';
                tariffBadge.innerHTML = `<i class="bi bi-tags-fill me-1"></i> Lista: ${priceListName}`;
                tariffDesc.textContent = `Lista específica asignada al cliente. Se aplicarán ${data.length} precios de esta lista.`;
            } else if (priceListName) {
                tariffBadge.className = 'badge bg-primary-subtle text-primary fs-6 px-3 py-2 mb-2';
                tariffBadge.innerHTML = `<i class="bi bi-bookmark-check me-1"></i> Lista Base: ${priceListName}`;
                tariffDesc.textContent = `El cliente no tiene lista personalizada. Se aplica la lista general/base.`;
            } else {
                tariffBadge.className = 'badge bg-secondary-subtle text-secondary fs-6 px-3 py-2 mb-2';
                tariffBadge.innerHTML = '<i class="bi bi-info-circle me-1"></i> Tarifa General / Base';
                tariffDesc.textContent = `Se aplicará la tarifa base configurada para cada servicio.`;
            }

            renderCatalogModal();

            // Recalcular precios de los ítems si ya se habían seleccionado previamente
            selectedOrderItems = selectedOrderItems.map(item => {
                const updatedSvc = availableServices.find(s => s.id === item.id);
                if (updatedSvc) {
                    item.price = updatedSvc.price_per_kg;
                }
                return item;
            });
            renderSelectedItems();
        })
        .catch(() => {
            tariffBadge.className = 'badge bg-danger-subtle text-danger fs-6 px-3 py-2 mb-2';
            tariffBadge.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i> Error al cargar lista';
        });
    });

    // 3. ABRIR MODAL CATÁLOGO
    const modalCatalogEl = new bootstrap.Modal(document.getElementById('modalCatalog'));
    btnOpenCatalog.addEventListener('click', () => modalCatalogEl.show());

    // 4. FILTRAR SERVICIOS DENTRO DEL MODAL
    serviceSearchInput.addEventListener('input', function () {
        const query = this.value.toLowerCase().trim();
        document.querySelectorAll('.catalog-item-card').forEach(card => {
            const name = card.getAttribute('data-name').toLowerCase();
            card.parentElement.style.display = name.includes(query) ? '' : 'none';
        });
    });

    // 5. RENDERIZAR SERVICIOS EN EL MODAL
    function renderCatalogModal() {
        catalogList.innerHTML = '';
        if (!availableServices.length) {
            catalogList.innerHTML = '<div class="text-center text-muted py-4">No hay servicios disponibles para este cliente.</div>';
            return;
        }

        availableServices.forEach(svc => {
            const col = document.createElement('div');
            col.className = 'col-md-6';
            col.innerHTML = `
                <div class="border rounded p-3 bg-white h-100 d-flex align-items-center justify-content-between catalog-item-card" data-name="${svc.name}">
                    <div>
                        <strong class="d-block text-dark">${svc.name}</strong>
                        <span class="text-primary fw-bold">${formatCLP(svc.price_per_kg)}</span>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary btn-add-svc" data-id="${svc.id}">
                        <i class="bi bi-plus-lg me-1"></i> Agregar
                    </button>
                </div>
            `;
            catalogList.appendChild(col);
        });
    }

    // BOTÓN AGREGAR EN EL MODAL
    catalogList.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-add-svc');
        if (!btn) return;

        const svcId = parseInt(btn.getAttribute('data-id'), 10);
        const svc = availableServices.find(s => s.id === svcId);
        if (!svc) return;

        const existing = selectedOrderItems.find(i => i.id === svc.id);
        if (existing) {
            existing.quantity += 1;
        } else {
            selectedOrderItems.push({
                id: svc.id,
                name: svc.name,
                price: svc.price_per_kg,
                quantity: 1,
                notes: ''
            });
        }

        renderSelectedItems();
    });

    // 6. RENDERIZAR FILAS SELECCIONADAS
    function renderSelectedItems() {
        itemsTableBody.innerHTML = '';

        if (!selectedOrderItems.length) {
            itemsTableBody.appendChild(emptyRow);
            totalDisplay.textContent = '$0';
            totalInput.value = 0;
            btnSubmitOrder.disabled = true;
            return;
        }

        btnSubmitOrder.disabled = false;
        let grandTotal = 0;

        selectedOrderItems.forEach((item, index) => {
            const subtotal = item.price * item.quantity;
            grandTotal += subtotal;

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>
                    <strong class="text-dark">${item.name}</strong>
                    <input type="hidden" name="items[${index}][service_id]" value="${item.id}">
                    <input type="hidden" name="items[${index}][garment_type]" value="${item.name}">
                </td>
                <td>
                    ${formatCLP(item.price)}
                    <input type="hidden" name="items[${index}][unit_price]" value="${item.price}">
                </td>
                <td>
                    <input type="number" min="1" class="form-control form-control-sm item-qty-input" data-index="${index}" name="items[${index}][quantity]" value="${item.quantity}">
                </td>
                <td>
                    <strong class="text-primary">${formatCLP(subtotal)}</strong>
                </td>
                <td>
                    <input type="text" class="form-control form-control-sm item-notes-input" data-index="${index}" name="items[${index}][notes]" value="${item.notes}" placeholder="Opcional">
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-link text-danger p-0 btn-remove-item" data-index="${index}">
                        <i class="bi bi-trash"></i>
                    </button>
                </td>
            `;
            itemsTableBody.appendChild(tr);
        });

        totalDisplay.textContent = formatCLP(grandTotal);
        totalInput.value = grandTotal;
    }

    // ACCIONES DE EDICIÓN EN LA TABLA
    itemsTableBody.addEventListener('change', function (e) {
        if (e.target.classList.contains('item-qty-input')) {
            const idx = parseInt(e.target.getAttribute('data-index'), 10);
            const val = parseInt(e.target.value, 10);
            selectedOrderItems[idx].quantity = isNaN(val) || val < 1 ? 1 : val;
            renderSelectedItems();
        }
        if (e.target.classList.contains('item-notes-input')) {
            const idx = parseInt(e.target.getAttribute('data-index'), 10);
            selectedOrderItems[idx].notes = e.target.value;
        }
    });

    itemsTableBody.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-remove-item');
        if (btn) {
            const idx = parseInt(btn.getAttribute('data-index'), 10);
            selectedOrderItems.splice(idx, 1);
            renderSelectedItems();
        }
    });
});
</script>
@endpush

@endsection