@if ($showModal)
<div class="modal fade @if($showModal === true) show overflow-auto @endif"
    style="display: @if($showModal === true) block; background: rgba(0, 0, 0, .60);  @else none @endif; " text-left"
    id="party-list-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel20" aria-hidden="true">
    <div class="modal-dialog  modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h4 class="modal-title" id="myModalLabel20">@lang("labels.person.create.action")</h4>
                <button type="button" class="close" wire:click.prevent="doClose()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-12">
                    <div wire:loading  id="showProcessing" class="bg-info col-md-12" style="background: rgba(0, 0, 0, .60);">
                        <div class="alert bg-info"><span> Processing... </span></div>
                    </div>
                    @include("backend.includes.flash")
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Create Person Wizard</h4>
                            <a class="heading-elements-toggle"><i class="fa fa-ellipsis-h font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="expand"><i class="feather icon-maximize"></i></a></li>
                                </ul>
                            </div>
                        </div>


                        <div class="card-content collapse show">
                            <div class="card-body">
                                <form action="#" class="number-tab-steps wizard-circle wizard clearfix"
                                    role="application" id="steps-uid-0">

                                    <div class="steps clearfix">
                                        <ul role="tablist">
                                            <li role="tab" class="first @if($currentStep==1) current @else disabled @endif @if($currentStep > 1) done @endif" aria-disabled="false" aria-selected="@if($currentStep==1) true @endif">
                                                <a id="steps-uid-0-t-0" href="#steps-uid-0-h-0"aria-controls="steps-uid-0-p-0">
                                                    <span class="step">1</span> Name
                                                </a>
                                            </li>
                                            <li role="tab" class="@if($currentStep==2) current @else disabled @endif @if($currentStep > 2) done @endif" aria-disabled="true" aria-selected="@if($currentStep==2) true @endif">
                                                <a id="steps-uid-0-t-1" href="#steps-uid-0-h-1" aria-controls="steps-uid-0-p-1">
                                                    <span class="step">2</span> Contact
                                                </a>
                                            </li>
                                            <li role="tab" class="@if($currentStep==3) current @else disabled @endif @if($currentStep > 3) done @endif" aria-disabled="true" aria-selected="@if($currentStep==3) true @endif">
                                                <a id="steps-uid-0-t-2" href="#steps-uid-0-h-2" aria-controls="steps-uid-0-p-2">
                                                    <span class="step">3</span> Personal
                                                </a>
                                            </li>
                                            <li role="tab" class="@if($currentStep==4) current @else disabled @endif @if($currentStep > 4) done @endif" aria-disabled="true" aria-selected="@if($currentStep==4) true @endif">
                                                <a id="steps-uid-0-t-3" href="#steps-uid-0-h-3" aria-controls="steps-uid-0-p-3">
                                                    <span class="step">4</span> Family
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="content clearfix">

                                        @if ($currentStep == 1)
                                        <!-- Step 1 -->
                                        <h6 id="steps-uid-0-h-0" tabindex="-1" class="title current">Step 1</h6>
                                        <fieldset id="steps-uid-0-p-0" role="tabpanel" aria-labelledby="steps-uid-0-h-0"
                                            class="body current" aria-hidden="false">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.first_name")</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="basic-addon3"><i class="feather icon-user"></i></span>
                                                            </div>
                                                            <input type="text" class="form-control text-uppercase" wire:model.defer="first_name" aria-describedby="basic-addon3">
                                                        </div>
                                                        @error('first_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.second_name")</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="basic-addon3"><i class="feather icon-user"></i></span>
                                                            </div>
                                                            <input type="text" class="form-control text-uppercase" wire:model.defer="second_name" aria-describedby="basic-addon3">
                                                        </div>
                                                        @error('second_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.third_name")</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="basic-addon3"><i class="feather icon-user"></i></span>
                                                            </div>
                                                            <input type="text" class="form-control text-uppercase" wire:model.defer="third_name" aria-describedby="basic-addon3">
                                                        </div>
                                                        @error('third_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.fourth_name")</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="basic-addon3"><i class="feather icon-user"></i></span>
                                                            </div>
                                                            <input type="text" class="form-control text-uppercase" wire:model.defer="fourth_name" aria-describedby="basic-addon3">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-md-6">

                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.date_of_birth")</label>
                                                        <div class='input-group date' id='datetimepicker1'>
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="date_of_birth_anchor"> <i class="fa fa-calendar"></i></span>
                                                            </div>
                                                            <input type="text" autocomplete="off"
                                                                        class="date_of_birth"
                                                                        style="z-index:9999!important"
                                                                        id="date_of_birth"
                                                                        wire:model.defer="date_of_birth"
									                                    onchange="this.dispatchEvent(new InputEvent('input'))" placeholder="DD/MM/YYYY">
                                                            <a href="#" id="dd" class="input-group-text"><i class="fa fa-calendar"></i></a>
                                                        </div>
                                                        @error('date_of_birth') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.place_of_birth")</label>
                                                        <input type="text" class="form-control" wire:model.defer="place_of_birth">
                                                        @error('place_of_birth') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.gender")</label>
                                                        <div class="input-group">
                                                            <select name="year" wire:model.defer="gender" class="form-control col-sm-2">
                                                                <option>@lang('labels.select')</option>
                                                                <option value="0"> Male </option>
                                                                <option value="1"> Female </option>
                                                            </select>
                                                        </div>
                                                        @error('gender') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>


                                        </fieldset>
                                        @endif

                                        <!-- Step 2 -->
                                        @if ($currentStep == 2)
                                        <h6 id="steps-uid-0-h-1" tabindex="-1" class="title">Step 2</h6>
                                        <fieldset id="steps-uid-0-p-1" role="tabpanel" aria-labelledby="steps-uid-0-h-1"
                                            class="body" aria-hidden="true">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.phone_number_1")</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="basic-addon3"><i class="feather icon-phone"></i></span>
                                                            </div>
                                                            <input type="text" class="form-control" wire:model.defer="phone_number_1" placeholder="phone number 1" aria-describedby="basic-addon3">
                                                        </div>
                                                        @error('phone_number_1') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.phone_number_2")</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="basic-addon3"><i class="feather icon-phone"></i></span>
                                                            </div>
                                                            <input type="text" class="form-control" wire:model.defer="phone_number_2" placeholder="phone number 2" aria-describedby="basic-addon3">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.email")</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text" id="basic-addon3"><i class="feather icon-mail"></i></span>
                                                            </div>
                                                            <input type="text" class="form-control" wire:model.defer="email" placeholder="email" aria-describedby="basic-addon3">
                                                        </div>
                                                        @error('email') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.address_line_1")</label>
                                                        <input type="text" class="form-control" wire:model.defer="address_line_1">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.district")</label>
                                                        <div class="pl-25">@livewire("config.select-district-component", ["districtId" => $district_id])</div>
                                                        <input type="hidden" class="form-control" wire:model.defer="district_id">
                                                    </div>
                                                    @error('district_id') <span class="danger">{{ $message }}</span> @enderror
                                                </div>
                                            </div>

                                        </fieldset>
                                        @endif

                                        <!-- Step 3 -->
                                        @if ($currentStep == 3)
                                        <h6 id="steps-uid-0-h-2" tabindex="-1" class="title">Step 3</h6>
                                        <fieldset id="steps-uid-0-p-2" role="tabpanel" aria-labelledby="steps-uid-0-h-2" class="body" aria-hidden="true">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.occupation")</label>
                                                        <input type="text" class="form-control" wire:model.defer="occupation">
                                                        @error('occupation') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        @endif

                                        <!-- Step 4 -->
                                        @if ($currentStep == 4)
                                        <h6 id="steps-uid-0-h-3" tabindex="-1" class="title">Step 4</h6>
                                        <fieldset id="steps-uid-0-p-3" role="tabpanel" aria-labelledby="steps-uid-0-h-3"
                                            class="body" aria-hidden="true">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.mother_first_name")</label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="mother_first_name">
                                                        @error('mother_first_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.mother_second_name")</label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="mother_second_name">
                                                        @error('mother_second_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.mother_third_name")</label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="mother_third_name">
                                                        @error('mother_third_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.mother_fourth_name")</label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="mother_fourth_name">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.father_first_name")</label>
                                                        <input type="text" readonly class="form-control text-uppercase" wire:model.defer="father_first_name">
                                                        @error('father_first_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.father_second_name")</label>
                                                        <input type="text" readonly class="form-control text-uppercase" wire:model.defer="father_second_name">
                                                        @error('father_second_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.father_third_name")</label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="father_third_name">
                                                        @error('father_third_name') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.father_fourth_name")</label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="father_fourth_name">
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        @endif
                                    </div>

                                    <div class="actions clearfix">

                                        <ul role="menu" aria-label="Pagination">
                                            <li class="disabled" aria-disabled="true">
                                                @if ($currentStep == 2 || $currentStep == 3 || $currentStep == 4 )
                                                <button type="button" class="btn btn-md btn-info" wire:click="decreaseStep()">Back</button>
                                                @endif
                                                @if ($currentStep == 4)
                                                <button type="button" wire:click="submit()"" class="pull-right ml-25 btn btn-md btn-primary">Submit</button>
                                                @endif
                                            </li>

                                            <li aria-hidden="false" aria-disabled="false" class="" style="">
                                                @if ($currentStep == 1 || $currentStep == 2 || $currentStep == 3 )
                                                <button type="button" class="btn btn-md btn-info" wire:click="increaseStep()">Next</button>
                                                @endif
                                            </li>

                                        </ul>
                                    </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer ">
                    <div class="text-right">
                        <button class="btn btn-secondary btn-outline square" type="button"
                            wire:click.prevent="doClose()"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push ('page-scripts')
<script src="{{asset('stack/app-assets/js/core/libraries/jquery-3.6.0.js') }}"></script>
<script src="{{asset('stack/app-assets/js/core/libraries/jquery_ui/jquery-ui.js') }}"></script>

<script>
    window.addEventListener('js-event', event => {
        var $j = jQuery.noConflict();

            $j('#date_of_birth').datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd/mm/yy',
                yearRange: '1900:2021',
                orientation: 'top',
            });

            $j('#dd').click(function(){
                var popup =('#datetimepicker1').offset();
                var popupTop = popup.top - 40;
                $('.ui-datepicker').css({
                'top' : popupTop
                });
            });
    })
    </script>
@endpush
@endif