@section('title',"Create Complaint")
@extends('layout.public')
@section('content')
<div class="row m-1">
    <div class="col-lg-12 mb-1">
        <div class="card">
            <div class="d-flex align-items-end row">
                <div class="col-sm-7">
                    <div class="row">
                        <div class="col-auto">
                            <img src="{{ asset('assets/img/logo.png') }}" alt="BPDB logo" style="max-height: 100px;">
                        </div>
                        <div class="col-auto">
                            <h3 class="card-title text-dark">Welcome to IVVR Help Desk</h3>
                            <h5 class=" text-dark">Create Complaint</h5>
                        </div>
                    </div>
                </div>
                <div class="col-sm-5 text-center text-sm-left">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8" style="text-align: right">
                                <img src="{{ asset('assets/img/illustrations/man-with-laptop-light.png') }}" height="70" alt="View Badge User"
                                     data-app-dark-img="illustrations/man-with-laptop-dark.png" data-app-light-img="illustrations/man-with-laptop-light.png"/>
                            </div>
                            <div class="col-md-4">
                                <div class="mt-2">
                                    <h6 class="text-dark mb-0">User: {{session('user_name')}} - {{session('unit_desc')}}</h6>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST">
                                        @csrf
                                        </br>
                                        <button type="submit" class="btn btn-sm btn-outline-warning">
                                            Logout
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class=" card-body" id="itemDataAdd">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <a href="javascript:history.back()" class="btn btn-sm btn-outline-secondary">
                                ← Back To Home
                            </a>
                            <h5 class="mb-0"> <span class="badge bg-primary"></span></h5>
                        </div>
                        <form class="forms-sample" enctype="multipart/form-data">@csrf
                            <div class="row">
                                <input type="hidden" value="{{session('user_code')}}" id="user_id" name="user_id">
                                <input type="hidden" value="{{session('unit_code')}}" id="unit_code" name="unit_code">
                                <div class="col-md-6">
                                    <label for="desc">User Name :</label>
                                    <input type="text" readonly value="{{session('user_name')}}" class="form-control form-control-sm" name="user_name" id="user_name" placeholder="User Name">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-6">
                                    <label for="desc">Office Name :</label>
                                    <input type="text" readonly value="{{session('unit_desc')}}" class="form-control form-control-sm" name="unit_desc" id="unit_desc" placeholder="Office Name">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-6 mt-1">
                                    <div class="form-group">
                                        <label for="complain_id">Complaint Type :</label>
                                        <select class="form-control select2" name="complain_id" id="complain_id"></select>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-6 mt-1">
                                    <div class="form-group">
                                        <div class="col-md">
                                            <label for="complain_id">Module :</label>
                                            <div class="form-group">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="module" id="module" value="Store" checked>
                                                    <label class="form-check-label" for="module1">Store</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="module" id="module" value="FixedAsset">
                                                    <label class="form-check-label" for="module2">Fixed Asset</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-1" id="others_div">
                                    <div class="form-group">
                                        <label for="complain_id">Please Describe the Other Complaint Type :</label>
                                        <input type="text" class="form-control form-control-sm" name="others" id="others" placeholder="Describe Others Problem Type">
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-1">
                                    <label for="desc">Remarks :</label>
                                    <textarea class="form-control" name="remarks" id="remarks" rows="2"></textarea>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-6 mt-1">
                                    <label for="desc">Attache File :</label>
                                    <input class="form-control form-control-sm" type="file" name="file_path[]" id="file_path" multiple="">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="row text-center">
                                <div class="col-md-12">
                                    <button type="button" onclick="addData()" class="btn btn-primary mr-2 mt-3">Submit</button>
                                    <button type="reset" class="btn btn-light mt-3">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        $("#others_div").hide();
        var csrf_tokens = document.querySelector('meta[name="csrf-token"]').content;
        var urlss = "{{ url('complainTypes') }}";

        $.ajax({
            url: urlss,
            type: 'GET',
            data: {'ViewType': 'mjr', "_token": csrf_tokens},
            datatype: 'JSON',
            success: function (data) {
                console.log("Complain Type Data Get Successfully");

                var category = data;
                var markup = "<option disabled selected>Select Complaint Type</option>";

                if (category != '') {
                    for (var x = 0; x < category.length; x++) {
                        markup += "<option value=" + category[x].ID + ">" + category[x].NAME + "</option>";
                    }
                }

                $("#complain_id").html(markup).show();

                $('#complain_id').select2({
                    placeholder: 'Select Complaint Type',
                    allowClear: true,
                    width: '100%'
                });

            }
        });

        $("#complain_id").change(function () {
            var complain_id = this.value;
            if(complain_id=='101000001'){
                $("#others_div").show();
            }else {
                $("#others_div").hide();
            }
        });

        function addData() {
            //let formData = new FormData($('#itemDataAdd')[0]);
            let formData = new FormData($("#itemDataAdd form")[0]);

            url = "{{ url('complain') }}";
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.statusCode == 200) {
                        swal({
                            title: "Success!",
                            text: data.statusMsg,
                            icon: "success"
                        });
                        $("#itemDataAdd form")[0].reset();
                    }else if (data.statusCode == 204) {
                        showErrors(data.errors);
                    }else{
                        swal({
                            text: data.statusMsg,
                            icon: "error",
                        });
                    }
                }, error: function (data) {
                    swal({
                        text: "Internal Server Error",
                        icon: "question"
                    });
                }
            });
            return false;
        };

    </script>
@endsection