@extends('layouts.main')

@section('title')
डिजिटल प्रोफाइल
@endsection

@section('custom-css')
<style>

    .select2-selection {
        height: 33px !important;
        border: none !important;
        background-color: #f7f7f7 !important;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
        padding-top: 0.2rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 0.375rem !important;
        padding-left: 0.75rem !important;

    }
</style>
@livewireStyles

<link rel="stylesheet" href="{{ asset('css/digital_profile.css') }}">

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')

<section class="mr-4 mt-2">
    <div class="card">
        <div class="card-header">
            <a href="{{ route('digital-profile.index') }}" style="float: left"><i class="fas fa-arrow-left arrow"></i></a>
            <span class="card-title">डिजिटल प्रोफाइल</span>
        </div>
        <!-- MultiStep Form -->

        <div class="container-fluid" id="grad1">
            <div class="row justify-content-center mt-0">
                {{-- <div class="col-11 col-sm-9 col-md-7 col-lg-4 p-0 mt-3 mb-2 tex-center"> --}}
                <div class="p-2">
                    <div class="px-0 pt-4 pb-0 mt-3 mb-3">
                        <div class="row">
                            <div class="col-md-12 mx-0">
                                {{-- <form id="msform" action="{{ route('digital-profile.store') }}" method="POST" enctype="multipart/form-data"> --}}
                                {{-- <form  wire:submit.prevent="handleSubmit" method="POST" enctype="multipart/form-data"> --}}
                                <form id="msform">

                                    {{-- onkeydown="return event.key != 'Enter';" --}}
                                    @csrf

                                    <!-- progressbar -->
                                    <ul id="progressbar" class="text-center">
                                        <li class="active" id="account"><strong>जानकारी</strong></li>
                                        <li id="personal"><strong>परिवार विवरण</strong></li>
                                        <li id="payment"><strong>स्वास्थ्य / शिक्षा</strong></li>
                                        <li id="confirm"><strong>अन्य</strong></li>
                                    </ul>
                                    <!-- fieldsets -->
                                    <fieldset>
                                        <div class="">
                                        <div class="card mt-3">
                                                <div class="card-body">
                                                    <label for="" class="form-label">
                                                        <b>घर विवरण</b>
                                                    </label>
                                                    <div class="row">
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> घर नम्बर</b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('house_number') }}" name="house_number" placeholder="घर नम्बर">
                                                            <span class="text-danger" id="error_house_number">
                                                                @error('house_number')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> घर ठेगाना</b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('house_address') }}" name="house_address" placeholder="घर ठेगाना">
                                                            <span class="text-danger" id="error_house_address">
                                                                @error('house_address')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>  ब्लक नम्बर</b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('block_number') }}" name="block_number" placeholder="ब्लक नम्बर">
                                                            <span class="text-danger" id="error_block_number">
                                                                @error('block_number')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>टोल</b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('street_name') }}" name="street_name" placeholder="टोल">
                                                            <span class="text-danger" id="error_street_name">
                                                                @error('street_name')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> घरको तला</b></label>
                                                            <input type="number" step="2" class="form-control" id="" value="{{ old('house_storey') }}" name="house_storey" placeholder="घरको तला">
                                                            <span class="text-danger" id="error_house_storey">
                                                                @error('house_storey')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> घर बनेको मिति </b></label>
                                                            <input type="text" class="form-control nep-date-picker-en" id="house_built_date" value="{{ old('house_built_date') }}" name="house_built_date" placeholder="घर  बनेको मिति ">

                                                            <span class="text-danger" id="error_house_built_date">
                                                                @error('house_built_date')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        {{-- $table->string("house_ownership_type")->nullable();
                                                        $table->string("house_base_type")->nullable();
                                                        $table->string("house_wall_type")->nullable();
                                                        $table->string("house_roof_type")->nullable();
                                                        $table->string("house_floor_type")->nullable();
                                                    $table->string("female_owning_property")->nullable(); --}}

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"> <b>शौचालय प्रकार</b></label>
                                                            <select name="toilet_type" id="toilet_type" class="form-control">
                                                                <option></option>
                                                                @foreach ($toilet_types as $toilet_type)
                                                                <option value="{{ $toilet_type[0] }}" {{ old('toilet_type') == $toilet_type[0] ? 'selected' : '' }}>
                                                                    {{ $toilet_type[2] }}
                                                                    ({{ $toilet_type[1] }})
                                                                </option>
                                                                @endforeach

                                                            </select>
                                                            <span class="text-danger" id="error_toilet_type">
                                                                @error('toilet_type')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"> <b>सडक प्रकार</b></label>
                                                            <select name="road_type" id="road_type" class="form-control">
                                                                <option></option>
                                                                @foreach ($road_types as $road_type)
                                                                <option value="{{ $road_type[0] }}" {{ old('road_type') == $road_type[0] ? 'selected' : '' }}>
                                                                    {{ $road_type[2] }}
                                                                    ({{ $road_type[1] }})
                                                                </option>
                                                                @endforeach

                                                            </select>
                                                            <span class="text-danger" id="error_road_type">
                                                                @error('road_type')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>पूर्व दिशामा सडक चौडाइ</b></label>
                                                            <input type="number" step="5" class="form-control" id="" value="{{ old('road_size_ft_east') }}" name="road_size_ft_east" placeholder="पूर्व दिशामा सडक चौडाइ">
                                                            <span class="text-danger" id="error_road_size_ft_east">
                                                                @error('road_size_ft_east')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>पश्चिम दिशामा सडक चौडाइ</b></label>
                                                            <input type="number" step="5" class="form-control" id="" value="{{ old('road_size_ft_west') }}" name="road_size_ft_west" placeholder="पश्चिम दिशामा सडक चौडाइ">
                                                            <span class="text-danger" id="error_road_size_ft_west">
                                                                @error('road_size_ft_west')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>उत्तर दिशामा सडक चौडाइ</b></label>
                                                            <input type="number" step="5" class="form-control" id="" value="{{ old('road_size_ft_north') }}" name="road_size_ft_north" placeholder="उत्तर दिशामा सडक चौडाइ">
                                                            <span class="text-danger" id="error_road_size_ft_north">
                                                                @error('road_size_ft_north')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>दक्षिण दिशामा सडक चौडाइ</b></label>
                                                            <input type="number" step="5" class="form-control" id="" value="{{ old('road_size_ft_south') }}" name="road_size_ft_south" placeholder="दक्षिण दिशामा सडक चौडाइ">
                                                            <span class="text-danger" id="error_road_size_ft_south">
                                                                @error('road_size_ft_south')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"> <b>पानीको स्रोतको प्रकार</b></label>
                                                            <select name="water_source_type" id="water_source_type" class="form-control">
                                                                <option></option>
                                                                @foreach ($water_source_types as $water_source_type)
                                                                <option value="{{ $water_source_type[0] }}" {{ old('water_source_type') == $water_source_type[0] ? 'selected' : '' }}>
                                                                    {{ $water_source_type[2] }}
                                                                    ({{ $water_source_type[1] }})
                                                                </option>
                                                                @endforeach

                                                            </select>
                                                            <span class="text-danger" id="error_water_source_type">
                                                                @error('water_source_type')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"> <b>इन्धन प्रकार</b></label>
                                                            <select name="fuel_type" id="fuel_type" class="form-control">
                                                                <option></option>
                                                                @foreach ($fuel_types as $fuel_type)
                                                                <option value="{{ $fuel_type[0] }}" {{ old('fuel_type') == $fuel_type[0] ? 'selected' : '' }}>
                                                                    {{ $fuel_type[2] }}
                                                                    ({{ $fuel_type[1] }})
                                                                </option>
                                                                @endforeach

                                                            </select>
                                                            <span class="text-danger" id="error_fuel_type">
                                                                @error('fuel_type')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"> <b>बिजुली प्रकार</b></label>
                                                            <select name="electricity_type" id="electricity_type" class="form-control">
                                                                <option></option>
                                                                @foreach ($electricity_types as $electricity_type)
                                                                <option value="{{ $electricity_type[0] }}" {{ old('electricity_type') == $electricity_type[0] ? 'selected' : '' }}>
                                                                    {{ $electricity_type[2] }}
                                                                    ({{ $electricity_type[1] }})
                                                                </option>
                                                                @endforeach

                                                            </select>
                                                            <span class="text-danger" id="error_electricity_type">
                                                                @error('electricity_type')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"> <b>घरेलु उपकरणहरू</b></label>
                                                            <select multiple name="house_appliances[]" id="house_appliances" class="form-control">
                                                                <option></option>
                                                                @foreach ($house_appliances_types as $house_appliance)
                                                                <option value="{{ $house_appliance[0] }}" {{ old('house_appliance') == $house_appliance[0] ? 'selected' : '' }}>
                                                                    {{ $house_appliance[2] }}
                                                                    ({{ $house_appliance[1] }})
                                                                </option>
                                                                @endforeach

                                                            </select>
                                                            <span class="text-danger" id="error_house_appliances">
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="has_built_house_using_government_grant" class="form-label">
                                                                <b>सरकारी अनुदानबाट घर बनाएका छन्</b></label><br>
                                                            <input type="checkbox" class="form-contros" id="has_built_house_using_government_grant" name="has_built_house_using_government_grant" {{ old('has_built_house_using_government_grant') ? 'checked' : '' }}>
                                                            <span class="text-danger" id="error_has_built_house_using_government_grant">
                                                                @error('has_built_house_using_government_grant')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="has_taken_loan_from_banks_or_finances_to_built_house" class="form-label">
                                                                <b>घर बनाउन बैंक वा वित्तीय संस्थाबाट ऋण लिएको छ</b></label><br>
                                                            <input type="checkbox" class="form-contros" id="has_taken_loan_from_banks_or_finances_to_built_house" name="has_taken_loan_from_banks_or_finances_to_built_house" {{ old('has_taken_loan_from_banks_or_finances_to_built_house') ? 'checked' : '' }}>
                                                            <span class="text-danger" id="error_has_taken_loan_from_banks_or_finances_to_built_house">
                                                                @error('has_taken_loan_from_banks_or_finances_to_built_house')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card mt-3">
                                                <div class="card-body">
                                                    <label for="" class="form-label"> <b>
                                                        नागरिकता विवरण</b></label>
                                                    <div class="row">
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="citizenship_issued_date" class="form-label"> <b>
                                                                जारी मिति </b></label>
                                                            <input type="text" class="form-control nep-date-picker-en" id="citizenship_issued_date" value="{{ old('citizenship_issued_date') }}" name="citizenship_issued_date" placeholder="जारी मिति">

                                                            <span class="text-danger" id="error_citizenship_issued_date">
                                                                @error('citizenship_issued_date')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> जारी गरिएको ठेगेना </b></label>
                                                            <input type="text" class="form-control " id="citizenship_issued_at" value="{{ old('citizenship_issued_at') }}" name="citizenship_issued_at" placeholder="जारी गरिएको ठेगेना">
                                                            <span class="text-danger" id="error_citizenship_issued_at">
                                                                @error('citizenship_issued_at')
                                                                {{ $message }}
                                                                @enderror

                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>  प्रमाणित द्वारा</b></label>
                                                            <input type="text" class="form-control " id="citizenship_verified_by" value="{{ old('citizenship_verified_by') }}" name="citizenship_verified_by" placeholder=" प्रमाणित द्वारा">
                                                            <span class="text-danger" id="error_citizenship_verified_by">
                                                                @error('citizenship_verified_by')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>कागजात अगाडि पक्ष</b></label>
                                                            <input type="file" class="form-control" id="citizenship_document_front" name="citizenship_document_front" placeholder=" प्रमाणित द्वारा">
                                                            <span class="text-danger" id="error_citizenship_document_front">
                                                                @error('citizenship_document_front')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>कागजात पछाडि पक्ष</b></label>
                                                            <input type="file" class="form-control" id="citizenship_document_back" name="citizenship_document_back" placeholder=" प्रमाणित द्वारा">
                                                            <span class="text-danger" id="error_citizenship_document_back">
                                                                @error('citizenship_document_back')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="card mt-3">
                                                <div class="card-body">
                                                    <label for="" class="form-label"><b>
                                                            स्थायी ठेगाना </b></label>
                                                    <div class="row">
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>प्रदेश </b></label>
                                                            <select name="permanent_province" id="permanent_province" class="form-control" onchange="changeAddress(event)">
                                                                <option></option>
                                                                @foreach ($provinces as $province)
                                                                <option value="{{ $province['code'] }}" {{ old('permanent_province') == $province['code'] ? 'selected' : '' }}>
                                                                    {{ $province['nepali_name'] }}({{ $province['english_name'] }})
                                                                </option>
                                                                @endforeach
                                                            </select>
                                                            <span class="text-danger" id="error_permanent_province">
                                                                @error('permanent_province')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4 d-none">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>जिल्ला</b></label>
                                                                <br/>

                                                            <select name="permanent_district" id="permanent_district" class="form-control" onchange="changeAddress(event)">
                                                                {{-- <option></option>
                                                                @foreach ($districts as $district)
                                                                <option value="{{ $district[1] }}" {{ old('permanent_district') == $district[1] ? 'selected' : '' }}>
                                                                    {{ $district[3] }} ( {{ $district[2] }} )</option>
                                                                @endforeach --}}
                                                            </select>
                                                            <span class="text-danger" id="error_permanent_district">
                                                                @error('permanent_district')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>


                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4 d-none">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>गा.बी.स / न.पा</b></label>
                                                            <select name="permanent_vdc_municipality" id="permanent_vdc_municipality" class="form-control" onchange="changeAddress(event)" >
                                                                {{-- <option></option> --}}
                                                                {{-- @foreach ($local_bodies as $local_bodie)
                                                                <option value="{{ $local_bodie[1] }}" {{ old('permanent_vdc_municipality') == $local_bodie[1] ? 'selected' : '' }}>
                                                                    {{ $local_bodie[4] }} ( {{ $local_bodie[3] }} )</option>
                                                                @endforeach --}}
                                                            </select>
                                                            <span class="text-danger" id="error_permanent_vdc_municipality">
                                                                @error('permanent_vdc_municipality')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="row">

                                                        <div class="form-group col-sm-12 col-lg-4 d-none">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>वडा नं.</b></label>
                                                            {{-- <input type="text" class="form-control" id="" value="{{ old('permanent_ward_no') }}" name="permanent_ward_no" placeholder="वडा नं"> --}}
                                                                <select name="permanent_ward_no" id="permanent_ward_no" class="form-control">
                                                                    {{-- <option></option> --}}
                                                                    {{-- @foreach ($palika_wards as $ward)
                                                                    <option value="{{ $ward->dp_ward_no }}" {{ old('permanent_ward_no') == $ward->dp_ward_no ? 'selected' : '' }}>
                                                                        {{ $ward->dp_ward_no }} ( {{ $ward->dp_ward_name }} )</option>
                                                                    @endforeach --}}
                                                                </select>
                                                            <span class="text-danger" id="error_permanent_ward_no">
                                                                @error('permanent_ward_no')
                                                                {{ $message }}
                                                                @enderror

                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>टोल </b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('permanent_street') }}" name="permanent_street" placeholder="टोल">

                                                            <span class="text-danger" id="error_permanent_street">
                                                                @error('permanent_street')
                                                                {{ $message }}
                                                                @enderror

                                                            </span>

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

                                            <div class="card mt-3">
                                                <div class="card-body">
                                                    <label for="" class="form-label"> <b>
                                                            अस्थायी ठेगाना </b></label><br>
                                                    {{-- TODO: if same as permanent add automa... --}}
                                                    <div class="row">

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>प्रदेश </b></label>
                                                            <select name="temporary_province" id="temporary_province" class="form-control" onchange="changeAddress(event)">
                                                                <option></option>
                                                                @foreach ($provinces as $province)
                                                                <option value="{{ $province['code'] }}" {{ old('temporary_province') == $province['code'] ? 'selected' : '' }}>
                                                                    {{ $province['nepali_name'] }}({{ $province['english_name'] }})
                                                                </option>
                                                                @endforeach
                                                            </select>
                                                            <span class="text-danger" id="error_temporary_province">
                                                                @error('temporary_province')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4 d-none">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>जिल्ला</b></label>

                                                            <select name="temporary_district" id="temporary_district" class="form-control" onchange="changeAddress(event)">
                                                                {{-- <option></option>
                                                                @foreach ($districts as $district)
                                                                <option value="{{ $district[1] }}" {{ old('temporary_district') == $district[1] ? 'selected' : '' }}>
                                                                    {{ $district[3] }} ( {{ $district[2] }} )</option>
                                                                @endforeach --}}
                                                            </select>
                                                            <span class="text-danger" id="error_temporary_district">
                                                                @error('temporary_district')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4 d-none">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>गा.बी.स / न.पा</b></label>
                                                            <select name="temporary_vdc_municipality" id="temporary_vdc_municipality" class="form-control" onchange="changeAddress(event)">
                                                                {{-- <option></option>
                                                                @foreach ($local_bodies as $local_bodie)
                                                                <option value="{{ $local_bodie[1] }}" {{ old('temporary_vdc_municipality') == $local_bodie[1] ? 'selected' : '' }}>
                                                                    {{ $local_bodie[4] }} ( {{ $local_bodie[3] }} )</option>
                                                                @endforeach --}}
                                                            </select>
                                                            <span class="text-danger" id="error_temporary_vdc_municipality">
                                                                @error('temporary_vdc_municipality')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="row">

                                                        <div class="form-group col-sm-12 col-lg-4 d-none">
                                                            <label for="" class="form-label"><span class="asterik">*</span>
                                                                <b>वडा नं.</b></label>
                                                            {{-- <input type="text" class="form-control" id="" value="{{ old('temporary_ward_no') }}" name="temporary_ward_no" placeholder="वडा नं"> --}}
                                                            <select name="temporary_ward_no" id="temporary_ward_no" class="form-control">
                                                                {{-- <option></option> --}}
                                                                {{-- @foreach ($palika_wards as $ward)
                                                                <option value="{{ $ward->dp_ward_no }}" {{ old('permanent_ward_no') == $ward->dp_ward_no ? 'selected' : '' }}>
                                                                    {{ $ward->dp_ward_no }} ( {{ $ward->dp_ward_name }} )</option>
                                                                @endforeach --}}
                                                            </select>

                                                            <span class="text-danger" id="error_temporary_ward_no">
                                                                @error('temporary_ward_no')
                                                                {{ $message }}
                                                                @enderror

                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>टोल </b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('temporary_street') }}" name="temporary_street" placeholder="टोल">

                                                            <span class="text-danger" id="error_temporary_street">
                                                                @error('temporary_street')
                                                                {{ $message }}
                                                                @enderror

                                                            </span>

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

                                            <div class="card mt-3">
                                                <div class="card-body">
                                                    <label for="" class="form-label">
                                                        <b>
                                                            स्थान विवरण</b>
                                                    </label>
                                                    <div class="row">

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> अक्षांश</b></label>
                                                            <input type="text" class="form-control" id="latitude" value="{{ old('latitude') }}" name="latitude" placeholder="अक्षांश">
                                                            <span class="text-danger" id="error_latitude">
                                                                @error('latitude')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> देशान्तर</b></label>
                                                            <input type="text" class="form-control" id="longitude" value="{{ old('longitude') }}" name="longitude" placeholder="देशान्तर">
                                                            <span class="text-danger" id="error_longitude">
                                                                @error('longitude')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> भौगोलिक नक्शा स्थान</b></label>
                                                            <input type="text" class="form-control" id="geo_map_location" value="{{ old('geo_map_location') }}" name="geo_map_location" placeholder="भौगोलिक नक्शा स्थान">
                                                            <span class="text-danger" id="error_geo_map_location">
                                                                @error('geo_map_location')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-12 p-3" >
                                                            <div id="map"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" name="next" class="next action-button btn-primary"> अर्को <i class="fas fa-arrow-right"></i></button>
                                    </fieldset>
                                    <fieldset>
                                        <div class="">
                                            <div class="">
                                                <div class="">
                                                    <label for="" class="form-label"> <b>
                                                        परिवार विवरण </b></label>
                                                        {{-- TODO: mustnot be able to  select pariwar muli again  --}}
                                                    <div class="card">
                                                        <div class="card-body">
                                                        @livewire('survey-family-detail' )
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" name="next" class="next action-button btn-primary" value="अर्को">अर्को<i class="fas fa-arrow-right"></i></button>
                                        <button type="button" name="previous" class="previous action-button-previous btn-secondary" value="अघिल्लो"><i class="fas fa-arrow-left"></i> अघिल्लो</button>
                                    </fieldset>

                                    <fieldset>
                                        <div class="">
                                            <label for="" class="form-label"> <b>
                                                स्वास्थ्य विवरण</b></label>
                                            <div class="card">
                                                <div class="card-body">
                                                    @livewire('survey-health-profile' )

                                                </div>
                                            </div>
                                        </div>
                                        <div class=" mt-5 ">
                                            <label for="" class="form-label"> <b>शिक्षा विवरण </b></label>
                                            <div class="card">
                                                <div class="card-body">
                                                    @livewire('survey-education-profile' )
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" name="next" class="next action-button btn-primary " value="अर्को">अर्को<i class="fas fa-arrow-right"></i></button>
                                        <button type="button" name="previous" class="previous action-button-previous " value="अघिल्लो"> <i class="fas fa-arrow-left"></i> अघिल्लो</button>
                                    </fieldset>
                                    <fieldset>
                                        <div class="">
                                            <label for="" class="form-label"> <b>
                                                कार्य विवरण</b></label>
                                            <div class="card">
                                                <div class="card-body">
                                                    @livewire('survey-working-profile' )
                                                </div>
                                            </div>
                                            <label for="" class="form-label mt-5"> <b>
                                                व्यापार विवरण</b></label>
                                            <div class="card">
                                                <div class="card-body">
                                                    @livewire('survey-business-profile' )
                                                </div>
                                            </div>
                                              <label for="" class="form-label mt-5"> <b>
                                                खर्च विवरण</b></label>
                                            <div class="card">
                                                <div class="card-body">
                                                    @livewire('survey-expense-profile' )
                                                </div>
                                            </div>

                                            <label for="" class="form-label mt-5">
                                                {{-- range ?? --}}
                                                <b>खाना खपत विवरण</b>
                                            </label>
                                            <div class="card mt-3">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="is_balanced_diet" class="form-label">
                                                                <b> सन्तुलित आहार छ </b></label><br>
                                                            <input type="checkbox" class="form-contros" id="is_balanced_diet" name="is_balanced_diet" {{ old('is_balanced_diet') ? 'checked' : '' }}>
                                                            <span class="text-danger" id="error_is_balanced_diet">
                                                                @error('is_balanced_diet')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b> खाना उपभोग समय</b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('food_consumption_timing') }}" name="food_consumption_timing" placeholder="खाना उपभोग समय">
                                                            <span class="text-danger" id="error_food_consumption_timing">
                                                                @error('food_consumption_timing')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="is_organic" class="form-label">
                                                                <b> अर्गानिक छ</b></label><br>
                                                            <input type="checkbox" class="form-contros" id="is_organic" name="is_organic" {{ old('is_organic') ? 'checked' : '' }}>
                                                            <span class="text-danger" id="error_is_organic">
                                                                @error('is_organic')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-12">
                                                            <label for="" class="form-label">
                                                                <b> नियमित खाना विवरण</b></label>
                                                            <textarea id="regular_meal_description" class="col-12 form-control" value="{{ old('regular_meal_description') }}" name="regular_meal_description" rows="4"></textarea>
                                                            <span class="text-danger" id="error_regular_meal_description">
                                                                @error('regular_meal_description')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <label for="" class="form-label mt-5">
                                                <b>कृषि विवरण</b>
                                            </label>
                                            <div class="card mt-3">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="has_agricultural_land_in_current_vdc_municipality" class="form-label">
                                                                <b> हालको गाउँपालिका/नगरपालिकामा कृषियोग्य जमिन छ </b></label><br>
                                                            <input type="checkbox" class="form-contros" id="has_agricultural_land_in_current_vdc_municipality" name="has_agricultural_land_in_current_vdc_municipality" {{ old('has_agricultural_land_in_current_vdc_municipality') ? 'checked' : '' }}>
                                                            <span class="text-danger" id="error_has_agricultural_land_in_current_vdc_municipality">
                                                                @error('has_agricultural_land_in_current_vdc_municipality')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>हालको गाउँपालिका/नगरपालिकामा जमिनको छेत्रफल (बिगा-रोपनी-आना-पैसा-दाम)   </b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('current_vdc_municipality_total_agricultural_land_area') }}" name="current_vdc_municipality_total_agricultural_land_area" placeholder="00-00-00-00-00">
                                                            <span class="text-danger" id="error_current_vdc_municipality_total_agricultural_land_area">
                                                                @error('current_vdc_municipality_total_agricultural_land_area')
                                                                {{ $message }}  
                                                                @enderror
                                                            </span>
                                                        </div>
                                                        <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="" class="form-label">
                                                                <b>अन्य गाउँपालिका/नगरपालिकामा जमिनको छेत्रफल (बिगा-रोपनी-आना-पैसा-दाम)   </b></label>
                                                            <input type="text" class="form-control" id="" value="{{ old('other_vdc_municipality_total_agricultural_land_area') }}" name="other_vdc_municipality_total_agricultural_land_area" placeholder="00-00-00-00-00">
                                                            <span class="text-danger" id="error_other_vdc_municipality_total_agricultural_land_area">
                                                                @error('other_vdc_municipality_total_agricultural_land_area')
                                                                {{ $message }}  
                                                                @enderror
                                                            </span>
                                                        </div>


                                                         <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="has_taken_loan_from_banks_or_finances_for_agriculture" class="form-label">
                                                                <b> कृषिका लागि बैंक तथा वित्तीय संस्थाबाट ऋण लिएको छ  </b></label><br>
                                                            <input type="checkbox" class="form-contros" id="has_taken_loan_from_banks_or_finances_for_agriculture" name="has_taken_loan_from_banks_or_finances_for_agriculture" {{ old('has_taken_loan_from_banks_or_finances_for_agriculture') ? 'checked' : '' }}>
                                                            <span class="text-danger" id="error_has_taken_loan_from_banks_or_finances_for_agriculture">
                                                                @error('has_taken_loan_from_banks_or_finances_for_agriculture')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <label for="" class="form-label mt-5"> <b>
                                                            अन्नबाली विवरण</b>
                                                        </label>
                                                        <div class="card">
                                                            <div class="card-body">
                                                                @livewire('survey-agricultural-product' )
                                                            </div>
                                                        </div>
                                                        
                                                         <div class="form-group col-sm-12 col-lg-4">
                                                            <label for="has_livestock" class="form-label">
                                                                <b> पशुपन्छी  पालेको क्ष  </b></label><br>
                                                            <input type="checkbox" class="form-contros" id="has_livestock" name="has_livestock" {{ old('has_livestock') ? 'checked' : '' }}>
                                                            <span class="text-danger" id="error_has_livestock">
                                                                @error('has_livestock')
                                                                {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <label for="" class="form-label mt-5"> <b>
                                                                पशुपन्छी विवरण</b>
                                                        </label>
                                                        <div class="card">
                                                            <div class="card-body">
                                                                @livewire('survey-livestock' )
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" id="submit" name="next" class="save action-button btn-primary"><i class="fas fa-save"></i> सेभ </button>
                                        <button type="button" name="previous" class="previous action-button-previous btn-secondary" value="अघिल्लो"><i class="fas fa-arrow-left"></i> अघिल्लो </button>


                                    </fieldset>


                                    {{-- <fieldset>
                                    <h1>one</h1>
                                        <input type="button" name="next" class="next action-button mt-5" value="Next Step"/>
                                    </fieldset>
                                    <fieldset>
                                    <h1>one</h1>
                                        <input type="button" name="next" class="next action-button mt-5" value="Next Step"/>
                                    </fieldset> --}}
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="card-body">
            <div class="card-body">
                <div class="card-footer">
                    <div class="d-flex bd-highlight mb-3">
                        <div class="me-auto bd-highlight alert alert-danger">नोट: क्रिपया आवश्यक सम्पूर्ण
                            जानकारीहरु
                            भर्नु होला |</div>
                        {{-- <div class="bd-highlight mr-2">
                                <button class="btn_palika" type="submit" id="btn-save"><i class="fas fa-save"></i>
                                    सेभ</button>
                            </div> --}}

                        {{-- <div class="bd-highlight mr-2">
                                <a type="button" href="{{ route('apaanga.index') }}" class="btn_palika" id="btn-back"><i class="fas fa-backspace"></i> पछाडी</a>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('custom-script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
{{-- <script src="http://nepalidatepicker.sajanmaharjan.com.np/nepali.datepicker/js/nepali.datepicker.v3.7.min.js" type="text/javascript"></script> --}}
<script>

async function changeAddress(e){
    if(e.target.value){
        let options = [
            {
                name:"permanent_province",
                url:`/api/province/${e.target.value}/districts`,
                to_be_changed_id:"permanent_district",
                filed:"en_name"
            },
            {
                name:"permanent_district",
                url:`/api/district/${e.target.value}/muncipalities`,
                to_be_changed_id:"permanent_vdc_municipality",
                filed:"en_name"
            },
            {
                name:"permanent_vdc_municipality",
                url:`/api/muncipality/${e.target.value}/wards`,
                to_be_changed_id:"permanent_ward_no",
                filed:"en_name"
            },
            {
                name:"temporary_province",
                url:`/api/province/${e.target.value}/districts`,
                to_be_changed_id:"temporary_district",
                filed:"en_name"
            },
            {
                name:"temporary_district",
                url:`/api/district/${e.target.value}/muncipalities`,
                to_be_changed_id:"temporary_vdc_municipality",
                filed:"en_name"
            },
            {
                name:"temporary_vdc_municipality",
                url:`/api/muncipality/${e.target.value}/wards`,
                to_be_changed_id:"temporary_ward_no",
                filed:"en_name"
            },
        ]

        let field = e.target.name;
        let option = options.find(el => el.name == field)
        let url = option?.url
        let to_be_changed_id = option?.to_be_changed_id

        await fetch(url)
        .then(response => response.json())
        .then(subCategories => {
            let str = ``;
            str += `<option value="" >Select</option>`

            subCategories?.forEach(el =>{
                str += `<option value="${el.id}" >${el.en_name}</option>`
            })

            let select_field = document.getElementById(to_be_changed_id)
            select_field.innerHTML = str;
            select_field.closest(".d-none")?.classList.remove("d-none")
                
        });

        resolveSelectTwoWidth()
    }
}

</script>

<script>
    // Get a reference to the file input element
    const inputElement_profile = document.querySelector('input[id="apaanga_profile_picture"]');
    const inputElement_citizenship = document.querySelector('input[id="apaanga_citizenship"]');

    function resolveSelectTwoWidth(){
        let select2_lists = [
            'permanent_district',
            "permanent_vdc_municipality",
            "temporary_district",
            "temporary_vdc_municipality",
            "literacy_type",
            // "nationality",
            // "religion",
            // "ethnic_group",
        ]
        select2_lists.forEach(el => {
            $(`#${el}`).select2({
                  width: 'resolve'
            });
        })
    }

    $(document).ready(function() {
        resolveSelectTwoWidth()
    });

</script>

<script>
    function setCookie(name, value, minutes) {
        var expires = "";
        if (minutes) {
            var date = new Date();
            date.setTime(date.getTime() + (minutes * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

</script>



<script>
    let count = 0;
    let arr = [];

    let digital_profile_childrens = document.getElementById("digital-profile-childrens")

    function addChildren(refreshed_count) {


        if (refreshed_count) {
            count = refreshed_count;
        }

        if ((!refreshed_count) && (refreshed_count != 0)) {
            arr.push(count)
        }

        localStorage.setItem("children_index", JSON.stringify(arr));

        //define a function to set cookies
        // setCookie('children_index_count', count.toString(), 1);
        document.cookie = "children_index_count" + "=" + (count.toString() || "") + "; expires= " + "; path=/";

        let new_div_elem = document.createElement("div")
        new_div_elem.setAttribute("class", "row p-3")
        new_div_elem.setAttribute("data-index", count)


        let str = `
        <div class="card mt-3 p-0" id="dynamic_children_${count}">
            <div class="card-body">
                <div class="row">
                    <span class="mt-4">
                        <label><span class="dynamic_children_title"> बालबालिका </span></label> <button class="btn-sm btn-danger" type="button" onclick="removeChildren(${count})">delete</button>
                    </span>

                    <div class="p-2">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="form-group col-sm-12 col-lg-4">
                                        <label for="" class="form-label"><span
                                                class="asterik">*</span> <b>पहिलो नाम </b></label>
                                        <input type="text" class="form-control" data-index=${count}
                                            value="{{ old('first_name') }}" id=""
                                            name="children_first_name_${count}" placeholder="पहिलो नाम ">
                                        <span class="text-danger">
                                            <span id="error_children_first_name_${count}">
                                            </span>
                                        </span>

                                    </div>

                                    <div class="form-group col-sm-12 col-lg-4">
                                        <label for="middle_name" class="form-label"><b>बिचको नाम</b></label>
                                        <input type="text" class="form-control" data-index=${count}
                                            value="{{ old('middle_name') }}" id=""
                                            name="children_middle_name_${count}" placeholder="बिचको नाम">
                                        <span class="text-danger">
                                            <span id="error_children_middle_name_${count}">
                                            </span>
                                        </span>

                                    </div>

                                    <div class="form-group col-sm-12 col-lg-4">
                                        <label for="last_name" class="form-label"><span
                                                class="asterik">*</span> <b>थर</b></label>
                                        <input type="text" class="form-control" data-index=${count}
                                            id=""
                                            name="children_last_name_${count}" placeholder="थर">
                                        <span class="text-danger">
                                            <span id="error_children_last_name_${count}">
                                            </span>
                                        </span>

                                    </div>
                                    <div class="form-group col-sm-12 col-lg-4">
                                        <label for="dob" class="form-label"><span class="asterik">*</span> <b>
                                                जन्म मिति</b></label>
                                        <input type="text" class="form-control" id="children_dob_${count}"
                                            value="{{ old('dob') }}" name="children_dob_${count}" placeholder="जन्म मिति">
                                        <span class="text-danger" id="error_children_dob_${count}">
                                        </span>
                                    </div>
                                    <div class="form-group col-sm-12 col-lg-4">
                                        <label for="children_gender_${count}" class="form-label"><span class="asterik">*</span>
                                            <b>लिङ्ग</b></label>
                                        <select name="children_gender_${count}" id="children_gender_${count}" class="form-control">
                                            <option></option>
                                            @foreach ($genders as $gender)
                                            <option value="{{ $gender[0] }}" {{ old('children_gender_${count}') == $gender[0] ? 'selected' : '' }}>
                                                {{ $gender[2] }}
                                                ({{ $gender[1] }})
                                            </option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger" id="error_children_gender_${count}">
                                            @error('children_gender_${count}')
                                            {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `

        new_div_elem.innerHTML = str;

        digital_profile_childrens.appendChild(new_div_elem);

        // set nepali date picker for childrens
        document.getElementById(`children_dob_${count}`).nepaliDatePicker({});

        window.scrollTo(0, $(`#dynamic_children_${count}`).offset().top);
        count++;
        changeChildenTitle()
    }

    function changeChildenTitle()
    {
        setTimeout(() => {
            document.querySelectorAll(".dynamic_children_title").forEach((el, index) => {
                el.innerHTML = `बालबालिका - ${index+1}`
                // TODO: change it to nepali
            })
        }, 1000);
    }

    function removeChildren(count) {
        digital_profile_childrens.querySelector(`[data-index='${count}']`).remove()

        arr.splice(arr.indexOf(count), 1);
        localStorage.setItem("children_index", JSON.stringify(arr))

        changeChildenTitle()

    }

</script>
<script>
    // TODO: on click of circular icons > to to that <fieldset>
    $(document).ready(function() {

        var current_fs, next_fs, previous_fs; //fieldsets
        var opacity;

        $(".next").click(function(e) {

            window.scrollTo(0, $("#progressbar").offset().top);

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            //Add Class Active
            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function(now) {
                    // for making fielset appear animation
                    opacity = 1 - now;

                    current_fs.css({
                        'display': 'none'
                        , 'position': 'relative'
                    });
                    next_fs.css({
                        'opacity': opacity
                    });
                }
                , duration: 600
            });
        });

        $(".previous").click(function() {


            window.scrollTo(0, $("#progressbar").offset().top);

            current_fs = $(this).parent();
            previous_fs = $(this).parent().prev();

            //Remove class active
            $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

            //show the previous fieldset
            previous_fs.show();

            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function(now) {
                    // for making fielset appear animation
                    opacity = 1 - now;

                    current_fs.css({
                        'display': 'none'
                        , 'position': 'relative'
                    });
                    previous_fs.css({
                        'opacity': opacity
                    });
                }
                , duration: 600
            });
        });
    });

</script>


<script>
    function changeLocationDetails(marker)
    {
        document.getElementById("latitude").value = marker.getPosition()?.lat()
        document.getElementById("longitude").value = marker.getPosition()?.lng()
        document.getElementById("geo_map_location").value = marker.map.mapUrl
    }
</script>

<script type="text/javascript">
    // Initialize and add the map
    function initMap() {
        // The location of Uluru
        const uluru = { lat: -25.344, lng: 131.031 };
        // The map, centered at Uluru
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 15,
            center: uluru,
        });
        // The marker, positioned at Uluru
        // const marker = new google.maps.Marker({
        //     position: uluru,
        //     map: map,
        // });

        map.addListener('click', function(e) {
            // console.log(e);
            addMarker(e.latLng);

            // if just add then alos set the latlang
        });



        let marker;
        function addMarker(location) {

            if ( marker ) {
                marker.setPosition(location);
                changeLocationDetails(marker)
            } else {
                marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    draggable: true,
                });

                changeLocationDetails(marker)

                marker?.addListener("dragend",() => {
                    changeLocationDetails(marker)

                })
            }
        }

        infoWindow = new google.maps.InfoWindow();

        const locationButton = document.createElement("button");
        locationButton.setAttribute("type","button")

        locationButton.textContent = "";
        locationButton.classList.add("custom-map-my-location-control-button");
        locationButton.classList.add("gm-control-active");
        locationButton.classList.add("gm-fullscreen-control");
        locationButton.style="background: none rgb(255, 255, 255); border: 0px; margin: 10px; padding: 0px; text-transform: none; appearance: none; position: absolute; cursor: pointer; user-select: none; border-radius: 2px; height: 40px; width: 40px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; overflow: hidden; top: 0px; right: 0px";

        map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(locationButton);

        locationButton.addEventListener("click", (e) => {
            e.preventDefault();

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };

                    addMarker(pos)
                    map.setCenter(pos);
                },
                () => {
                    handleLocationError(true, infoWindow, map.getCenter());
                }
            );
            } else {
            // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }

            function handleLocationError(browserHasGeolocation, infoWindow, pos) {
                infoWindow.setPosition(pos);
                infoWindow.setContent(
                    browserHasGeolocation
                    ? "Error: The Geolocation service failed."
                    : "Error: Your browser doesn't support geolocation."
                );
                infoWindow.open(map);
            }

        })

    }

    window.initMap = initMap;
</script>

<script
    src="https://maps.googleapis.com/maps/api/js?key={{config("secret.google_map_key")}}&callback=initMap&v=weekly"
    defer
>
</script>

<script type="text/javascript">
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        //$('#msform').on('submit',(function(e) {
            //alert(1212);
            //e.preventDefault();
            //var formData = new FormData(this);
//
            //$.ajax({
                //type:'POST',
                //url: $(this).attr('action'),
                //data:formData,
                //cache:false,
                //contentType: false,
                //processData: false,
                //success:function(data){
                    //console.log("success");
                    //console.log(data);
                //},
                //error: function(data){
                    //console.log("error");
                    //console.log(data);
                //}
            //});
        //}));



        $('#submit').click(function(e) {
            e.preventDefault();
            Swal.fire( {
                title: 'Submitting ...',
                showCancelButton: false,
                showConfirmButton: false
            })

             let data = $('#msform').serialize();
            // let data = JSON.parse(JSON.stringify(jQuery('#msform').serializeArray()))
            //let data = jQuery('#msform').serializeArray();


            /* Because serializeArray() ignores unset checkboxes and radio buttons: */
            document.getElementById("msform").querySelectorAll("[type=checkbox]").forEach(el => {
                 data = data.concat(`&${el.name}=${el.checked}`);
            })

            var form = $('#msform')[0];
            var formData = new FormData(form);
            // TODO: send images

            $.ajax({
                url: "{{ route('digital-profile.store')}}"
                , method: "POST"
                , data: formData
                //, data: formData
                ,cache: false
                ,contentType:false
                ,processData:false
                , success: function(data) {
                    Swal.close()
                    if (data.error) {
                        display_error_messages(data.error);
                    } else {
                        Swal.fire("Success","","success")
                        window.location = "/digital-profile"
                    }
                }
                , error: function(xhr, status, error) {
                    Swal.close()
                    if (xhr ?.responseJSON ?.error) {
                        if(xhr?.responseJSON?.message){
                            Swal.fire( xhr?.responseJSON?.message , '', 'error')
                        }
                        // if(xhr?.responseJSON?.error && error =="Bad Request"  ){
                        if(xhr?.responseJSON?.error && xhr.status == 400  ){
                            Swal.fire({
                                title: 'केहि फारम छेत्र अवैध छ |',
                            })
                            display_error_messages(xhr?.responseJSON?.error);
                        }
                    }
                }
            });
        });

        function display_error_messages(msg) {

            console.log({msg})

            $.each(msg, function(key, value) {
                let target = document.getElementById(`error_${key}`);

                if(target && target.children.length == 0)
                {
                    target.innerHTML = `${value}`;
                }
                //if ($(`#error_${key}`).children().length == 0) {
                  //  $(`#error_${key}`).append(`<span>${value}<span>`);
                //}
            });
        }
    });

    console.log("wok?")

</script>
 @livewireScripts
@endsection