@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('nyaayik.add-dispute-type')
                                                </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('dispute-types.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 = "/nyaayik/dispute-types"
                        }
                    },
                    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