<form action="{{route('employees.store')}}" method="post" enctype="multipart/form-data">
    @csrf
    <ul class="nav nav-underline mb-3" id="pills-tab" role="tablist">
        <li class="nav-item me-2" role="presentation">
            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                    data-target="#general-information" next="not"
                    type="button" role="tab" aria-controls="pills-home"
                    aria-selected="true">{{ __('messages.general_info') }}
            </button>
        </li>
        <li class="nav-item me-2" role="presentation">
            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                    data-target="#details-info" next="not"
                    type="button" role="tab" aria-controls="pills-profile"
                    aria-selected="false">{{ __('messages.details_info') }}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                    data-target="#join-info" next="not"
                    type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
                {{ __('messages.join_info') }}
            </button>
        </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="general-information" role="tabpanel"
             aria-labelledby="pills-home-tab"
             tabindex="0">
            <div class="row">
                <div class="col-md-6">
                    <label for="organization" class="form-label">{{ __('messages.main') }} {{ __('messages.organization') }}<span
                            class="text-danger">*</span></label>
                    <select class="form-select requiredField" name="organization_id"
                            id="organization" required>
                        <option disabled value="" selected>-Organization-</option>
                        @foreach ($organizations as $key => $item)
                            <option
                                value="{{ $key }}" {{ old('organization_id') === $key ? 'selected': ''}}>{{ $item }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label" for="joining_date">First {{ __('messages.joining_date') }} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control custom-date-format"
                           name="joining_date" id="joining_date" value="{{ old('joining_date')}}" placeholder="Pick employee joining date" required autocomplete="off"/>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-6">
                    <label for="employee_name" class="form-label">{{ __('messages.employee_name') }}</label>
                    <input type="text" name="employee_name" value="{{old('employee_name')}}"
                           class="form-control" id="employee_name" autocomplete="off">
                </div>
                <div class="col-md-6">
                    <label for="sex" class="form-label">{{ __('messages.sex') }} <span
                            class="text-danger">*</span></label>
                    <select class="form-select requiredField" name="sex" id="sex">
                        <option disabled value="" selected>Select Gender</option>
                        <option value="male" {{ old('sex') === 'male' ? 'selected': ''}}>Male</option>
                        <option value="female" {{ old('sex') === 'female' ? 'selected': ''}}>Female</option>
                    </select>
                </div>
            </div>
            <div class="row mt-3">

                <div class="col-md-6">
                    <label class="form-label" for="birth_date">{{ __('messages.birth_date') }} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control custom-date-format"
                           name="birth_date" id="birth_date" value="{{ old('birth_date')}}" placeholder="Pick employee birth date" required autocomplete="off"/>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-5">
                            <label class="form-label">{{ __('messages.birth_year') }} <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number"
                                       class="form-control requiredField"
                                       id="birth_date_year"
                                       value="{{old('birth_date')}}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="birth_date_month" class="form-label">{{ __('messages.month') }} <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <input onkeyup="changeBirthDate()" type="number"
                                       class="form-control requiredField"
                                       id="birth_date_month"
                                       max="12"
                                       value="{{old('birth_date')}}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="birth_date_day" class="form-label">{{ __('messages.day') }} <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <input onkeyup="changeBirthDate()" type="number"
                                       class="form-control requiredField"
                                       id="birth_date_day"
                                       value="{{old('birth_date')}}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <label for="employee_image" class="form-label">{{ __('messages.employee_images') }}</label>
                    <input class="form-control" type="file" name="employee_image[]"
                           id="employee_image"
                           multiple="multiple">
                </div>
            </div>
            <div class="mt-3 d-flex justify-content-end">
                <button type="button" class="btn  me-2" data-bs-dismiss="modal"
                        style="background: #EAECF0;">{{ __('messages.close') }}
                </button>
                <button type="button" class="btn btn-primary next-button" target="#details-info"
                >{{ __('messages.next') }}
                </button>
            </div>
        </div>
        <div class="tab-pane fade" id="details-info" role="tabpanel"
             aria-labelledby="pills-profile-tab" tabindex="0">
            <div class="row">

                <div class="row mt-3">
                    <div class="col-md-6">
                        <label for="father_name" class="form-label">{{ __('messages.father_name') }}</label>
                        <input type="text" name="father_name" value="{{old('father_name')}}"
                               class="form-control" id="father_name">
                    </div>
                    <div class="col-md-6">
                        <label for="mother_name" class="form-label">{{ __('messages.mother_name') }}</label>
                        <input type="text" name="mother_name" value="{{old('mother_name')}}"
                                class="form-control" id="mother_name">
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-6">
                        <label for="present_address" class="form-label">{{ __('messages.present_address') }}<span
                            class="text-danger">*</span></label>
                        <input type="text" name="present_address" value="{{old('present_address')}}"
                               class="form-control" id="present_address">
                    </div>
                    <div class="col-md-6">
                        <label for="permanent_address" class="form-label">{{ __('messages.permanent_address') }}<span
                            class="text-danger">*</span></label>
                        <input type="text" name="permanent_address" value="{{old('permanent_address')}}"
                               class="form-control" id="permanent_address">
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-6">
                        <label for="email" class="form-label">{{ __('messages.email') }}<span
                            class="text-danger">*</span></label>
                        <input type="text" name="email" value="{{old('email')}}"
                               class="form-control" id="email">
                    </div>
                    <div class="col-md-6">
                        <label for="mobile_no" class="form-label">{{ __('messages.mobile_no') }}</label>
                        <input type="text" name="mobile_no" value="{{old('mobile_no')}}"
                               class="form-control" id="mobile_no">
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-6">
                        <label for="nid_no" class="form-label">{{ __('messages.nid_no') }}</label>
                        <input type="text" name="nid_no" value="{{old('nid_no')}}"
                               class="form-control" id="nid_no">
                    </div>
                </div>

                <div class="mt-4 d-flex justify-content-between">
                    <div>
                        <button type="button" class="btn prev-button" target="#general-information"
                                style="background-color:  #EAECF0;">
                            {{ __('messages.previous') }}
                        </button>
                    </div>
                    <div>
                        <button type="button" class="btn  me-2" data-bs-dismiss="modal"
                                style="background: #EAECF0;">{{ __('messages.close') }}
                        </button>
                        <button type="button" class="btn btn-primary next-button" target="#join-info">
                            {{ __('messages.next') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="join-info" role="tabpanel"
             aria-labelledby="pills-contact-tab" tabindex="0">


             <div class="row mt-3">
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="rec_org_id" class="form-label">{{ __('messages.branch') }} <span
                                class="text-danger">*</span></label>
                        <select class="form-select requiredField" name="rec_org_id" id="rec_org_id" required>
                            <option disabled value="" selected> -Select- </option>
                            @foreach ($branchs as $key => $item)
                                <option value="{{$key}}">{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="rec_type">{{ __('messages.designation')}} <span class="text-danger">*</span></label>
                        <select class="form-control" name="rec_type" id="rec_type">
                            <option value=""> Select Record Type</option>
                            {{-- <option value="1" {{($employee->rec_type === '1') ? 'selected' : ''}}>Promotion</option>
                            <option value="2" {{($employee->rec_type === '2') ? 'selected' : ''}}>Demotion</option>
                            <option value="3" {{($employee->rec_type === '3') ? 'selected' : ''}}>Resign</option>
                            <option value="4" {{($employee->rec_type === '4') ? 'selected' : ''}}>Others</option> --}}


                            <option value="1">Promotion</option>
                            <option value="2">Demotion</option>
                            <option value="3">Resign</option>
                            <option value="4">Others</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="rec_date">{{ __('messages.rec_date') }} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control custom-date-format"
                            name="rec_date" id="rec_date" value="{{ old('rec_date')}}" placeholder="Pick record date" required autocomplete="off"/>
                </div>

            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="rec_designation">{{ __('messages.designation')}} <span
                                class="text-danger">*</span></label>
                        <select class="form-control @error('rec_designation') is-invalid @enderror"
                                name="rec_designation" id="rec_designation">
                            <option value="">Select Designation</option>
                            @foreach ($designations as $item)
                            {{-- {{$user->hasRole($item->name) ? 'selected' : '' }} --}}
                                <option
                                    value="{{$item->id}}" >{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="rec_department">{{ __('messages.department')}} <span
                                class="text-danger">*</span></label>
                        <select class="form-control @error('rec_department') is-invalid @enderror"
                                name="rec_department" id="rec_department">
                            <option value="">Select Department</option>
                            @foreach ($departments as $item)
                                <option value="{{$item->department_id}}" >{{$item->department_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- button start -->
            <div class="mt-4 d-flex justify-content-between">
                <div>
                    <button type="button" class="btn prev-button" target="#details-info"
                            style="background-color:  #EAECF0;">
                        {{ __('messages.previous') }}
                    </button>
                </div>
                <div class="d-flex">
                    <button type="button" class="btn  me-2" data-bs-dismiss="modal"
                            style="background: #EAECF0;">{{ __('messages.close') }}
                    </button>
                    <button type="submit" class="btn btn-primary">
                        {{ __('messages.save') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    $("#birth_date").datepicker({
        autoHide: true,
        endDate: "today",
        format: 'dd-mm-yyyy',
    });
    $("#joining_date").datepicker({
        autoHide: true,
        endDate: "today",
        format: 'dd-mm-yyyy',
    });
    $("#rec_date").datepicker({
        autoHide: true,
        endDate: "today",
        format: 'dd-mm-yyyy',
    });

    $("#m_id").select2({
        dropdownParent: $(".createModal")
    });
    // Get tag list for dropdown with pagination
    $(".employee_tag_id").select2({
        dropdownParent: $('.createModal'),
        placeholder: 'Tag IDs...',
        allowClear: true,
        ajax: {
            url: '/system/employees/tagIdforselect2',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    term: params.term || '',
                    page: params.page || 1
                }
            },
            cache: true
        }
    });
    $('#birth_date').change(function(){
        var birthDateStr = $('#birth_date').val();
        var parts = birthDateStr.split("-");
        var day = parseInt(parts[0]);
        var month = parseInt(parts[1]);
        var year = parseInt(parts[2]);
        var birthday = new Date(year, month - 1, day);
        var today = new Date();
        var age = today.getFullYear() - birthday.getFullYear();
        var monthDiff = today.getMonth() - birthday.getMonth();

        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthday.getDate())) {
            age--;
        }
        var months;
        if (monthDiff < 0) {
            months = (12 - birthday.getMonth()) + today.getMonth() - 1;
        } else {
            months = today.getMonth() - birthday.getMonth();
        }
        var days;
        if (today.getDate() < birthday.getDate()) {
            var lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
            days = lastMonth.getDate() - birthday.getDate() + today.getDate();
        } else {
            days = today.getDate() - birthday.getDate();
        }
        var result = "The employee is " + age + " years, " + months + " months, and " + days + " days old.";
        console.log(result);
        $('#birth_date_year').val(age);
        $('#birth_date_month').val(months);
        $('#birth_date_day').val(days);
    });
    $("#birth_date_year, #birth_date_month, #birth_date_day").change(function(){
        var year = $("#birth_date_year").val();
        var month = $("#birth_date_month").val();
        var day = $("#birth_date_day").val();
        if (year && month && day) {
            var currentYear = new Date().getFullYear();
            var birthYear = currentYear - parseInt(year);
            var birthday = new Date(birthYear, month - 1, day);
            var formattedDate = birthday.getDate().toString().padStart(2, '0') + "-" + (birthday.getMonth() + 1).toString().padStart(2, '0') + "-" + birthday.getFullYear();
            $("#birth_date").val(formattedDate);
        }
    });
</script>
<script src="{{asset('assets/js/employee.min.js')}}"></script>

