@if ($showModal)
<div class="modal fade @if($showModal === true) show @endif"
    style="display: @if($showModal === true) block; background: rgba(0, 0, 0, .60);  @else none @endif; "
    id="party-list-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel20" aria-hidden="true">
    <div class="modal-dialog  modal-xl" role="document" style="overflow-y: initial !important">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h4 class="modal-title" id="myModalLabel20">{{ucfirst(strtolower($type))}} Person</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" style="height: 80vh;overflow-y: auto;">
                <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">{{$type}} 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> Step 1
                                                </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> Step 2
                                                </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> Step 3
                                                </a>
                                            </li>
                                            <li role="tab" class="@if($currentStep==4) last current @else disabled @endif last" 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> Step
                                                    4
                                                </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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></label>
                                                        <div class="input-group date" id="datetimepicker1">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text"> <i class="fa fa-calendar"></i></span>
                                                                <input type="text" autocomplete="off"
                                                                    class="form-control date_of_birth"
                                                                    id="date_of_birth"
                                                                    wire:model.defer="date_of_birth"
                                                                    onchange="this.dispatchEvent(new InputEvent('input'))" placeholder="DD/MM/YYYY">
                                                            </div>
                                                        </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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></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>
                                                        @error('phone_number_2') <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.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") <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" wire:model.defer="address_line_1">
                                                    </div>
                                                    @error('address_line_1') <span class="danger">{{ $message }}</span> @enderror
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.district") <span class="text-danger">*</span></label>
                                                        <div class="pl-25">@livewire("config.select-district-component", ["districtId" => $district_id,"key"=>false])</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">
                                            @if($showEyeHair)
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.eye_color")</label>
                                                        <select name="classification" wire:model.defer="eye_color" class="form-control">
                                                            <option value=''>@lang('labels.select')</option>
                                                            <option value="Blue">Blue</option>
                                                            <option value="Black">Black</option>
                                                            <option value="Brown">Brown</option>
                                                        </select>
                                                        @error('eye_color') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.hair_color")</label>
                                                        <select name="classification" wire:model.defer="hair_color" class="form-control">
                                                            <option value=''>@lang('labels.select')</option>
                                                            <option value="No Hair">No Hair</option>
                                                            <option value="Black">Black</option>
                                                            <option value="Brown">Brown</option>
                                                        </select>
                                                        @error('hair_color') <span class="danger">{{ $message }}</span> @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            @endif

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

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

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label>@lang("labels.person.fields.occupation") <span class="text-danger">*</span></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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></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") <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="father_first_name" readonly>
                                                        @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") <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control text-uppercase" wire:model.defer="father_second_name" readonly>
                                                        @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") <span class="text-danger">*</span></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>
@endif