@extends('payroll.employee_frontend.layouts.employee')
@section('content')
    <section>
        <div class="col-12 mt-4">
            <h2 class="page-title text-center">Edit Profile</h2>
            <div class="mb-2 heading-border"></div>
        </div>
    </section>

    @if (session('success'))
        <div class="alert alert-success text-center" id="hide-alert">
            {{ session('success') }}
        </div>
    @endif
    <section class="px-3  pt-3 pt-lg-5 row">

        <form action="{{ route('employee.profile.update') }}" method="post" id="profile_edit_form">
            @csrf
            <div class="col-12 mb-4">
                <h5>Personal Info</h5>
                <div class="blu-card d-flex flex-wrap">
                    <input type="hidden" name="basic_info[emp_other_info_id]"
                        value="@if (!empty($employee_info->fetch_other_info_data)) {{ $employee_info->fetch_other_info_data->id }} @endif">

                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="labels col-4 text-nowrap">Name</label>
                            <div class='form-group  col-8'>
                                <input type="text" class="form-control input-sm" name="basic_info[emp_name]"
                                    id="emp_name" value="@if (!empty($employee_info)) {{ $employee_info->emp_name }} @endif" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="labels col-4 text-nowrap">Date Of Birth</label>
                            <div class='form-group col-8'>
                                <input type="text" class="datepicker form-control input-sm"
                                    name="basic_info[emp_dob]" id="emp_dob" onchange="calculate_age(this)"
                                    value="@if (!empty($employee_info)) {{ date('d-m-Y', strtotime($employee_info->emp_dob)) }}
                               @else{{ carbon()->format('d-m-Y') }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">E-Tin</label>
                            <div class='form-group col-8'>
                                <input type="text" class="form-control input-sm" name="basic_info[emp_tin_no]"
                                    id="emp_tin_no"
                                    value="@if (!empty($employee_info->fetch_other_info_data)) {{ $employee_info->fetch_other_info_data->emp_tin_no }} @endif" required>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="labels col-4 text-nowrap">Phone</label>
                            <div class='form-group col-8'>
                                <input type="text" class="form-control input-sm" name="basic_info[emp_phone_no]"
                                    id="emp_phone_no"
                                    value="@if (!empty($employee_info)) {{ $employee_info->emp_phone_no }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Alt Phone</label>
                            <div class='form-group col-8'>
                                <input type="text" class="form-control input-sm" name="basic_info[emp_alt_phone_no]"
                                    id="emp_alt_phone_no"
                                    value="@if (!empty($employee_info->fetch_other_info_data)) {{ $employee_info->fetch_other_info_data->emp_alt_phone_no }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Nid</label>
                            <div class='form-group col-8'>
                                <input type="text" class="form-control input-sm" name="basic_info[emp_nid]"
                                    id="emp_nid"
                                    value="@if (!empty($employee_info->fetch_other_info_data)) {{ $employee_info->fetch_other_info_data->emp_nid }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Passport No</label>
                            <div class='form-group col-8'>
                                <input type="text" class="form-control input-sm" name="basic_info[emp_passport_no]"
                                    id="emp_passport_no"
                                    value="@if (!empty($employee_info->fetch_other_info_data)) {{ $employee_info->fetch_other_info_data->emp_passport_no }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="labels col-4 text-nowrap">Email</label>
                            <div class='form-group col-8'>
                                <input type="email" class="form-control input-sm" name="basic_info[email]" id="emp_email"
                                    value="@if (!empty($employee_info)) {{ $employee_info->email }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="labels col-4 text-nowrap">Gender</label>
                            <div class='form-group col-8'>
                                <select class="form-control input-sm select" name="basic_info[emp_gender]" id="emp_gender">
                                    <option value="1" @if (!empty($employee_info) && $employee_info->emp_gender == 1) selected @endif>Male
                                    </option>
                                    <option value="2" @if (!empty($employee_info) && $employee_info->emp_gender == 2) selected @endif>
                                        Female
                                    </option>
                                    <option value="3" @if (!empty($employee_info) && $employee_info->emp_gender == 3) selected @endif>Other
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Marital Status</label>
                            <div class='form-group col-8'>
                                <select name="basic_info[emp_marital_status]" id="emp_marital_status"
                                    class="form-control">

                                    <option value="1" @if (!empty($employee_info->fetch_other_info_data) && $employee_info->fetch_other_info_data->emp_marital_status == 1) selected @endif>
                                        Married
                                    </option>
                                    <option value="2" @if (!empty($employee_info->fetch_other_info_data) && $employee_info->fetch_other_info_data->emp_marital_status == 2) selected @endif>
                                        UnMarried
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <h5>Address</h5>
                <div class="blu-card d-flex flex-wrap">
                    <h6 class="w-100 pl-2">Present Address:</h6>
                    <input type="hidden" name="address[1][address_category]" value="1">
                    <input type="hidden" name="address[1][row_id]"
                        value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->id }} @endif">

                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">House</label>
                            <div class='form-group col-8'>
                                <input type="text" class="house_1 form-control input-sm" name="address[1][house_no]"
                                    id="present_house"
                                    value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->house_no }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Road</label>
                            <div class='form-group col-8'>
                                <input type="text" class="road_1 form-control input-sm" name="address[1][road]"
                                    id="present_road"
                                    value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->road }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Post Office</label>
                            <div class='form-group col-8'>
                                <input type="text" class="post_office_1 form-control input-sm"
                                    name="address[1][post_office]" id="present_post_office"
                                    value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->post_office }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Thana</label>
                            <div class='form-group col-8'>
                                <input type="text" class="thana_1 form-control input-sm" name="address[1][thana]"
                                    id="present_thana"
                                    value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->thana }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">City</label>
                            <div class='form-group col-8'>
                                <input type="text" class="city_1 form-control input-sm" name="address[1][city]"
                                    id="present_city"
                                    value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->city }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Country</label>
                            <div class='form-group col-8'>
                                <input type="text" class="country_1 form-control input-sm" name="address[1][country]"
                                    id="present_country"
                                    value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->country }}@else{{ 'Bangladesh' }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Description</label>
                            <div class='form-group col-8'>
                                <input type="text" class="address_description_1 form-control input-sm"
                                    name="address[1][address_description]" id="present_address_desc"
                                    value="@if (!empty($employee_info->fetch_address_info_data[0])) {{ $employee_info->fetch_address_info_data[0]->address_description }}@else{{ 'n/a' }} @endif">
                            </div>
                        </div>
                    </div>


                    <h6 class="w-100 pl-2">Permanent Address:</h6>
                    <input type="hidden" name="address[2][address_category]" value="2">
                    <input type="hidden" name="address[2][row_id]"
                        value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->id }} @endif">


                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">House</label>
                            <div class='form-group col-8'>
                                <input type="text" class="house_2 form-control input-sm" name="address[2][house_no]"
                                    id="permanent_house"
                                    value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->house_no }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Road/Village</label>
                            <div class='form-group col-8'>
                                <input type="text" class="road_2 form-control input-sm" name="address[2][road]"
                                    id="permanent_road"
                                    value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->road }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Post Office</label>
                            <div class='form-group col-8'>
                                <input type="text" class="post_office_2 form-control input-sm"
                                    name="address[2][post_office]" id="permanent_post_office"
                                    value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->post_office }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Thana</label>
                            <div class='form-group col-8'>
                                <input type="text" class="thana_2 form-control input-sm" name="address[2][thana]"
                                    id="permanent_thana"
                                    value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->thana }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">City</label>
                            <div class='form-group col-8'>
                                <input type="text" class="city_2 form-control input-sm" name="address[2][city]"
                                    id="permanent_city"
                                    value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->city }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Country</label>
                            <div class='form-group col-8'>
                                <input type="text" class="country_2 form-control input-sm" name="address[2][country]"
                                    id="permanent_country"
                                    value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->country }}@else{{ 'Bangladesh' }} @endif">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                        <div class="row">
                            <label class="col-4 text-nowrap">Description</label>
                            <div class='form-group col-8'>
                                <input type="text" class="address_description_2 form-control input-sm"
                                    name="address[2][address_description] " id="permanent_address_desc"
                                    value="@if (!empty($employee_info->fetch_address_info_data[1])) {{ $employee_info->fetch_address_info_data[1]->address_description }}@else{{ 'n/a' }} @endif">
                            </div>

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

            <div class="col-12 mb-4">
                <div class="d-flex flex-wrap">
                    <h5>Education</h5>
                </div>
                <div class="blu-card p-2" id="educationContainer">
                    <div class="d-flex flex-wrap">
                        <button class="btn btn-sm btn-success" type="button" id="addMore"
                            style="margin-left: auto;">Add</button>
                    </div>
                    @php
                     $employee_eductions = $employee_info->fetch_education_info_data;
                    @endphp
                    @if (count($employee_eductions) > 0)
                        @foreach ($employee_eductions as $key => $eduction)
                            <div class="row educationRow">
                                <input type="hidden" name="education[{{ $key }}][row_id]"
                                    value="{{ $eduction->id }}">

                                <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                    <label class="text-nowrap">Title</label>
                                    <input type="text" class="form-control input-sm"
                                        name="education[{{ $key }}][title]" value="{{ $eduction->title }}">
                                </div>

                                <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                    <label>Institution</label>
                                    <input type="text" class="form-control input-sm" id=""
                                        name="education[{{ $key }}][institution]"
                                        value="{{ $eduction->institution }}">
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                    <label>Board/University</label>
                                    <input type="text" class="form-control input-sm"
                                        name="education[{{ $key }}][board]"
                                        value="{{ $eduction->board_university }}">
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                    <label>Year Of Passing</label>
                                    <input type="text" class="form-control input-sm"
                                        name="education[{{ $key }}][passing_year]"
                                        value="{{ $eduction->passing_year }}">
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                    <label>Grade/CGPA</label>
                                    <div class="form-group">
                                        <input type="text" class="form-control input-sm"
                                            name="education[{{ $key }}][grade]" value="{{ $eduction->grade }}">
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                    <label>&nbsp;</label>
                                    <div class="form-group">
                                        <button class="btn btn-sm btn-danger remove" type="button">Remove</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="row educationRow">
                            <input type="hidden" name="education[0][row_id]" value="">

                            <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                <label class="text-nowrap">Title</label>
                                <input type="text" class="form-control input-sm"
                                    name="education[0][title]" value="">
                            </div>

                            <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                <label>Institution</label>
                                <input type="text" class="form-control input-sm" id=""
                                    name="education[0][institution]" value="">
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                <label>Board/University</label>
                                <input type="text" class="form-control input-sm"
                                    name="education[0][board]" value="">
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                <label>Year Of Passing</label>
                                <input type="text" class="form-control input-sm"
                                    name="education[0][passing_year]" value="">
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                <label>Grade/CGPA</label>
                                <div class="form-group">
                                    <input type="text" class="form-control input-sm"
                                        name="education[0][grade]" value="">
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-6 col-12">
                                <label>&nbsp;</label>
                                <div class="form-group">
                                    <button class="btn btn-sm btn-danger remove" type="button">Remove</button>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>

                <div class="row justify-content-center">
                    <div class="col-auto mt-4">
                        @if (!$pending_profile_update)
                            <button type="button" class="btn btn-info btn-md"
                                onclick="profile_edit_request('profile_edit_form')">Update</button>
                        @else
                            <h5 class="text-center text-warning">Your profile update request is pending.</h5>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </section>
@endsection



@section('script')
    <script>
        $(document).ready(function() {
            // $('.select_2').select2();

            var educationIndex = 100;
            $('#addMore').click(function() {
                educationIndex++;
                var newRow = $('.educationRow:first').clone();
                newRow.find('input').each(function() {
                    var name = $(this).attr('name');
                    // Update the name attribute with the new index
                    name = name.replace(/\[\d+\]/, '[' + educationIndex + ']');
                    $(this).attr('name', name);
                    $(this).val('');
                });
                $('#educationContainer').append(newRow);
            });

            $('#educationContainer').on('click', '.remove', function() {
                $(this).closest('.row').remove();
            });
        });

        function profile_edit_request(formId) {
            var requiredFields = {
                emp_name: 'Name',
                emp_dob: 'Date Of Birth',
                emp_email: 'Email'
            }; // Specific fields to validate and their display names

            
            const missingFields = checkRequiedField(formId,requiredFields);
            if (missingFields.length === 0) {
                var message = "Do you want to update your profile?";
                var confirmButtonText = "Yes, submit it!";
                confirmAndSubmitForm(formId, message, confirmButtonText);
            }else {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    html: 'Please fill in the following fields:<br>' + missingFields.join('<br>')
                 });
            }
          
          
        }


        function checkRequiedField(formId,requiredFields) {
            var form = document.getElementById(formId);
            
            var missingFields = [];
            for (var field in requiredFields) {
                // var input = form.querySelector('[name="basic_info[' + field + ']"]');
                var input = document.getElementById(field);
                if (input && input.value.trim() === '') {
                    missingFields.push(requiredFields[field]);
                }
            }
            return missingFields;
        }
    </script>
@endsection