<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>KYC Details | EMI CREDITS</title>


    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        body {
            font-family: Inter, Arial, Helvetica, sans-serif;

            background: #f5f8fd;

            color: #10213f;
        }


        .container {
            width: min(1050px, 92%);

            margin: auto;
        }


        /* ==============================
           HEADER
        ============================== */

        header {
            height: 72px;

            background: white;

            border-bottom: 1px solid #e5ebf4;
        }


        nav {
            height: 72px;

            display: flex;

            align-items: center;

            justify-content: space-between;
        }


        .logo img {
            height: 40px;

            width: auto;

            max-width: 170px;

            display: block;
        }


        .user-area {
            display: flex;

            align-items: center;

            gap: 12px;
        }


        .user-name {
            color: #64748b;

            font-size: 13px;
        }


        .logout-btn {
            border: 1px solid #dce5f0;

            background: white;

            color: #243958;

            padding: 8px 14px;

            border-radius: 8px;

            font-size: 12px;

            cursor: pointer;
        }


        /* ==============================
           PAGE
        ============================== */

        .page {
            padding: 45px 0 80px;
        }


        .page-header {
            margin-bottom: 28px;
        }


        .page-header h1 {
            font-size: 30px;

            letter-spacing: -1px;

            margin-bottom: 7px;
        }


        .page-header p {
            color: #77869b;

            font-size: 14px;
        }


        /* ==============================
           PROGRESS
        ============================== */

        .progress-card {
            background: white;

            border: 1px solid #e3eaf4;

            border-radius: 16px;

            padding: 24px;

            margin-bottom: 22px;
        }


        .progress {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 10px;
        }


        .progress-step {
            display: flex;

            align-items: center;

            gap: 10px;
        }


        .step-circle {
            width: 36px;
            height: 36px;

            border-radius: 50%;

            background: #edf3fa;

            color: #7c8da2;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 12px;

            font-weight: 800;

            flex-shrink: 0;
        }


        .progress-step.completed .step-circle {
            background: #e8f7ee;

            color: #27804a;
        }


        .progress-step.active .step-circle {
            background: #1769e0;

            color: white;
        }


        .step-info strong {
            display: block;

            font-size: 12px;

            color: #263a59;
        }


        .step-info span {
            display: block;

            font-size: 10px;

            color: #94a1b2;
        }


        /* ==============================
           FORM CARD
        ============================== */

        .form-card {
            background: white;

            border: 1px solid #e3eaf4;

            border-radius: 18px;

            padding: 35px;

            box-shadow:
                0 12px 35px rgba(30, 65, 105, 0.05);
        }


        .form-title {
            margin-bottom: 28px;
        }


        .form-title h2 {
            font-size: 20px;

            margin-bottom: 5px;
        }


        .form-title p {
            font-size: 13px;

            color: #8190a4;
        }


        /* ==============================
           SECURITY NOTICE
        ============================== */

        .security-box {
            display: flex;

            align-items: flex-start;

            gap: 12px;

            padding: 15px;

            background: #f0f6ff;

            border: 1px solid #d9e9ff;

            border-radius: 11px;

            margin-bottom: 27px;
        }


        .security-icon {
            width: 34px;
            height: 34px;

            background: #1769e0;

            color: white;

            border-radius: 8px;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;
        }


        .security-box strong {
            display: block;

            color: #244269;

            font-size: 12px;

            margin-bottom: 3px;
        }


        .security-box p {
            color: #71839b;

            font-size: 11px;

            line-height: 1.5;
        }


        /* ==============================
           FORM
        ============================== */

        .form-grid {
            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 22px;
        }


        .form-group {
            display: flex;

            flex-direction: column;
        }


        .form-group.full {
            grid-column: 1 / -1;
        }


        label {
            font-size: 12px;

            font-weight: 700;

            color: #344865;

            margin-bottom: 8px;
        }


        .required {
            color: #e34b4b;
        }


        input {
            width: 100%;

            height: 47px;

            border: 1px solid #dce5f0;

            background: #fbfdff;

            border-radius: 9px;

            padding: 0 13px;

            font-family: inherit;

            font-size: 13px;

            color: #1d3150;

            outline: none;

            transition: 0.2s;
        }


        input:focus {
            background: white;

            border-color: #1769e0;

            box-shadow:
                0 0 0 3px
                rgba(23,105,224,0.07);
        }


        input::placeholder {
            color: #a5b1c0;
        }


        .input-error {
            border-color: #df5353;
        }


        .error {
            color: #d44747;

            font-size: 11px;

            margin-top: 5px;
        }


        /* ==============================
           DOCUMENT UPLOAD
        ============================== */

        .upload-box {
            border: 1px dashed #cbd8e8;

            background: #fbfdff;

            border-radius: 11px;

            padding: 20px;

            text-align: center;

            transition: 0.2s;
        }


        .upload-box:hover {
            border-color: #1769e0;

            background: #f7fbff;
        }


        .upload-icon {
            width: 40px;
            height: 40px;

            background: #edf5ff;

            color: #1769e0;

            border-radius: 10px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 10px;

            font-size: 17px;
        }


        .upload-box strong {
            display: block;

            font-size: 12px;

            color: #344865;

            margin-bottom: 4px;
        }


        .upload-box span {
            display: block;

            font-size: 10px;

            color: #94a1b2;

            margin-bottom: 12px;
        }


        .file-input {
            width: auto;

            height: auto;

            border: none;

            padding: 0;

            background: transparent;

            font-size: 11px;

            color: #60738d;
        }


        .file-input:focus {
            box-shadow: none;

            border: none;
        }


        /* ==============================
           UPLOAD WARNING
        ============================== */

        .upload-warning {
            display: flex;

            align-items: flex-start;

            gap: 8px;

            margin-bottom: 10px;

            padding: 9px 10px;

            background: #fff8e8;

            border: 1px solid #f5dfaa;

            border-radius: 8px;

            color: #946b18;

            font-size: 10px;

            line-height: 1.4;

            text-align: left;
        }


        .upload-warning-icon {
            flex-shrink: 0;

            font-size: 13px;

            line-height: 1;
        }


        /* ==============================
           SUCCESS
        ============================== */

        .success {
            background: #effaf3;

            border: 1px solid #cce9d6;

            color: #287646;

            padding: 12px 14px;

            border-radius: 9px;

            font-size: 13px;

            margin-bottom: 22px;
        }


        /* ==============================
           ACTION
        ============================== */

        .form-footer {
            margin-top: 32px;

            padding-top: 25px;

            border-top: 1px solid #edf1f6;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;
        }


        .secure-note {
            color: #8190a4;

            font-size: 11px;
        }


        .continue-btn {
            border: none;

            background:
                linear-gradient(
                    135deg,
                    #1769e0,
                    #0d5dcf
                );

            color: white;

            padding: 13px 25px;

            border-radius: 9px;

            font-size: 13px;

            font-weight: 700;

            cursor: pointer;

            box-shadow:
                0 9px 20px
                rgba(23,105,224,0.18);
        }


        .continue-btn:hover {
            background: #0f56c0;
        }


        /* ==============================
           MOBILE
        ============================== */

        @media (max-width: 700px) {

            header,
            nav {
                height: 65px;
            }


            .logo img {
                height: 36px;
            }


            .user-name {
                display: none;
            }


            .page {
                padding: 30px 0 50px;
            }


            .page-header h1 {
                font-size: 26px;
            }


            .progress-card {
                padding: 18px;
            }


            .progress {
                grid-template-columns: 1fr;

                gap: 13px;
            }


            .form-card {
                padding: 24px 18px;
            }


            .form-grid {
                grid-template-columns: 1fr;

                gap: 18px;
            }


            .form-group.full {
                grid-column: auto;
            }


            .security-box {
                padding: 13px;
            }


            .upload-warning {
                font-size: 10px;

                padding: 8px;
            }


            .form-footer {
                flex-direction: column;

                align-items: stretch;
            }


            .secure-note {
                text-align: center;
            }


            .continue-btn {
                width: 100%;
            }

        }

    </style>

</head>


<body>


<!-- =====================================
     HEADER
===================================== -->

<header>

    <div class="container">

        <nav>

            <a href="/" class="logo">

                <img
                    src="{{ asset('images/logo.png') }}"
                    alt="EMI CREDITS"
                >

            </a>


            <div class="user-area">

                <span class="user-name">

                    {{ Auth::user()->name }}

                </span>


                <form
                    method="POST"
                    action="{{ route('logout') }}"
                >

                    @csrf

                    <button
                        type="submit"
                        class="logout-btn"
                    >
                        Logout
                    </button>

                </form>

            </div>

        </nav>

    </div>

</header>



<!-- =====================================
     MAIN
===================================== -->

<main>

    <div class="container page">


        <!-- PAGE HEADER -->

        <div class="page-header">

            <h1>
                Complete Your Application
            </h1>

            <p>
                Securely provide your KYC information to continue.
            </p>

        </div>


 <!-- =================================
             PROGRESS
        ================================== -->

        <div class="progress-card">

            <div class="progress">


                <!-- STEP 1 -->

                <div class="progress-step completed">

                    <div class="step-circle">
                        01
                    </div>

                    <div class="step-info">

                        <strong>
                            Personal Details
                        </strong>

                        <span>
                            Completed
                        </span>

                    </div>

                </div>


                <!-- STEP 2 -->

                <div class="progress-step completed">

                    <div class="step-circle">
                        02
                    </div>

                    <div class="step-info">

                        <strong>
                            KYC Details
                        </strong>

                        <span>
                            Completed
                        </span>

                    </div>

                </div>


                <!-- STEP 3 -->

                <div class="progress-step active">

                    <div class="step-circle">
                        03
                    </div>

                    <div class="step-info">

                        <strong>
                            Bank Details
                        </strong>

                        <span>
                            Account information
                        </span>

                    </div>

                </div>


                <!-- STEP 4 -->

                <div class="progress-step">

                    <div class="step-circle">
                        04
                    </div>

                    <div class="step-info">

                        <strong>
                            Job Details
                        </strong>

                        <span>
                            Employment information
                        </span>

                    </div>

                </div>


            </div>

        </div>




        <!-- =================================
             FORM
        ================================== -->

        <div class="form-card">


            <div class="form-title">

                <h2>
                    KYC Verification
                </h2>

                <p>
                    Enter your Aadhaar and PAN details as per your official documents.
                </p>

            </div>



            <!-- SECURITY -->

            <div class="security-box">

                <div class="security-icon">
                    🔒
                </div>

                <div>

                    <strong>
                        Your information is secure
                    </strong>

                    <p>
                        Your KYC information is securely stored and used only for application processing.
                    </p>

                </div>

            </div>



            @if (session('success'))

                <div class="success">

                    {{ session('success') }}

                </div>

            @endif



            <!-- FORM -->

            <form
                method="POST"
                action="{{ route('client.kyc.store') }}"
                enctype="multipart/form-data"
                id="kycForm"
            >

                @csrf


                <div class="form-grid">


                    <!-- AADHAAR -->

                    <div class="form-group">

                        <label for="aadhaar_number">

                            Aadhaar Number

                            <span class="required">
                                *
                            </span>

                        </label>


                        <input
                            type="text"
                            id="aadhaar_number"
                            name="aadhaar_number"
                            value="{{ old('aadhaar_number') }}"
                            placeholder="XXXX XXXX XXXX"
                            maxlength="14"
                            inputmode="numeric"
                            autocomplete="off"
                            class="@error('aadhaar_number') input-error @enderror"
                            required
                        >


                        @error('aadhaar_number')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>



                    <!-- PAN -->

                    <div class="form-group">

                        <label for="pan_number">

                            PAN Number

                            <span class="required">
                                *
                            </span>

                        </label>


                        <input
                            type="text"
                            id="pan_number"
                            name="pan_number"
                            value="{{ old('pan_number') }}"
                            placeholder="ABCDE1234F"
                            maxlength="10"
                            autocomplete="off"
                            class="@error('pan_number') input-error @enderror"
                            required
                        >


                        @error('pan_number')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>



                    <!-- AADHAAR DOCUMENT -->

                    <div class="form-group">

                        <label>

                            Aadhaar Document

                            <span class="required">
                                *
                            </span>

                        </label>


                        <div class="upload-box">


                            <div class="upload-warning">

                                <div class="upload-warning-icon">
                                    ⚠️
                                </div>

                                <div>
                                    Aadhaar document upload is mandatory.
                                    Please upload a clear and readable copy.
                                </div>

                            </div>


                            <div class="upload-icon">
                                ↑
                            </div>


                            <strong>
                                Upload Aadhaar
                            </strong>


                            <span>
                                JPG, PNG or PDF · Max 5MB
                            </span>


                            <input
                                type="file"
                                name="aadhaar_document"
                                class="file-input"
                                accept=".jpg,.jpeg,.png,.pdf"
                                required
                            >


                        </div>


                        @error('aadhaar_document')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>



                    <!-- PAN DOCUMENT -->

                    <div class="form-group">

                        <label>

                            PAN Document

                            <span class="required">
                                *
                            </span>

                        </label>


                        <div class="upload-box">


                            <div class="upload-warning">

                                <div class="upload-warning-icon">
                                    ⚠️
                                </div>

                                <div>
                                    PAN document upload is mandatory.
                                    Please upload a clear and readable copy.
                                </div>

                            </div>


                            <div class="upload-icon">
                                ↑
                            </div>


                            <strong>
                                Upload PAN
                            </strong>


                            <span>
                                JPG, PNG or PDF · Max 5MB
                            </span>


                            <input
                                type="file"
                                name="pan_document"
                                class="file-input"
                                accept=".jpg,.jpeg,.png,.pdf"
                                required
                            >


                        </div>


                        @error('pan_document')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>


                </div>



                <!-- ACTION -->

                <div class="form-footer">


                    <div class="secure-note">

                        🔒 Protected KYC submission

                    </div>


                    <button
                        type="submit"
                        class="continue-btn"
                    >

                        Save & Continue →

                    </button>


                </div>


            </form>


        </div>

    </div>

</main>


<script>

document.addEventListener('DOMContentLoaded', function () {

    const aadhaarInput =
        document.getElementById('aadhaar_number');

    const panInput =
        document.getElementById('pan_number');


    /* =====================================
       AADHAAR FORMAT
       1111 1111 1111
    ===================================== */

    if (aadhaarInput) {

        aadhaarInput.addEventListener('input', function () {

            let value = this.value
                .replace(/\D/g, '')
                .substring(0, 12);

            let formatted = value.match(/.{1,4}/g);

            this.value =
                formatted
                    ? formatted.join(' ')
                    : '';

        });

    }


    /* =====================================
       PAN CAPITAL LETTERS
    ===================================== */

    if (panInput) {

        panInput.addEventListener('input', function () {

            this.value = this.value
                .toUpperCase()
                .replace(/[^A-Z0-9]/g, '')
                .substring(0, 10);

        });

    }


    /* =====================================
       FORM VALIDATION
    ===================================== */

    const form =
        document.getElementById('kycForm');

    if (form) {

        form.addEventListener('submit', function () {

            /*
             * Remove spaces before sending
             * Aadhaar to backend.
             *
             * Display:
             * 1111 1111 1111
             *
             * Backend receives:
             * 111111111111
             */

            if (aadhaarInput) {

                aadhaarInput.value =
                    aadhaarInput.value.replace(/\s/g, '');

            }


            /* PAN always uppercase */

            if (panInput) {

                panInput.value =
                    panInput.value.toUpperCase();

            }

        });

    }

});

</script>


</body>

</html>