@extends('layouts.courier')
@section('title', 'Konfirmasi Delivery Sale')

@push('head')
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
@endpush

@section('content')
<div class="py-2 max-w-md mx-auto" x-data="saleDeliveryForm()">
    <div class="mb-5">
        <a href="{{ route('courier.delivery') }}"
           class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-3">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Kembali ke Daftar Delivery
        </a>
        <h1 class="text-xl font-bold text-gray-800">Konfirmasi Delivery Barang</h1>
        <p class="text-sm text-gray-500 mt-0.5">Invoice <span class="font-mono font-semibold text-gray-700">{{ $invoice->invoice_number ?: ('INV-DRAFT-' . $invoice->id) }}</span></p>
    </div>

    <div class="rounded-2xl bg-white border border-gray-200 shadow-sm p-4 mb-5">
        <div class="grid grid-cols-1 gap-3 text-sm">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-0.5">Pelanggan</p>
                <p class="font-semibold text-gray-800">{{ $invoice->customer->name }}</p>
                <p class="text-xs text-gray-500">{{ $invoice->customer->whatsapp }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 font-medium mb-0.5">Total Invoice</p>
                <p class="font-semibold text-gray-800">Rp {{ number_format((float) $invoice->grand_total, 0, ',', '.') }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 font-medium mb-1">Item Barang</p>
                <ul class="list-disc pl-5 text-xs text-gray-600 space-y-1">
                    @foreach($invoice->items->take(5) as $item)
                    <li>{{ $item->description }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('courier.delivery.sales.store', $invoice) }}" class="space-y-4" enctype="multipart/form-data" @submit.prevent="handleSubmit($el)">
        @csrf

        <div class="rounded-2xl bg-white border border-gray-200 shadow-sm p-4">
            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Nama Penerima <span class="text-red-500">*</span></label>
            <input type="text" name="recipient_name" required value="{{ old('recipient_name') }}"
                   placeholder="Nama penerima barang"
                   class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
            @error('recipient_name')
                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
            @enderror

            <label class="block text-sm font-semibold text-gray-700 mt-4 mb-1.5">Foto Bukti Delivery</label>
            <input type="file" name="delivery_photo" accept="image/*" capture="environment"
                   class="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
            @error('delivery_photo')
                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
            @enderror

            <label class="block text-sm font-semibold text-gray-700 mt-4 mb-2">Tanda Tangan Penerima <span class="text-red-500">*</span></label>
            <div class="relative rounded-xl border-2 border-gray-300 bg-gray-50 overflow-hidden" style="touch-action: none;">
                <canvas id="sig-canvas" class="w-full block" style="height: 160px;"></canvas>
                <div id="sig-placeholder" class="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <p class="text-gray-300 text-sm select-none">Tanda tangan di sini</p>
                </div>
            </div>
            <div class="flex gap-2 mt-2">
                <button type="button" @click="clearSig()" class="text-xs text-red-600 border border-red-200 rounded-lg px-3 py-1.5 hover:bg-red-50 transition">Bersihkan</button>
                <span x-show="sigEmpty" class="text-xs text-red-500 flex items-center">Tanda tangan wajib diisi</span>
            </div>
            <input type="hidden" name="delivery_signature" id="delivery_signature">
            @error('delivery_signature')
                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
            @enderror

            <label class="block text-sm font-semibold text-gray-700 mt-4 mb-1.5">Catatan Delivery</label>
            <textarea name="delivery_note" rows="3" placeholder="Opsional: catatan tambahan pengiriman"
                      class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">{{ old('delivery_note') }}</textarea>
            @error('delivery_note')
                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <button type="submit"
                :disabled="submitting"
                :class="submitting ? 'opacity-60 cursor-wait' : 'hover:bg-blue-700 active:bg-blue-800'"
                class="w-full flex items-center justify-center gap-2 bg-blue-600 text-white font-semibold text-sm rounded-xl px-4 py-4 transition shadow-md">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            <span x-text="submitting ? 'Memproses...' : 'Selesaikan Delivery Barang'"></span>
        </button>
    </form>
</div>
@endsection

@push('scripts')
<script>
function saleDeliveryForm() {
    return {
        signaturePad: null,
        sigEmpty: false,
        submitting: false,

        init() {
            const canvas = document.getElementById('sig-canvas');
            const ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext('2d').scale(ratio, ratio);

            this.signaturePad = new SignaturePad(canvas, {
                minWidth: 1,
                maxWidth: 2.5,
                penColor: '#1e3a5f',
            });

            this.signaturePad.addEventListener('beginStroke', () => {
                document.getElementById('sig-placeholder').style.display = 'none';
                this.sigEmpty = false;
            });
        },

        clearSig() {
            this.signaturePad.clear();
            document.getElementById('sig-placeholder').style.display = '';
        },

        handleSubmit(form) {
            if (this.signaturePad.isEmpty()) {
                this.sigEmpty = true;
                return;
            }

            document.getElementById('delivery_signature').value = this.signaturePad.toDataURL('image/png');
            this.submitting = true;
            form.submit();
        },
    }
}
</script>
@endpush
