{% load static %}
{% include 'includes/header.html' %}

{% if request.session.branch_id %}
{% include 'includes/store_sidebar.html' %}
{% else %}
{% include 'includes/sidebar.html' %}
{% endif %}


{% include 'includes/navbar.html' %}

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <h4 class="mb-0 me-3">Employee of <span style="text-transform: capitalize;">{{branch_name}}</span> </h4>

        </div>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item">Masters</li>
                <li class="breadcrumb-item active" aria-current="page">Stores</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        
        <div class="card-body">
            <form id="add_form">
                <div class="modal-body">
                    {% csrf_token %}

                    <div class="mb-4">
                        <h5 class="fw-semibold text-dark mb-2 pb-2 border-bottom">
                            1. Basic Details
                        </h5>

                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <label class="form-label"><span class="text-danger">*</span> Employee Name</label>
                            <input type="text" class="form-control" name="name" id="name" required>
                            <input type="hidden" name="company_id" value="{{ request.session.company_id }}">
                        </div>
                        <!-- <div class="col-md-3">
                                <label class="form-label">Employee Id #</label>
                                <input type="text" class="form-control" name="employee_code" id="employee_code"
                                    placeholder="Auto-generated" readonly>
                            </div> -->
                        <div class="col-md-3">
                            <label class="form-label">Branch</label>
                            <select class="form-select select2" name="branch_id" id="branch_id">
                                <option value="">Select Branch</option>
                                {% for b in branches %}
                                <option value="{{b.id}}">{{b.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Gender</label>
                            <select class="form-select select2" name="gender" id="gender">
                                <option value="">Select</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Father or Mother Name</label>
                            <input type="text" class="form-control" name="parent_name" id="parent_name">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Spouse Name</label>
                            <input type="text" class="form-control" name="spouse_name" id="spouse_name">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Aadhar No #</label>
                            <input type="text" class="form-control" name="aadhar_no" id="aadhar_no">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Pan No #</label>
                            <input type="text" class="form-control" name="pan_no" id="pan_no">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">City</label>
                            <input type="text" class="form-control" name="city" id="city">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label"><span class="text-danger">*</span> Mobile No #</label>
                            <input type="text" class="form-control" name="mobile" id="mobile" maxlength="10"
                                pattern="[0-9]{10}" required oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Alternative No #</label>
                            <input type="text" class="form-control" name="alternative_no" id="alternative_no"
                                maxlength="10" pattern="[0-9]{10}"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Home Contact No #</label>
                            <input type="text" class="form-control" name="home_contact_no" id="home_contact_no">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label"><span class="text-danger">*</span> Email</label>
                            <input type="email" class="form-control" name="email" id="email" required autocomplete="off"
                                disabled>
                            <small id="email-error" class="text-danger"></small>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Blood Group</label>
                            <input type="text" class="form-control" name="blood_group" id="blood_group">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date Of Birth</label>
                            <input type="date" class="form-control" name="dob" id="dob">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Marriage Status</label>
                            <select class="form-select select2" name="marital_status" id="marital_status">
                                <option value="">Select</option>
                                <option value="Single">Single</option>
                                <option value="Married">Married</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">OT Applicable</label>
                            <select class="form-select select2" name="ot_applicable" id="ot_applicable">
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label"> <span class="text-danger">*</span> Password</label>
                            <div class="input-group">
                                <input type="password" class="form-control" name="pwd" id="pwd" required>
                                <button class="btn btn-outline-secondary toggle-password" type="button">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 mb-4">
                        <h5 class="fw-semibold text-dark mb-2 pb-2 border-bottom">
                            2. Accounting Details
                        </h5>
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Promoter Brand</label>
                            <input type="text" class="form-control" name="promoter_brand" id="promoter_brand">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label"><span class="text-danger">*</span> Designation (User
                                Role)</label>
                            <select class="form-select select2" name="user_role" id="user_role" required>
                                <option value="">Select Role</option>
                                {% for r in role %}
                                <option value="{{r.id}}">{{r.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">ESI No #</label>
                            <input type="text" class="form-control" name="esi_no" id="esi_no">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">PF No #</label>
                            <input type="text" class="form-control" name="pf_no" id="pf_no">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Salary Type</label>
                            <select class="form-select select2" name="salary_type" id="salary_type">
                                <option value="">Select</option>
                                <option value="Monthly">Monthly</option>
                                <option value="Daily">Daily</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Opening Balance #</label>
                            <input type="number" step="0.01" class="form-control" name="opening_balance"
                                id="opening_balance">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Per Month Salary #</label>
                            <input type="number" step="0.01" class="form-control" name="monthly_salary"
                                id="monthly_salary">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Per Day Salary #</label>
                            <input type="number" step="0.01" class="form-control" name="daily_salary" id="daily_salary">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Loan Amount #</label>
                            <input type="number" step="0.01" class="form-control" name="loan_amount" id="loan_amount">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Monthly Loan Amount #</label>
                            <input type="number" step="0.01" class="form-control" name="monthly_loan_deduction"
                                id="monthly_loan_deduction">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date Of Joining</label>
                            <input type="date" class="form-control" name="doj" id="doj">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Enable ESI</label>
                            <select class="form-select select2" name="enable_esi" id="enable_esi">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Enable PF</label>
                            <select class="form-select select2" name="enable_pf" id="enable_pf">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">ESI %</label>
                            <input type="number" step="0.01" class="form-control" name="esi_percentage"
                                id="esi_percentage">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">PF %</label>
                            <input type="number" step="0.01" class="form-control" name="pf_percentage"
                                id="pf_percentage">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Allowed Monthly Leave with Salary</label>
                            <input type="number" class="form-control" name="allowed_leave" id="allowed_leave">
                        </div>
                    </div>

                    <div class="mt-4 mb-4">
                        <h5 class="fw-semibold text-dark mb-2 pb-2 border-bottom">
                            3. Bank Account
                        </h5>
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Bank Name</label>
                            <input type="text" class="form-control" name="bank_name" id="bank_name">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">IFSC Code</label>
                            <input type="text" class="form-control" name="ifsc_code" id="ifsc_code">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Bank A/C No.</label>
                            <input type="text" class="form-control" name="account_no" id="account_no">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Bank A/C Name</label>
                            <input type="text" class="form-control" name="account_holder_name" id="account_holder_name">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Bonus %</label>
                            <input type="number" step="0.01" class="form-control" name="bonus_percentage"
                                id="bonus_percentage">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Work Time From</label>
                            <input type="time" class="form-control" name="work_time_from" id="work_time_from">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Work Time To</label>
                            <input type="time" class="form-control" name="work_time_to" id="work_time_to">
                        </div>
                    </div>

                    <div class="mt-4 mb-4">
                        <h5 class="fw-semibold text-dark mb-2 pb-2 border-bottom">
                            4. Other Details
                        </h5>
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <label class="form-label">No of Children if Married</label>
                            <input type="number" class="form-control" name="no_of_children" id="no_of_children">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Height</label>
                            <input type="text" class="form-control" name="height" id="height">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Weight</label>
                            <input type="text" class="form-control" name="weight" id="weight">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Driving License No.</label>
                            <input type="text" class="form-control" name="driving_license_no" id="driving_license_no">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Quota</label>
                            <input type="text" class="form-control" name="quota" id="quota">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Nature Of Employee</label>
                            <select class="form-select select2" name="nature_of_employee" id="nature_of_employee">
                                <option value="">Select</option>
                                <option value="Permanent">Permanent</option>
                                <option value="Temporary">Temporary</option>
                                <option value="Contract">Contract</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Ration Card No.</label>
                            <input type="text" class="form-control" name="ration_card_no" id="ration_card_no">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Passport No.</label>
                            <input type="text" class="form-control" name="passport_no" id="passport_no">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Nominees</label>
                            <input type="text" class="form-control" name="nominees" id="nominees">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Weekly Off</label>
                            <input type="text" class="form-control" name="weekly_off" id="weekly_off">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date of Rejoin</label>
                            <input type="date" class="form-control" name="rejoin_date" id="rejoin_date">
                        </div>
                        <div class="col-md-3">
                            <!-- Spacer -->
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Address</label>
                            <textarea class="form-control" name="address1" id="address1" rows="3"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Current Address</label>
                            <div class="form-check form-check-inline float-end">
                                <input class="form-check-input" type="checkbox" id="same_as_address">
                                <label class="form-check-label" for="same_as_address">Same as Address</label>
                            </div>
                            <textarea class="form-control" name="current_address" id="current_address"
                                rows="3"></textarea>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Medical or Health Record</label>
                            <textarea class="form-control" name="medical_record" id="medical_record"
                                rows="3"></textarea>
                        </div>

                        <div class="w-100"></div>

                        <div class="col-md-3">
                            <label class="form-label">Employee Status</label>
                            <select class="form-select select2" name="is_active" id="is_active">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date Of Resignation</label>
                            <input type="date" class="form-control" name="resignation_date" id="resignation_date">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Employee Image</label>
                            <input type="file" class="form-control image-input" name="photo" id="photo">
                            <div class="invalid-feedback d-block image-error" style="display: none;"></div>
                        </div>

                        <!-- Hidden fields mapped to existing logic if needed -->
                        <input type="hidden" name="address2" value="">
                        <input type="hidden" name="state" value="">
                        <input type="hidden" name="pincode" value="">
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="branch_id" value="{{id}}" id="filter_branch_id">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>

        </div>
    </div>






</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
<script>
    var table;
    var branchId = '{{id}}';


    $(document).ready(function () {


        $('.image-input').on('change', function () {
            validateImageSize(this);
        });




        // Address Checkbox Logic
        $('#same_as_address').change(function () {
            if (this.checked) {
                $('#current_address').val($('#address1').val());
            } else {
                $('#current_address').val('');
            }
        });

        // Email Enable/Disable based on Branch
        $('#branch_id').change(function () {
            if ($(this).val() !== "") {
                $('#email').prop('disabled', false);
            } else {
                $('#email').prop('disabled', true).val('');
                $('#email-error').text('').addClass('d-none');
            }
        });

        // Real-time Email Validation
        $('#email').on('input', function () {
            var email = $(this).val();
            var branchId = $('#branch_id').val();
            var $error = $('#email-error');

            if (email && branchId) {
                $.get('/check_emails/', { email: email, store_id: branchId }, function (res) {
                    if (res.exists) {
                        $error.text('Email already exists in this branch.').removeClass('d-none');
                        $('#email').addClass('is-invalid');
                    } else {
                        $error.text('').addClass('d-none');
                        $('#email').removeClass('is-invalid');
                    }
                });
            } else {
                $error.text('').addClass('d-none');
                $('#email').removeClass('is-invalid');
            }
        });

        // Password Toggle Logic
        $('.toggle-password').click(function () {
            var $input = $(this).siblings('input');
            var type = $input.attr('type') === 'password' ? 'text' : 'password';
            $input.attr('type', type);
            $(this).find('i').toggleClass('fa-eye fa-eye-slash');
        });

        // Trigger change if branchId is pre-loaded
        if (branchId !== '0' && branchId !== '') {
            $('#branch_id').val(branchId).trigger('change');
        }
    });

    $("#add_form").submit(function (e) {
        e.preventDefault();

        // Check for email error before submission
        if ($('#email').hasClass('is-invalid')) {
            showSweetAlert('Warning', 'Email already exists or is invalid. Please fix it.', 'warning');
            return;
        }

        const isValid = validateImageSize(document.querySelector('#add_form .image-input'));
        handleFormSubmit(this, '/store_employee_add/', 'add_modal', 'add_form', true, 'Employee',
            [
                function () {
                    sessionStorage.setItem('addSuccessMessage', true);
                    window.location.href = '/store/employee/';

                }
            ],
            false
        );
    });





</script>