<?php $__env->startSection('content'); ?>
<div class="container-fluid">
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>নতুন সদস্য নিবন্ধন</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .step-progress {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
        .step-progress:before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #dee2e6;
            z-index: 1;
        }
        .step {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 100px;
        }
        .step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #dee2e6;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: bold;
        }
        .step.active .step-circle {
            background-color: #0d6efd;
            color: white;
        }
        .step.completed .step-circle {
            background-color: #198754;
            color: white;
        }
        .form-step {
            display: none;
        }
        .form-step.active {
            display: block;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .form-card {
            border: 2px solid #0d6efd;
            border-radius: 10px;
            padding: 25px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .required:after {
            content: " *";
            color: red;
        }
        .preview-photo {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #0d6efd;
            margin: 0 auto 20px;
            display: block;
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            display: none;
        }
        .loading-spinner {
            color: white;
            font-size: 3rem;
        }
        .success-message {
            text-align: center;
            padding: 40px;
        }
        .success-icon {
            font-size: 4rem;
            color: #198754;
            margin-bottom: 20px;
        }
        .error-message {
            color: #dc3545;
            font-size: 0.875em;
            margin-top: 0.25rem;
        }
        .was-validated .form-control:invalid {
            border-color: #dc3545;
        }
        .was-validated .form-control:valid {
            border-color: #198754;
        }
        .step-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        /* রিভিউ ডাটার টেবিল কালার কালো করার জন্য CSS */
        #reviewData table {
            color: #000000 !important;
        }
        
        #reviewData th {
            color: #000000 !important;
            font-weight: 600;
            background-color: #f8f9fa !important;
        }
        
        #reviewData td {
            color: #000000 !important;
            background-color: #ffffff !important;
        }
        
        #reviewData .table-bordered {
            border-color: #dee2e6 !important;
        }
        
        #reviewData .table-bordered th,
        #reviewData .table-bordered td {
            border-color: #dee2e6 !important;
        }
        
        #reviewData h5 {
            color: #000000 !important;
            font-weight: 600;
        }
        
        /* নিশ্চিতকরণ স্টেপের জন্য অতিরিক্ত স্টাইল */
        #step4Form .form-card {
            color: #000000;
        }
        
        #step4Form .alert-heading {
            color: #000000 !important;
        }
        
        #step4Form .alert {
            color: #000000;
        }
        
        #step4Form .alert-info {
            background-color: #d1ecf1;
            border-color: #bee5eb;
        }
        
        #step4Form .alert-warning {
            background-color: #fff3cd;
            border-color: #ffeaa7;
        }
        
        /* টেবিলের সব লেখা কালার কালো রাখুন */
        #step4Form * {
            color: #000000 !important;
        }
        
        /* শুধুমাত্র লিঙ্কের জন্য */
        #step4Form a {
            color: #0d6efd !important;
        }
        
        /* বাটনের টেক্সট কালার সাদা রাখুন */
        #step4Form .btn {
            color: #ffffff !important;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <!-- লোডিং ওভারলে -->
        <div class="loading-overlay" id="loadingOverlay">
            <div class="text-center">
                <div class="loading-spinner">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <h4 class="text-white mt-3" id="loadingText">সদস্য নিবন্ধন করা হচ্ছে...</h4>
                <p class="text-white" id="loadingSubtext">অনুগ্রহ করে অপেক্ষা করুন</p>
            </div>
        </div>

        <!-- প্রোগ্রেস বার -->
        <div class="step-progress">
            <div class="step active" id="step1">
                <div class="step-circle">1</div>
                <div>মৌলিক তথ্য</div>
            </div>
            <div class="step" id="step2">
                <div class="step-circle">2</div>
                <div>অতিরিক্ত তথ্য</div>
            </div>
            <div class="step" id="step3">
                <div class="step-circle">3</div>
                <div>নমিনি তথ্য</div>
            </div>
            <div class="step" id="step4">
                <div class="step-circle">4</div>
                <div>নিশ্চিতকরণ</div>
            </div>
        </div>

        <!-- ফর্ম কন্টেইনার -->
        <div id="formContainer">
            <form method="POST" action="<?php echo e(route('members.store')); ?>" enctype="multipart/form-data" id="memberForm" novalidate>
                <?php echo csrf_field(); ?>
                
                <!-- স্টেপ 1: মৌলিক তথ্য -->
                <div class="form-step active" id="step1Form">
                    <div class="form-card">
                        <h3 class="mb-4 text-primary">
                            <i class="fas fa-user me-2"></i>মৌলিক তথ্য
                        </h3>
                        
                        <div class="row">
                            <div class="col-md-4 text-center mb-4">
                                <img src="https://ui-avatars.com/api/?name=নতুন+সদস্য&background=0d6efd&color=fff&size=150" 
                                     class="preview-photo" 
                                     id="photoPreview">
                                <input type="file" 
                                       class="form-control" 
                                       id="photo" 
                                       name="photo" 
                                       accept="image/*"
                                       onchange="previewImage(this)">
                                <small class="text-muted">ছবি আপলোড করুন (ঐচ্ছিক)</small>
                            </div>
                            
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="member_id" class="form-label required">সদস্য আইডি</label>
                                        <div class="input-group">
                                            <input type="text" 
                                                   class="form-control" 
                                                   id="member_id" 
                                                   name="member_id" 
                                                   required
                                                   placeholder="উদাহরণ: MEM2025001"
                                                   onblur="checkMemberId()">
                                            <button type="button" class="btn btn-outline-secondary" onclick="generateMemberId()">
                                                <i class="fas fa-sync-alt"></i>
                                            </button>
                                        </div>
                                        <div class="form-text" id="memberIdFeedback"></div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label required">পূর্ণ নাম</label>
                                        <input type="text" 
                                               class="form-control" 
                                               id="name" 
                                               name="name" 
                                               required
                                               placeholder="উদাহরণ: মোঃ আব্দুল করিম">
                                        <div class="invalid-feedback">অনুগ্রহ করে আপনার পূর্ণ নাম দিন</div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label required">মোবাইল নম্বর</label>
                                        <input type="tel" 
                                               class="form-control" 
                                               id="phone" 
                                               name="phone" 
                                               required
                                               pattern="01[3-9][0-9]{8}"
                                               placeholder="উদাহরণ: 01712345678"
                                               onblur="validatePhone()">
                                        <div class="invalid-feedback">সঠিক মোবাইল নম্বর দিন (01xxxxxxxxx)</div>
                                        <div class="form-text" id="phoneFeedback"></div>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">ইমেইল</label>
                                        <input type="email" 
                                               class="form-control" 
                                               id="email" 
                                               name="email"
                                               placeholder="উদাহরণ: example@gmail.com">
                                        <div class="invalid-feedback">সঠিক ইমেইল দিন</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="step-buttons">
                            <button type="button" class="btn btn-secondary" disabled>পিছনে</button>
                            <button type="button" class="btn btn-primary" onclick="validateStep1()">
                                পরবর্তী <i class="fas fa-arrow-right ms-1"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- স্টেপ 2: অতিরিক্ত তথ্য -->
                <div class="form-step" id="step2Form">
                    <div class="form-card">
                        <h3 class="mb-4 text-primary">
                            <i class="fas fa-info-circle me-2"></i>অতিরিক্ত তথ্য
                        </h3>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="father_name" class="form-label">পিতার নাম</label>
                                <input type="text" 
                                       class="form-control" 
                                       id="father_name" 
                                       name="father_name"
                                       placeholder="পিতার নাম">
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="mother_name" class="form-label">মাতার নাম</label>
                                <input type="text" 
                                       class="form-control" 
                                       id="mother_name" 
                                       name="mother_name"
                                       placeholder="মাতার নাম">
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="date_of_birth" class="form-label">জন্ম তারিখ</label>
                                <input type="date" 
                                       class="form-control" 
                                       id="date_of_birth" 
                                       name="date_of_birth">
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="gender" class="form-label required">লিঙ্গ</label>
                                <select class="form-control" id="gender" name="gender" required>
                                    <option value="">লিঙ্গ নির্বাচন করুন</option>
                                    <option value="male">পুরুষ</option>
                                    <option value="female">মহিলা</option>
                                    <option value="other">অন্যান্য</option>
                                </select>
                                <div class="invalid-feedback">অনুগ্রহ করে লিঙ্গ নির্বাচন করুন</div>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="nid" class="form-label">জাতীয় পরিচয়পত্র নম্বর</label>
                                <input type="text" 
                                       class="form-control" 
                                       id="nid" 
                                       name="nid"
                                       placeholder="জাতীয় পরিচয়পত্র নম্বর">
                                <div class="form-text" id="nidFeedback"></div>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="occupation" class="form-label">পেশা</label>
                                <select class="form-control" id="occupation" name="occupation">
                                    <option value="">পেশা নির্বাচন করুন</option>
                                    <option value="business">ব্যবসায়ী</option>
                                    <option value="service">চাকরিজীবী</option>
                                    <option value="student">ছাত্র</option>
                                    <option value="housewife">গৃহিণী</option>
                                    <option value="farmer">কৃষক</option>
                                    <option value="other">অন্যান্য</option>
                                </select>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="present_address" class="form-label required">বর্তমান ঠিকানা</label>
                                <textarea class="form-control" 
                                          id="present_address" 
                                          name="present_address" 
                                          rows="2"
                                          required
                                          placeholder="বর্তমান ঠিকানা"></textarea>
                                <div class="invalid-feedback">অনুগ্রহ করে বর্তমান ঠিকানা দিন</div>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="permanent_address" class="form-label">স্থায়ী ঠিকানা</label>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="sameAsPresent" onchange="copyAddress()">
                                    <label class="form-check-label" for="sameAsPresent">
                                        বর্তমান ঠিকানার মতোই
                                    </label>
                                </div>
                                <textarea class="form-control" 
                                          id="permanent_address" 
                                          name="permanent_address" 
                                          rows="2"
                                          placeholder="স্থায়ী ঠিকানা"></textarea>
                            </div>
                        </div>
                        
                        <div class="step-buttons">
                            <button type="button" class="btn btn-secondary" onclick="prevStep()">
                                <i class="fas fa-arrow-left me-1"></i> পিছনে
                            </button>
                            <button type="button" class="btn btn-primary" onclick="validateStep2()">
                                পরবর্তী <i class="fas fa-arrow-right ms-1"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- স্টেপ 3: নমিনি তথ্য -->
                <div class="form-step" id="step3Form">
                    <div class="form-card">
                        <h3 class="mb-4 text-primary">
                            <i class="fas fa-user-friends me-2"></i>নমিনি তথ্য
                        </h3>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="nominee_name" class="form-label">নমিনির নাম</label>
                                <input type="text" 
                                       class="form-control" 
                                       id="nominee_name" 
                                       name="nominee_name"
                                       placeholder="নমিনির নাম">
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="nominee_relation" class="form-label">সম্পর্ক</label>
                                <select class="form-control" id="nominee_relation" name="nominee_relation">
                                    <option value="">সম্পর্ক নির্বাচন করুন</option>
                                    <option value="wife">স্ত্রী</option>
                                    <option value="husband">স্বামী</option>
                                    <option value="son">পুত্র</option>
                                    <option value="daughter">কন্যা</option>
                                    <option value="father">পিতা</option>
                                    <option value="mother">মাতা</option>
                                    <option value="brother">ভাই</option>
                                    <option value="sister">বোন</option>
                                    <option value="other">অন্যান্য</option>
                                </select>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="nominee_nid" class="form-label">নমিনির NID</label>
                                <input type="text" 
                                       class="form-control" 
                                       id="nominee_nid" 
                                       name="nominee_nid"
                                       placeholder="নমিনির জাতীয় পরিচয়পত্র">
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="monthly_saving" class="form-label required">মাসিক সঞ্চয়</label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control" 
                                           id="monthly_saving" 
                                           name="monthly_saving"
                                           value="600"
                                           min="600"
                                           step="10"
                                           required>
                                    <span class="input-group-text">টাকা</span>
                                </div>
                                <div class="invalid-feedback">অনুগ্রহ করে মাসিক সঞ্চয়ের পরিমাণ দিন (ন্যূনতম ৬০০ টাকা)</div>
                                <small class="form-text text-muted">মাসিক সঞ্চয়ের ন্যূনতম পরিমাণ: ৬০০ টাকা</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="form_fee" class="form-label required">ফর্ম ফি (সদস্য ভর্তি ফি)</label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control" 
                                           id="form_fee" 
                                           name="form_fee"
                                           value="1500"
                                           min="1500"
                                           step="10"
                                           required>
                                    <span class="input-group-text">টাকা</span>
                                </div>
                                <div class="invalid-feedback">অনুগ্রহ করে ফর্ম ফির পরিমাণ দিন (ন্যূনতম ১৫০০ টাকা)</div>
                                <small class="form-text text-muted">সদস্য ভর্তি ফি: ১৫০০ টাকা</small>
                            </div>
                            
                            <div class="col-md-12 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="form_fee_paid" 
                                           name="form_fee_paid" 
                                           value="1">
                                    <label class="form-check-label" for="form_fee_paid">
                                        ফর্ম ফি পরিশোধিত
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="approval_status" class="form-label">অনুমোদন স্ট্যাটাস</label>
                                <select class="form-control" id="approval_status" name="approval_status">
                                    <option value="pending">পেন্ডিং</option>
                                    <option value="approved">অনুমোদিত</option>
                                    <option value="rejected">বাতিল</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label">স্ট্যাটাস</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="active">সক্রিয়</option>
                                    <option value="inactive">নিষ্ক্রিয়</option>
                                    <option value="pending">পেন্ডিং</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="step-buttons">
                            <button type="button" class="btn btn-secondary" onclick="prevStep()">
                                <i class="fas fa-arrow-left me-1"></i> পিছনে
                            </button>
                            <button type="button" class="btn btn-primary" onclick="validateStep3()">
                                পরবর্তী <i class="fas fa-arrow-right ms-1"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- স্টেপ 4: নিশ্চিতকরণ -->
                <div class="form-step" id="step4Form">
                    <div class="form-card">
                        <h3 class="mb-4 text-primary" style="color: #000000 !important;">
                            <i class="fas fa-check-circle me-2"></i>নিশ্চিতকরণ
                        </h3>
                        
                        <div class="alert alert-info">
                            <h5 class="alert-heading" style="color: #000000 !important;">
                                <i class="fas fa-info-circle me-2"></i>
                                দয়া করে তথ্যগুলো যাচাই করুন
                            </h5>
                            <p class="mb-0" style="color: #000000 !important;">
                                নিচে আপনার প্রদত্ত সকল তথ্য দেখানো হয়েছে। সংরক্ষণ করার আগে দয়া করে তথ্যগুলো যাচাই করুন।
                            </p>
                        </div>
                        
                        <div class="row" id="reviewData">
                            <!-- তথ্য এখানে JavaScript দ্বারা লোড হবে -->
                        </div>
                        
                        <div class="alert alert-warning mt-3">
                            <h6 class="alert-heading" style="color: #000000 !important;">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                তথ্য সংরক্ষণ করার পরে পরিবর্তন করা যাবে না। দয়া করে নিশ্চিত হয়ে সংরক্ষণ করুন।
                            </h6>
                        </div>
                        
                        <div class="step-buttons">
                            <button type="button" class="btn btn-secondary" onclick="prevStep()">
                                <i class="fas fa-arrow-left me-1"></i> পিছনে
                            </button>
                            <button type="button" class="btn btn-success" id="submitBtn" onclick="submitForm()">
                                <i class="fas fa-save me-1"></i> সংরক্ষণ করুন
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- সফল মেসেজ (প্রাথমিকভাবে লুকানো) -->
        <div class="form-card success-message" id="successMessage" style="display: none;">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h3 class="text-success">সফলভাবে নিবন্ধন করা হয়েছে!</h3>
            <p class="lead" id="successDetails"></p>
            <div class="mt-4">
                <button type="button" class="btn btn-primary me-2" onclick="resetForm()">
                    <i class="fas fa-user-plus me-1"></i> আরেকটি সদস্য যোগ করুন
                </button>
                <a href="<?php echo e(route('members.index')); ?>" class="btn btn-outline-primary">
                    <i class="fas fa-list me-1"></i> সকল সদস্য দেখুন
                </a>
            </div>
        </div>
        
        <!-- এরর মেসেজ -->
        <div class="form-card alert alert-danger" id="errorMessage" style="display: none;">
            <h4 class="alert-heading">
                <i class="fas fa-exclamation-triangle me-2"></i>
                সদস্য নিবন্ধন করতে সমস্যা হয়েছে
            </h4>
            <p id="errorDetails"></p>
            <div class="mt-3">
                <button type="button" class="btn btn-warning" onclick="retrySubmission()">
                    <i class="fas fa-redo me-1"></i> আবার চেষ্টা করুন
                </button>
                <button type="button" class="btn btn-secondary" onclick="resetForm()">
                    <i class="fas fa-times me-1"></i> বাতিল করুন
                </button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let currentStep = 1;
        const totalSteps = 4;
        
        // ফর্ম ভ্যালিডেশন
        function validateStep(step) {
            let isValid = true;
            const form = document.getElementById('memberForm');
            
            if (step === 1) {
                // স্টেপ 1 ভ্যালিডেশন
                const memberId = document.getElementById('member_id').value.trim();
                const name = document.getElementById('name').value.trim();
                const phone = document.getElementById('phone').value.trim();
                
                if (!memberId) {
                    showError('member_id', 'সদস্য আইডি প্রয়োজন');
                    isValid = false;
                } else {
                    clearError('member_id');
                }
                
                if (!name) {
                    showError('name', 'নাম প্রয়োজন');
                    isValid = false;
                } else {
                    clearError('name');
                }
                
                if (!phone) {
                    showError('phone', 'মোবাইল নম্বর প্রয়োজন');
                    isValid = false;
                } else if (!/^01[3-9]\d{8}$/.test(phone)) {
                    showError('phone', 'সঠিক মোবাইল নম্বর দিন (01xxxxxxxxx)');
                    isValid = false;
                } else {
                    clearError('phone');
                }
                
            } else if (step === 2) {
                // স্টেপ 2 ভ্যালিডেশন
                const gender = document.getElementById('gender').value;
                const presentAddress = document.getElementById('present_address').value.trim();
                
                if (!gender) {
                    showError('gender', 'লিঙ্গ নির্বাচন করুন');
                    isValid = false;
                } else {
                    clearError('gender');
                }
                
                if (!presentAddress) {
                    showError('present_address', 'বর্তমান ঠিকানা প্রয়োজন');
                    isValid = false;
                } else {
                    clearError('present_address');
                }
                
            } else if (step === 3) {
                // স্টেপ 3 ভ্যালিডেশন
                const monthlySaving = document.getElementById('monthly_saving').value;
                const formFee = document.getElementById('form_fee').value;
                
                if (!monthlySaving || monthlySaving < 600) {
                    showError('monthly_saving', 'মাসিক সঞ্চয় অন্তত 600 টাকা হতে হবে');
                    isValid = false;
                } else {
                    clearError('monthly_saving');
                }
                
                if (!formFee || formFee < 1500) {
                    showError('form_fee', 'ফর্ম ফি অন্তত 1500 টাকা হতে হবে');
                    isValid = false;
                } else {
                    clearError('form_fee');
                }
            }
            
            return isValid;
        }
        
        function validateStep1() {
            if (validateStep(1)) {
                nextStep();
            }
        }
        
        function validateStep2() {
            if (validateStep(2)) {
                nextStep();
            }
        }
        
        function validateStep3() {
            if (validateStep(3)) {
                nextStep();
            }
        }
        
        function showError(fieldId, message) {
            const field = document.getElementById(fieldId);
            field.classList.add('is-invalid');
            
            let errorDiv = document.getElementById(fieldId + '-error');
            if (!errorDiv) {
                errorDiv = document.createElement('div');
                errorDiv.id = fieldId + '-error';
                errorDiv.className = 'error-message';
                field.parentNode.appendChild(errorDiv);
            }
            errorDiv.textContent = message;
        }
        
        function clearError(fieldId) {
            const field = document.getElementById(fieldId);
            field.classList.remove('is-invalid');
            
            const errorDiv = document.getElementById(fieldId + '-error');
            if (errorDiv) {
                errorDiv.remove();
            }
        }
        
        function nextStep() {
            document.getElementById(`step${currentStep}Form`).classList.remove('active');
            document.getElementById(`step${currentStep}`).classList.remove('active');
            document.getElementById(`step${currentStep}`).classList.add('completed');
            
            currentStep++;
            
            document.getElementById(`step${currentStep}Form`).classList.add('active');
            document.getElementById(`step${currentStep}`).classList.add('active');
            
            if (currentStep === totalSteps) {
                loadReviewData();
            }
        }
        
        function prevStep() {
            document.getElementById(`step${currentStep}Form`).classList.remove('active');
            document.getElementById(`step${currentStep}`).classList.remove('active');
            document.getElementById(`step${currentStep}`).classList.remove('completed');
            
            currentStep--;
            
            document.getElementById(`step${currentStep}Form`).classList.add('active');
            document.getElementById(`step${currentStep}`).classList.add('active');
        }
        
        function previewImage(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('photoPreview').src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        function copyAddress() {
            const sameAsPresent = document.getElementById('sameAsPresent').checked;
            const presentAddress = document.getElementById('present_address').value;
            
            if (sameAsPresent) {
                document.getElementById('permanent_address').value = presentAddress;
                document.getElementById('permanent_address').readOnly = true;
            } else {
                document.getElementById('permanent_address').readOnly = false;
                document.getElementById('permanent_address').value = '';
            }
        }
        
        function generateMemberId() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const randomNum = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
            
            const memberId = `MEM${year}${month}${day}${randomNum}`;
            document.getElementById('member_id').value = memberId;
            
            // ফিডব্যাক আপডেট
            document.getElementById('memberIdFeedback').innerHTML = 
                '<i class="fas fa-check text-success"></i> নতুন আইডি জেনারেট করা হয়েছে';
            document.getElementById('memberIdFeedback').className = 'form-text text-success';
        }
        
        function checkMemberId() {
            const memberId = document.getElementById('member_id').value.trim();
            const feedback = document.getElementById('memberIdFeedback');
            
            if (!memberId) {
                feedback.innerHTML = '<i class="fas fa-exclamation-triangle text-warning"></i> সদস্য আইডি প্রয়োজন';
                feedback.className = 'form-text text-warning';
                return;
            }
            
            // AJAX দিয়ে ডুপ্লিকেট চেক করা যায়, এখন সিমুলেশন
            feedback.innerHTML = '<i class="fas fa-spinner fa-spin text-info"></i> চেক করা হচ্ছে...';
            
            setTimeout(() => {
                // সিমুলেটেড চেক - আসলে সার্ভার থেকে চেক করতে হবে
                const isDuplicate = Math.random() < 0.1; // 10% চান্স আছে ডুপ্লিকেট হবার
                
                if (isDuplicate) {
                    feedback.innerHTML = '<i class="fas fa-times text-danger"></i> এই আইডি ইতিমধ্যে ব্যবহৃত হয়েছে';
                    feedback.className = 'form-text text-danger';
                } else {
                    feedback.innerHTML = '<i class="fas fa-check text-success"></i> এই আইডি ব্যবহারযোগ্য';
                    feedback.className = 'form-text text-success';
                }
            }, 1000);
        }
        
        function validatePhone() {
            const phone = document.getElementById('phone').value;
            const feedback = document.getElementById('phoneFeedback');
            
            if (!phone) {
                feedback.innerHTML = '';
                return;
            }
            
            const phoneRegex = /^01[3-9]\d{8}$/;
            if (phoneRegex.test(phone)) {
                feedback.innerHTML = '<i class="fas fa-check text-success"></i> বৈধ মোবাইল নম্বর';
                feedback.className = 'form-text text-success';
            } else {
                feedback.innerHTML = '<i class="fas fa-times text-danger"></i> অবৈধ মোবাইল নম্বর (01xxxxxxxxx ফরম্যাটে দিন)';
                feedback.className = 'form-text text-danger';
            }
        }
        
        function loadReviewData() {
            const reviewDiv = document.getElementById('reviewData');
            
            // ফর্ম থেকে তথ্য সংগ্রহ
            const formData = {
                member_id: document.getElementById('member_id').value,
                name: document.getElementById('name').value,
                phone: document.getElementById('phone').value,
                email: document.getElementById('email').value || 'নাই',
                father_name: document.getElementById('father_name').value || 'নাই',
                mother_name: document.getElementById('mother_name').value || 'নাই',
                date_of_birth: document.getElementById('date_of_birth').value || 'নাই',
                gender: document.getElementById('gender').value ? document.getElementById('gender').options[document.getElementById('gender').selectedIndex].text : 'নাই',
                nid: document.getElementById('nid').value || 'নাই',
                occupation: document.getElementById('occupation').value ? document.getElementById('occupation').options[document.getElementById('occupation').selectedIndex].text : 'নাই',
                present_address: document.getElementById('present_address').value,
                permanent_address: document.getElementById('permanent_address').value || 'নাই',
                nominee_name: document.getElementById('nominee_name').value || 'নাই',
                nominee_relation: document.getElementById('nominee_relation').value ? document.getElementById('nominee_relation').options[document.getElementById('nominee_relation').selectedIndex].text : 'নাই',
                nominee_nid: document.getElementById('nominee_nid').value || 'নাই',
                monthly_saving: document.getElementById('monthly_saving').value,
                form_fee: document.getElementById('form_fee').value,
                form_fee_paid: document.getElementById('form_fee_paid').checked ? 'হ্যাঁ' : 'না',
                approval_status: document.getElementById('approval_status').options[document.getElementById('approval_status').selectedIndex].text,
                status: document.getElementById('status').options[document.getElementById('status').selectedIndex].text
            };
            
            let html = `
                <div class="col-md-6">
                    <h5 style="color: #000000 !important;"><i class="fas fa-user me-2"></i>মৌলিক তথ্য</h5>
                    <table class="table table-sm table-bordered">
                        <tr>
                            <th width="40%" style="color: #000000 !important; background-color: #f8f9fa !important;">সদস্য আইডি:</th>
                            <td style="color: #000000 !important;">${formData.member_id}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">নাম:</th>
                            <td style="color: #000000 !important;">${formData.name}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">মোবাইল:</th>
                            <td style="color: #000000 !important;">${formData.phone}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">ইমেইল:</th>
                            <td style="color: #000000 !important;">${formData.email}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">লিঙ্গ:</th>
                            <td style="color: #000000 !important;">${formData.gender}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">পেশা:</th>
                            <td style="color: #000000 !important;">${formData.occupation}</td>
                        </tr>
                    </table>
                    
                    <h5 class="mt-4" style="color: #000000 !important;"><i class="fas fa-home me-2"></i>ঠিকানা</h5>
                    <table class="table table-sm table-bordered">
                        <tr>
                            <th width="40%" style="color: #000000 !important; background-color: #f8f9fa !important;">বর্তমান ঠিকানা:</th>
                            <td style="color: #000000 !important;">${formData.present_address}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">স্থায়ী ঠিকানা:</th>
                            <td style="color: #000000 !important;">${formData.permanent_address}</td>
                        </tr>
                    </table>
                </div>
                
                <div class="col-md-6">
                    <h5 style="color: #000000 !important;"><i class="fas fa-money-bill-wave me-2"></i>আর্থিক তথ্য</h5>
                    <table class="table table-sm table-bordered">
                        <tr>
                            <th width="40%" style="color: #000000 !important; background-color: #f8f9fa !important;">মাসিক সঞ্চয়:</th>
                            <td style="color: #000000 !important;">${formData.monthly_saving} টাকা</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">ফর্ম ফি (সদস্য ভর্তি ফি):</th>
                            <td style="color: #000000 !important;">${formData.form_fee} টাকা</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">ফর্ম ফি পরিশোধিত:</th>
                            <td style="color: #000000 !important;">${formData.form_fee_paid}</td>
                        </tr>
                    </table>
                    
                    <h5 class="mt-4" style="color: #000000 !important;"><i class="fas fa-user-friends me-2"></i>নমিনি তথ্য</h5>
                    <table class="table table-sm table-bordered">
                        <tr>
                            <th width="40%" style="color: #000000 !important; background-color: #f8f9fa !important;">নমিনির নাম:</th>
                            <td style="color: #000000 !important;">${formData.nominee_name}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">সম্পর্ক:</th>
                            <td style="color: #000000 !important;">${formData.nominee_relation}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">নমিনির NID:</th>
                            <td style="color: #000000 !important;">${formData.nominee_nid}</td>
                        </tr>
                    </table>
                    
                    <h5 class="mt-4" style="color: #000000 !important;"><i class="fas fa-cog me-2"></i>সিস্টেম তথ্য</h5>
                    <table class="table table-sm table-bordered">
                        <tr>
                            <th width="40%" style="color: #000000 !important; background-color: #f8f9fa !important;">অনুমোদন স্ট্যাটাস:</th>
                            <td style="color: #000000 !important;">${formData.approval_status}</td>
                        </tr>
                        <tr>
                            <th style="color: #000000 !important; background-color: #f8f9fa !important;">স্ট্যাটাস:</th>
                            <td style="color: #000000 !important;">${formData.status}</td>
                        </tr>
                    </table>
                </div>
            `;
            
            reviewDiv.innerHTML = html;
        }
        
        function submitForm() {
            // সব স্টেপ ভ্যালিডেট করুন
            let allValid = true;
            for (let i = 1; i <= 3; i++) {
                if (!validateStep(i)) {
                    allValid = false;
                    // প্রথম ভুল পাওয়া স্টেপে যান
                    goToStep(i);
                    break;
                }
            }
            
            if (!allValid) {
                alert('দয়া করে সমস্ত প্রয়োজনীয় তথ্য প্রদান করুন');
                return;
            }
            
            // লোডিং ওভারলে দেখান
            document.getElementById('loadingOverlay').style.display = 'flex';
            document.getElementById('loadingText').textContent = 'সদস্য নিবন্ধন করা হচ্ছে...';
            document.getElementById('loadingSubtext').textContent = 'অনুগ্রহ করে অপেক্ষা করুন';
            
            // ফর্ম ডেটা প্রস্তুত
            const form = document.getElementById('memberForm');
            const formData = new FormData(form);
            
            // AJAX সাবমিশন - JSON রেসপন্স হ্যান্ডলিং উন্নত
            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json' // JSON এক্সেপ্ট হেডার যোগ করুন
                }
            })
            .then(response => {
                // প্রথমে রেসপন্স টেক্সট হিসেবে পড়ুন
                return response.text().then(text => {
                    try {
                        // JSON পার্স করার চেষ্টা করুন
                        const data = JSON.parse(text);
                        return {
                            ok: response.ok,
                            status: response.status,
                            data: data
                        };
                    } catch (e) {
                        // JSON পার্স করতে ব্যর্থ হলে, এটি HTML রেসপন্স
                        return {
                            ok: false,
                            status: response.status,
                            data: {
                                success: false,
                                message: 'সার্ভার থেকে সঠিক রেসপন্স পাওয়া যায়নি। দয়া করে আবার চেষ্টা করুন।'
                            }
                        };
                    }
                });
            })
            .then(result => {
                // লোডিং লুকান
                document.getElementById('loadingOverlay').style.display = 'none';
                
                if (result.ok && result.data.success) {
                    // সফল মেসেজ দেখান
                    document.getElementById('formContainer').style.display = 'none';
                    document.getElementById('successMessage').style.display = 'block';
                    
                    let successDetails = 'নতুন সদস্য সফলভাবে নিবন্ধন করা হয়েছে।';
                    if (result.data.member_id) {
                        successDetails += `<br><strong>সদস্য আইডি: ${result.data.member_id}</strong>`;
                    }
                    document.getElementById('successDetails').innerHTML = successDetails;
                    
                    // সফল হলে URL আপডেট
                    if (result.data.redirect_url) {
                        setTimeout(() => {
                            window.location.href = result.data.redirect_url;
                        }, 3000);
                    }
                } else {
                    // এরর মেসেজ দেখান
                    document.getElementById('formContainer').style.display = 'none';
                    document.getElementById('errorMessage').style.display = 'block';
                    
                    let errorMessage = result.data.message || 'সদস্য নিবন্ধন করতে সমস্যা হয়েছে। দয়া করে আবার চেষ্টা করুন।';
                    
                    // ভ্যালিডেশন এরর থাকলে দেখান
                    if (result.data.errors) {
                        errorMessage += '<br><br>ত্রুটিসমূহ:<ul class="mt-2">';
                        for (const field in result.data.errors) {
                            errorMessage += `<li>${result.data.errors[field][0]}</li>`;
                        }
                        errorMessage += '</ul>';
                    }
                    
                    document.getElementById('errorDetails').innerHTML = errorMessage;
                }
            })
            .catch(error => {
                document.getElementById('loadingOverlay').style.display = 'none';
                document.getElementById('formContainer').style.display = 'none';
                document.getElementById('errorMessage').style.display = 'block';
                document.getElementById('errorDetails').textContent = 
                    'নেটওয়ার্ক ত্রুটি: ' + error.message + '। দয়া করে ইন্টারনেট সংযোগ চেক করুন এবং আবার চেষ্টা করুন।';
            });
        }
        
        function goToStep(step) {
            // সব স্টেপ লুকান
            document.querySelectorAll('.form-step').forEach(formStep => {
                formStep.classList.remove('active');
            });
            
            // সব প্রোগ্রেস বার আপডেট
            document.querySelectorAll('.step').forEach(stepEl => {
                stepEl.classList.remove('active');
                stepEl.classList.remove('completed');
            });
            
            // নির্দিষ্ট স্টেপে যান
            for (let i = 1; i < step; i++) {
                document.getElementById(`step${i}`).classList.add('completed');
            }
            
            document.getElementById(`step${step}Form`).classList.add('active');
            document.getElementById(`step${step}`).classList.add('active');
            currentStep = step;
        }
        
        function resetForm() {
            // ফর্ম রিসেট
            document.getElementById('memberForm').reset();
            
            // প্রিভিউ ইমেজ রিসেট
            document.getElementById('photoPreview').src = 'https://ui-avatars.com/api/?name=নতুন+সদস্য&background=0d6efd&color=fff&size=150';
            
            // ঠিকানা কপি চেকবক্স রিসেট
            document.getElementById('sameAsPresent').checked = false;
            document.getElementById('permanent_address').readOnly = false;
            
            // মাসিক সঞ্চয় এবং ফর্ম ফি ডিফল্ট ভ্যালু সেট করুন
            document.getElementById('monthly_saving').value = 600;
            document.getElementById('form_fee').value = 1500;
            
            // স্টেপ রিসেট
            document.querySelectorAll('.step').forEach(step => {
                step.classList.remove('active', 'completed');
            });
            document.getElementById('step1').classList.add('active');
            
            document.querySelectorAll('.form-step').forEach(step => {
                step.classList.remove('active');
            });
            document.getElementById('step1Form').classList.add('active');
            
            currentStep = 1;
            
            // ভিউ স্যুইচ
            document.getElementById('successMessage').style.display = 'none';
            document.getElementById('errorMessage').style.display = 'none';
            document.getElementById('formContainer').style.display = 'block';
            
            // ভ্যালিডেশন ক্লাস রিমুভ
            document.getElementById('memberForm').classList.remove('was-validated');
            
            // এরর মেসেজ ক্লিয়ার
            document.querySelectorAll('.error-message').forEach(el => el.remove());
            document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
            
            // জেনারেট নতুন মেম্বার আইডি
            generateMemberId();
        }
        
        function retrySubmission() {
            document.getElementById('errorMessage').style.display = 'none';
            document.getElementById('formContainer').style.display = 'block';
        }
        
        // পেজ লোড হলে মেম্বার আইডি জেনারেট করুন
        document.addEventListener('DOMContentLoaded', function() {
            generateMemberId();
            
            // ফর্ম সাবমিশন প্রিভেন্ট
            document.getElementById('memberForm').addEventListener('submit', function(e) {
                e.preventDefault();
                submitForm();
            });
        });
    </script>
</body>
</html>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/naowarin/somoti.naowarinternational.my.id/resources/views/members/create.blade.php ENDPATH**/ ?>