@extends('layouts.main')

@section('container')
<div class="card">
    <div class="card-header">
    <table width="100%">
        <tr>
            <td>
                <form class="data-table-search">
                    <div class="row" style="">
                        <div class="col-4 col-md-3" style="margin-bottom: 10px;">
                            <label>Kata Kunci</label>
                            <input type="text" name="keyword" id="keyword" class=" form-control form-control-sm"
                                placeholder="Cari Nama, No. Handphone atau Email" value="{{ request()->get('keyword') }}">
                        </div>

                        <div>
                            <button class="btn btn-secondary btn-sm" type="submit"
                                style="margin-top: 28px; float:right"><i class="fa fa-search"
                                    style="margin-right:5px"></i>Cari</button>
                        </div>
                    </div>
                </form>
            </td>
        </tr>
    </table>
</div>
    <div class="card-body">
      <div class="scroll-x-table">
        <table class="table table-bordered table-striped table-condensed datatable-ajax"
        data-ajax-context="hubungi_kami"
        data-ajax-url="{{ route('admin.hubungi.ajax.list') }}" id="dt_table" width="100%">
          <thead>
              <tr>
                <th class="no-sort" width="10">No</th>
                <th>Nama</th>
                <th>No. Handphone</th>
                <th>E-mail</th>
                <th>Subjek</th>
                <th>Pesan</th>
                <th class="no-sort" width="80"></th>
              </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

        <br>
      </div>
    </div>
    <!-- /.card-body -->
</div>
<!-- /.card -->


  <!-- MODAL -->
<div class="modal fade" id="modal1">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12" id="div_modal">
                    <form>
                    <div class="card card-secondary card-outline">
                        <!-- <div class="card-header"><h5 class="mb-0">Info</h5></div> -->
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group col-12">
                                    <label>Nama</label>
                                    <input class="form-control form-control-sm" name="name" id="name">
                                </div>
                                <div class="form-group col-12">
                                    <label>No. Handphone</label>
                                    <input class="form-control form-control-sm" name="phone" id="phone">
                                </div>
                                <div class="form-group col-12">
                                    <label>E-mail</label>
                                    <input class="form-control form-control-sm" name="subject" id="subject">
                                </div>
                                <div class="form-group col-12">
                                    <label>Subjek</label>
                                    <input class="form-control form-control-sm" name="email" id="email">
                                </div>
                                <div class="form-group col-12">
                                    <label>Pesan</label>
                                    <textarea class="form-control" id="description" name="description"></textarea>
                                </div>
                            </div>
                        </div>
                    </div> <!-- card -->
                    </form>
                </div> <!-- col-md-12 -->
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endsection



@section('javascript')

<script>
  $(function () {
    // showDataTable();
  })

    function ajaxGetOne(id){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('admin.hubungi.ajax.getOne') }}",
            type: 'POST',
            data: {'id': id},
            beforeSend: function() {
                $.LoadingOverlay("show");
            },
            complete: function() {
                $.LoadingOverlay("hide");
            },
            success: function(json){
                var data = json['data'];
                // console.log(data)
                if(json['status']=='success'){
                    $('.modal-title').html('List Hubungi Kami');
                    $('#name').val(data.name)
                    $('#phone').val(data.phone)
                    $('#subject').val(data.subject)
                    $('#email').val(data.email)
                    $('#description').val(data.description)
                    $('#modal1').modal('show');
                }else{
                    swal({
                        type: 'error',
                        html: json['data'],
                    })
                }
            },
            error: function(){
                swal({
                    type: 'error',
                    html: 'Error data occured.',
                })
            }
        })
    }

    function  ajaxDestroy($id) {
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var confirmation = confirm("Yakin hapus data ini ?");
            if (confirmation) {
            $.ajax(
                {
                url: "{{ route('admin.hubungi.destroy','') }}/"+$id,
                type: 'get',
                dataType: "JSON",
                success: function (json){
                $.LoadingOverlay("hide");
                console.log(json);
                if(json.status=="success"){
                    swal({
                        type: 'success',
                        html: json.result,
                        allowOutsideClick: false,
                    }).then((result)=>{
                        $("#dt_table").DataTable().ajax.reload();
                    }).catch(swal.noop);

                }else{
                    swal({
                        type: 'error',
                        html: json.result,
                        allowOutsideClick: false,
                    });
                }},
                error: function(error){
                $.LoadingOverlay("hide");
                console.log(error.responseJSON.message);
                swal({
                    type: 'error',
                    html: error.responseJSON.message,
                    })
                }
            });
        }
    }

</script>


@endsection