@extends('layouts.app')

@section('css')
<!-- Responsive and DataTables -->
<link href="{{ asset('tema/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />

<link href="{{ asset('tema/plugins/switchery/switchery.min.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/tagsinput/jquery.tagsinput.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/clockpicker/jquery-clockpicker.min.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/toggles/toggles.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/timepicker/tempusdominus-bootstrap-4.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/timepicker/bootstrap-material-datetimepicker.css') }}" rel="stylesheet">
<link href="{{ asset('tema/plugins/bootstrap-select/bootstrap-select.min.css') }}" rel="stylesheet" />
<link href="{{ asset('tema/plugins/colorpicker/asColorPicker.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/jquery-multi-select/multi-select.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/sweet-alert/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Sweet Alert css -->
<link href="{{ asset('tema/plugins/sweet-alert/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="page-head">
    <h4 class="mt-2 mb-2">Daftar Broadcast</h4>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12">
        <div class="card m-b-30">
            <div class="card-body">
                <div class="text-center">
                    <a class="btn btn-outline-success" href="{{ route('post.create') }}"><i class="fa fa-plus"></i> Tambah</a>
                    <a class="btn btn-outline-warning" href="{{ route('post.trashed') }}"><i class="fa fa-list"></i> Draf</a>
                    <a class="btn btn-outline-success" href="javascript:;" onclick="$.Notification.autoHideNotify('success', 'top right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                </div>
                <br>
                <div class="table-responsive">
                <table class="table table-hover" id="tabel">
                    <thead>
                        <th>File</th>
                        <th>Judul</th>
                        <th class="text-center">Aksi</th>
                    </thead>
                    <tbody>
                    @if($posts->count() > 0)
                        @foreach($posts as $post)
                            <tr>
                                <td><img src="{{ url($post->featured) }}" alt="{{ $post->title }}" width="90px" height="50px"></td>
                                <td>{{ $post->title }}</td>
                                <td class="text-center">
                                    <!-- <a href="#" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModalLong">
                                        Kirim
                                    </a> -->
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                    <a href="#" class="btn btn-xs btn-outline-secondary btn-kirim" data-id='{{ $post->id }}' data-url='{{ url($post->featured) }}' data-content='{{ $post->content }}'  >
                                       <i class="fa fa-send"></i> Kirim
                                    </a>
                                    <a href="{{ route('post.edit', [ 'id'=>$post->id ]) }}" class="btn btn-xs btn-outline-info"><i class="fa fa-edit"></i>
                                        Ubah
                                    </a>
                                    <a href="{{ route('post.delete', [ 'id'=>$post->id ]) }}" class="btn btn-xs btn-outline-danger"><i class="fa fa-trash"></i>
                                        Buang
                                    </a>
                                    <a href="{{ route('pengumuman', [ 'slug'=>$post->slug, 'phone'=>'0' ]) }}" class="btn btn-xs btn-outline-warning"><i class="fa fa-eye"></i> Lihat
                                    </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <th colspan='3' class="text-center">Tidak Ada Pengumuman</th>
                        </tr>
                    @endif
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade"  tabindex="-1" id="my-modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Kirim Broadcast</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <input type="text" class="form-control ml-2" id="form-cari" placeholder="">
                    </div>

                    <button type="submit" class="btn btn-success ml-2" id='cari'>Search</button>
                </form>
                <div id="ket" style="height:100px;overflow-y: scroll;display: none">
                    Success : <strong id="sukses"></strong>
                    Warning : <strong id="peringatan"></strong>
                    <br>
                    <div id="log"></div>
                </div>

                <h6 class="mt-2 light-dark">Diagnosa</h6>

                <select class="select2 mb-3 select2-multiple" style="width: 100%" multiple="multiple" data-placeholder="Choose">
                    @foreach($diagnoses as $diagnosis)
                        <option value="{{ $diagnosis->code_diagnosis }}">{{ $diagnosis->nm_diagnosis }}</option>
                    @endforeach
                </select>

                <div class="page-head">
                    <h4 class="mt-2 mb-2">Pasien</h4>
                    <input type="checkbox" id="all-pasien"> Pilih Semua
                </div>
                <div style="height:150px;overflow-y: scroll;">
                    <table class="table table-hover tabel" >
                        <thead>
                            <th>#</th>
                            <th>Nama</th>
                            <th>Phone</th>
                            <th>Diagnosa</th>
                        </thead>
                        <tbody id='data-pasien'>

                            <!-- <tr>
                                <td><input type="checkbox"></td>
                                <td>as</td>
                                <td>089834</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>as</td>
                                <td>089834</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>as</td>
                                <td>089834</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>as</td>
                                <td>089834</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>as</td>
                                <td>089834</td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
                <div class="page-head">
                    <h4 class="mt-2 mb-2">Dokter</h4>
                    <input type="checkbox" id="all-dokter"> Pilih Semua
                </div>
                <div style="height:150px;overflow-y: scroll;">
                    <table class="table table-hover tabel">
                        <thead>
                            <th>Nama</th>
                            <th>Phone</th>
                        </thead>
                        <tbody id="data-dokter">

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="kirim">Kirim</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<!-- Responsive and datatable js -->
<script src="{{ asset('tema/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>

<script src="{{ asset('tema/plugins/timepicker/moment.js') }}"></script>
<script src="{{ asset('tema/plugins/clockpicker/jquery-clockpicker.min.js') }}"></script>
<script src="{{ asset('tema/plugins/tagsinput/jquery.tagsinput.min.js') }}"></script>
<script src="{{ asset('tema/plugins/switchery/switchery.min.js') }}"></script>
<script src="{{ asset('tema/plugins/toggles/toggles.min.js') }}"></script>
<script src="{{ asset('tema/plugins/timepicker/tempusdominus-bootstrap-4.js') }}"></script>
<script src="{{ asset('tema/plugins/timepicker/bootstrap-material-datetimepicker.js') }}"></script>
<!--colorpcker-->
<script src="{{ asset('tema/plugins/colorpicker/jquery-asColor.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/colorpicker/jquery-asGradient.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/colorpicker/jquery-asColorPicker.min.js') }}" type="text/javascript"></script>

<script src="{{ asset('tema/plugins/jquery-multi-select/jquery.multi-select.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/jquery-multi-select/jquery.quicksearch.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/bootstrap-inputmask/bootstrap-inputmask.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/bootstrap-select/bootstrap-select.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/spinner/spinner.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/select2/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/pages/jquery.form-advance.init.js') }}" type="text/javascript"></script>
<script src="{{ asset('tema/plugins/sweet-alert/sweetalert2.min.js') }}"></script>

<script src="{{ asset('tema/plugins/notifications/notify.min.js') }}"></script>
        <script src="{{ asset('tema/plugins/notifications/notify-metro.js') }}"></script>
        <script src="{{ asset('tema/plugins/notifications/notifications.js') }}"></script>
<script>
  $(document).ready(function() {

    let data = [];
    var id_pengumuman;
    var data_url;
    var data_content;
    var url = "{{ url('/') }}";

    $('#tabel').DataTable({
        "ordering": false,
    });
    // let data = [
    //     { nama: 'anjas', phone: '001', status: 'pasien', checkbox: false },
    //     { nama: 'anjas', phone: '002', status: 'pasien', checkbox: false },
    //     { nama: 'anjas', phone: '003', status: 'pasien', checkbox: true },
    //     { nama: 'didik', phone: '004', status: 'dokter', checkbox: false },
    //     { nama: 'kaka', phone: '005', status: 'dokter', checkbox: true }
    // ];



    function load_data(data){
        var html='';
        var html2='';
        $.each(data, function (key, val) {
            var cek = val.checkbox===true ? 'checked' : '';

            if(val.status === 'pasien'){
                html += '<tr>';
                html += '<td><input type="checkbox" value='+val.phone+' class="cek" '+cek+'></td>';
                html += '<td>'+val.nama+'</td>';
                html += '<td>'+val.phone+'</td>';
                html += '<td>'+val.diagnosa+'</td>';
                html += '</tr>';
            }
            if(val.status === 'dokter'){
                html2 += '<tr>';
                html2 += '<td><input type="checkbox" value='+val.phone+' class="cek" '+cek+'></td>';
                html2 += '<td>'+val.nama+'</td>';
                html2 += '<td>'+val.phone+'</td>';
                html2 += '</tr>';
            }
        });

        $('#data-pasien').html(html);
        $('#data-dokter').html(html2);

    }

    $('.select2-multiple').change(function(e){
        console.log($(".select2-multiple option :selected").toArray());
        var diagnosa = this.value;
        let d = data;
        $.ajax({
            url: url+'/api/diagnosa',
            dataType: 'json',
            type: 'post',
            //contentType: 'application/x-www-form-urlencoded',
            data: {
                diagnosa : diagnosa
            },
            success: function( data, textStatus, jQxhr ){

                let diagnosa_pasien = data.data;
                let temp = []
                $.each(d, function (key, val) {
                    if(val.status === 'dokter'){
                        temp.push({
                            nama : val.nama,
                            phone: val.phone,
                            status: val.status,
                            checkbox: val.checkbox

                        });

                    }
                    $.each(diagnosa_pasien, function (k, v) {

                    if(val.status === 'pasien' && val.phone===v.phone ){
                        temp.push({
                            nama : val.nama,
                            phone: val.phone,
                            status: val.status,
                            checkbox: val.checkbox,
                            diagnosa: val.diagnosa
                        });
                    }
                });
                });

                console.log(temp);

                var t = temp.sort((a) => (a.checkbox === false) ? 1 : -1 );

                load_data(t);


            },
            error: function( jqXhr, textStatus, errorThrown ){
                alert('Ada kesalahan di server');
                console.log( errorThrown );
            }
        });
    });

    $("#tabel-pengumuman").on('click', '.btn-kirim', function() {
        id_pengumuman = $(this).attr('data-id');
        data_url = $(this).attr('data-url');
        data_content = $(this).attr('data-content');

        //alert(data_content);

        $('.select2-multiple').multiSelect('deselect_all');
        $('#my-modal').modal('show');
        $('#all-dokter').prop('checked', false);
        $('#all-pasien').prop('checked', false);

        $.getJSON( url+"/api/kontak", function( d ) {
          data = d;
          load_data(data);
        });


    });

    $('#cari').click(function(){
        event.preventDefault();
        var cari = $('#form-cari').val();

        let cari_data = data;

        let temp = [];

        $.each(cari_data, function (key, val) {
            if(!val.nama.search(cari) || !val.phone.search(cari) || val.checkbox===true ){
                temp.push({
                    nama : val.nama,
                    phone: val.phone,
                    status: val.status,
                    checkbox: val.checkbox,
                    diagnosa: val.diagnosa
                });
            }
        });

        var t = temp.sort((a) => (a.checkbox === false) ? 1 : -1 );

        load_data(t);

    });

    $(".tabel").on('change', '.cek', function() {
        var phone = $(this).val();

        if(($(this).is(':checked'))){
            objIndex = data.findIndex((obj => obj.phone === phone));

            data[objIndex].checkbox = true;
        }else{
            objIndex = data.findIndex((obj => obj.phone === phone));

            data[objIndex].checkbox = false;
        }

        console.log(data)

    });

    $("#all-pasien").on('change', function() {

        var cek = $(this).is(':checked');
        cek===true ? true : false;
        const newArray = data.map(obj => {
          if (obj.status === 'pasien') {
            return {...obj, checkbox: cek };
          }

          return obj;
        });

        load_data(newArray);

        data = newArray;

    });

    $("#all-dokter").on('change', function() {

        var cek = $(this).is(':checked');
        cek===true ? true : false;
        const newArray = data.map(obj => {
          if (obj.status === 'dokter') {
            return {...obj, checkbox: cek };
          }

          return obj;
        });

        load_data(newArray);

        data = newArray;

    });

    $('#kirim').click(function(){

        let array = [];
        var cek = data.length;
        var str='';
        $.each(data, function (key, val) {
            if(val.checkbox===true ){
                // if(str === '' ){
                //     str = str.concat('', val.phone);
                // }else{
                //     str = str.concat(',', val.phone);
                // }

                // array.push({
                //     nama : val.nama,
                //     phone: val.phone,
                //     checkbox: val.checkbox
                // });

                var msg = data_content.replace("$nama", val.nama);

                // console.log('');
                // return false;

                var settings = {
                  "url": url+'/api/send_image',
                  "method": "POST",
                  "data": {

                    "number": val.phone,
                    "message": msg,
                    "file": data_url,
                    "date": "{{ date('Y-m-d') }}",
                    "time": "{{ date('H:i:s') }}"
                  },

                };

                $.ajax(settings).done(function (response) {
                  //array.push({response});

                  var res = JSON.parse(response);
                  console.log(res);
                  var stts = res.status === 'error' ? 'error' : 'success';
                  $.Notification.autoHideNotify(stts, 'top right', res.number, res.message);
                });
            }

        });

         $('#my-modal').modal('hide');
        // console.log(str);
        // return false



        // console.log(array);
        // return false;
        // $.ajax({
        //     url: url+'/api/kontak',
        //     dataType: 'json',
        //     type: 'post',
        //     data: {
        //         id_pengumuman : id_pengumuman,
        //         data : array
        //     },
        //     success: function( data, textStatus, jQxhr ){
        //         console.log(data);

        //         if(data === null){
        //             swal('Warning!', 'Cek koneksi anda', 'warning');

        //             return false;
        //         }

        //         if(data.status === '204'){
        //             swal('Warning!', data.message, 'warning');

        //             return false;
        //         }

        //         if(data.status === false){
        //             swal('Warning!', data.message, 'warning');

        //             return false;
        //         }

        //         swal('Success!', data.message, 'success');

        //         let log = data.data.message;
        //         console.log(log);
        //         var html = '';
        //         var success = 0;
        //         var warning = 0;
        //         $.each(log, function (key, val) {

        //             if(val.status===false){
        //                 warning++;
        //             }else{
        //                 success++;
        //             }

        //             html += val.phone+' '+val.status;
        //             html += '<br>';
        //         })
        //         $('#log').html(html);
        //         $('#sukses').html(success);
        //         $('#peringatan').html(warning);
        //         $('#ket').show();

        //     },
        //     error: function( jqXhr, textStatus, errorThrown ){
        //         alert('Ada kesalahan di server');
        //         console.log( errorThrown );
        //     }
        // });
    });


  });

</script>
@endsection