@extends('public-site.layouts.app')
@section('style')
    <style>
        p {
            color: black !important;
            font-size: 14px !important;
        }
    </style>
@endsection

@section('content')

<section class="faq-banner-section" style="background-image:url(images/background/9.jpg);">
    <div class="auto-container">
        <h1>Tracking</h1>
        <div class="text">Lacak Pengajuan Konsultasi Anda Secara Berkala</div>
    </div>
</section>
<!--End Faq Banner Section -->

<!-- Faq Search Section -->
<div class="faq-search-section">
    <div class="auto-container">
        <div class="form-group">
            <input type="search" id="code" name="code" value="" placeholder="Masukkan Kode Konsultasi. . ." required>
            <button type="submit" id="search-button"><span class="icon fa fa-search"></span></button>
        </div>
    </div>
</div>
<!-- End Faq Search Section -->

<!-- Faq Page Section -->
<section class="faq-page-section" style="min-height: 300px;">
    <div class="auto-container d-none">
        <ul class="accordion-box">
            <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> Detail Pengajuan Konsultasi</div>
                <div class="acc-content">
                    <div class="content">
                        <div id="code-value"></div>
                        <div id="table-response"></div>
                    </div>
                </div>
            </li>

            <!--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>Jadwal Pertemuan Konsultasi</div>
                <div class="acc-content">
                    <div class="content" id="content-meeting">
                        <div id="table-meeting"></div>
                    </div>
                </div>
            </li>
        </ul>

    </div>
</section>

@endsection

@section('js')

   <script>
     $(document).on('click', '#search-button', function() {
        let _token        = $('meta[name=csrf-token]').attr('content');
        var data = {_token: _token, code_request: $("input#code").val()};
        $.post('{{ route('search-tracking') }}', data , function(result) {

            $('.auto-container').removeClass('d-none');

            var tableResponse = `
                <label>Kode Konsultasi :</label>
                <p>${result.code_request}</p>
                <label>Nama Client :</label>
                <p>${result.client.name}</p>
                <label>Asal Organisasi :</label>
                <p>${result.client_organization.name}</p>
                <label>Judul :</label>
                <p>${result.title}</p>
                <label>Uraian :</label>
                <p>${result.intention}</p>
                <label>Tanggal Pengajuan: </label>
                <p>${new Date(result.created_at).toLocaleString()}</p>
            `;
            document.querySelector('#code-value').innerHTML = tableResponse

            if(result.consultation_response == null){
                document.querySelector('#content-meeting').innerHTML = "Tidak ada jadwal meeting"
            }else{
                var tableResponse = `
                        <p> Nama Client :   ${result.client.name} </p>
                        <p> Asal Organisasi :    ${result.client_organization.name} </p>
                        <p> Judul Pengajuan Konsultasi :   ${result.title} </p>
                        <p> Uraian Pengajuan:    ${result.intention} </p>
                        <p> Tanggal Pengajuan :    ${result.created_at} </p>
                        <p> Status :    ${result.consultation_response.status} </p>
                `;
                document.querySelector('#table-response').innerHTML = tableResponse

                if(result.consultation_response.meeting == null){
                    document.querySelector('#content-meeting').innerHTML = "Tidak ada jadwal meeting"
                }else{
                    console.log('tes')
                    var report = result.consultation_response["meeting"][result.consultation_response["meeting"].length-1]["report_overview"];
                    if(report == null || report == undefined){
                        dataReport = "Belum ada Hasil Laporan"
                    }else{
                        dataReport = report
                    }
                    var tableMeeting = `

                        <p>Konsultan : ${result.consultation_response["meeting"][result.consultation_response["meeting"].length-1]["user"]["name"]} </p>
                        <p>Waktu : ${result.consultation_response["meeting"][result.consultation_response["meeting"].length-1]["schedule"]}</p>
                        <p>Media :  ${result.consultation_response["meeting"][result.consultation_response["meeting"].length-1]["type"]}</p>
                        <p>Alamat :  ${dataReport} </p>
                        <p>Hasil Konsultasi : ${dataReport} </p>

                    `;
                    document.querySelector('#content-meeting').innerHTML = tableMeeting
                }

            }

        });

    });
   </script>

@endsection