@extends('User.layout')

@section('content')

<style>
    :root {
        --primary: #123c2a;
        --primary-dark: #0b291d;
        --primary-light: #24563d;
        --gold: #d4af37;
        --gold-light: #f0d78c;
        --gold-dark: #a67c22;
        --cream: #fff8e7;
        --cream-light: #fffcf5;
        --cream-dark: #f2e8d5;
        --white: #ffffff;
        --text-dark: #1c2b22;
        --text-light: #f9f5e9;
        --border: #d8c69b;
        --background: #fff8e7;
        --section-padding: 40px 0;
        --section-padding-tablet: 70px 0;
        --section-padding-mobile: 55px 0;
        --radius: 20px;
    }

    .kyc-page {
        min-height: 100vh;
        padding: var(--section-padding);
        background: var(--background);
        color: var(--text-dark);
        font-family: "DM Sans", sans-serif;
    }

    .kyc-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 28px;
    }

    .kyc-header h2 {
        margin-bottom: 7px;
        color: var(--primary);
        font-family: "Playfair Display", serif;
        font-size: 30px;
        font-weight: 700;
    }

    .kyc-header p {
        margin: 0;
        color: #778078;
        font-size: 13px;
    }

    .kyc-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 17px;
        border: 1px solid var(--gold-light);
        border-radius: 30px;
        background: #fff0d5;
        color: #a65c00;
        font-size: 12px;
        font-weight: 700;
    }

    .kyc-status i {
        font-size: 15px;
    }

    .kyc-card {
        margin-bottom: 25px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--cream-light);
        box-shadow: 0 10px 35px rgba(11, 41, 29, .06);
    }

    .kyc-card-header {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 22px 28px;
        border-bottom: 1px solid var(--cream-dark);
    }

    .kyc-card-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 13px;
        background: var(--primary);
        color: var(--gold);
        font-size: 20px;
    }

    .kyc-card-header h4 {
        margin: 0 0 4px;
        color: var(--primary-dark);
        font-family: "Playfair Display", serif;
        font-size: 20px;
        font-weight: 700;
    }

    .kyc-card-header p {
        margin: 0;
        color: #8a918a;
        font-size: 12px;
    }

    .kyc-card-body {
        padding: 28px;
    }

    .kyc-label {
        display: block;
        margin-bottom: 8px;
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 700;
    }

    .kyc-input {
        width: 100%;
        min-height: 48px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        outline: none;
        background: var(--white);
        color: var(--text-dark);
        font-size: 13px;
        transition: .3s;
    }

    .kyc-input:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, .13);
    }

    textarea.kyc-input {
        min-height: 95px;
        resize: vertical;
    }

    .kyc-field {
        margin-bottom: 22px;
    }

    .profile-upload {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 22px;
        margin-bottom: 30px;
        padding: 20px;
        border: 1px dashed var(--border);
        border-radius: 15px;
        background: #fffdf7;
    }

    .profile-preview-wrap {
        position: relative;
        flex-shrink: 0;
        width: 100px;
        height: 100px;
    }

    .profile-preview {
        width: 100%;
        height: 100%;
        border: 3px solid var(--gold);
        border-radius: 50%;
        background: var(--cream-dark);
        object-fit: cover;
    }

    .profile-upload-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: 2px solid var(--cream-light);
        border-radius: 50%;
        background: var(--primary);
        color: var(--gold);
    }

    .profile-upload-info h5 {
        margin-bottom: 5px;
        color: var(--primary);
        font-size: 14px;
        font-weight: 700;
    }

    .profile-upload-info p {
        margin-bottom: 12px;
        color: #858b84;
        font-size: 11px;
    }

    .upload-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 15px;
        border: 1px solid var(--primary);
        border-radius: 30px;
        background: var(--primary);
        color: var(--cream-light);
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        transition: .3s;
    }

    .upload-btn:hover {
        border-color: var(--gold);
        background: var(--gold);
        color: var(--primary-dark);
    }

    .profile-upload input[type="file"],
    .document-upload input[type="file"] {
        display: none;
    }

    .document-upload {
        position: relative;
        min-height: 210px;
        padding: 20px;
        border: 1px dashed var(--border);
        border-radius: 15px;
        background: #fffdf7;
        text-align: center;
        transition: .3s;
    }

    .document-upload:hover,
    .document-upload.dragging {
        border-color: var(--gold-dark);
        background: var(--cream);
    }

    .document-upload-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin: 0 auto 12px;
        border-radius: 13px;
        background: rgba(212, 175, 55, .13);
        color: var(--gold-dark);
        font-size: 23px;
    }

    .document-upload h6 {
        margin-bottom: 5px;
        color: var(--primary-dark);
        font-size: 13px;
        font-weight: 700;
    }

    .document-upload p {
        margin-bottom: 12px;
        color: #92978e;
        font-size: 11px;
    }

    .document-preview {
        display: none;
        width: 100%;
        height: 100px;
        margin-bottom: 12px;
        border-radius: 8px;
        background: var(--cream-dark);
        object-fit: contain;
    }

    .document-preview.show {
        display: block;
    }

    .document-file-name {
        display: block;
        margin-top: 8px;
        overflow-wrap: anywhere;
        color: var(--primary);
        font-size: 11px;
        font-weight: 600;
    }

    .document-upload .upload-btn {
        border-color: var(--primary);
        background: transparent;
        color: var(--primary);
    }

    .document-upload .upload-btn:hover {
        border-color: var(--gold);
        background: var(--gold);
        color: var(--primary-dark);
    }

    .kyc-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 22px;
        padding: 16px 18px;
        border: 1px solid var(--gold-light);
        border-radius: 12px;
        background: var(--cream);
        color: var(--gold-dark);
        font-size: 12px;
        line-height: 1.7;
    }

    .kyc-note i {
        flex-shrink: 0;
        margin-top: 1px;
        font-size: 18px;
    }

    .kyc-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 25px;
    }

    .kyc-btn {
        min-width: 145px;
        padding: 13px 22px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        transition: .3s;
    }

    .kyc-btn-outline {
        border: 1px solid var(--border);
        background: transparent;
        color: var(--primary);
    }

    .kyc-btn-outline:hover {
        background: var(--cream-dark);
    }

    .kyc-btn-primary {
        border: 1px solid var(--primary);
        background: var(--primary);
        color: var(--cream-light);
    }

    .kyc-btn-primary:hover {
        transform: translateY(-2px);
        border-color: var(--gold);
        background: var(--gold);
        color: var(--primary-dark);
    }

    .kyc-progress {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
    }

    .kyc-progress-line {
        flex: 1;
        height: 5px;
        overflow: hidden;
        border-radius: 10px;
        background: var(--cream-dark);
    }

    .kyc-progress-line span {
        display: block;
        width: 50%;
        height: 100%;
        border-radius: 10px;
        background: var(--gold);
    }

    .kyc-progress small {
        color: #858b84;
        font-size: 11px;
        white-space: nowrap;
    }

    @media (max-width: 991.98px) {
        .kyc-page {
            padding: var(--section-padding-tablet);
        }
    }

    @media (max-width: 767.98px) {
        .kyc-page {
            padding: var(--section-padding-mobile);
        }

        .kyc-header {
            align-items: flex-start;
        }

        .kyc-header h2 {
            font-size: 25px;
        }

        .kyc-card-header {
            padding: 18px;
        }

        .kyc-card-body {
            padding: 20px 17px;
        }

        .profile-upload {
            gap: 15px;
            padding: 15px;
        }

        .kyc-progress {
            align-items: flex-start;
            flex-direction: column;
        }

        .kyc-progress-line {
            width: 100%;
            flex: none;
        }

        .kyc-progress small {
            white-space: normal;
        }

        .kyc-actions {
            align-items: stretch;
            flex-direction: column-reverse;
        }

        .kyc-btn {
            width: 100%;
        }
    }

    @media (max-width: 420px) {
        .kyc-header h2 {
            font-size: 22px;
        }

        .kyc-status {
            padding: 8px 12px;
            font-size: 11px;
        }

        .profile-upload {
            align-items: flex-start;
            flex-direction: column;
        }

        .document-upload {
            min-height: 190px;
            padding: 15px;
        }
    }
</style>

<div class="kyc-page">
    <div class="container">

        <!-- PAGE HEADER -->
        <div class="kyc-header">
            <div>
                <h2>Personal Details & KYC</h2>
                <!-- <p>Manage your personal information and complete your identity verification.</p> -->
            </div>

            <div class="kyc-status">
                <i class="bi bi-exclamation-circle-fill"></i>
                KYC Verification Pending
            </div>
        </div>


        <form action="#" method="POST" enctype="multipart/form-data" id="kycForm">
            @csrf

            <!-- PERSONAL DETAILS -->
            <div class="kyc-card">
                <div class="kyc-card-header">
                    <div class="kyc-card-icon">
                        <i class="bi bi-person-vcard"></i>
                    </div>
                    <div>
                        <h4>Personal Information</h4>
                        <p>Update your basic personal details.</p>
                    </div>
                </div>

                <div class="kyc-card-body">

                    <!-- PROFILE IMAGE -->
                    <div class="profile-upload">
                        <div class="profile-preview-wrap">
                            <img
                                src="https://placehold.co/150x150/f2e8d5/123c2a?text=Profile"
                                alt="Profile Preview"
                                class="profile-preview"
                                id="profilePreview">

                            <span class="profile-upload-icon">
                                <i class="bi bi-camera-fill"></i>
                            </span>
                        </div>

                        <div class="profile-upload-info">
                            <h5>Profile Photo</h5>
                            <p>JPG, PNG or JPEG. Maximum size: 2MB.</p>

                            <label for="profileImage" class="upload-btn">
                                <i class="bi bi-upload"></i>
                                Upload Photo
                            </label>

                            <input type="file" name="profile_image"
                                   id="profileImage" accept="image/png,image/jpeg">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Full Name *</label>
                                <input type="text" name="name" class="kyc-input"
                                       placeholder="Enter your full name" required>
                               
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Email Address *</label>
                                <input type="email" name="email" class="kyc-input"
                                       placeholder="Enter your email" required>
                                
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Phone Number *</label>
                                <input type="tel" name="phone" class="kyc-input"
                                       placeholder="Enter your phone number" required>
                               
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Date of Birth</label>
                                <input type="date" name="date_of_birth" class="kyc-input">
                                      
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Gender</label>
                                <select name="gender" class="kyc-input">
                                    <option value="">Select Gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                    <option value="other">Other</option>
                                </select>
                              
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Country</label>
                                <input type="text" name="country" class="kyc-input"
                                       placeholder="Enter your country">
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="kyc-field mb-0">
                                <label class="kyc-label">Residential Address</label>
                                <textarea name="address" class="kyc-input"
                                          placeholder="Enter your complete address"></textarea>
                                @error('address')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- KYC DOCUMENTS -->
            <div class="kyc-card">
                <div class="kyc-card-header">
                    <div class="kyc-card-icon">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <div>
                        <h4>KYC Verification</h4>
                        <p>Upload your identity documents for verification.</p>
                    </div>
                </div>

                <div class="kyc-card-body">
                    <div class="row">
                        <!-- DOCUMENT TYPE -->
                        <div class="col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Identity Document Type *</label>
                                <select name="document_type" class="kyc-input" required>
                                    <option value="">Select Document</option>
                                    <option value="aadhaar" @selected(old('document_type') == 'aadhaar')>Aadhaar Card</option>
                                    <option value="pan" @selected(old('document_type') == 'pan')>PAN Card</option>
                                    <option value="passport" @selected(old('document_type') == 'passport')>Passport</option>
                                    <option value="voter_id" @selected(old('document_type') == 'voter_id')>Voter ID</option>
                                    <option value="driving_license" @selected(old('document_type') == 'driving_license')>Driving License</option>
                                </select>
                                @error('document_type')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                        <!-- DOCUMENT NUMBER -->
                        <div class="col-12">
                            <div class="kyc-field">
                                <label class="kyc-label">Document Number *</label>
                                <input type="text" name="document_number" class="kyc-input"
                                       value="{{ old('document_number') }}"
                                       placeholder="Enter your document number" required>
                                @error('document_number')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>

                        <!-- FRONT IMAGE -->
                        <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <label class="kyc-label">Document Front Side *</label>

                            <div class="document-upload" id="frontDrop">
                                <img class="document-preview" id="frontPreview"
                                     alt="Front document preview">

                                <div class="document-upload-icon">
                                    <i class="bi bi-card-image"></i>
                                </div>

                                <h6>Upload Front Side</h6>
                                <p>JPG, PNG or PDF (Max 5MB)</p>

                                <label for="documentFront" class="upload-btn">
                                    <i class="bi bi-cloud-arrow-up"></i>
                                    Choose File
                                </label>

                                <input type="file" name="document_front"
                                       id="documentFront"
                                       accept="image/jpeg,image/png,application/pdf"
                                       required>

                                <span class="document-file-name" id="frontFileName"></span>
                            </div>

                            @error('document_front')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- BACK IMAGE -->
                        <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <label class="kyc-label">Document Back Side</label>

                            <div class="document-upload" id="backDrop">
                                <img class="document-preview" id="backPreview"
                                     alt="Back document preview">

                                <div class="document-upload-icon">
                                    <i class="bi bi-card-image"></i>
                                </div>

                                <h6>Upload Back Side</h6>
                                <p>JPG, PNG or PDF (Max 5MB)</p>

                                <label for="documentBack" class="upload-btn">
                                    <i class="bi bi-cloud-arrow-up"></i>
                                    Choose File
                                </label>

                                <input type="file" name="document_back"
                                       id="documentBack"
                                       accept="image/jpeg,image/png,application/pdf">

                                <span class="document-file-name" id="backFileName"></span>
                            </div>

                            @error('document_back')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    <div class="kyc-note">
                        <i class="bi bi-info-circle-fill"></i>
                        <div>
                            <strong>Important:</strong>
                            Please upload clear, readable documents. Your details should
                            match the information on your identity document. Your
                            documents will be used for identity verification.
                        </div>
                    </div>
                </div>
            </div>

            <!-- ACTIONS -->
            <div class="kyc-actions">
                <button type="reset" class="kyc-btn kyc-btn-outline">
                    <i class="bi bi-arrow-counterclockwise me-1"></i>
                    Reset Form
                </button>

                <button type="submit" class="kyc-btn kyc-btn-primary">
                    Submit for Verification
                    <i class="bi bi-arrow-right ms-2"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('kycForm');
    const profileInput = document.getElementById('profileImage');
    const profilePreview = document.getElementById('profilePreview');

    const defaultProfile =
        "https://placehold.co/150x150/f2e8d5/123c2a?text=Profile";

    // Profile image preview
    profileInput.addEventListener('change', function () {
        const file = this.files[0];

        if (!file) return;

        if (!['image/jpeg', 'image/png'].includes(file.type)) {
            alert('Please select a JPG or PNG image.');
            this.value = '';
            return;
        }

        if (file.size > 2 * 1024 * 1024) {
            alert('Profile image must be less than 2MB.');
            this.value = '';
            return;
        }

        profilePreview.src = URL.createObjectURL(file);
    });

    // Document preview and drag-and-drop
    function setupDocumentPreview(inputId, previewId, fileNameId, dropId) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);
        const fileName = document.getElementById(fileNameId);
        const drop = document.getElementById(dropId);

        input.addEventListener('change', function () {
            const file = this.files[0];

            if (!file) return;

            const allowedTypes = [
                'image/jpeg',
                'image/png',
                'application/pdf'
            ];

            if (!allowedTypes.includes(file.type)) {
                alert('Please upload a JPG, PNG, or PDF file.');
                this.value = '';
                return;
            }

            if (file.size > 5 * 1024 * 1024) {
                alert('Document must be less than 5MB.');
                this.value = '';
                return;
            }

            fileName.textContent = file.name;

            const oldPdf = drop.querySelector('.pdf-preview');
            if (oldPdf) oldPdf.remove();

            if (file.type.startsWith('image/')) {
                preview.src = URL.createObjectURL(file);
                preview.classList.add('show');
                preview.style.display = 'block';
            } else {
                preview.classList.remove('show');
                preview.style.display = 'none';

                const pdfIcon = document.createElement('div');
                pdfIcon.className = 'pdf-preview';
                pdfIcon.innerHTML =
                    '<i class="bi bi-file-earmark-pdf-fill" style="font-size:40px;color:#dc3545"></i>';

                drop.insertBefore(pdfIcon, drop.querySelector('h6'));
            }
        });

        drop.addEventListener('dragover', function (e) {
            e.preventDefault();
            drop.classList.add('dragging');
        });

        drop.addEventListener('dragleave', function () {
            drop.classList.remove('dragging');
        });

        drop.addEventListener('drop', function (e) {
            e.preventDefault();
            drop.classList.remove('dragging');

            if (e.dataTransfer.files.length) {
                input.files = e.dataTransfer.files;
                input.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    }

    setupDocumentPreview(
        'documentFront',
        'frontPreview',
        'frontFileName',
        'frontDrop'
    );

    setupDocumentPreview(
        'documentBack',
        'backPreview',
        'backFileName',
        'backDrop'
    );

    // Reset previews
    form.addEventListener('reset', function () {
        setTimeout(function () {
            profilePreview.src = defaultProfile;

            ['frontPreview', 'backPreview'].forEach(function (id) {
                const preview = document.getElementById(id);
                preview.src = '';
                preview.classList.remove('show');
                preview.style.display = 'none';
            });

            document.getElementById('frontFileName').textContent = '';
            document.getElementById('backFileName').textContent = '';

            document.querySelectorAll('.pdf-preview').forEach(function (el) {
                el.remove();
            });
        }, 0);
    });
});
</script>

@endsection