@extends('admin.admin_dashboard')
@section('admin')
<<<<<<< HEAD
=======
@include('partials.admin.stepper-assets')
>>>>>>> origin/main

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="page-content">
    <!--breadcrumb-->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3"> 
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                    <li class="breadcrumb-item active" aria-current="page">Add Employee</li>
                </ol>
            </nav>
        </div>
    </div>
    <!--end breadcrumb-->
    
    <!--start stepper--> 
    <div id="stepper" class="bs-stepper">
        <div class="card">
            <div class="card-header">
                <div class="d-lg-flex flex-lg-row align-items-lg-center justify-content-lg-between" role="tablist">
                    <div class="step" data-target="#step-1">
                        <div class="step-trigger" role="tab" id="stepper-trigger-1" aria-controls="step-1">
                            <div class="bs-stepper-circle"><i class='bx bx-user fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title" style="font-size: 1.2rem;">Personal Info</h5>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-line"></div>
                    <div class="step" data-target="#step-2">
                        <div class="step-trigger" role="tab" id="stepper-trigger-2" aria-controls="step-2">
                            <div class="bs-stepper-circle"><i class='bx bx-briefcase fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title" style="font-size: 1.2rem;">Job Info</h5>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-line"></div>
                    <div class="step" data-target="#step-3">
                        <div class="step-trigger" role="tab" id="stepper-trigger-3" aria-controls="step-3">
                            <div class="bs-stepper-circle"><i class='bx bx-wallet fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title" style="font-size: 1.2rem;">Salary</h5>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-line"></div>
                    <div class="step" data-target="#step-4">
                        <div class="step-trigger" role="tab" id="stepper-trigger-4" aria-controls="step-4">
                            <div class="bs-stepper-circle"><i class='bx bx-file fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title" style="font-size: 1.2rem;">Docs</h5>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-line"></div>
                    <div class="step" data-target="#step-5">
                        <div class="step-trigger" role="tab" id="stepper-trigger-5" aria-controls="step-5">
                            <div class="bs-stepper-circle"><i class='bx bx-phone fs-4'></i></div>
                            <div>
                                <h5 class="mb-0 steper-title" style="font-size: 1.2rem;">Emergency & Bank</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="bs-stepper-content">
                    <form method="POST" action="{{ route('add.employee.store') }}" enctype="multipart/form-data">
                        @csrf
                        <!-- Step 1: Personal Information -->
                        <div id="step-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper-trigger-1">
    <h5 class="mb-4" style="font-size: 1.5rem; font-weight: bold;">Enter Employee's Personal Information</h5>

    <div class="row g-4">
        <!-- First Name, Last Name, Email -->
        <div class="col-12 col-lg-6">
            <label for="first_name" class="form-label mb-2">First Name</label>
            <input type="text" name="first_name" class="form-control" id="first_name" placeholder="Enter First Name" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="last_name" class="form-label mb-2">Last Name</label>
            <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Enter Last Name" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="email" class="form-label mb-2">Email</label>
            <input type="email" name="email" class="form-control" id="email" placeholder="Enter Email" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="phone" class="form-label mb-2">Phone</label>
            <input type="text" class="form-control" name="phone" id="phone" placeholder="Enter Phone Number" required>
        </div>

        <!-- Gender, Date of Birth, National ID -->
        <div class="col-12 col-lg-6">
            <label for="gender" class="form-label mb-2">Gender</label>
            <select class="form-select" name="gender" id="gender" required>
    <option value="" disabled selected class="faint-placeholder" >Select Gender</option>
    <option value="MALE">Male</option>
    <option value="FEMALE">Female</option>
</select>



        </div>
        <div class="col-12 col-lg-6">
            <label for="dob" class="form-label mb-2">Date of Birth</label>
            <input type="date" name="date_of_birth" class="form-control datepicker" id="dob" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="national_id" class="form-label mb-2">National ID Number</label>
            <input type="text" class="form-control" name="national_id" maxlength="14" minlength="14" id="national_id" placeholder="Enter NIN" required>
        </div>

        <!-- Address, City, State, Zip Code -->
        <div class="col-12 col-lg-6">
            <label for="address" class="form-label mb-2">Address</label>
            <input type="text" class="form-control" name="address" id="address" placeholder="Enter Address" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="city" class="form-label mb-2">City</label>
            <input type="text" class="form-control" name="city" id="city" placeholder="Enter City" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="state" class="form-label mb-2">State</label>
            <input type="text" class="form-control" name="state" id="state" placeholder="Enter State" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="country" class="form-label mb-2">Country</label>
            <input type="text" class="form-control" name="country" id="country" placeholder="Enter Country" required>
        </div>
       
    </div>

    <div class="d-flex justify-content-end mt-4">
        <button type="button" class="btn btn-primary px-4 py-2" onclick="stepper.next()">
            Next <i class="bx bx-right-arrow-alt ms-2"></i>
        </button>
    </div>
</div>


                        <!-- Step 2: Job Information -->
                      <div id="step-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper-trigger-2">
    <h5 class="mb-4" style="font-size: 1.5rem; font-weight: bold;">Job Information</h5>

    <div class="row g-4">
        <div class="col-12 col-lg-6">
            <label for="job_title" class="form-label mb-2">Job Title</label>
            <input type="text" name="job_title" class="form-control" id="job_title" placeholder="Enter Job Title" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="department_id" class="form-label mb-2">Department</label>
            <select class="form-select" name="department_id" id="department_id" required>
                <option value="">Select Department</option>
                <!-- Dynamically list departments -->
            </select>
        </div>
        <div class="col-12 col-lg-6">
            <label for="employment_type" class="form-label mb-2">Employment Type</label>
            <select class="form-select" name="employment_type" id="employment_type" required>
                <option value="Full-time">Full-time</option>
                <option value="Part-time">Part-time</option>
            </select>
        </div>
        <div class="col-12 col-lg-6">
            <label for="hire_date" class="form-label mb-2">Hire Date</label>
            <input type="date" name="hire_date" class="form-control datepicker" id="hire_date" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="employee_code" class="form-label mb-2">Staff ID</label>
            <input type="text" name="employee_code" class="form-control" id="employee_code" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="status" class="form-label mb-2">Status</label>
            <select class="form-select" name="status" id="status" required>
                <option value="Active">Active</option>
                <option value="Inactive">Inactive</option>
            </select>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-outline-secondary px-4 py-2" onclick="stepper.previous()">
            Previous <i class="bx bx-left-arrow-alt ms-2"></i>
        </button>
        <button type="button" class="btn btn-primary px-4 py-2" onclick="stepper.next()">
            Next <i class="bx bx-right-arrow-alt ms-2"></i>
        </button>
    </div>
</div>


                        <!-- Step 3: Salary and Payroll -->
                       <div id="step-3" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper-trigger-3">
    <h5 class="mb-4" style="font-size: 1.5rem; font-weight: bold;">Salary & Payroll Information</h5>

    <div class="row g-4">
        <div class="col-12 col-lg-6">
            <label for="basic_salary" class="form-label mb-2">Basic Salary</label>
            <input type="number" name="basic_salary" class="form-control" id="basic_salary" placeholder="Enter Basic Salary" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="tax" class="form-label mb-2">Tax</label>
            <input type="number" name="tax" class="form-control" id="tax" placeholder="Enter Tax" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="allowances" class="form-label mb-2">Allowances</label>
            <input type="number" name="allowances" class="form-control" id="allowances" placeholder="Enter Allowances" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="other_deductions" class="form-label mb-2">Other Deductions</label>
            <input type="number" name="other_deductions" class="form-control" id="other_deductions" placeholder="Enter Other Deductions" required>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-outline-secondary px-4 py-2" onclick="stepper.previous()">
            Previous <i class="bx bx-left-arrow-alt ms-2"></i>
        </button>
        <button type="button" class="btn btn-primary px-4 py-2" onclick="stepper.next()">
            Next <i class="bx bx-right-arrow-alt ms-2"></i>
        </button>
    </div>
</div>


                        <!-- Step 4: Documents -->
                      <div id="step-4" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper-trigger-4">
    <h5 class="mb-4" style="font-size: 1.5rem; font-weight: bold;">Documents</h5>

    <div class="row g-4">
        <div class="col-12">
            <label for="photo" class="form-label mb-2">Profile Photo</label>
            <input type="file" name="photo" class="form-control" id="photo" accept="image/*" required>
            <small class="text-muted mt-2">Upload a clear, professional profile picture.</small>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-outline-secondary px-4 py-2" onclick="stepper.previous()">
            Previous <i class="bx bx-left-arrow-alt ms-2"></i>
        </button>
        <button type="button" class="btn btn-primary px-4 py-2" onclick="stepper.next()">
            Next <i class="bx bx-right-arrow-alt ms-2"></i>
        </button>
    </div>
</div>


                        <!-- Step 5: Emergency Contact & Bank Details -->
                       <div id="step-5" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper-trigger-5">
    <h5 class="mb-4" style="font-size: 1.5rem; font-weight: bold;">Emergency Contact & Bank Information</h5>

    <div class="row g-4">
        <div class="col-12 col-lg-6">
            <label for="emergency_contact_name" class="form-label mb-2">Emergency Contact Name</label>
            <input type="text" name="emergency_contact_name" class="form-control" id="emergency_contact_name" placeholder="Emergency Contact Name" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="emergency_contact_phone" class="form-label mb-2">Emergency Contact Phone</label>
            <input type="text" name="emergency_contact_phone" class="form-control" id="emergency_contact_phone" placeholder="Emergency Contact Phone" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="emergency_contact_relationship" class="form-label mb-2">Emergency Contact Relationship</label>
            <input type="text" name="emergency_contact_relationship" class="form-control" id="emergency_contact_relationship" placeholder="Emergency Contact Relationship" required>
        </div>
        <div class="col-12 col-lg-6">
            
        </div>
         <div class="col-12 col-lg-6">
            
        </div>
         <div class="col-12 col-lg-6">
            
        </div>
        <div class="col-12 col-lg-6">
            <label for="bank_account_number" class="form-label mb-2">Bank Account Number</label>
            <input type="text" name="bank_account_number" class="form-control" id="bank_account_number" placeholder="Bank Account Number" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="bank_name" class="form-label mb-2">Bank Name</label>
            <input type="text" name="bank_name" class="form-control" id="bank_name" placeholder="Bank Name" required>
        </div>
        <div class="col-12 col-lg-6">
            <label for="bank_branch" class="form-label mb-2">Bank Branch</label>
            <input type="text" name="bank_branch" class="form-control" id="bank_branch" placeholder="Bank Branch" required>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-outline-secondary px-4 py-2" onclick="stepper.previous()">
            Previous <i class="bx bx-left-arrow-alt ms-2"></i>
        </button>
        <button type="submit" class="btn btn-primary px-4 py-2">
            Submit <i class="bx bx-check-circle ms-2"></i>
        </button>
    </div>
</div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Initialize the stepper with the correct ID
    window.stepper = new Stepper(document.querySelector('#stepper')); // Make sure this matches your HTML
});

// Event listener for step triggers
document.querySelectorAll('.step-trigger').forEach(function(trigger) {
    trigger.addEventListener('click', function() {
        var stepIndex = Array.from(this.closest('.bs-stepper').querySelectorAll('.step')).indexOf(this.closest('.step'));
        stepper.to(stepIndex + 1); // Steps are 1-indexed
    });
});

</script>
@endsection