@extends('client.layouts.app')

@section('content')




    <div class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-6">
                    <h2 class="mb-4" style="color:#28A6DE">Adakah Keluhan dari layanan kami ?</h2>
                    <img src="{{ asset('assets/assets/images/auth/cs@1x-25fps.gif') }}" alt="" class="img-fluid"
                        loading="lazy" style="width:90%">
                </div>
                <div class="col-md-12 col-lg-6 mt-4 mt-md-0">

                    <form method="POST" class="needs-validation" id="form-data" name="form-data" validate>
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label for="full-name" class="form-label">Nama Lengkap</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Nama Lengkap" required>
                        </div>
                        <div class="form-group">
                            <label for="your-email" class="form-label">Email</label>
                            <input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <label for="your-email" class="form-label">No HP</label>
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="No HP" required>
                        </div>
                        <div class="form-group">
                            <label for="category" class="form-label">Kategori</label>
                            <select class="form-select" id="complain_category_id" name="complain_category_id" required>
                                <option value="">-- Pilih Kategori --</option>
                                @foreach($complain_category as $category)
                                    <option value="{{$category['id']}}">{{$category['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="priority" class="form-label" required>Prioritas</label> <br>
                            <div class="btn-group">
                                <label class="btn-priority">
                                    <input type="radio" name="priority" value="Rendah"><img src="{{ asset('assets/assets/images/auth/icon-low.png') }}">&nbsp;&nbsp;Rendah
                                </label>
                                <label class="btn-priority">
                                    <input type="radio" name="priority" value="Sedang"><img src="{{ asset('assets/assets/images/auth/icon-medium.png') }}">&nbsp;&nbsp;Sedang
                                </label>
                                <label class="btn-priority">
                                    <input type="radio" name="priority" value="Tinggi"><img src="{{ asset('assets/assets/images/auth/icon-high.png') }}">&nbsp;&nbsp;Penting
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="your-subject" class="form-label">Subject</label>
                            <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject Komplain" required>
                        </div>
                        <div class="form-group mb-3">
                            <label for="your-message" class="form-label">Deskripsi</label>
                            <textarea id="description" name="description" rows="5" class="form-control" placeholder="Sampaikan dan Jelaskan Komplain Anda..." required></textarea>
                            <input type="hidden" class="form-control" id="is_active" name="is_active" value="1">
                        </div>
                        <div class="form-group">
                            <label for="attachment" class="form-label">Lampiran (Foto/PDF)</label>
                            <input type="file" class="form-control" id="file" name="file" accept="image/png, image/gif, image/jpeg">
                            <input class="form-control" type="hidden" id="attachment" name="attachment" value="none.png" placeholder="image">
                            <img src="{{ asset('/uploads/none.png') }}" id="image-preview" name="image-preview" style="border-radius: 5%; margin-top: 15px; max-width: 300px;">
                        </div>
                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="accept" name="accept" onchange="document.getElementById('submit').disabled = !this.checked;">
                            <label class="form-check-label" for="customCheck1" style="color:white;">
                            Dengan Mengklik, Anda Setuju Untuk Menggunakan Syarat & Ketentuan “Formulir” Kami
                            </label>
                        </div>
                        <input type="submit" id="submit" name="submit" href="#" class="btn btn-primary" value="Submit" disabled  style="border-color: black !important;"/>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.btn-priority').forEach(function(button) {
            button.addEventListener('click', function() {
                document.querySelectorAll('.btn-priority').forEach(function(btn) {
                    btn.classList.remove('active');
                });
                button.classList.add('active');
                button.querySelector('input').checked = true;
            });
        });

        // handle upload image
        $('#file').change(function(){
            // preview
            $('#image-preview').attr('display', 'block');
            var oFReader = new FileReader();
            oFReader.readAsDataURL( $("#file")[0].files[0]);
            oFReader.onload = function(oFREvent) {
                $('#image-preview').attr('src', oFREvent.target.result);
            };

            // upload
            formdata = new FormData();
            if($(this).prop('files').length > 0) {
                file =$(this).prop('files')[0];
                formdata.append("image", file);
            }
            $.ajaxSetup({
                headers:{}
            });
            $.ajax({
                url: '/api/upload',
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (result) {
                    if(result['success'] == true) {
                        $('#attachment').val(result['data']['url']);
                    }
                }
            });
        });

        var check_accept = document.getElementById('accept');
        var btn_submit = document.getElementById('submit');
        check_accept.onchange = function() {
            btn_submit.disabled = !this.checked;
        };

        // handle post
        $('#form-data').submit(false);
        $("#form-data").submit( function () {

            if($(this).valid()) {
                var form = $("#form-data").serializeArray();

                var formdata = {};
                $.map(form, function(n, i){
                    formdata[n['name']] = n['value'];
                });

                formdata['status'] = 'Menunggu Konfirmasi';
                formdata['source'] = 'web';
                formdata['is_active'] = '0';

                $.ajaxSetup({
                    headers:{}
                });
                $.ajax({
                    url: '/api/complain',
                    type: "POST",
                    data: JSON.stringify(formdata),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            Swal.fire({
                                icon: "success",
                                // title: "Komplain berhasil tersimpan.",
                                html: 'Terima kasih <b>'+result['data']['name']+'</b> atas laporannya.<br>Laporan anda telah tersimpan dengan id <b>'+result['data']['id']+'</b>. <br>Anda dapat memantau status komplain di <b>halaman status</b> dengan memasukkan id komlain/email/no hp.',
                                confirmButtonColor: '#3A57E8',
                            }).then((result) => {
                                window.location.replace("{{ url('/status') }}");
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            });
                        }
                    }
                });
            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }
            return false;
        });
    </script>
@endsection