@extends('layouts.admin')
@section('content')
    <section class="content-header">
        <label>
            Blog List
        </label>
        <ol class="breadcrumb">
            <li>
                <a href="{{ url('dashboard') }}"><i class="fa fa-line-chart"></i> Dashboard</a>
            </li>
            <li class="active">Blog List</li>
        </ol>
    </section>

    <section class="content">

        <div class="row">
            <div class="col-md-12">
                <div class="box box-success">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button class="btn btn-info btn-sm" onclick="reload()">
                                        <i class="fa fa-refresh"></i> Refresh
                                    </button>
                                    <a class="btn btn-success btn-sm" href="{{url('admin/blog/create')}}" target="_blank">
                                        <i class="fa fa-plus"></i> Tambah
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" placeholder="Tiitel" id="src_title" name="src_title">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Penulis</label>
                                    <input type="text" class="form-control" placeholder="penulis" id="src_name" name="src_name">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Kategori</label>
                                    <select class="form-control select2" style="width: 100%;" id="src_category"
                                        name="src_category">
                                        <option value="">- Pilih Status -</option>
                                    </select>
                                </div>
                            </div>    
                            <div class="col-md-6">
                                <label>Tanggal</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control datemask" id="src_from" name="src_from" placeholder="Dari Tanggal" aria-label="StartDate">
                                    
                                    <span class="input-group-addon">-</span>
                                    
                                    <input type="text" class="form-control datemask" id="src_to" name="src_to" placeholder="Sampai Tanggal" aria-label="EndDate">
                                    
                                    <span class="input-group-btn">
                                        <button class="btn btn-success"  onclick="src_date()"><li class="fa fa-search"></li> Cari</button>
                                    </span>
                                </div>
                                    
                            </div>
                        </div>

                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12">
                                <table id="ajax-datatables" class="table table-bordered table-hover table-striped" style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th width="5%">No</th>
                                            <th>Title</th>
                                            <th>Kategori</th>
                                            <th>Penulis</th>
                                            <th>Tanggal & Jam</th>
                                            <th width="7%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="md-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Hapus Blog</h4>
                </div>
                <div class="modal-body">
                    <p style="text-align: center">
                        <i class="fa fa-exclamation-triangle" style="font-size: 35px;color:#C23F44"></i>&nbsp
                        <label style="font-size: 35px;"> Apakah anda yakin ? </label><br>
                        <span>Data yang di hapus dipindahkan ke sampah</span>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <li class="fa fa-times"></li> Close
                    </button>
                    <button type="submit" class="btn btn-danger" id="btn-del" onclick="del()">
                        <li class="fa fa-trash"></li> Proses
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <input type="hidden" id="getId">
    <script>
        var table;
        $(document).ready(function() {
            select('{{ route('seletcCategory') }}', 'src_category');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $("#src_category").change(function() {
                table.ajax.reload(null, false);
            });

            $("#src_name").keypress(function(e) {
                if (e.which == 13) {
                    table.ajax.reload(null, false);
                }
            });

            $("#src_title").keypress(function(e) {
                if (e.which == 13) {
                    table.ajax.reload(null, false);
                }
            });

            table = $('#ajax-datatables').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                responsive: true,
                ajax: {
                    url: "{{ route('getBlog') }}",
                    type: "GET",
                    data: function(d) {
                        d.src_category = $('#src_category').val(),
                            d.src_title = $('#src_title').val(),
                            d.src_name = $('#src_name').val(),
                            d.src_from = toTglSys($("#src_from").val()),
                            d.src_to = toTglSys($("#src_to").val())
                    }
                },
                columns: [{
                        data: 'id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'category_name',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'fullname',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'tanggal',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        });

        function reload() {
            table.ajax.reload(null, false);
            $("#src_from").val("");
            $("#src_to").val("");
            $("#src_title").val("");
            $("#src_category").val("");
            $("#src_category").trigger("change");
            $("#src_name").val("");
        }

        function src_date() {
            var fr = $("#src_from").val();
            var to = $("#src_to").val();

            if (fr && to !== "") {
                table.ajax.reload(null, false);
            } else {
                notif("Lengkapi tanggal pencarian.", "Error");
            }
        }

        function del() {
            var id = $("#getId").val();
            $.ajax({
                url: "{{ route('deleteBlog') }}",
                type: "POST",
                data: {
                    id,
                    trash:1
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $("#btn-del").attr("disabled", "disabled");
                    $("#btn-del").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                },
                success: function(data) {
                    if (data.status == "success") {
                        table.ajax.reload(null, false);
                        $('#md-delete').modal('toggle');
                    }
                    notif(data.message, data.status);
                },
                complete: function() {
                    $("#btn-del").removeAttr("disabled");
                    $("#btn-del").html("<i class='fa fa-trash'></i> Ya, Hapus");
                }
            });

        }

        function getId(id) {
            $("#getId").val(id);
        }
    </script>
@endsection()