@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="add-msform">
                                        @csrf
                                        <div class="form-group mt-2">
                                            <label for="date">मिति</label>
                                            <input class="form-control nep-date-picker-en " name="date" id="date"
                                                placeholder="">
                                            <span class="text-danger" id="error_date">
                                                @error('date')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="form-group mt-2">
                                            <label for="">
                                                निर्णय</label>
                                            <textarea class="form-control input-text " name="decision" id="decision" placeholder=""></textarea>
                                            <span class="text-danger" id="error_decision">
                                                @error('decision')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="form-group mt-2">
                                            <label for="">
                                                अर्काे कार्यबाही</label>
                                            <textarea class="form-control input-text " name="next_follow_up_topic" id="next_follow_up_topic" placeholder=""></textarea>
                                            <span class="text-danger" id="error_next_follow_up_topic">
                                                @error('next_follow_up_topic')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>

                                        <div class="form-group mt-2">
                                            <label for="">
                                                अर्काे कार्यबाहीकाे मिति</label>
                                            <input type="text" name="next_follow_up_date"
                                                class="form-control nep-date-picker-en " id="next_follow_up_date"
                                                placeholder="">
                                            <span class="text-danger" id="error_next_follow_up_date">
                                                @error('next_follow_up_date')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="form-group mt-2">
                                            <label for="">
                                                अवस्था</label>
                                            <select id=status name="status" class="form-control">
                                                <option value="">कुनै विकल्प छान्नुहाेस्</option>
                                                <option value="in_process">चलिरहेकाे </option>
                                                <option value="completed">सम्पन्न </option>
                                                <option value="rejected">दरपीठ भएको </option>
                                            </select>
                                            <span class="text-danger" id="error_status">
                                                @error('status')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                        <div class="modal-footer mt-3">
                                        <button type="submit" id="submit" name="next"
                                            class="btn_palika"><i class="fas fa-save"></i> सेभ </button>
                                        </div>
                                    </form>
                                </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 type="text/javascript">
        function clearErrors() {
            $('.modalerrors').html('');
            $('.modalerror').removeClass('alert alert-danger');
        }

        $(document).ready(function() {

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


            $('#add-msform').on('submit', (function(e) {
                e.preventDefault();
                clearErrors();
                var date = $('#date').val();
                var next_follow_up_topic = $('#next_follow_up_topic').val();
                var decision = $('#decision').val();
                var next_follow_up_date = $('#next_follow_up_date').val();
                var status = $('#status').val();
                var data = {
                    date: date,
                    decision: decision,
                    next_follow_up_topic: next_follow_up_topic,
                    next_follow_up_date: next_follow_up_date,
                    status: status,
                    _token: "{{ csrf_token() }}",
                }

                var id = {{ $dispute->id }}

                $.ajax({
                    type: "PUT",
                    url: "{{ route('disputes-followup.update', '') }}" + "/" + id,
                    data: data,
                    success: function(response) {
                        if (response.status == 200) {
                            Swal.fire({
                                position: 'center',
                                icon: 'success',
                                title: response.message,
                                showConfirmButton: false,
                                timer: 1500
                            })
                            window.location =  "/nyaayik/disputes"

                        }
                    },
                    error: function(xhr, status, error) {
                        if (xhr?.responseJSON?.error) {
                            if (xhr.status != 400) {
                                if (xhr?.responseJSON?.message) {
                                    Swal.fire(xhr?.responseJSON?.message, '', 'error')
                                }
                            }

                            if (xhr?.responseJSON?.error && xhr.status == 400) {
                                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