@php
    $v = fn($k, $d = '') => old($k, $data[$k] ?? $d);
    $err = fn($k) => $errors->has($k) ? 'has-error' : '';

    $frontUrl = !empty($data['id_front_path'] ?? null)
        ? asset('storage/' . ltrim($data['id_front_path'], '/'))
        : '';

    $backUrl = !empty($data['id_back_path'] ?? null)
        ? asset('storage/' . ltrim($data['id_back_path'], '/'))
        : '';

    $selfieUrl = !empty($data['selfie_path'] ?? null)
        ? asset('storage/' . ltrim($data['selfie_path'], '/'))
        : '';

    $signatureUrl = !empty($data['signature_path'] ?? null)
        ? asset('storage/' . ltrim($data['signature_path'], '/'))
        : '';
@endphp

<style>
    .pi-step4-title {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 900;
        margin: 14px 0 10px;
        color: #0f172a;
        font-size: 16px;
    }

    .pi-step4-title i {
        color: #DD3532;
    }

    .pi-step4-field {
        background: #fff;
        border: 1px solid #e6eaee;
        border-radius: 16px;
        padding: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
    }

    .pi-step4-field:focus-within {
        border-color: #DD3532;
        box-shadow: 0 0 0 4px rgba(221, 53, 50, .08);
    }

    .pi-step4-field.has-error {
        border-color: #ff4d6d;
    }

    .pi-step4-icon {
        width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #DD3532;
        flex: 0 0 auto;
    }

    .pi-step4-input {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: auto !important;
        font-size: 14px;
        width: 100%;
        outline: none !important;
    }

    .pi-step4-err {
        margin-top: -6px;
        margin-bottom: 10px;
        color: #ff4d6d;
        font-size: 12px;
        padding-left: 8px;
    }

    .pi-step4-upload-card {
        border: 1px solid #e6eaee;
        border-radius: 18px;
        padding: 12px;
        margin-bottom: 14px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
    }

    .pi-step4-upload-card.has-error {
        border-color: #ff4d6d;
    }

    .pi-step4-head {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 900;
        color: #111827;
        margin-bottom: 6px;
        line-height: 1.35;
    }

    .pi-step4-head i {
        color: #DD3532;
    }

    .pi-step4-sub {
        font-size: 12px;
        color: #7b8794;
        margin-bottom: 12px;
        line-height: 1.55;
    }

    .pi-step4-drop {
        border: 1px dashed #d5dbe3;
        border-radius: 16px;
        height: 142px;
        background: #f6f7f9;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s ease;
    }

    .pi-step4-drop:hover {
        border-color: #DD3532;
        background: #fff1f1;
    }

    .pi-step4-drop.has-preview {
        border-style: solid;
        background: #fff;
    }

    .pi-step4-preview {
        display: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pi-step4-drop.has-preview .pi-step4-preview {
        display: block;
    }

    .pi-step4-meta {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        text-align: center;
        padding: 12px;
    }

    .pi-step4-drop.has-preview .pi-step4-meta {
        display: none;
    }

    .pi-step4-meta i {
        font-size: 30px;
        color: #9ca3af;
    }

    .pi-step4-meta span {
        font-size: 12px;
        color: #6b7280;
    }

    .pi-step4-file-name {
        margin-top: 9px;
        min-height: 38px;
        border: 1px solid #eef2f7;
        border-radius: 12px;
        background: #fff;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 11px;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }

    .pi-step4-file-name i {
        color: #DD3532;
        font-size: 17px;
    }

    .pi-step4-file-name strong {
        color: #0f172a;
    }

    .pi-step4-hidden-file {
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
    }

    .pi-step4-sign-wrap {
        border: 1px solid #e6eaee;
        border-radius: 18px;
        background: #fff;
        padding: 12px;
        margin-bottom: 14px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
    }

    .pi-step4-canvas {
        width: 100%;
        height: 170px;
        border: 1px dashed #d5dbe3;
        border-radius: 14px;
        background: #fff;
        display: block;
        touch-action: none;
    }

    .pi-step4-clear {
        margin-top: 10px;
        width: 100%;
        border: 0;
        background: #f1f5f9;
        color: #334155;
        height: 44px;
        border-radius: 12px;
        font-weight: 800;
    }

    .pi-step4-sign-hint {
        margin-top: 8px;
        font-size: 12px;
        color: #6b7280;
        text-align: center;
    }

    #imgSheet {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: none;
    }

    .img-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .35);
    }

    .img-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        padding: 10px 16px 20px;
        box-shadow: 0 -18px 40px rgba(0, 0, 0, .25);
        animation: sheetUp .18s ease-out;
    }

    @keyframes sheetUp {
        from {
            transform: translateY(30px);
            opacity: .7;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .img-sheet__handle {
        width: 46px;
        height: 5px;
        border-radius: 99px;
        background: #e5e7eb;
        margin: 6px auto 10px;
    }

    .img-sheet__title {
        text-align: center;
        font-weight: 900;
        color: #0f172a;
        font-size: 14px;
        margin-bottom: 14px;
    }

    .img-sheet__row {
        display: flex;
        justify-content: space-evenly;
        gap: 22px;
        padding: 6px 0 2px;
    }

    .img-sheet__btn {
        width: 120px;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .img-sheet__icon {
        width: 58px;
        height: 58px;
        border-radius: 999px;
        background: #fff1f1;
        display: grid;
        place-items: center;
        color: #DD3532;
        font-size: 23px;
    }

    .img-sheet__text {
        font-weight: 800;
        font-size: 13px;
        color: #0f172a;
    }
</style>

<div class="pi-step4-field {{ $err('id_name') }}">
    <div class="pi-step4-icon">
        <i class="bi bi-card-heading"></i>
    </div>

    <input class="form-control pi-step4-input"
           name="id_name"
           placeholder="নাম (আইডি/পাসপোর্ট অনুযায়ী)"
           value="{{ $v('id_name') }}">
</div>
@error('id_name')
    <div class="pi-step4-err">{{ $message }}</div>
@enderror

<div class="pi-step4-field {{ $err('id_number') }}">
    <div class="pi-step4-icon">
        <i class="bi bi-credit-card-2-front"></i>
    </div>

    <input class="form-control pi-step4-input"
           name="id_number"
           placeholder="আইডি/পাসপোর্ট নম্বর"
           value="{{ $v('id_number') }}">
</div>
@error('id_number')
    <div class="pi-step4-err">{{ $message }}</div>
@enderror

<div class="pi-step4-title">
    <i class="bi bi-camera"></i>
    <span>ডকুমেন্ট আপলোড</span>
</div>

{{-- ID Front --}}
<div class="pi-step4-upload-card {{ $err('id_front') }}">
    <div class="pi-step4-head">
        <i class="bi bi-camera"></i>
        <span>আইডি/পাসপোর্ট এর সামনের দিক</span>
    </div>

    <div class="pi-step4-sub">
        আপনার আইডি/পাসপোর্ট এর কার্ডের সামনের দিকের একটি পরিষ্কার ছবি আপলোড করুন
    </div>

    <div class="pi-step4-drop js-img-drop"
         data-target="id_front"
         data-cam="id_front_cam"
         data-preview="prevFront"
         data-existing="{{ $frontUrl }}">
        <img class="pi-step4-preview" id="prevFront" alt="Front Preview">

        <div class="pi-step4-meta">
            <i class="bi bi-image"></i>
            <span>গ্যালারি অথবা ক্যামেরা থেকে আপলোড করুন</span>
        </div>
    </div>

    <div class="pi-step4-file-name">
        <i class="bi bi-cloud-arrow-up"></i>
        <span>
            <strong>ফাইল:</strong>
            <span id="name_id_front">কোনো ফাইল নির্বাচন করা হয়নি</span>
        </span>
    </div>

    <input class="pi-step4-hidden-file js-gallery-input"
           type="file"
           name="id_front"
           id="id_front"
           accept="image/*">

    <input class="pi-step4-hidden-file js-camera-input"
           type="file"
           id="id_front_cam"
           accept="image/*"
           capture="environment">
</div>
@error('id_front')
    <div class="pi-step4-err">{{ $message }}</div>
@enderror

{{-- ID Back --}}
<div class="pi-step4-upload-card {{ $err('id_back') }}">
    <div class="pi-step4-head">
        <i class="bi bi-camera"></i>
        <span>আইডি/পাসপোর্ট এর পিছনের দিক</span>
    </div>

    <div class="pi-step4-sub">
        আপনার আইডি/পাসপোর্ট এর কার্ডের পিছনের দিকের একটি পরিষ্কার ছবি আপলোড করুন
    </div>

    <div class="pi-step4-drop js-img-drop"
         data-target="id_back"
         data-cam="id_back_cam"
         data-preview="prevBack"
         data-existing="{{ $backUrl }}">
        <img class="pi-step4-preview" id="prevBack" alt="Back Preview">

        <div class="pi-step4-meta">
            <i class="bi bi-image"></i>
            <span>গ্যালারি অথবা ক্যামেরা থেকে আপলোড করুন</span>
        </div>
    </div>

    <div class="pi-step4-file-name">
        <i class="bi bi-cloud-arrow-up"></i>
        <span>
            <strong>ফাইল:</strong>
            <span id="name_id_back">কোনো ফাইল নির্বাচন করা হয়নি</span>
        </span>
    </div>

    <input class="pi-step4-hidden-file js-gallery-input"
           type="file"
           name="id_back"
           id="id_back"
           accept="image/*">

    <input class="pi-step4-hidden-file js-camera-input"
           type="file"
           id="id_back_cam"
           accept="image/*"
           capture="environment">
</div>
@error('id_back')
    <div class="pi-step4-err">{{ $message }}</div>
@enderror

{{-- Selfie --}}
<div class="pi-step4-upload-card {{ $err('selfie') }}">
    <div class="pi-step4-head">
        <i class="bi bi-camera"></i>
        <span>আইডি/পাসপোর্ট এর সাথে সেলফি</span>
    </div>

    <div class="pi-step4-sub">
        আপনার আইডি/পাসপোর্ট ধরে একটি সেলফি তুলুন
    </div>

    <div class="pi-step4-drop js-img-drop"
         data-target="selfie"
         data-cam="selfie_cam"
         data-preview="prevSelfie"
         data-existing="{{ $selfieUrl }}">
        <img class="pi-step4-preview" id="prevSelfie" alt="Selfie Preview">

        <div class="pi-step4-meta">
            <i class="bi bi-image"></i>
            <span>গ্যালারি অথবা ক্যামেরা থেকে আপলোড করুন</span>
        </div>
    </div>

    <div class="pi-step4-file-name">
        <i class="bi bi-cloud-arrow-up"></i>
        <span>
            <strong>ফাইল:</strong>
            <span id="name_selfie">কোনো ফাইল নির্বাচন করা হয়নি</span>
        </span>
    </div>

    <input class="pi-step4-hidden-file js-gallery-input"
           type="file"
           name="selfie"
           id="selfie"
           accept="image/*">

    <input class="pi-step4-hidden-file js-camera-input"
           type="file"
           id="selfie_cam"
           accept="image/*"
           capture="user">
</div>
@error('selfie')
    <div class="pi-step4-err">{{ $message }}</div>
@enderror

{{-- Signature --}}
<div class="pi-step4-sign-wrap">
    <div class="pi-step4-head">
        <i class="bi bi-pen"></i>
        <span>স্বাক্ষর</span>
    </div>

    <div class="pi-step4-sub">
        আপনার স্বাক্ষর আঁকুন অথবা মোবাইলে আঙুল দিয়ে লিখুন
    </div>

    <canvas id="sigCanvas"
            class="pi-step4-canvas"
            data-existing-signature="{{ $signatureUrl }}"></canvas>

    <input type="hidden" name="signature_data" id="signature_data">

    <button type="button" id="sigClear" class="pi-step4-clear">
        <i class="bi bi-x-lg me-1"></i>
        মুছুন
    </button>

    @if(!empty($signatureUrl))
        <div class="pi-step4-sign-hint">✅ আপনার আগের স্বাক্ষর লোড করা আছে</div>
    @endif
</div>

{{-- Bottom Sheet --}}
<div id="imgSheet">
    <div class="img-sheet__backdrop"></div>

    <div class="img-sheet__panel" role="dialog" aria-modal="true">
        <div class="img-sheet__handle"></div>
        <div class="img-sheet__title">ছবির উৎস নির্বাচন করুন</div>

        <div class="img-sheet__row">
            <button type="button" id="pickCamera" class="img-sheet__btn">
                <span class="img-sheet__icon">
                    <i class="bi bi-camera"></i>
                </span>
                <span class="img-sheet__text">ক্যামেরা</span>
            </button>

            <button type="button" id="pickGallery" class="img-sheet__btn">
                <span class="img-sheet__icon">
                    <i class="bi bi-image"></i>
                </span>
                <span class="img-sheet__text">গ্যালারি</span>
            </button>
        </div>
    </div>
</div>

<script>
(function () {
    const sheet = document.getElementById('imgSheet');
    const backdrop = sheet ? sheet.querySelector('.img-sheet__backdrop') : null;
    const btnCam = document.getElementById('pickCamera');
    const btnGal = document.getElementById('pickGallery');

    let active = null;

    function openSheet(target) {
        active = target;

        if (!sheet) return;

        sheet.style.display = 'block';
        document.body.style.overflow = 'hidden';
    }

    function closeSheet() {
        if (!sheet) return;

        sheet.style.display = 'none';
        document.body.style.overflow = '';
    }

    function setPreview(drop, img, fileOrUrl) {
        if (!drop || !img || !fileOrUrl) return;

        if (typeof fileOrUrl === 'string') {
            img.src = fileOrUrl;
        } else {
            img.src = URL.createObjectURL(fileOrUrl);
        }

        drop.classList.add('has-preview');
    }

    function setFileName(inputId, file) {
        const holder = document.getElementById('name_' + inputId);

        if (!holder) return;

        if (file && file.name) {
            holder.textContent = file.name;
        } else {
            holder.textContent = 'কোনো ফাইল নির্বাচন করা হয়নি';
        }
    }

    function copyFileToNamedInput(namedInput, file) {
        if (!namedInput || !file) return;

        try {
            const dt = new DataTransfer();
            dt.items.add(file);
            namedInput.files = dt.files;
        } catch (e) {
            console.warn('DataTransfer not supported on this browser.');
        }
    }

    backdrop?.addEventListener('click', closeSheet);

    btnGal?.addEventListener('click', function () {
        if (!active) return;

        closeSheet();
        active.galleryInput.click();
    });

    btnCam?.addEventListener('click', function () {
        if (!active) return;

        closeSheet();
        active.cameraInput.click();
    });

    document.querySelectorAll('.js-img-drop').forEach(function (drop) {
        const targetId = drop.dataset.target;
        const camId = drop.dataset.cam;
        const previewId = drop.dataset.preview;

        const galleryInput = document.getElementById(targetId);
        const cameraInput = document.getElementById(camId);
        const preview = document.getElementById(previewId);

        if (!galleryInput || !cameraInput || !preview) return;

        const existing = drop.dataset.existing;

        if (existing) {
            setPreview(drop, preview, existing);

            const holder = document.getElementById('name_' + targetId);

            if (holder) {
                holder.textContent = 'আগের ফাইল আপলোড করা আছে';
            }
        }

        drop.addEventListener('click', function () {
            openSheet({
                drop: drop,
                preview: preview,
                galleryInput: galleryInput,
                cameraInput: cameraInput,
                targetId: targetId
            });
        });

        galleryInput.addEventListener('change', function () {
            const file = galleryInput.files && galleryInput.files[0] ? galleryInput.files[0] : null;

            if (!file || !file.type || !file.type.startsWith('image/')) return;

            setPreview(drop, preview, file);
            setFileName(targetId, file);
        });

        cameraInput.addEventListener('change', function () {
            const file = cameraInput.files && cameraInput.files[0] ? cameraInput.files[0] : null;

            if (!file || !file.type || !file.type.startsWith('image/')) return;

            copyFileToNamedInput(galleryInput, file);
            setPreview(drop, preview, file);
            setFileName(targetId, file);
        });
    });

    const canvas = document.getElementById('sigCanvas');
    const clearBtn = document.getElementById('sigClear');
    const hidden = document.getElementById('signature_data');
    const form = document.getElementById('piForm');

    if (!canvas || !clearBtn || !hidden || !form) return;

    const ctx = canvas.getContext('2d');

    let dirty = false;
    let drawing = false;

    function setStyle() {
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        ctx.strokeStyle = '#111827';
    }

    function resizeCanvas() {
        const rect = canvas.getBoundingClientRect();
        const scale = window.devicePixelRatio || 1;

        canvas.width = Math.floor(rect.width * scale);
        canvas.height = Math.floor(rect.height * scale);

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.scale(scale, scale);

        setStyle();
    }

    resizeCanvas();

    let resizeTimer = null;

    window.addEventListener('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeCanvas, 150);
    });

    const existingSigUrl = canvas.getAttribute('data-existing-signature');

    if (existingSigUrl) {
        const img = new Image();

        img.onload = function () {
            const rect = canvas.getBoundingClientRect();

            ctx.clearRect(0, 0, rect.width, rect.height);

            const cw = rect.width;
            const ch = rect.height;
            const ratio = Math.min(cw / img.width, ch / img.height);
            const w = img.width * ratio;
            const h = img.height * ratio;
            const x = (cw - w) / 2;
            const y = (ch - h) / 2;

            ctx.drawImage(img, x, y, w, h);
            setStyle();
        };

        img.src = existingSigUrl + '?v=' + Date.now();
    }

    function pos(e) {
        const r = canvas.getBoundingClientRect();
        const cx = e.touches ? e.touches[0].clientX : e.clientX;
        const cy = e.touches ? e.touches[0].clientY : e.clientY;

        return {
            x: cx - r.left,
            y: cy - r.top
        };
    }

    function start(e) {
        drawing = true;
        dirty = true;

        const p = pos(e);

        ctx.beginPath();
        ctx.moveTo(p.x, p.y);

        e.preventDefault();
    }

    function move(e) {
        if (!drawing) return;

        const p = pos(e);

        ctx.lineTo(p.x, p.y);
        ctx.stroke();

        e.preventDefault();
    }

    function end() {
        drawing = false;
    }

    canvas.addEventListener('mousedown', start);
    canvas.addEventListener('mousemove', move);
    canvas.addEventListener('mouseup', end);
    canvas.addEventListener('mouseleave', end);

    canvas.addEventListener('touchstart', start, { passive: false });
    canvas.addEventListener('touchmove', move, { passive: false });
    canvas.addEventListener('touchend', end);

    clearBtn.addEventListener('click', function () {
        const rect = canvas.getBoundingClientRect();

        ctx.clearRect(0, 0, rect.width, rect.height);

        hidden.value = '';
        dirty = true;
    });

    form.addEventListener('submit', function () {
        if (!dirty) {
            hidden.value = '';
            return;
        }

        try {
            hidden.value = canvas.toDataURL('image/png');
        } catch (e) {
            hidden.value = '';
        }
    });
})();
</script>