@section('title',"Complaint Create")
@extends('layout.public')
@section('style')
    <style>
        .select2-container .select2-selection--single {
            height: 40px;
            line-height: 40px;

        }
        .select2-container .select2-selection--single .select2-selection__rendered {
            padding: 8px;
        }
        .select2-container {
            width: 100% !important;
        }
        .select2-container .select2-selection--single {
            border: 1.5px solid #68b664 !important;
            border-radius: 4px !important;
        }
        .select2-container .select2-dropdown {
            border: 1px solid #68b664 !important;
            border-radius: 4px !important;
        }
    </style>
@endsection
@section('content')
    <div class="col-lg-12 mb-4 order-0">
        <div class="card">
            <div class="d-flex align-items-end row">
                <div class="col-sm-7">
                    <div class="card-body">
                        <h5 class="card-title text-primary">Welcome, <b>{{ session('user_name')  }}</b> User! 🎉</h5>
                        <br>
                        <br>
                        <br>
                    </div>
                </div>
                <div class="col-sm-5 text-center text-sm-left">
                    <div class="card-body pb-0 px-0 px-md-4">
                        <img
                            src="{{ asset('assets/img/illustrations/man-with-laptop-light.png') }}"
                            height="140"
                            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>
            </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">
                        <h4 class="card-title">Create a Complaint</h4>
                        <p class="card-description">
                            Describe You Problem Here
                        </p>
                        <form class="forms-sample">@csrf
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="office_type">Office Type</label>
                                        <select class="form-control select2" name="office_type" id="office_type">
                                            <option disabled selected>Select Office</option>
                                            <option value="Store">Store</option>
                                            <option value="Fixed Asset">Fixed Asset</option>
                                        </select>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="complain_id">Complain Type</label>
                                        <select class="form-control select2" name="complain_id" id="complain_id"></select>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="others">Other Type</label>
                                <input type="hidden" name="unit_code" id="unit_code" value="{{ session('unit_code')  }}">
                                <input type="hidden" name="unit_name" id="unit_name" value="{{ session('unit_desc')  }}">
                                <input type="text" class="form-control" name="others" id="others" placeholder="Enter Other Complaint Type">
                            </div>
                            <div class="form-group">
                                <label for="desc">Complain Desc</label>
                                <input type="text" class="form-control" name="desc" id="desc" placeholder="Enter Complain Desc">
                                <div class="invalid-feedback"></div>
                            </div>
                            <button type="button" onclick="addData()" class="btn btn-primary mr-2 mt-3">Submit</button>
                            <button class="btn btn-light mt-3">Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')

    <script>
        $("#others").hide();
        var csrf_tokens = document.querySelector('meta[name="csrf-token"]').content;

        var urlss = "{{ url('getComplainTypes') }}";
        $.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 = $.parseJSON(data);
                var category = data;
                if (category != '') {
                    var markup = "<option disabled selected>Select Complain Type</option>";
                    for (var x = 0; x < category.length; x++) {
                        markup += "<option value=" + category[x].id + ">" + category[x].name + "</option>";
                    }
                    $("#complain_id").html(markup).show();
                } else {
                    var markup = "<option disabled selected>Select Complain Type</option>";
                    $("#complain_id").html(markup).show();
                }
            }
        });

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

        function addData() {
            url = "{{ url('complaint') }}";
            $.ajax({
                url: url,
                type: "POST",
                data: new FormData($("#itemDataAdd form")[0]),
                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