<?php include 'header.php'; ?>

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add Intern</title>
    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>
    <style> .ts-wrapper{width:100%;position:relative;}.ts-control{min-height:56px !important;height:56px !important;border:1px solid #d1d5db !important;border-radius:16px !important;padding:0 16px !important;background:#fff !important;box-shadow:none !important;display:flex !important;align-items:center !important;overflow:hidden !important;}.ts-control input{font-size:14px !important;}.ts-wrapper.focus .ts-control{border-color:#8b5cf6 !important;box-shadow:0 0 0 4px rgba(139,92,246,0.10) !important;}.ts-dropdown{margin-top:8px !important;border-radius:16px !important;border:1px solid #e5e7eb !important;overflow:hidden !important;background:#fff !important;box-shadow:0 10px 30px rgba(0,0,0,0.10) !important;z-index:9999 !important;}.ts-dropdown-content{max-height:220px !important;overflow-y:auto !important;overflow-x:hidden !important;scroll-behavior:smooth;}.ts-dropdown-content::-webkit-scrollbar{width:6px;}.ts-dropdown-content::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:20px;}.ts-dropdown .option{padding:14px 16px !important;font-size:14px !important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff !important;color:#7c3aed !important;}.fi{position:relative;}.fi input,.fi textarea{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi textarea{height:100px;resize:none;padding-top:16px;}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;z-index:2;}.fi textarea + label{top:22px;transform:none;}.fi input:focus + label,.fi input:not(:placeholder-shown) + label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.fi textarea:focus + label,.fi textarea:not(:placeholder-shown) + label{top:-8px;transform:none;font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}.doc-row{display:flex;align-items:stretch;gap:14px;border:1px solid #e5e7eb;border-radius:18px;padding:14px 16px;background:#fff;transition:0.25s;}.doc-row:hover{border-color:#c4b5fd;box-shadow:0 2px 12px rgba(139,92,246,0.07);}.doc-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;}.doc-icon{width:42px;height:42px;border-radius:12px;background:#f3e8ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.doc-icon i{font-size:20px;color:#8b5cf6;}.doc-info{flex:1;min-width:0;}.doc-label{font-size:14px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:4px;}.doc-label .req{color:#ef4444;font-size:13px;}.doc-filename{font-size:12px;color:#9ca3af;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.doc-filename.has-file{color:#7c3aed;font-weight:500;}.doc-upload-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:32px;padding:0 14px;border-radius:8px;border:1.5px dashed #c4b5fd;background:#faf5ff;color:#7c3aed;font-size:12px;font-weight:600;cursor:pointer;transition:0.2s;white-space:nowrap;}.doc-upload-btn:hover{background:#ede9fe;border-color:#8b5cf6;}.doc-preview{width:90px;flex-shrink:0;border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;min-height:80px;}.doc-preview img{width:100%;height:100%;object-fit:cover;display:none;}.doc-preview img.visible{display:block;}.doc-preview .prev-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;}.doc-preview .prev-placeholder i{font-size:22px;color:#d1d5db;}.doc-preview .prev-placeholder span{font-size:10px;color:#d1d5db;text-align:center;}.doc-preview .prev-file{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;}.doc-preview .prev-file.visible{display:flex;}.doc-preview .prev-file i{font-size:26px;color:#8b5cf6;}.doc-preview .prev-file span{font-size:10px;color:#7c3aed;font-weight:600;word-break:break-all;}.doc-preview .prev-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;z-index:5;}.doc-preview .prev-remove.visible{display:flex;}.form-step{display:none;}.form-step.active{display:block;}.checkbox-wrap{display:flex;align-items:center;gap:8px;padding:4px 0;}.checkbox-wrap input[type="checkbox"]{width:18px;height:18px;accent-color:#8b5cf6;cursor:pointer;}.checkbox-wrap label{font-size:13px;color:#6b7280;cursor:pointer;}@media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.fi textarea,.si select{height:52px;}.fi textarea{height:90px;}}</style>

</head>

<body class="bg-gray-100 min-h-screen">

<!-- HEADER -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">

    <div class="flex items-start justify-between">

        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                Add Intern
            </h1>
        </div>

        <a href="interns_list.php">
        <button
            class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">

            <i class="ri-arrow-left-line"></i>
            Back

        </button>
        </a>

    </div>

</div>

<!-- MAIN -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pb-6 sm:pb-10">

    <div class="w-full bg-white rounded-2xl sm:rounded-3xl shadow-xl border border-gray-100 p-3 sm:p-6 md:p-8 lg:p-12 overflow-visible">

        <div class="flex flex-col lg:flex-row gap-6 lg:gap-14">

            <!-- SIDEBAR -->
            <div class="w-full lg:w-64 xl:w-72 flex-shrink-0">

                <!-- MOBILE -->
                <div class="flex lg:hidden items-center justify-between mb-6">

                    <span id="mobileLabel" class="text-sm font-semibold text-gray-800">
                        Step 1 of 5 — Personal Info
                    </span>

                    <div class="flex gap-1.5">

                        <div id="mdot0" class="w-2.5 h-2.5 rounded-full bg-violet-500"></div>
                        <div id="mdot1" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        <div id="mdot2" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        <div id="mdot3" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                        <div id="mdot4" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>

                    </div>

                </div>

                <!-- DESKTOP -->
                <div class="hidden lg:flex flex-col gap-0">

                    <?php
                    $steps = [
                        ['01','Personal Info','Basic Intern details'],
                        ['02','Job Details','Department & role'],
                        ['03','Contact Info','Phone & address'],
                        ['04','Bank Details','Salary account info'],
                        ['05','Documents','Upload required files'],
                    ];

                    foreach($steps as $index => $step):
                    ?>

                    <div class="flex gap-4 items-start">

                        <div class="flex flex-col items-center">

                            <div id="sd<?= $index ?>"
                                class="w-7 h-7 rounded-full <?= $index == 0 ? 'border-[3px] border-violet-500' : 'border-2 border-violet-200' ?> bg-white flex items-center justify-center transition-all duration-300"></div>

                            <?php if($index != 4): ?>
                            <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                            <?php endif; ?>

                        </div>

                        <div class="pt-0.5">

                            <div class="text-[11px] font-semibold text-gray-400">
                                <?= $step[0] ?>
                            </div>

                            <div id="st<?= $index ?>"
                                class="text-[15px] font-bold <?= $index == 0 ? 'text-gray-900' : 'text-gray-400' ?>">
                                <?= $step[1] ?>
                            </div>

                            <div class="text-xs text-gray-400">
                                <?= $step[2] ?>
                            </div>

                        </div>

                    </div>

                    <?php endforeach; ?>

                </div>

            </div>

            <!-- FORM -->
            <div class="flex-1 min-w-0 lg:border-l lg:border-gray-100 lg:pl-10 xl:pl-12">

                <!-- ========================
                     STEP 1 — PERSONAL INFO
                ========================= -->
                <div class="form-step active" id="fs0">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 1 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">
                            Personal Info
                        </h1>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                        <!-- Row 1 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="firstName">
                            <label>First Name *</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="middleName">
                            <label>Middle Name</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="lastName">
                            <label>Last Name *</label>
                        </div>

                        <div class="fi">
                            <input type="email" placeholder=" " id="personalEmail">
                            <label>Email *</label>
                        </div>

                        <div class="fi">
                            <input type="tel" placeholder=" " id="phoneNumber">
                            <label>Phone Number *</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="dob">
                            <label>Date of Birth *</label>
                        </div>

                        <div class="si">
                            <select id="gender">
                                <option value="" disabled selected>Gender *</option>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="bloodGroup">
                                <option value="" disabled selected>Blood Group</option>
                                <option>A+</option>
                                <option>A-</option>
                                <option>B+</option>
                                <option>B-</option>
                                <option>AB+</option>
                                <option>AB-</option>
                                <option>O+</option>
                                <option>O-</option>
                            </select>
                        </div>

                        <!-- Row 4 -->
                        <div class="si">
                            <select id="maritalStatus">
                                <option value="" disabled selected>Marital Status</option>
                                <option>Single</option>
                                <option>Married</option>
                                <option>Divorced</option>
                                <option>Widowed</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="nationality">
                            <label>Nationality</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="religion">
                            <label>Religion</label>
                        </div>



                        <div class="fi">
                            <input type="text" placeholder=" " id="aadhaarNumber" maxlength="12" inputmode="numeric" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                            <label>Aadhaar Number</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 2 — JOB DETAILS
                ========================= -->
                <div class="form-step" id="fs1">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 2 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">
                            Job Details
                        </h1>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                        <!-- Row 1 -->
                        <div class="si">
                            <select id="employeeType">
                                <option value="" disabled selected>Intern Type *</option>
                                <option>Full Time</option>
                                <option>Part Time</option>
                                <option>Contract</option>
                                <option>Intern</option>
                                <option>Freelancer</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="department">
                                <option value="" disabled selected>Department *</option>
                                <option>HR</option>
                                <option>Developer</option>
                                <option>Designer</option>
                                <option>QA</option>
                                <option>Finance</option>
                                <option>Marketing</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="designation">
                                <option value="" disabled selected>Designation *</option>
                                <option>Junior Developer</option>
                                <option>Senior Developer</option>
                                <option>Team Lead</option>
                                <option>Manager</option>
                                <option>Director</option>
                            </select>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="date" placeholder=" " id="joiningDate">
                            <label>Date of Joining *</label>
                        </div>

                        <div class="si">
                            <select id="reportingManager">
                                <option value="" disabled selected>Reporting Manager</option>
                                <option>Manager 1</option>
                                <option>Manager 2</option>
                                <option>Manager 3</option>
                            </select>
                        </div>

                        <div class="si">
                            <select id="workLocation">
                                <option value="" disabled selected>Work Location *</option>
                                <option>Head Office</option>
                                <option>Branch Office</option>
                                <option>Remote</option>
                                <option>Hybrid</option>
                            </select>
                        </div>

                        <!-- Row 3 -->
                        <div class="si">
                            <select id="employmentStatus">
                                <option value="" disabled selected>Employment Status *</option>
                                <option>Active</option>
                                <option>Inactive</option>
                                <option>On Leave</option>
                                <option>Probation</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="probationPeriod">
                            <label>Probation Period (Months)</label>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" " id="noticePeriod">
                            <label>Notice Period (Days)</label>
                        </div>

                        <!-- Row 4 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="ctcAnnum">
                            <label>CTC (Per Annum)</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="uanNumber">
                            <label>UAN Number</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 3 — CONTACT INFO
                ========================= -->
                <div class="form-step" id="fs2">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 3 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">
                            Contact Info
                        </h1>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                        <!-- Row 1 — Addresses -->
                        <div class="fi">
                            <textarea placeholder=" " id="presentAddress" maxlength="300"></textarea>
                            <label>Present Address *</label>
                        </div>

                        <div class="fi">
                            <textarea placeholder=" " id="permanentAddress" maxlength="300"></textarea>
                            <label>Permanent Address *</label>
                        </div>

                        <!-- Same as checkbox — full width -->
                        <div class="sm:col-span-2">
                            <div class="checkbox-wrap">
                                <input type="checkbox" id="sameAddress" onchange="toggleSameAddress(this)">
                                <label for="sameAddress">Same as present address</label>
                            </div>
                        </div>

                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">

                        <!-- Row 2 -->
                      <div class="si">
    <select id="city">
        <option value="" selected disabled>City *</option>
        <option>Ahmedabad</option>
        <option>Surat</option>
        <option>Vadodara</option>
        <option>Rajkot</option>
        <option>Bhavnagar</option>
        <option>Jamnagar</option>
        <option>Gandhinagar</option>
        <option>Anand</option>
        <option>Junagadh</option>
        <option>Navsari</option>
    </select>
</div>

                        <div class="si">
                            <select id="state">
                                <option value="" disabled selected>State *</option>
                                <option>Gujarat</option>
                                <option>Maharashtra</option>
                                <option>Rajasthan</option>
                                <option>Delhi</option>
                                <option>Karnataka</option>
                                <option>Tamil Nadu</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="pinCode">
                            <label>PIN Code *</label>
                        </div>

                        <!-- Row 3 -->
                        <div class="si">
                            <select id="country">
                                <option value="" disabled selected>Country *</option>
                                <option>India</option>
                                <option>United States</option>
                                <option>United Kingdom</option>
                                <option>Canada</option>
                                <option>Australia</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="tel" placeholder=" " id="alternatePhone">
                            <label>Phone Number (Alternate)</label>
                        </div>

                        <div class="fi">
                            <input type="tel" placeholder=" " id="emergencyContactName">
                            <label>Emergency Contact Name *</label>
                        </div>

                        <!-- Row 4 -->
                        <div class="fi">
                            <input type="tel" placeholder=" " id="emergencyContactNumber">
                            <label>Emergency Contact Number *</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="relationship">
                            <label>Relationship *</label>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 4 — BANK DETAILS
                ========================= -->
                <div class="form-step" id="fs3">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 4 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">
                            Bank Details
                        </h1>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                        <!-- Row 1 — Bank Name full width -->
                        <div class="fi sm:col-span-2">
                            <input type="text" placeholder=" " id="bankName">
                            <label>Bank Name *</label>
                        </div>

                        <!-- Row 2 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="accountNumber">
                            <label>Account Number *</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="confirmAccountNumber">
                            <label>Confirm Account Number *</label>
                        </div>

                        <!-- Row 3 — IFSC -->
                        <div class="fi sm:col-span-2 validate-wrap">
                            <input type="text" placeholder=" " id="ifscCode">
                            <label>IFSC Code *</label>

                        </div>

                        <!-- Row 4 -->
                        <div class="fi">
                            <input type="text" placeholder=" " id="branchName">
                            <label>Branch Name *</label>
                        </div>

                        <div class="fi">
                            <input type="text" placeholder=" " id="accountHolderName">
                            <label>Account Holder Name *</label>
                        </div>

                        <!-- Row 5 — Account Type -->
                        <div class="si sm:col-span-2">
                            <select id="accountType">
                                <option value="" disabled selected>Account Type *</option>
                                <option>Savings</option>
                                <option>Current</option>
                                <option>Salary</option>
                            </select>
                        </div>

                    </div>

                </div>

                <!-- ========================
                     STEP 5 — DOCUMENTS
                ========================= -->
                <div class="form-step" id="fs4">

                    <div class="mb-8">
                        <p class="text-xs text-gray-400 mb-1">Step 5 of 5</p>
                        <h1 class="text-3xl font-bold text-gray-900">Documents</h1>
                    </div>

                    <div class="flex flex-col gap-4">

                        <!-- Profile Photo -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon">
                                    <i class="ri-user-3-line"></i>
                                </div>
                                <div class="doc-info">
                                    <div class="doc-label">
                                        Profile Photo <span class="req">*</span>
                                    </div>
                                    <div id="profilePhotoName" class="doc-filename">No file chosen</div>
                                    <label for="profilePhoto" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="profilePhoto" class="hidden" accept="image/*"
                                        onchange="handleDocUpload(this,'profilePhotoName','profilePhotoPreview','profilePhotoFile','profilePhotoPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="profilePhotoPreviewWrap">
                                <div class="prev-placeholder" id="profilePhotoPlaceholder">
                                    <i class="ri-image-line"></i>
                                    <span>Preview</span>
                                </div>
                                <img id="profilePhotoPreview" alt="preview">
                                <div class="prev-file" id="profilePhotoFile"></div>
                                <button class="prev-remove" id="profilePhotoRemove"
                                    onclick="removeDoc('profilePhoto','profilePhotoName','profilePhotoPreview','profilePhotoFile','profilePhotoPlaceholder','profilePhotoRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- Resume / CV -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon">
                                    <i class="ri-file-text-line"></i>
                                </div>
                                <div class="doc-info">
                                    <div class="doc-label">Resume / CV</div>
                                    <div id="resumeName" class="doc-filename">No file chosen</div>
                                    <label for="resume" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="resume" class="hidden" accept=".pdf,.doc,.docx,image/*"
                                        onchange="handleDocUpload(this,'resumeName','resumePreview','resumeFile','resumePlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="resumePreviewWrap">
                                <div class="prev-placeholder" id="resumePlaceholder">
                                    <i class="ri-file-line"></i>
                                    <span>Preview</span>
                                </div>
                                <img id="resumePreview" alt="preview">
                                <div class="prev-file" id="resumeFile"></div>
                                <button class="prev-remove" id="resumeRemove"
                                    onclick="removeDoc('resume','resumeName','resumePreview','resumeFile','resumePlaceholder','resumeRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- Aadhaar Card -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon">
                                    <i class="ri-id-card-line"></i>
                                </div>
                                <div class="doc-info">
                                    <div class="doc-label">
                                        Aadhaar Card <span class="req">*</span>
                                    </div>
                                    <div id="aadhaarName" class="doc-filename">No file chosen</div>
                                    <label for="aadhaar" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="aadhaar" class="hidden" accept=".pdf,image/*"
                                        onchange="handleDocUpload(this,'aadhaarName','aadhaarPreview','aadhaarFile','aadhaarPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="aadhaarPreviewWrap">
                                <div class="prev-placeholder" id="aadhaarPlaceholder">
                                    <i class="ri-image-line"></i>
                                    <span>Preview</span>
                                </div>
                                <img id="aadhaarPreview" alt="preview">
                                <div class="prev-file" id="aadhaarFile"></div>
                                <button class="prev-remove" id="aadhaarRemove"
                                    onclick="removeDoc('aadhaar','aadhaarName','aadhaarPreview','aadhaarFile','aadhaarPlaceholder','aadhaarRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- PAN Card -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon">
                                    <i class="ri-bank-card-line"></i>
                                </div>
                                <div class="doc-info">
                                    <div class="doc-label">
                                        PAN Card <span class="req">*</span>
                                    </div>
                                    <div id="panName" class="doc-filename">No file chosen</div>
                                    <label for="pan" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="pan" class="hidden" accept=".pdf,image/*"
                                        onchange="handleDocUpload(this,'panName','panPreview','panFile','panPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="panPreviewWrap">
                                <div class="prev-placeholder" id="panPlaceholder">
                                    <i class="ri-image-line"></i>
                                    <span>Preview</span>
                                </div>
                                <img id="panPreview" alt="preview">
                                <div class="prev-file" id="panFile"></div>
                                <button class="prev-remove" id="panRemove"
                                    onclick="removeDoc('pan','panName','panPreview','panFile','panPlaceholder','panRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- Educational Certificate -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon">
                                    <i class="ri-graduation-cap-line"></i>
                                </div>
                                <div class="doc-info">
                                    <div class="doc-label">Educational Certificate</div>
                                    <div id="eduName" class="doc-filename">No file chosen</div>
                                    <label for="edu" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="edu" class="hidden" accept=".pdf,image/*"
                                        onchange="handleDocUpload(this,'eduName','eduPreview','eduFile','eduPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="eduPreviewWrap">
                                <div class="prev-placeholder" id="eduPlaceholder">
                                    <i class="ri-file-line"></i>
                                    <span>Preview</span>
                                </div>
                                <img id="eduPreview" alt="preview">
                                <div class="prev-file" id="eduFile"></div>
                                <button class="prev-remove" id="eduRemove"
                                    onclick="removeDoc('edu','eduName','eduPreview','eduFile','eduPlaceholder','eduRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                        <!-- Experience Letter -->
                        <div class="doc-row">
                            <div class="doc-left">
                                <div class="doc-icon">
                                    <i class="ri-briefcase-line"></i>
                                </div>
                                <div class="doc-info">
                                    <div class="doc-label">Experience Letter</div>
                                    <div id="expName" class="doc-filename">No file chosen</div>
                                    <label for="exp" class="doc-upload-btn">
                                        <i class="ri-upload-2-line"></i> Upload
                                    </label>
                                    <input type="file" id="exp" class="hidden" accept=".pdf,image/*"
                                        onchange="handleDocUpload(this,'expName','expPreview','expFile','expPlaceholder')">
                                </div>
                            </div>
                            <div class="doc-preview" id="expPreviewWrap">
                                <div class="prev-placeholder" id="expPlaceholder">
                                    <i class="ri-file-line"></i>
                                    <span>Preview</span>
                                </div>
                                <img id="expPreview" alt="preview">
                                <div class="prev-file" id="expFile"></div>
                                <button class="prev-remove" id="expRemove"
                                    onclick="removeDoc('exp','expName','expPreview','expFile','expPlaceholder','expRemove')"
                                    title="Remove">&#x2715;</button>
                            </div>
                        </div>

                    </div>

                </div>

                <!-- SUCCESS -->
                <div id="successMsg" class="hidden text-center py-8 sm:py-12">

                    <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-3">

                        <i class="ri-check-line text-3xl text-violet-600"></i>

                    </div>

                    <h2 class="text-xl font-bold text-gray-900 mb-2">
                        Intern Created!
                    </h2>

                    <p class="text-sm text-gray-500 mb-4">
                        Intern has been added successfully.
                    </p>

                </div>

                <!-- BUTTONS -->
                <div id="btnRow"
                    class="flex flex-col-reverse sm:flex-row gap-3 sm:gap-0 items-stretch sm:items-center justify-between mt-8 sm:mt-10 pt-6 border-t border-gray-100">

                    <button
                        id="prevBtn"
                        onclick="goStep(-1)"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-7 rounded-xl border border-gray-200 bg-white text-black text-sm font-semibold opacity-40 cursor-not-allowed transition-all">

                        <i class="ri-arrow-left-line"></i>
                        Previous

                    </button>

                    <button
                        id="nextBtn"
                        onclick="goStep(1)"
                        class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">

                        Next
                        <i class="ri-arrow-right-line"></i>

                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    let cur = 0;

    const total = 5;

    const mobileLabels = [
        'Step 1 of 5 — Personal Info',
        'Step 2 of 5 — Job Details',
        'Step 3 of 5 — Contact Info',
        'Step 4 of 5 — Bank Details',
        'Step 5 of 5 — Documents',
    ];

    /* =========================
       SEARCHABLE SELECT
    ========================== */

const searchableSelects = [
    '#gender',
    '#bloodGroup',
    '#maritalStatus',
    '#department',
    '#employeeType',
    '#designation',
    '#reportingManager',
    '#workLocation',
    '#employmentStatus',
    '#state',
    '#country',
    '#accountType',
    '#city' // Add this
];

    searchableSelects.forEach(id => {

        if(document.querySelector(id)){

            new TomSelect(id, {

                create:false,

                allowEmptyOption:true,

                placeholder:'Search...',

                closeAfterSelect:true,

                render:{
                    no_results:function(){
                        return '<div class="p-3 text-sm text-gray-400">No results found</div>';
                    }
                }

            });

        }

    });

    /* =========================
       DOCUMENT UPLOAD + PREVIEW
    ========================== */

    function handleDocUpload(input, nameId, imgId, fileId, placeholderId){

        const file = input.files[0];
        if(!file) return;

        const nameEl       = document.getElementById(nameId);
        const imgEl        = document.getElementById(imgId);
        const fileEl       = document.getElementById(fileId);
        const placeholder  = document.getElementById(placeholderId);

        // Derive the remove button id: same prefix as imgId with 'Preview' → 'Remove'
        const removeId = imgId.replace('Preview','Remove');
        const removeEl = document.getElementById(removeId);

        // Update filename label
        nameEl.textContent = file.name;
        nameEl.classList.add('has-file');

        // Show remove button
        if(removeEl) removeEl.classList.add('visible');

        // Hide placeholder
        placeholder.style.display = 'none';

        if(file.type.startsWith('image/')){

            // Show image preview
            const reader = new FileReader();
            reader.onload = function(e){
                imgEl.src = e.target.result;
                imgEl.classList.add('visible');
                fileEl.classList.remove('visible');
            };
            reader.readAsDataURL(file);

        }else{

            // Non-image: show icon + short name
            imgEl.classList.remove('visible');
            imgEl.src = '';
            fileEl.innerHTML =
                '<i class="ri-file-pdf-2-line"></i>' +
                '<span>' + file.name.substring(0,12) + (file.name.length>12?'…':'') + '</span>';
            fileEl.classList.add('visible');
        }
    }

    function removeDoc(inputId, nameId, imgId, fileId, placeholderId, removeId){

        // Clear input
        const input = document.getElementById(inputId);
        if(input) input.value = '';

        // Reset name
        const nameEl = document.getElementById(nameId);
        if(nameEl){ nameEl.textContent = 'No file chosen'; nameEl.classList.remove('has-file'); }

        // Hide img preview
        const imgEl = document.getElementById(imgId);
        if(imgEl){ imgEl.src=''; imgEl.classList.remove('visible'); }

        // Hide file preview
        const fileEl = document.getElementById(fileId);
        if(fileEl){ fileEl.innerHTML=''; fileEl.classList.remove('visible'); }

        // Show placeholder
        const placeholder = document.getElementById(placeholderId);
        if(placeholder) placeholder.style.display = '';

        // Hide remove btn
        const removeEl = document.getElementById(removeId);
        if(removeEl) removeEl.classList.remove('visible');
    }

    /* =========================
       SAME ADDRESS TOGGLE
    ========================== */

    function toggleSameAddress(cb){

        const permanent = document.getElementById('permanentAddress');

        if(cb.checked){

            permanent.value = document.getElementById('presentAddress').value;
            permanent.readOnly = true;
            permanent.style.background = '#f3f4f6';

        }else{

            permanent.readOnly = false;
            permanent.style.background = '#fff';
        }
    }


    /* =========================
       SIDEBAR
    ========================== */

    function updateSidebar(){

        for(let i=0; i<5; i++){

            const dot = document.getElementById('sd'+i);

            const title = document.getElementById('st'+i);

            if(i < cur){

                dot.className =
                    'w-7 h-7 rounded-full bg-violet-500 border-2 border-violet-500 flex items-center justify-center transition-all duration-300';

                dot.innerHTML =
                    '<i class="ri-check-line text-white text-xs"></i>';

                title.className =
                    'text-[15px] font-bold text-gray-400';

            }

            else if(i === cur){

                dot.className =
                    'w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center transition-all duration-300';

                dot.innerHTML = '';

                title.className =
                    'text-[15px] font-bold text-gray-900';

            }

            else{

                dot.className =
                    'w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center transition-all duration-300';

                dot.innerHTML = '';

                title.className =
                    'text-[15px] font-bold text-gray-400';
            }
        }

        document.getElementById('mobileLabel').textContent =
            mobileLabels[Math.min(cur,4)];

        for(let i=0; i<5; i++){

            document.getElementById('mdot'+i).className =
                i <= cur
                ? 'w-2.5 h-2.5 rounded-full bg-violet-500'
                : 'w-2.5 h-2.5 rounded-full bg-violet-200';
        }
    }

    /* =========================
       NAVIGATION
    ========================== */

function goStep(dir){

    // Validate before next
    if(dir === 1){

        if(!validateCurrentStep()){
            return;
        }

    }


if(cur === 4 && dir === 1){

    document.querySelectorAll('.form-step')
        .forEach(s => s.classList.remove('active'));

    document.getElementById('btnRow')
        .style.display = 'none';

    document.getElementById('successMsg')
        .classList.remove('hidden');

    // Redirect after 2 seconds
    setTimeout(() => {
        window.location.href = 'employee_list.php';
    }, 2000);

    return;
}

        const nxt = cur + dir;

        if(nxt < 0 || nxt >= total) return;

        document.getElementById('fs'+cur)
            .classList.remove('active');

        cur = nxt;

        document.getElementById('fs'+cur)
            .classList.add('active');

        updateSidebar();

        const pb = document.getElementById('prevBtn');

        const nb = document.getElementById('nextBtn');

        if(cur === 0){

            pb.classList.add(
                'opacity-40',
                'cursor-not-allowed'
            );

        }else{

            pb.classList.remove(
                'opacity-40',
                'cursor-not-allowed'
            );
        }

        if(cur === 4){

            nb.innerHTML =
                '<i class="ri-check-line"></i> Create Employee';

            nb.classList.remove(
                'bg-violet-500',
                'hover:bg-violet-600'
            );

            nb.classList.add(
                'bg-green-600',
                'hover:bg-green-700'
            );

        }else{

            nb.innerHTML =
                'Next <i class="ri-arrow-right-line"></i>';

            nb.classList.add(
                'bg-violet-500',
                'hover:bg-violet-600'
            );

            nb.classList.remove(
                'bg-green-600',
                'hover:bg-green-700'
            );
        }
    }

    /* =========================
       RESET
    ========================== */

    function resetForm(){

        cur = 0;

        document.querySelectorAll('input,textarea')
            .forEach(el => {
                if(el.type !== 'checkbox') el.value = '';
                else el.checked = false;
            });

        document.querySelectorAll('select')
            .forEach(el => {

                el.selectedIndex = 0;

                if(el.tomselect){

                    el.tomselect.clear();

                    el.tomselect.refreshOptions(false);
                }

            });

        // Reset permanent address state
        const perm = document.getElementById('permanentAddress');
        if(perm){ perm.readOnly = false; perm.style.background = '#fff'; }

        // Reset all document uploads
        const docFields = [
            ['profilePhoto','profilePhotoName','profilePhotoPreview','profilePhotoFile','profilePhotoPlaceholder','profilePhotoRemove'],
            ['resume','resumeName','resumePreview','resumeFile','resumePlaceholder','resumeRemove'],
            ['aadhaar','aadhaarName','aadhaarPreview','aadhaarFile','aadhaarPlaceholder','aadhaarRemove'],
            ['pan','panName','panPreview','panFile','panPlaceholder','panRemove'],
            ['edu','eduName','eduPreview','eduFile','eduPlaceholder','eduRemove'],
            ['exp','expName','expPreview','expFile','expPlaceholder','expRemove'],
        ];
        docFields.forEach(d => removeDoc(...d));

        document.querySelectorAll('.form-step')
            .forEach(s => s.classList.remove('active'));

        document.getElementById('fs0')
            .classList.add('active');

        document.getElementById('successMsg')
            .classList.add('hidden');

        document.getElementById('btnRow')
            .style.display = 'flex';

        updateSidebar();

        const nb = document.getElementById('nextBtn');

        nb.innerHTML =
            'Next <i class="ri-arrow-right-line"></i>';

        nb.classList.add(
            'bg-violet-500',
            'hover:bg-violet-600'
        );

        nb.classList.remove(
            'bg-green-600',
            'hover:bg-green-700'
        );

        const pb = document.getElementById('prevBtn');

        pb.classList.add('opacity-40','cursor-not-allowed');
    }

</script>
<script>

    /* =========================
       PHONE + EMAIL VALIDATION
    ========================== */

    // Phone fields
    const phoneFields = [
        'phoneNumber',
        'alternatePhone',
        'emergencyContactNumber'
    ];

    phoneFields.forEach(id => {

        const field = document.getElementById(id);

        if(field){

            // Allow only numbers
            field.addEventListener('input', function(){

                this.value = this.value.replace(/\D/g,'');

                // Max 10 digits
                if(this.value.length > 10){
                    this.value = this.value.slice(0,10);
                }

            });

        }

    });

    // Email validation
    const emailField = document.getElementById('personalEmail');

    function isValidEmail(email){

        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

    }

    /* =========================
       STEP VALIDATION
    ========================== */

    function validateCurrentStep(){

        // STEP 1
        if(cur === 0){

            const firstName = document.getElementById('firstName').value.trim();
            const lastName = document.getElementById('lastName').value.trim();
            const email = document.getElementById('personalEmail').value.trim();
            const phone = document.getElementById('phoneNumber').value.trim();

            if(firstName === ''){

                Swal.fire({
                    icon:'error',
                    title:'First Name Required'
                });

                return false;
            }

            if(lastName === ''){

                Swal.fire({
                    icon:'error',
                    title:'Last Name Required'
                });

                return false;
            }

            if(email === ''){

                Swal.fire({
                    icon:'error',
                    title:'Email Required'
                });

                return false;
            }

            if(!isValidEmail(email)){

                Swal.fire({
                    icon:'error',
                    title:'Enter Valid Email Address'
                });

                return false;
            }

            if(phone === ''){

                Swal.fire({
                    icon:'error',
                    title:'Phone Number Required'
                });

                return false;
            }

            if(phone.length !== 10){

                Swal.fire({
                    icon:'error',
                    title:'Phone Number Must Be 10 Digits'
                });

                return false;
            }

        }

        // STEP 3
        if(cur === 2){

            const altPhone = document.getElementById('alternatePhone').value.trim();
            const emergencyPhone = document.getElementById('emergencyContactNumber').value.trim();

            if(altPhone !== '' && altPhone.length !== 10){

                Swal.fire({
                    icon:'error',
                    title:'Alternate Phone Number Must Be 10 Digits'
                });

                return false;
            }

            if(emergencyPhone === ''){

                Swal.fire({
                    icon:'error',
                    title:'Emergency Contact Number Required'
                });

                return false;
            }

            if(emergencyPhone.length !== 10){

                Swal.fire({
                    icon:'error',
                    title:'Emergency Contact Number Must Be 10 Digits'
                });

                return false;
            }

        }

        return true;

    }

</script>
</body>

</html>

<?php include 'footer.php'; ?>