@extends('layouts.blank', ['title' => 'Tracking'])

@section('content')
@php
    $mapUrl = $order->mapUrl();
    $paymentMethods = [
        'CASH' => 'Efectivo',
        'TRANSFER' => 'Transferencia',
        'DEPOSIT' => 'Depósito',
        'CHECK' => 'Cheque',
        'DIRECT_CREDIT' => 'Crédito directo',
        'PAY_LATER' => 'Paga después',
    ];
    $currentPay = old('payment_method', $order->payment_method?->value ?? 'CASH');
@endphp
<div class="track-wrap">
    <div class="track-card">
        <div class="track-brand">{{ \App\Models\Setting::valueOf('business_name', config('app.name')) }}</div>
        <h1 class="h4 mb-1">{{ $order->number }}</h1>
        @include('tracking.partials.client-heading')

        @if(session('status'))
            <div class="alert alert-success py-2">{{ session('status') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger py-2">{{ $errors->first() }}</div>
        @endif

        <div class="mb-3">
            <span class="badge text-bg-primary fs-6">{{ $order->statusLabel() }}</span>
        </div>

        <div class="track-block">
            <div class="track-label">Dirección de entrega</div>
            <div class="mb-2">{{ $order->buyer_address ?: ($order->client?->address ?: '—') }}</div>
            @if($mapUrl)
                <a class="btn btn-outline-primary w-100" href="{{ $mapUrl }}" target="_blank" rel="noopener">
                    <i class="bi bi-geo-alt-fill me-1"></i> Ver en mapa
                </a>
            @endif
        </div>

        <div class="track-block">
            <div class="track-label">Productos</div>
            @foreach($order->items as $item)
                <div class="d-flex justify-content-between gap-2 border-bottom py-2">
                    <div>
                        <div class="fw-semibold">{{ $item->product?->name }}</div>
                        <div class="small text-secondary">{{ $item->quantityLabel() }}</div>
                    </div>
                    <div class="fw-semibold">${{ number_format((float) $item->total, 2) }}</div>
                </div>
            @endforeach
            <div class="d-flex justify-content-between fw-bold pt-2">
                <span>Total a cobrar</span>
                <span>${{ number_format((float) $order->total, 2) }}</span>
            </div>
        </div>

        <div class="track-block track-pay-info">
            <div class="track-label">Pago registrado por admin</div>
            <div><strong>{{ $order->paymentMethodLabel() }}</strong></div>
            @if($order->payment_reference)
                <div class="small">Ref: {{ $order->payment_reference }}</div>
            @endif
            @if($order->payment_notes)
                <div class="small text-secondary">{{ $order->payment_notes }}</div>
            @endif
            @if($order->payment_evidence_path)
                <a class="btn btn-sm btn-outline-secondary mt-2" href="{{ route('tracking.payment-evidence', $order->tracking_token) }}" target="_blank">
                    <i class="bi bi-image"></i> Ver comprobante
                </a>
            @else
                <div class="small text-secondary mt-1">Sin comprobante aún. Puede cargarlo al entregar si cambia el pago.</div>
            @endif
        </div>

        @if($order->internal_notes)
            <div class="track-block track-internal">
                <div class="track-label">Observaciones internas</div>
                <div>{{ $order->internal_notes }}</div>
            </div>
        @endif
        @if($order->notes)
            <div class="track-block">
                <div class="track-label">Notas del cliente</div>
                <div>{{ $order->notes }}</div>
            </div>
        @endif

        <div class="track-block">
            <label class="form-label">Nombre del despachador</label>
            <input class="form-control form-control-lg" form="statusForm" name="dispatcher_name" id="dispatcherNameShared" value="{{ old('dispatcher_name', $order->dispatcher_name) }}" placeholder="Ej. Juan Pérez" required>
            <div class="form-text">Escríbalo libremente; no necesita seleccionar usuario.</div>
        </div>

        <form id="statusForm" method="POST" action="{{ route('tracking.status', $order->tracking_token) }}" class="d-grid gap-2 mb-3">
            @csrf
            <input type="hidden" name="status" id="statusValue" value="">
            <input type="hidden" name="outcome_notes" id="outcomeNotesHidden" value="{{ old('outcome_notes') }}">
            <button class="btn btn-outline-primary btn-lg" type="submit" data-status="PREPARING">Preparando</button>
            <button class="btn btn-primary btn-lg" type="submit" data-status="IN_TRANSIT">En ruta</button>
            <button class="btn btn-outline-warning btn-lg" type="button" id="btnDeliveryFailed" data-status="DELIVERY_FAILED">Entrega fallida</button>
            <button class="btn btn-outline-danger btn-lg" type="button" id="btnCancelled" data-status="CANCELLED">Cancelado</button>
        </form>

        <div class="modal fade" id="modalOutcomeNotes" tabindex="-1" aria-labelledby="modalOutcomeNotesTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalOutcomeNotesTitle">Motivo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body">
                        <p class="small text-secondary mb-2" id="modalOutcomeNotesHint">
                            Indique el motivo. Al confirmar, el portal se bloqueará hasta que un administrador lo reabra.
                        </p>
                        <label class="form-label" for="outcomeNotesModal">Motivo <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="outcomeNotesModal" rows="4" maxlength="2000" placeholder="Explique el motivo…">{{ old('outcome_notes') }}</textarea>
                        <div class="invalid-feedback" id="outcomeNotesError">Debe indicar el motivo.</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Volver</button>
                        <button type="button" class="btn" id="btnConfirmOutcome">Confirmar</button>
                    </div>
                </div>
            </div>
        </div>

        <hr>
        <h2 class="h6 mb-2">Confirmar entrega</h2>
        <p class="small text-secondary mb-2">
            La foto de entrega es obligatoria. Si el cliente <strong>paga después</strong> o es <strong>crédito</strong>, no registre cobro aquí: el admin lo cargará luego.
        </p>

        <form id="deliverForm" method="POST" action="{{ route('tracking.deliver', $order->tracking_token) }}" enctype="multipart/form-data" class="d-grid gap-2">
            @csrf
            <input type="hidden" name="dispatcher_name" id="deliverDispatcherName" value="{{ old('dispatcher_name', $order->dispatcher_name) }}">

            <div class="track-block mb-0">
                <div class="track-label">Forma de pago</div>
                <div class="row g-2" id="paymentMethodGroup">
                    @foreach($paymentMethods as $val => $label)
                        <div class="col-6">
                            <label class="track-pay-option">
                                <input type="radio" name="payment_method" value="{{ $val }}" @checked($currentPay === $val) required>
                                <span>{{ $label }}</span>
                            </label>
                        </div>
                    @endforeach
                </div>
                <div class="form-text mt-2 {{ in_array($currentPay, ['PAY_LATER', 'DIRECT_CREDIT'], true) ? '' : 'd-none' }}" id="payLaterHint">
                    <strong>Sin cobro ahora:</strong> confirma la entrega; el admin agrega el comprobante después.
                </div>
            </div>

            <div id="paymentEvidenceBlock" class="{{ in_array($currentPay, ['CHECK','TRANSFER','DEPOSIT'], true) ? '' : 'd-none' }}">
                <label class="form-label">Referencia del pago</label>
                <input class="form-control mb-2" name="payment_reference" id="payment_reference" value="{{ old('payment_reference', $order->payment_reference) }}" placeholder="Nº transferencia / cheque">

                @if($order->payment_evidence_path)
                    <div class="alert alert-light border py-2 small mb-2">
                        Ya hay un comprobante del admin.
                        <a href="{{ route('tracking.payment-evidence', $order->tracking_token) }}" target="_blank">Ver</a>.
                        Si el pago cambió, tome una foto nueva.
                    </div>
                @endif

                <input class="d-none" type="file" name="payment_evidence" id="paymentEvidenceCamera" accept="image/*" capture="environment">
                <input class="d-none" type="file" id="paymentEvidenceGallery" accept="image/*">

                <div id="payPreviewWrap" class="track-photo-preview d-none mb-2">
                    <img id="payPreview" alt="Comprobante de pago">
                </div>

                <button class="btn btn-outline-dark w-100 mb-1" type="button" id="btnPayTakePhoto">
                    <i class="bi bi-camera-fill me-1"></i> Foto del comprobante de pago
                </button>
                <button class="btn btn-outline-secondary btn-sm w-100 mb-2" type="button" id="btnPayGallery">
                    <i class="bi bi-image me-1"></i> Galería (comprobante)
                </button>
                <input class="form-control form-control-sm" name="payment_notes" value="{{ old('payment_notes', $order->payment_notes) }}" placeholder="Notas de pago (opcional)">
            </div>

            <hr class="my-1">
            <div class="track-label">Foto de entrega</div>

            <input class="d-none" type="file" name="evidence" id="evidenceCamera" accept="image/*" capture="environment">
            <input class="d-none" type="file" id="evidenceGallery" accept="image/*">

            <div id="photoPreviewWrap" class="track-photo-preview d-none">
                <img id="photoPreview" alt="Vista previa de la evidencia">
                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="btnRetakePhoto">
                    <i class="bi bi-arrow-repeat"></i> Tomar otra foto
                </button>
            </div>

            <button class="btn btn-dark btn-lg" type="button" id="btnTakePhoto">
                <i class="bi bi-camera-fill me-2"></i> Tomar foto de entrega
            </button>
            <button class="btn btn-outline-secondary" type="button" id="btnPickGallery">
                <i class="bi bi-image me-1"></i> Elegir de la galería
            </button>

            <p id="photoHint" class="small text-secondary mb-0">La foto de entrega es obligatoria. Comprobante de pago solo si cobró transferencia/cheque/depósito ahora.</p>

            <button class="btn btn-success btn-lg" type="submit" id="btnConfirmDeliver" disabled>
                <i class="bi bi-check2-circle me-1"></i> Confirmar entrega
            </button>
        </form>
    </div>
</div>

<script>
(() => {
    const hasAdminPayEvidence = @json((bool) $order->payment_evidence_path);
    const cameraInput = document.getElementById('evidenceCamera');
    const galleryInput = document.getElementById('evidenceGallery');
    const previewWrap = document.getElementById('photoPreviewWrap');
    const previewImg = document.getElementById('photoPreview');
    const btnTake = document.getElementById('btnTakePhoto');
    const btnGallery = document.getElementById('btnPickGallery');
    const btnRetake = document.getElementById('btnRetakePhoto');
    const btnConfirm = document.getElementById('btnConfirmDeliver');
    const hint = document.getElementById('photoHint');
    const deliverForm = document.getElementById('deliverForm');
    const dispatcherInput = document.getElementById('dispatcherNameShared');
    const payBlock = document.getElementById('paymentEvidenceBlock');
    const payCamera = document.getElementById('paymentEvidenceCamera');
    const payGallery = document.getElementById('paymentEvidenceGallery');
    const payPreviewWrap = document.getElementById('payPreviewWrap');
    const payPreview = document.getElementById('payPreview');

    if (!cameraInput || !deliverForm) return;

    function needsPayEvidence(method) {
        return ['CHECK', 'TRANSFER', 'DEPOSIT'].includes(method);
    }

    function selectedPayMethod() {
        return document.querySelector('input[name="payment_method"]:checked')?.value || 'CASH';
    }

    function togglePayBlock() {
        const method = selectedPayMethod();
        const needs = needsPayEvidence(method);
        payBlock?.classList.toggle('d-none', !needs);
        const laterHint = document.getElementById('payLaterHint');
        if (laterHint) {
            laterHint.classList.toggle('d-none', !['PAY_LATER', 'DIRECT_CREDIT'].includes(method));
        }
    }

    document.querySelectorAll('input[name="payment_method"]').forEach((el) => {
        el.addEventListener('change', togglePayBlock);
    });
    togglePayBlock();

    function syncFile(input, file, showFn) {
        if (!file || !input) return;
        const dt = new DataTransfer();
        dt.items.add(file);
        input.files = dt.files;
        showFn(file);
    }

    function showDeliveryPreview(file) {
        const url = URL.createObjectURL(file);
        previewImg.onload = () => URL.revokeObjectURL(url);
        previewImg.src = url;
        previewWrap.classList.remove('d-none');
        btnConfirm.disabled = false;
        if (hint) {
            hint.textContent = 'Foto de entrega lista. Revise el pago y confirme.';
            hint.classList.remove('text-danger');
        }
    }

    function showPayPreview(file) {
        const url = URL.createObjectURL(file);
        payPreview.onload = () => URL.revokeObjectURL(url);
        payPreview.src = url;
        payPreviewWrap.classList.remove('d-none');
    }

    function clearDeliveryPhoto() {
        cameraInput.value = '';
        if (galleryInput) galleryInput.value = '';
        previewImg.removeAttribute('src');
        previewWrap.classList.add('d-none');
        btnConfirm.disabled = true;
    }

    btnTake?.addEventListener('click', () => cameraInput.click());
    btnRetake?.addEventListener('click', () => { clearDeliveryPhoto(); cameraInput.click(); });
    btnGallery?.addEventListener('click', () => galleryInput?.click());
    document.getElementById('btnPayTakePhoto')?.addEventListener('click', () => payCamera?.click());
    document.getElementById('btnPayGallery')?.addEventListener('click', () => payGallery?.click());

    cameraInput.addEventListener('change', () => {
        const file = cameraInput.files?.[0];
        if (file) showDeliveryPreview(file);
        else clearDeliveryPhoto();
    });
    galleryInput?.addEventListener('change', () => {
        const file = galleryInput.files?.[0];
        if (file) syncFile(cameraInput, file, showDeliveryPreview);
    });
    payCamera?.addEventListener('change', () => {
        const file = payCamera.files?.[0];
        if (file) showPayPreview(file);
    });
    payGallery?.addEventListener('change', () => {
        const file = payGallery.files?.[0];
        if (file) syncFile(payCamera, file, showPayPreview);
    });

    deliverForm.addEventListener('submit', (e) => {
        const nameEl = document.getElementById('deliverDispatcherName');
        if (dispatcherInput && nameEl) nameEl.value = dispatcherInput.value.trim();

        if (!cameraInput.files?.length) {
            e.preventDefault();
            if (hint) {
                hint.textContent = 'Debe tomar la foto de entrega.';
                hint.classList.add('text-danger');
            }
            cameraInput.click();
            return;
        }

        const method = selectedPayMethod();
        if (needsPayEvidence(method) && !payCamera?.files?.length && !hasAdminPayEvidence) {
            e.preventDefault();
            if (hint) {
                hint.textContent = 'Este pago requiere foto del comprobante.';
                hint.classList.add('text-danger');
            }
            payCamera?.click();
            return;
        }

        if (nameEl && !nameEl.value.trim()) {
            e.preventDefault();
            alert('Indique el nombre del despachador.');
            dispatcherInput?.focus();
        }
    });
})();

(() => {
    const form = document.getElementById('statusForm');
    const statusValue = document.getElementById('statusValue');
    const notesHidden = document.getElementById('outcomeNotesHidden');
    const modalEl = document.getElementById('modalOutcomeNotes');
    const notesInput = document.getElementById('outcomeNotesModal');
    const titleEl = document.getElementById('modalOutcomeNotesTitle');
    const hintEl = document.getElementById('modalOutcomeNotesHint');
    const confirmBtn = document.getElementById('btnConfirmOutcome');
    if (!form || !statusValue || !modalEl || !notesInput || !confirmBtn) return;

    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    let pendingStatus = null;

    const configs = {
        DELIVERY_FAILED: {
            title: 'Entrega fallida',
            hint: 'Explique por qué no se pudo entregar. Al confirmar, el portal se bloqueará hasta que un administrador lo reabra.',
            btnClass: 'btn-warning',
            btnText: 'Confirmar entrega fallida',
        },
        CANCELLED: {
            title: 'Cancelar pedido',
            hint: 'Explique el motivo de la cancelación. Al confirmar, el portal se bloqueará y se liberará el stock reservado.',
            btnClass: 'btn-danger',
            btnText: 'Confirmar cancelación',
        },
    };

    function openOutcomeModal(status) {
        const name = document.getElementById('dispatcherNameShared')?.value?.trim();
        if (!name) {
            alert('Indique el nombre del despachador.');
            document.getElementById('dispatcherNameShared')?.focus();
            return;
        }

        pendingStatus = status;
        const cfg = configs[status];
        titleEl.textContent = cfg.title;
        hintEl.textContent = cfg.hint;
        confirmBtn.className = 'btn ' + cfg.btnClass;
        confirmBtn.textContent = cfg.btnText;
        notesInput.classList.remove('is-invalid');
        if (!notesInput.value.trim()) notesInput.value = notesHidden.value || '';
        modal.show();
        setTimeout(() => notesInput.focus(), 300);
    }

    document.getElementById('btnDeliveryFailed')?.addEventListener('click', () => openOutcomeModal('DELIVERY_FAILED'));
    document.getElementById('btnCancelled')?.addEventListener('click', () => openOutcomeModal('CANCELLED'));

    form.querySelectorAll('button[type="submit"][data-status]').forEach((btn) => {
        btn.addEventListener('click', () => {
            statusValue.value = btn.dataset.status;
            notesHidden.value = '';
        });
    });

    form.addEventListener('submit', (e) => {
        if (!statusValue.value) {
            e.preventDefault();
            return;
        }
        const name = document.getElementById('dispatcherNameShared')?.value?.trim();
        if (!name) {
            e.preventDefault();
            alert('Indique el nombre del despachador.');
            document.getElementById('dispatcherNameShared')?.focus();
        }
    });

    confirmBtn.addEventListener('click', () => {
        const notes = notesInput.value.trim();
        if (!notes) {
            notesInput.classList.add('is-invalid');
            notesInput.focus();
            return;
        }
        if (!pendingStatus) return;

        statusValue.value = pendingStatus;
        notesHidden.value = notes;
        modal.hide();
        form.requestSubmit();
    });

    notesInput.addEventListener('input', () => notesInput.classList.remove('is-invalid'));

    @if($errors->has('outcome_notes') && old('status'))
        openOutcomeModal(@json(old('status')));
    @endif
})();
</script>
@endsection