@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
                                    <div class="">
                                        <div class="card mt-3">
                                            <div class="card-body">
                                                <label for="" class="form-label">
                                                    <b>नगर विवरण</b>
                                                </label>
                                                @livewire("municipality-profile.add-municipality-profile")
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" id="submit" name="next" class="save action-button btn-primary"><i class="fas fa-save"></i> सेभ </button>
                                </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>

    $(document).ready(function() {
        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'
            });
        })
    });

</script>

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

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

        $('#msform').on("submit",(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('municipality-profile.store')}}"
                , method: "POST"
                , data: data
                    //, 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 = "/municipality-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) {

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

                if (target && target.children.length == 0) {
                    target.innerHTML = `${value}`;
                }
            });
        }
    });

</script>
@livewireScripts
@endsection