@extends('layouts.master')
@section('content')

    <div class="card">
        <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
            <h5>Create Teacher</h5> <a href="{{ route('teacher.index') }}" class="btn btn-sm btn-primary">Teacher List</a>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger m-3">
                <ul class="m-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card-body">
            <form action="{{ route('teacher.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                    Personal Info
                </div>
                <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                    <div class="col-md-9">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="first_name">First Name</label>
                                    <input type="text" value="{{ old('first_name') }}" class="form-control"
                                        id="first_name" name="first_name" placeholder="Enter first name" required>
                                    @error('first_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="last_name">Last Name</label>
                                    <input type="text" value="{{ old('last_name') }}" class="form-control" id="last_name"
                                        name="last_name" placeholder="Enter last name" required>
                                    @error('last_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="gender">Gender</label>
                                    {{ generateDropdown($genderOptions, 'class="form-control" name="gender"', old('gender'), 'Select Option') }}
                                    @error('gender')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="date_of_birth">Date Of Birth *: </label>
                                    <input type="date" class="form-control" name="date_of_birth"
                                        value="{{ old('date_of_birth') }}" required>
                                    @error('date_of_birth')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="blood_group">Blood Group : </label>
                                    {{ generateDropdown($bloodGroupOptions, 'class="form-control" name="blood_group"', old('blood_group'), 'Select Option') }}
                                    @error('blood_group')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="religion">Religion *: </label>
                                    {{ generateDropdown($religionOptions, 'class="form-control" name="religion" required', old('religion')) }}
                                    @error('religion')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="image-uploader">
                            <label for="image">Profile Image : </label>
                            <label for="imageFile" class="image-uploader__label">
                                <div class="image-uploader__icon-overlay">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </div>
                                <img src="{{ asset('assets/img/man.png') }}" alt="Preview image"
                                    class="image-uploader__preview-image img-thumbnail"
                                    style="width: 140px; height: 140px;">
                                <input type="file" name="profile_image" class="image-uploader__input" id="imageFile"
                                    accept="image/*">
                            </label>
                            @error('profile_image')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="father_name">Father Name</label>
                            <input type="text" value="{{ old('father_name') }}" class="form-control" id="father_name"
                                name="father_name" placeholder="Enter father name">
                            @error('father_name')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="mother_name">Mother Name</label>
                            <input type="text" value="{{ old('mother_name') }}" class="form-control" id="mother_name"
                                name="mother_name" placeholder="Enter mother name">
                            @error('mother_name')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="marital_status">Marital Status</label>
                            {{ generateDropdown($marital_status, 'class="form-control" name="marital_status"', old('marital_status'), 'Select Option') }}
                            @error('marital_status')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="spaous_name">Spaous Name</label>
                            <input type="text" class="form-control" id="spaous_name" name="spaous_name"
                                placeholder="Enter spaous_name name">
                            @error('spaous_name')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="present_address">Present Address</label>
                            <textarea class="form-control" id="present_address" name="present_address" rows="2"
                                placeholder="Enter present address">{{ old('present_address') }}</textarea>
                            @error('present_address')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="permanent_address">Permanent Address</label>
                            <textarea class="form-control" id="permanent_address" name="permanent_address" rows="2"
                                placeholder="Enter permanent address">{{ old('permanent_address') }}</textarea>
                            @error('permanent_address')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="mobile_number">Mobile Number</label>
                            <input type="tel" class="form-control" id="mobile_number" name="mobile_number"
                                placeholder="Enter mobile number">
                            @error('mobile_number')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="emergency_number">Emergency Number</label>
                            <input type="tel" class="form-control" id="emergency_number" name="emergency_number"
                                placeholder="Enter Emergency Number">
                            @error('emergency_number')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="eamil" class="form-control" id="email" name="email"
                                placeholder="Enter Email">
                            @error('email')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="identity_type">Identity Types</label>
                            {{ generateDropdown($identity_types, 'class="form-control" name="identity_type" ', old('identity_type'), 'Select Option') }}
                            @error('identity_type')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="identity_no">Identity No</label>
                            <input type="text" class="form-control" id="identity_no" name="identity_no"
                                placeholder="Enter Identity No">
                            @error('identity_no')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="roles">Role</label>
                            {{ generateDropdown($roles, 'class="form-control" name="roles" ', old('roles'), 'Select Option') }}
                            @error('roles')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <input type="hidden" name="user_type" value="teacher">

                </div>
                <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                    Education Info
                </div>


                <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                    <div class="row p-2 education-info">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exam_name">Exam</label>
                                {{ generateDropdown($exam_names, 'class="form-control" name="education_infos[0][exam_name]" ', old('education_infos.0.exam_name'), 'Select Option') }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="institute">Institution</label>
                                <input type="text" max="200" class="form-control"
                                    name="education_infos[0][institute]" value="{{ old('education_infos.0.institute') }}"
                                    placeholder="Enter institute name" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="group_department">Group/Department</label>
                                <input type="text" max="200" class="form-control"
                                    name="education_infos[0][group_department]"
                                    value="{{ old('education_infos.0.group_department') }}"
                                    placeholder="Enter Group/Department" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="education_board">Education Board</label>
                                <input type="text" maxlength="200" class="form-control"
                                    name="education_infos[0][education_board]"
                                    value="{{ old('education_infos.0.education_board') }}"
                                    placeholder="Enter Education board" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="passing_year">Passing Year</label>
                                <input type="number" min="1900" max="2099" step="1" class="form-control"
                                    name="education_infos[0][passing_year]"
                                    value="{{ old('education_infos.0.passing_year') }}" placeholder="Enter passing year"
                                    required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="result">Result</label>
                                <input type="text" maxlength="200" class="form-control"
                                    name="education_infos[0][result]" value="{{ old('education_infos.0.result') }}"
                                    placeholder="Enter result (GPA/CGPA)" required>
                            </div>
                        </div>
                    </div>
                    <div id="append-field"></div>
                    <div class="row p-2">
                        <div class="col-md-12">
                            <div class="form-group">
                                <button type="button" id="plusBtn" class="btn btn-primary"><i
                                        class="fas fa-plus-circle"></i> Add</button>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                    Bank Details
                </div>
                <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="bank_name">Bank Name</label>
                            <input type="text" value="{{ old('bank_name') }}" class="form-control" id="bank_name"
                                name="bank_name" placeholder="Enter bank name">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="branch_name">Branch Name</label>
                            <input type="text" value="{{ old('branch_name') }}" class="form-control"
                                id="branch_name" name="branch_name" placeholder="Enter branch name">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="account_no">Account Number</label>
                            <input type="text" value="{{ old('account_no') }}" class="form-control" id="account_no"
                                name="account_no" placeholder="Enter account number">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="account_type">Account Type</label>
                            <select class="form-control" id="account_type" name="account_type">
                                <option value="">-Select Option-</option>
                                <option value="Savings" {{ old('account_type') == 'Savings' ? 'selected' : '' }}>Savings
                                </option>
                                <option value="Current" {{ old('account_type') == 'Current' ? 'selected' : '' }}>Current
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="bank_branch_code">Bank Branch Code</label>
                            <input type="text" value="{{ old('bank_branch_code') }}" class="form-control"
                                id="bank_branch_code" name="bank_branch_code" placeholder="Enter bank branch code">
                        </div>
                    </div>
                </div>

                <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                    Work Details
                </div>
                <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="employee_type">Employee Type</label>
                            {{ generateDropdown($employee_types, 'class="form-control" name="employee_type" ', old('employee_type'), 'Select Option') }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="branch_id">Branch</label>
                            <input type="text" value="{{ $branches[auth()->user()->branch_id] }}"
                                class="form-control" readonly>
                            <input type="hidden" name="branch_id" value="{{ auth()->user()->branch_id }}" readonly>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="shift_id">Shift</label>
                            {{ generateDropdown($shifts, 'class="form-control" name="shift_id" ', old('shift_id'), 'Select Option') }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="designation_id">Designation</label>
                            {{ generateDropdown($designations, 'class="form-control" name="designation_id"', old('designation_id'), 'Select Designation') }}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="department_id">Department</label>
                            {{ generateDropdown($departments, 'class="form-control" name="department_id"', old('department_id'), 'Select Department') }}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="joining_date">Joining Date</label>
                            <input type="date" class="form-control" id="joining_date" name="joining_date"
                                value="{{ old('joining_date') }}" required>
                        </div>
                    </div>

                </div>

                <div class="row p-2 mt-3 mb-3 rounded text-white font-weight-bold" style="background-color: #ffaf61">
                    Salary Details
                </div>
                <div class="row p-2" style="background-color: #fff4ea; border-radius:4px">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="salary">Salary</label>
                            <input type="number" step="0.01" value="{{ old('salary') }}" class="form-control salary"
                                id="salary" name="salary" placeholder="Enter basic salary">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="salary_grade">Salary Grade *</label>
                            {{ generateDropdown($salary_grades, 'class="form-control salary_grade" id="salary_grade" name="salary_grade"', old('salary_grade'), 'Select Grade') }}
                        </div>
                    </div>
                    @foreach ($salary_heads as $head)
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="{{$head->code}}">{{$head->title}}</label>
                                <input type="number" step="0.01" value="" class="form-control" id="{{$head->code}}"
                                name="{{$head->code}}" placeholder="Enter {{$head->title}}" readonly>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row mt-3 flex justify-content-end">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>

            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            let educationCount = 1; // Start with 1 since you have the initial entry

            $('#plusBtn').click(function() {
                // Clone the first education info row
                const newEntry = $('.education-info').first().clone();

                // Clear the input values and reset the selects
                newEntry.find('input').val('');
                newEntry.find('select').prop('selectedIndex', 0);

                // Update the name attributes for the cloned inputs
                newEntry.find('input, select').each(function() {
                    const name = $(this).attr('name');
                    if (name) {
                        const newName = name.replace(/\[\d+\]/,
                        `[${educationCount}]`); // Update the index
                        $(this).attr('name', newName);
                    }
                });

                // Add a remove button
                const removeButton = `
                <div class="col-md-12">
                    <div class="form-group">
                        <button type="button" class="btn btn-sm btn-danger removeBtn">
                            <i class="fas fa-minus-circle"></i> Remove
                        </button>
                    </div>
                </div>`;
                newEntry.prepend(removeButton);

                // Append the new entry to the form
                $('#append-field').append(newEntry);

                // Increment the educationCount
                educationCount++;
            });

            // Remove the education info row
            $('#append-field').on('click', '.removeBtn', function() {
                $(this).closest('.education-info').remove();
            });


            $('.salary_grade, #salary').on('change keyup', function(event) {
                event.preventDefault();
                var id = $('.salary_grade').val();
                var salary = $('#salary').val();

                $.ajax({
                    type: 'GET',
                    url: '{{ route("salary-grades.edit", ":id") }}'.replace(':id', id),
                    success: function(data) {
                        $.each(data.salary_grade_rules, function(index, value) {
                            let headValue = value.rule_type == "Percentage" ? (salary * (value.amount / 100)) : value.amount;
                            $('#' + value.salary_head.code).empty().val(customRound(headValue,2));
                        });
                    }
                });
            });
        });


        const input = document.querySelector('.image-uploader__input');
        const previewImage = document.querySelector('.image-uploader__preview-image');

        input.addEventListener('change', () => {
            const file = input.files[0];
            const reader = new FileReader();

            reader.onload = (event) => {
                previewImage.src = event.target.result;
            };

            reader.readAsDataURL(file);
        });
    </script>
@endpush