@extends('frontend.layout_2', ['title' => 'ব্যক্তিগত তথ্য'])

@section('sub_layout')

<script src="https://cdn.tailwindcss.com"></script>

<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    brand: '#DD3532'
                }
            }
        }
    }
</script>

<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Hind+Siliguri:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css">

<style>
    :root {
        --brand: #DD3532;
        --brand-dark: #c92f2c;
        --brand-light: #fff1f1;
        --bg: #f5f7fb;
        --card: #ffffff;
        --text: #0f172a;
        --muted: #7b8794;
        --line: #e6eaee;
        --danger: #ff4d6d;
    }

    * {
        box-sizing: border-box;
    }

    body {
        font-family: "Hind Siliguri", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--text);
    }

    .title-font {
        font-family: "Merriweather", serif;
    }

    .pi-page {
        min-height: 100vh;
        background: var(--bg);
        padding-bottom: 92px;
    }

    .pi-wrap {
        width: 100%;
        padding: 16px 10px 28px;
        display: flex;
        justify-content: center;
    }

    .pi-card {
        width: 100%;
        max-width: 760px;
    }

    /* Stepper */
    .pi-stepper {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin: 4px 0 18px;
        user-select: none;
        overflow-x: auto;
        padding: 2px 0 4px;
    }

    .pi-stepper::-webkit-scrollbar {
        display: none;
    }

    .pi-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 72px;
        gap: 6px;
    }

    .pi-step .dot {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 13px;
        background: #e9eef2;
        color: #6b7280;
    }

    .pi-step .lbl {
        font-size: 12px;
        color: #6b7280;
        white-space: nowrap;
    }

    .pi-step.active .dot,
    .pi-step.done .dot {
        background: var(--brand);
        color: #fff;
        box-shadow: 0 8px 16px rgba(221, 53, 50, .22);
    }

    .pi-step.active .lbl,
    .pi-step.done .lbl {
        color: var(--brand);
        font-weight: 700;
    }

    .line {
        height: 2px;
        width: 54px;
        margin-top: 13px;
        background: #e9eef2;
        flex: 0 0 auto;
    }

    .line.done {
        background: var(--brand);
    }

    /* Info */
    .pi-info {
        background: var(--brand);
        color: #fff;
        border-radius: 18px;
        padding: 14px 16px;
        margin-bottom: 14px;
        box-shadow: 0 12px 26px rgba(221, 53, 50, .20);
    }

    .pi-info-ic {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 999px;
        margin-top: 2px;
        flex: 0 0 auto;
    }

    .pi-info-txt {
        font-size: 13px;
        opacity: .94;
        line-height: 1.6;
    }

    /* Form fields */
    .pi-field {
        background: #fff;
        border: 1px solid var(--line);
        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-field:focus-within {
        border-color: var(--brand);
        box-shadow: 0 0 0 4px rgba(221, 53, 50, .08);
    }

    .pi-ic {
        width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand);
        flex: 0 0 auto;
    }

    .pi-ic i {
        font-size: 18px;
    }

    .pi-inp {
        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-inp::placeholder {
        color: #8a97a6;
    }

    .pi-field.has-error {
        border-color: var(--danger);
    }

    .pi-err {
        margin-top: -6px;
        margin-bottom: 10px;
        color: var(--danger);
        font-size: 12px;
        padding-left: 8px;
    }

    /* Yes No */
    .pi-yn {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
    }

    .pi-yn .q {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #1f2937;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .pi-yn .q i {
        color: var(--brand);
    }

    .pi-yn .opts {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 0 8px;
    }

    .pi-yn label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #4b5563;
    }

    .pi-yn input[type="radio"] {
        width: 16px;
        height: 16px;
        accent-color: var(--brand);
    }

    /* Upload */
    .pi-upload-title {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 900;
        margin: 14px 0 10px;
        color: #0f172a;
        font-size: 16px;
    }

    .pi-upload-title i {
        color: var(--brand);
    }

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

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

    .pi-upload-head i {
        color: var(--brand);
    }

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

    .pi-drop {
        border: 1px dashed #d5dbe3;
        border-radius: 14px;
        min-height: 92px;
        background: #f6f7f9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        cursor: pointer;
        transition: .2s ease;
        text-align: center;
        padding: 12px;
    }

    .pi-drop:hover {
        border-color: var(--brand);
        background: var(--brand-light);
    }

    .pi-drop i {
        font-size: 28px;
        color: #9ca3af;
    }

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

    .pi-drop:hover i,
    .pi-drop:hover span {
        color: var(--brand);
    }

    .pi-file-row {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pi-file-btn {
        width: 100%;
        min-height: 42px;
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 12px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 9px;
        color: #64748b;
        font-size: 13px;
    }

    .pi-file-btn i {
        color: var(--brand);
        font-size: 18px;
    }

    .pi-file-btn strong {
        color: #111827;
        font-weight: 700;
    }

    .pi-upload-card input[type="file"] {
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    /* Signature */
    .pi-sign-wrap {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
    }

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

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

    /* Actions */
    .pi-actions {
        display: flex;
        gap: 12px;
        margin-top: 16px;
    }

    .pi-btn-back {
        flex: 1;
        height: 52px;
        border-radius: 14px;
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #334155;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .pi-btn-next {
        flex: 1;
        height: 52px;
        border-radius: 14px;
        border: 0;
        background: var(--brand);
        color: #fff;
        font-weight: 900;
        box-shadow: 0 12px 22px rgba(221, 53, 50, .22);
    }

    .pi-btn-next:hover {
        background: var(--brand-dark);
        color: #fff;
    }

    .pi-btn-back.disabled {
        opacity: .45;
        pointer-events: none;
    }

    /* Bottom Nav */
    .pi-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 50;
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .10);
        border-top: 1px solid #eef2f7;
    }

    .pi-bottom-inner {
        display: flex;
        justify-content: space-around;
        padding: 8px 8px 10px;
    }

    .pi-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: #9ca3af;
        font-size: 12px;
        font-weight: 600;
    }

    .pi-nav-item i {
        font-size: 22px;
        line-height: 1;
    }

    .pi-nav-item.active {
        color: var(--brand);
    }

    .pi-nav-dot {
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: var(--brand);
        display: none;
    }

    .pi-nav-item.active .pi-nav-dot {
        display: block;
    }

    @media (max-width: 420px) {
        .pi-wrap {
            padding-left: 9px;
            padding-right: 9px;
        }

        .pi-step {
            min-width: 64px;
        }

        .line {
            width: 30px;
        }

        .pi-upload-card {
            padding: 11px;
        }

        .pi-upload-head {
            font-size: 15px;
        }
    }
</style>

<div class="pi-page">

    <div class="pi-wrap">
        <div class="pi-card">

            {{-- Stepper --}}
            <div class="pi-stepper">
                @php
                    $labels = ['ব্যক্তিগত', 'নমিনী', 'ব্যাংক', 'যাচাইকরণ'];
                @endphp

                @for($i = 1; $i <= 4; $i++)
                    <div class="pi-step {{ $step == $i ? 'active' : ($step > $i ? 'done' : '') }}">
                        <div class="dot">{{ $i }}</div>
                        <div class="lbl">{{ $labels[$i - 1] }}</div>
                    </div>

                    @if($i < 4)
                        <div class="line {{ $step > $i ? 'done' : '' }}"></div>
                    @endif
                @endfor
            </div>

            @if($step == 1)
                <div class="pi-info">
                    <div class="d-flex align-items-start gap-2">
                        <div class="pi-info-ic">
                            <i class="bi bi-info-circle"></i>
                        </div>

                        <div>
                            <div class="fw-bold mb-1">গুরুত্বপূর্ণ</div>
                            <div class="pi-info-txt">
                                অনুগ্রহ করে সঠিক ব্যক্তিগত তথ্য প্রদান করুন। এই তথ্য আপনার পরিচয় যাচাই করতে এবং আপনার ঋণের আবেদন প্রক্রিয়া করতে ব্যবহৃত করা হবে।
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <form method="POST" action="{{ route('pi.store', $step) }}" enctype="multipart/form-data" id="piForm">
                @csrf

                @if($step == 1)
                    @include('frontend.erin.personal_information.partials.step1', ['data' => $data])
                @endif

                @if($step == 2)
                    @include('frontend.erin.personal_information.partials.step2', ['data' => $data])
                @endif

                @if($step == 3)
                    @include('frontend.erin.personal_information.partials.step3', ['data' => $data])
                @endif

                @if($step == 4)
                    @include('frontend.erin.personal_information.partials.step4', ['data' => $data])
                @endif

                <div class="pi-actions">
                    <a class="pi-btn-back {{ $step == 1 ? 'disabled' : '' }}"
                       href="{{ $step == 1 ? 'javascript:void(0)' : route('pi.step', $step - 1) }}">
                        পিছনে যান
                    </a>

                    <button type="submit" class="pi-btn-next">
                        {{ $step == 4 ? 'জমা দিন' : 'পরবর্তী' }}
                    </button>
                </div>
            </form>

        </div>
    </div>



</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.pi-upload-card input[type="file"]').forEach(function (input, index) {
            const card = input.closest('.pi-upload-card');

            if (!card) return;

            let drop = card.querySelector('.pi-drop');

            if (drop) {
                drop.addEventListener('click', function () {
                    input.click();
                });
            }

            if (!input.id) {
                input.id = 'pi_file_' + index;
            }

            let fileRow = card.querySelector('.pi-file-row');

            if (!fileRow) {
                fileRow = document.createElement('div');
                fileRow.className = 'pi-file-row';
                card.appendChild(fileRow);
            }

            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'pi-file-btn';
            btn.innerHTML = '<i class="bi bi-cloud-arrow-up"></i><span><strong>ফাইল নির্বাচন করুন</strong> — <span class="pi-file-name">কোনো ফাইল নির্বাচন করা হয়নি</span></span>';

            btn.addEventListener('click', function () {
                input.click();
            });

            fileRow.appendChild(btn);

            input.addEventListener('change', function () {
                const nameHolder = btn.querySelector('.pi-file-name');

                if (input.files && input.files.length > 0) {
                    nameHolder.textContent = input.files[0].name;
                } else {
                    nameHolder.textContent = 'কোনো ফাইল নির্বাচন করা হয়নি';
                }
            });
        });
    });
</script>

@endsection