@extends('layouts.user_app')
@section('content')
    <!-- ================ start: common-inner-banner ================ -->
    <section class="help-section">
        <div class="custom-container2">
            <div class="top-search-box">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <ul class="search-help-sugtion-lists">
                <li>
                    <a href="#" class="custom-btn theme-border-btn">Getting started</a>
                </li>
                <li>
                    <a href="/FAQ" class="custom-btn theme-border-btn">Sending money</a>
                </li>
                <li>
                    <a href="#" class="custom-btn theme-border-btn">Receiving money</a>
                </li>
                <li>
                    <a href="#" class="custom-btn theme-border-btn">Changes, cancellations and refunds</a>
                </li>
                <li>
                    <a href="#" class="custom-btn theme-border-btn">Holds, reviews or rejections</a>
                </li>
                <li>
                    <a href="#" class="custom-btn theme-border-btn">Account and Security</a>
                </li>
                <li>
                    <a href="#" class="custom-btn theme-border-btn">Promotions</a>
                </li>
                <li>
                    <a href="#" class="custom-btn theme-border-btn">Technical issues</a>
                </li>
                <li>
                    <a href="#" class="custom-btn theme-border-btn">terms and policies</a>
                </li>
                <li class="divider custom-col-12"></li>
                <li class="custom-col-6">
                    <a href="#" class="custom-btn theme-border-btn" data-toggle="modal"
                        data-target="#message-modal">Message Us</a>
                </li>
                <li class="custom-col-6">
                    <a href="#" class="custom-btn theme-border-btn">Call Us</a>
                </li>
            </ul>
        </div>
        <!-- start: message-modal -->
        <div class="modal fade message-modal" id="message-modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>Send a request</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-x-lg" viewBox="0 0 16 16">
                                <path
                                    d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                            </svg>
                        </button>
                    </div>
                    <form name="message-frm" id="message-frm" method="post" action="{{ url('message-us') }}">
                        <meta name="csrf-token" content="{{ csrf_token() }}" />
                        <div class="modal-body">
                            <div class="row form-content">
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <label>E-mail address</label>
                                        <input type="email" class="form-control" name="email" id="email">
                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <label>Where do you live?</label>
                                        {{-- <select class="form-control select1">
                                            <option value="">--SELECT--</option>
                                            <option value="CANADA">CANADA</option>
                                            <option value="USA">USA</option>
                                            <option>INDIA</option>
                                            <option>FRANCH</option>

                                        </select> --}}
                                        <select class="form-control select1" name="location" id="location">
                                            <option value=""></option>
                                            <option value="AF">Afghanistan</option>
                                            <option value="AL">Albania</option>
                                            <option value="DZ">Algeria</option>
                                            <option value="AD">Andorra</option>
                                            <option value="AO">Angola</option>
                                            <option value="AR">Argentina</option>
                                            <option value="AM">Armenia</option>
                                            <option value="AU">Australia</option>
                                            <option value="AT">Austria</option>
                                            <option value="AZ">Azerbaijan</option>
                                            <option value="BS">Bahamas</option>
                                            <option value="BH">Bahrain</option>
                                            <option value="BD">Bangladesh</option>
                                            <option value="FR">France</option>
                                            <option value="DE">Germany</option>
                                            <option value="US">United States</option>
                                        </select>
                                        {{-- <script>$('#field4860fb3b7d994e8d964fc71b24e32752').on('change',function(e){ e.stopPropogation(); });</script> --}}

                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <label>Subject</label>
                                        <input type="text" class="form-control" name="subject" id="subject">
                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea id="editor" name="desc"></textarea>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <label>Attachments (optional value)</label>
                                        <div class="add-file-input-box" id="file_div">
                                            <h6><a>Add file</a> or drag files here</h6>
                                            <input type="file" id="file" name="file">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="send-btn theme-solid-btn">Send</button>

                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- end: message-modal -->
    </section>
    <!-- ================ end: about-us-sec ================ -->
    {{-- <script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => {
                console.error(error);
            });
    </script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js">
    </script>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://momentjs.com/downloads/moment.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
    </script>
    <!-- CK Editor -->
    <script src="https://adminlte.io/themes/AdminLTE/bower_components/ckeditor/ckeditor.js"></script>
    <script>
        CKEDITOR.replace('editor');
    </script>
    <script>
        $("#message-frm").submit(function(e) {
            e.preventDefault();

            CKEDITOR.instances['editor'].updateElement();
            return false;
        });


        $("#message-frm").validate({
            ignore: [],
            debug: false,
            rules: {
                email: "required",
                location: "required",
                subject: "required",
                desc: "required",
            },
            errorClass: "my-error-class",
            errorPlacement: function(error, element) {
                if (element.attr('id') == "editor") {
                    error.insertAfter(element.closest(".form-group").find("#cke_editor"));
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {

                var desc = $('[name="desc"]').val();
                var _token = $("input[name='_token']").val();
                var email = $("#email").val();
                var location = $("#location").val();
                var subject = $('#subject').val();
                var file = $("input[name='file']").prop('files')[0];
                if(file){
                 var doc_file = file;
                }else{
                 var doc_file = '';

                }

                
                var formData = new FormData();

                formData.append("email", email);
                formData.append("location", location);
                formData.append("desc", desc);
                formData.append("subject", subject);
                formData.append("file", doc_file);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: "{{ route('message-us') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if ($.isEmptyObject(data.error)) {
                            $url = '/help-desk';
                            swal({
                                title: "Great!",
                                text: "We will contact you shortly",
                                type: "success"
                            }).then(function() {
                                window.location.href = $url;
                            }); 


                        } else {
                            if (data.error.file) {
                                $("#file_div").after(
                                    "<span id='name-error' class='my-error-class' for='name'>Invalid File type. Please choose: PDF only. </span>"
                                );


                            }
                        }
                    }
                });
            }
        });
    </script>
    <style>
        .my-error-class {
            color: #FF0000 !important;
            /* red */
        }

        input.my-error-class,
        textarea.my-error-class,
        select.my-error-class {
            border: 1px solid #FF0000 !important;
            outline: none !important;
            box-shadow: none !important;
        }
    </style>
@endsection