@extends('layouts.Home.app')

@section('content')
<style>
    .select2 {
        width:100%!important;
    }
</style>
    <div class="container">

        <div class="page-section">
            <div class="container">
                    <div class="col-lg-12">
                        <div class="card-service wow fadeInUp" style="max-width: none">
                            <div class="header">
                                <div>
                                    {{-- <img src="../assets/img/forgot.png" style="height: 10em"> --}}
                                    <h1>Form Konsultasi</h1>
                                </div>
                            </div>
                            <div class="body">
                                <form id="contactForm1" action="/Konsultasi" method="post">
                                    <div class="form-group">
                                        <div class="col-md-8 mx-auto">
                                            <input id="email" placeholder="Produk" type="text"
                                                class="form-control" name="produk" value="" required autocomplete="text"
                                                autofocus>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-8 mx-auto">
                                            <input id="email" placeholder="Unit Usaha (Jika Tidak Memiliki Unit Usaha Bisa di isi dengan - )" type="text"
                                                class="form-control" name="unitusaha" value="" required autocomplete="text"
                                                autofocus>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-8 mx-auto">
                                            <select class="form-control askpek" name="askpek" required>
                                                <option value="" disabled selected>Pilih Askpek</option>
                                                @foreach ($aspek as $as)
                                                 <option value="{{$as->id}}" class="form-control"><span >{{$as->name}}</span></option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-8 mx-auto">
                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                                placeholder="Kendala" name="kendala" required></textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-8 mx-auto">
                                            <select class="form-control teknologi" name="kategori" required>
                                                <option value="" disabled selected>Pilih Jenis Teknologi</option>
                                                @foreach ($kategori as $k)
                                                 <option value="{{$k->id}}" class="form-control"><span >{{$k->name}}</span></option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-8 mx-auto">
                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                                placeholder="Teknologi Yang Di butuhkan " name="teknologi_dibutuhkan" required></textarea>
                                        </div>
                                    </div>

                                            <button type="submit" class="btn btn-primary submit">
                                                Mulai Konsultasi
                                            </button>
                                </form>
                            </div>
                        </div>
                    </div>
            </div> <!-- .container -->
        </div>
    </div>
@endsection


@section('footer')
    <script>
        // let my_id = "{{ Auth::id() }}";

        $(document).ready(function() {
            // ajax setup form csrf token
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var frm = $('#contactForm1');

            frm.submit(function (e) {
                $(".submit").attr("disabled", true);
                e.preventDefault();

                $.ajax({
                    type: frm.attr('method'),
                    url: frm.attr('action'),
                    data: frm.serialize(),
                    success: function (data) {
                        $(".submit").attr("disabled", false);
                        Swal.fire(
                        'Berhasil Membuat Konsultasi',
                        '',
                        'success'
                        ).then(
                            window.location.href = "/Konsultasi/List"
                        )
                    },
                    error: function (data) {
                        Swal.fire(
                        'Gagal Memulai Konsultasi',
                        '',
                        'error'
                        )
                         $(".submit").attr("disabled", false);
                    },
                });
            });

        });


        $(".teknologi").select2({
            allowClear: true,
            placeholder: "Pilih Jenis Teknologi"
        })
        $(".askpek").select2({
            allowClear: true,
            placeholder: "Pilih Aspek"
        })
    </script>
@stop