@extends('izin_tamu.layout')

@section('title', 'Kehadiran Berhasil')

@section('title', 'Terima Kasih - PT Asama Indonesia MFG')

@section('content')
<div class="max-w-xl mx-auto bg-white p-6 rounded-lg shadow-md text-center text-black">
    <h2 class="text-2xl font-bold mb-4 text-emerald-700">🎉 Terima Kasih!</h2>
    
    <p class="text-lg mb-4">
        Halo <strong>{{ $izin->nama_tamu }}</strong>, data kehadiran Anda sudah tercatat.
    </p>
    <p class="text-base text-gray-600 mb-6">
        Selamat datang di PT Asama Indonesia MFG.<br>
        Semoga kunjungan Anda berjalan lancar dan aman.
    </p>

    <div class="mt-4">
        <span class="inline-block px-4 py-2 bg-emerald-100 text-emerald-800 rounded-full font-semibold">
            ✅ Kehadiran berhasil tercatat
        </span>
    </div>

    {{-- Form tanda tangan digital --}}
<div class="mt-6 text-left bg-gray-50 rounded-lg p-4 text-sm text-gray-700">
    <h3 class="text-lg font-semibold text-emerald-700 mb-2">✍️ Konfirmasi Pertemuan</h3>
    <p class="mb-2 font-semibold text-red-600">
        ⚠️ Jangan close link ini atau simpan, sampai {{ $izin->user_ditemui }} benar-benar menandatangani sebagai konfirmasi pertemuan.
    </p>
</div>


    <canvas 
    id="signature-pad" 
    class="w-full max-w-full h-36 border border-gray-300 rounded-lg bg-white"
    style="touch-action: none;">
</canvas>


    <div class="mt-3 flex gap-3">
        <button id="clear-btn" class="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500">Hapus</button>
        <button id="save-btn" class="px-4 py-2 bg-emerald-600 text-white rounded hover:bg-emerald-700">Simpan Tanda Tangan</button>
    </div>

    <div id="signature-message" class="mt-3 text-sm text-emerald-700 font-semibold hidden">✅ Tanda tangan berhasil disimpan!</div>
</div>

{{-- Script untuk Signature Pad --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('signature-pad');
    const ctx = canvas.getContext('2d');
    let drawing = false;

    canvas.addEventListener('mousedown', () => drawing = true);
    canvas.addEventListener('mouseup', () => drawing = false);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('touchstart', e => startTouch(e));
    canvas.addEventListener('touchmove', e => moveTouch(e));
    canvas.addEventListener('touchend', () => drawing = false);

    function draw(e) {
        if (!drawing) return;
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.strokeStyle = '#0f766e';
        const rect = canvas.getBoundingClientRect();
        ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
    }

    // Touch support (mobile)
    function startTouch(e) {
        drawing = true;
        const rect = canvas.getBoundingClientRect();
        const t = e.touches[0];
        ctx.moveTo(t.clientX - rect.left, t.clientY - rect.top);
    }
    function moveTouch(e) {
        e.preventDefault();
        if (!drawing) return;
        const rect = canvas.getBoundingClientRect();
        const t = e.touches[0];
        ctx.lineTo(t.clientX - rect.left, t.clientY - rect.top);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(t.clientX - rect.left, t.clientY - rect.top);
    }

    document.getElementById('clear-btn').addEventListener('click', function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    });

    document.getElementById('save-btn').addEventListener('click', async function () {
        const signature = canvas.toDataURL('image/png');

        if (signature.length < 1000) {
            alert('Silakan tanda tangan terlebih dahulu!');
            return;
        }

        const response = await fetch("{{ route('izin_tamu.storeSignature', $izin->id) }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ signature })
        });

        const result = await response.json();
        if (result.success) {
            document.getElementById('signature-message').classList.remove('hidden');
            document.getElementById('save-btn').disabled = true;
        } else {
            alert('Gagal menyimpan tanda tangan!');
        }
    });
});


</script>


    {{-- Ringkasan singkat --}}
    <div class="mt-6 text-left bg-gray-50 rounded-lg p-4 text-sm text-gray-700">
        <p><strong>Nama:</strong> {{ $izin->nama_tamu }}</p>
        <p><strong>Perusahaan:</strong> {{ $izin->perusahaan }}</p>
        <p><strong>Lokasi:</strong> {{ $izin->lokasi_penerimaan }}</p>
        <p><strong>Status:</strong> Hadir</p>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // redirect otomatis ke thanks page jika user coba swipe back
    window.addEventListener('pageshow', function(event) {
        if (event.persisted || (window.performance && window.performance.getEntriesByType("navigation")[0].type === "back_forward")) {
            window.location.href = "{{ route('izin_tamu.thanks_page', $izin->id) }}";
        }
    });

    // blok back button
    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        window.location.href = "{{ route('izin_tamu.thanks_page', $izin->id) }}";
    };
</script>
@endsection