@extends('public-site.layouts.app')

@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .faq-text{
        font-family: 'Playfair Display', serif;
        font-size: 32px;
        font-weight: 700;
        text-align: center;
    }

    .img-banner{
        background-image: url('images/logo-landingpage.png')
        background-size: 150px;
        width: 300px;
        /* color: black;
        background-color: black; */
    }

    .poppins-text{
        font-family: 'Poppins'
    }

    h2.title-banner-text{
        color: black
    }

    .link-box{
        margin-top: 20px !important;
    }

    .inner{
        padding: 170px 0px !important;
    }

</style>
@endsection

@section('content')


<!-- Bnner Section -->
<section class="banner-section">
    <div class="banner-carousel owl-carousel owl-theme">
        <!-- Slide Item -->
        <div class="slide-item" style="background-image: url(images/big/banner1.png);">
            <div class="auto-container clearfix">
                <!-- Content Box -->
                <div class="content-box">
                    <div class="inner">
                        <div class="img-banner">
                            <img src="{{ asset('images/logo-landingpage.png') }}" >
                        </div>
                        <div class="text-dark">Mudah Lapornya, Cepat Responnya</div>
                        <div class="link-box">
                            <a href="{{ url('/#form-pengajuan') }}" class="theme-btn btn-style-two"><i>Ajukan Konsultasi</i> <span class="arrow flaticon-next-8"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide Item -->
        <!--<div class="slide-item" style="background-image: url(images/big/banner2.png);">-->
        <!--    <div class="auto-container clearfix">-->
                <!-- Content Box -->
        <!--        <div class="content-box right-box">-->
        <!--            <div class="inner">-->
        <!--                <div class="img-banner">-->
        <!--                    <img src="{{ asset('images/logo-landingpage.png') }}">-->
        <!--                </div>-->
        <!--                <h2 class="text-dark"></h2>-->
        <!--                <div class="text-dark">Independent Personal & business advice based on established <br> research methods & knowledge experts.</div>-->
        <!--                <div class="link-box">-->
        <!--                    <a href="{{ url('/#form-pengajuan') }}" class="theme-btn btn-style-two"><i>Ajukan Konsultasi</i> <span class="arrow flaticon-next-8"></span></a>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--    </div>-->
        <!--</div>-->
        <!-- Slide Item -->
        {{-- <div class="slide-item" style="background-image: url({{ asset('images/big/banner1.png') }});">
            <div class="auto-container clearfix">
                <!-- Content Box -->
                <div class="content-box">
                    <div class="inner">
                        <div class="img-banner">
                            <img src="{{ asset('images/logo-landingpage.png') }}" >
                        </div>
                        <div class="text-dark">Independent Personal & business advice based on established <br> research methods & knowledge experts.</div>
                        <div class="link-box">
                            <a href="{{ url('/#form-pengajuan') }}" class="theme-btn btn-style-two"><i>Ajukan Konsultasi</i> <span class="arrow flaticon-next-8"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>
</section>

<section class="faq-page-section" id="cara-kerja">
    <div class="auto-container">
        <h1 class="faq-text align-center p-4">Cara Kerja </h1>
        <!--Accordion Box-->
        <ul class="accordion-box">
            @foreach($procedure as $data)
            <!--Block-->
            <li class="accordion block wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                <div class="acc-btn "><span class="left-icon flaticon-question"></span> <div class="icon-outer"><span class="icon icon-plus flaticon-right-arrow"></span> </div> {{ $data->judul }}</div>
                <div class="acc-content">
                    <div class="content">
                        <p>{{ $data->penjelasan }}</p>
                    </div>
                </div>
            </li>
            @endforeach
        </ul>

    </div>
</section>

<section class="form-pengajuan" id="form-pengajuan">
    <div class="checkout-page">
        <!--Lower Content-->
         <div class="lower-content">
             <div class="auto-container">
                     <!--Order Column-->
                         <div class="checkout-form">
                         <form method="post" action="{{ route('consultation.create') }}" class="pengajuanform" id="pengajuanform">
                            {{ csrf_field() }}
                             <div class="row clearfix">
                                 <!--Column-->
                                <div class="column col-lg-12 col-md-12 col-sm-12">
                                     <div class="checkout-title">
                                         <h2 class="poppins-text">Form Pengajuan</h2>
                                         {{-- <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia nisi laborum tenetur? Illum eos veritatis corrupti quos odio vero soluta quis quae voluptate! Velit necessitatibus optio quo aperiam, molestiae iste.</div> --}}
                                     </div>
                                     <div class="row clearfix">

                                        <input type="hidden" name="client_id">
                                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                            <div class="field-label">Nomor Wa <sup>*</sup></div>
                                            <input type="text" name="no_wa" required autocomplete="off">
                                            <div id="confirm" class="btn btn-primary mt-3" style="vertical-align: middle;">Konfirmasi</div>
                                        </div>

                                        <div class="form-group col-md-12 col-sm-12 col-xs-12 step-one d-none">
                                            <div class="field-label">Nama <sup>*</sup></div>
                                            <input type="text" name="name" required autocomplete="off">
                                        </div>

                                        <div class="form-group col-md-12 col-sm-12 col-xs-12 step-one d-none">
                                            <div class="field-label">Email</div>
                                            <input type="email" name="email" autocomplete="off">
                                        </div>

                                        <div class="form-group col-md-12 col-sm-12 col-xs-12 step-one d-none">
                                            <div class="field-label">Tipe Instansi <sup>*</sup></div>
                                            <select name="tipe" id="tipe">
                                                <option value="" selected disabled> Pilih Tipe</option>
                                                <option value="gov" >Pemerintah</option>
                                                <option value="ngov">Non Pemerintah</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="step-two column col-lg-12 col-md-12 col-sm-12 d-none">
                                    <div class="row clearfix">
                                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                            <div class="field-label">Instansi <sup>*</sup></div>
                                            <input type="text" name="instansi"  list="nama" value="" placeholder="" autocomplete="off">
                                            <datalist id="nama">
                                                @foreach ($organizations as $organization)
                                                    <option value="{{ $organization->name }}">
                                                @endforeach
                                              </datalist>
                                        </div>

                                        <div class="form-group col-md-12 col-sm-12 col-xs-12 d-none" id="nip" >
                                            <div class="field-label"> NIP <sup>*</sup></div>
                                            <input type="text" name="nip" autocomplete="off">
                                        </div>

                                        <div class="form-group col-md-12 col-sm-12 col-xs-12 d-none" id="nik">
                                            <div class="field-label">NIK <sup>*</sup></div>
                                            <input type="text" name="nik"  autocomplete="off">
                                        </div>

                                        <div class="form-group col-md-12 col-sm-12 col-xs-12" >
                                            <div class="field-label">Judul Pengajuan  <sup>*</sup></div>
                                            <input type="text" name="title" required autocomplete="off">
                                        </div>

                                         <!--Form Group-->
                                         <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                             <div class="field-label">Uraian Pengajuan <sup>*</sup></div>
                                             <textarea type="text" name="intention" required autocomplete="off"></textarea>
                                         </div>

                                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                            <div class="field-label">Lampiran</div>
                                            <div class="needsclick dropzone" id="document-dropzone">

                                            </div>
                                        </div>
                                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                            <button type="submit" class="theme-btn btn-style-two" id="ajukan"><i>Ajukan</i></button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="faq-page-section" id="pertanyaan">
    <div class="auto-container">
        <h1 class="faq-text align-center p-4"> Pertanyaan Populer </h1>
        <!--Accordion Box-->
        <ul class="accordion-box">
            @foreach($faq as $data)
            <!--Block-->
            <li class="accordion block wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                <div class="acc-btn"><span class="left-icon flaticon-question"></span> <div class="icon-outer"><span class="icon icon-plus flaticon-right-arrow"></span> </div> {{ $data->judul }}</div>
                <div class="acc-content">
                    <div class="content">
                        <p>{{ $data->penjelasan }}</p>
                    </div>
                </div>
            </li>
            @endforeach
        </ul>

    </div>
</section>

@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function(){
        $("#confirm").click(function(){
            const payload = {
                _token: $('meta[name=csrf-token]').attr('content'),
                phone: $('input[name=no_wa]').val()
            }

            $.ajax({
                type : 'POST',
                data: payload,
                url : "{{ route('phonecheck') }}",
                success : function(data){
                    console.log(data)
                    if(data.found){
                        $('input[name=client_id]').val(data.data.id)
                        if(data.data.name){
                            $('input[name=name]').val(data.data.name)
                            $('input[name=name]').prop('readonly',true)
                        }
                        if(data.data.email){
                            $('input[name=email]').val(data.data.email)
                            $('input[name=email]').prop('readonly',true)
                        }
                        if(data.data.nip){
                            $('input[name=nip]').val(data.data.nip)
                            $('input[name=nip]').prop('readonly',true)
                        }
                        if(data.data.nik){
                            $('input[name=nik]').val(data.data.nik)
                            $('input[name=nik]').prop('readonly',true)
                        }
                    }

                    $('.step-one').removeClass('d-none');
                    $("#confirm").addClass('d-none');
                }
            });
            return false;
        })

        $("#pengajuanform").submit(function(e){
            e.preventDefault();
            $.ajax({
                type : 'POST',
                data: $("#pengajuanform").serialize(),
                url : '{{ route('consultation.create') }}',
                success : function(data){
                    // $("#download_link").html(data);
                    console.log(data);
                    Swal.fire(
                        {
                            title : "Pengajuan Berhasil",
                            text : `Kode Konsultasi Anda ${data.code}`,
                            type : "success"
                        }
                    ).then(function(){
                        location.reload(true);
                    })

                }
            });
            return false;
        });



        $('#tipe').on('change', function() {
            $('.step-two').removeClass('d-none');
            if(this.value == 'gov'){
                $('#nip').removeClass('d-none');
                $('#nik').addClass('d-none');
            }else{
                $('#nik').removeClass('d-none');
                $('#nip').addClass('d-none');
            }

        });
    });

    var uploadedDocumentMap = {}
    var uploadedDocumentName = {}
    var documentId = [];
    Dropzone.options.documentDropzone = {
        url: '{{ route('projects.storeMedia') }}',
        maxFilesize: 2, // MB
        addRemoveLinks: true,
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function (file, response) {
            $('form').append('<input type="hidden" name="document[]" value="' + response.document.id + '">')
            uploadedDocumentMap[file.name] = response.document.id
            uploadedDocumentName[file.name] = response.name
            documentId.push(response.document.id);
        },
        removedfile: function (file) {
            file.previewElement.remove()
            var name = ''
            var id = ''
            if (typeof file.file_name !== 'undefined') {
                name = file.file_name
            } else {
                id = uploadedDocumentMap[file.name];
                name = uploadedDocumentName[file.name];
            }

            $('form').find('input[name="document[]"][value="' + id + '"]').remove();

            $.ajax({
                url: '{{ route('projects.removeMedia') }}',
                type: "POST",
                data: { 'name': file.name},
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}",
                    'id' : id,
                    'name' : name,
                },
            });

        },
        init: function () {
            @if(isset($project) && $project->document)
                var files = {!! json_encode($project->document) !!}
                for (var i in files) {
                    var file = files[i]
                    this.options.addedfile.call(this, file)
                    file.previewElement.classList.add('dz-complete')
                    $('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
                    console.log("file name init for " + file);
                }
            @endif
        }
    }



</script>
@endsection