@extends('admin')

@push('after-style')
<style>
    .card-body>.table>thead>tr>td,
    .card-body>.table>thead>tr>th {
        border-top-width: 0;
        text-align: center;
    }
</style>
@endpush

@push('header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Slider</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Slider</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <!-- <h3 class="card-title">DataTable with default features</h3> -->
                <button class="btn-sm btn btn-primary" onclick="add();">tambah</button>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Image</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
</div>

<div id="modal_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>

            <div class="modal-body">
                <form id="form">
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <label>File</label>
                        <input type="file" name="image" id="image" class="form-control">
                        <div class="text-danger text-error" id="image_error">*error</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Tutup</button>
                <button type="button" id="btnSave" onclick="save();" class="btn btn-primary waves-effect waves-light">Save
                    changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection

@push('after-script')

<script type="text/javascript">
    $(document).ready(function() {
        table = $('#table').DataTable({
            "responsive": true,
            "autoWidth": false,
            "processing": true, //Feature control the processing indicator.
            "serverSide": true, //Feature control DataTables' server-side processing mode.
            "order": [], //Initial no order.

            // Load data for the table's content from an Ajax source
            "ajax": {
                "type": "POST",
                "url": "{{ url('/admin/slider/show') }}",
                "data": {
                    "_token": "{{ csrf_token() }}"
                },
            },
            "bDestroy": true,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'no',
                    name: 'no'
                },
                {
                    data: 'imageField',
                    name: 'imageField'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],
            order: [
                [0, 'asc']
            ]
        });
    });

    function add() {
        save_method = 'add';
        $('.text-error').empty(); // clear error string
        $('#form')[0].reset(); // reset form on modals
        $('#btnSave').text('Simpan');
        $('.modal-title').text('Tambah'); // Set Title to Bootstrap modal title
        $('#modal_form').modal('show'); // show bootstrap modal
    }

    function save() {
        $('.text-error').empty(); // clear error string
        $('#btnSave').text('Menyimpan...'); //change button text
        $('#btnSave').attr('disabled', true); //set button disable 
        var url;

        if (save_method == 'add') {
            url = "{{ url('/admin/slider/add') }}";
        } else {
            url = "{{ url('/admin/slider/update') }}";
        }

        var formData = new FormData($('#form')[0]);
        formData.append("_token", "{{ csrf_token() }}");

        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
                if (data.status) //if success close modal and reload ajax table
                {
                    var text = '';
                    if (save_method == 'add') {
                        text = 'Data Added Successfully';
                    } else {
                        text = 'Data Updated Successfully';
                    }
                    toastr.success(text);
                    // notification('success', 'Success', text);
                    $('#modal_form').modal('hide');
                    reload_table();
                } else {
                    for (const [key, value] of Object.entries(data.message)) {
                        $('#' + key + '_error').html('*' + value);
                    }

                    if (save_method == 'add') {
                        $('#btnSave').text('Save');
                    } else {
                        $('#btnSave').text('Update');
                    }
                }

                $('#btnSave').attr('disabled', false); //set button enable 
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error adding / update data');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
                // $('#btnSave').attr('disabled', false); //set button enable 
            }
        });
    }

    function reload_table() {
        table.ajax.reload(null, false); //reload datatable ajax 
    }

    function edit(id) {
        save_method = 'update';
        $('.text-error').empty();
        $('#form')[0].reset(); // reset form on modals

        //Ajax Load data from ajax
        $.ajax({
            url: "{{ url('/admin/slider/edit') }}",
            type: "POST",
            data: {
                "id": id,
                "_token": "{{ csrf_token() }}",
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                $('[name="id"]').val(data.id);

                $('#btnSave').text('Update'); // Set Title to Bootstrap modal title
                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                $('.modal-title').text('Edit'); // Set title to Bootstrap modal title
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error get data from ajax');
            }
        });
    }

    function deletee(id) {
        if (confirm('Ingin menghapus data ?')) {
            // ajax delete data to database
            $.ajax({
                url: "{{ url('/admin/slider/delete') }}",
                type: "POST",
                dataType: "JSON",
                data: {
                    "id": id,
                    "_token": "{{ csrf_token() }}",
                },
                success: function(data) {
                    toastr.success('Berhasil menghapus data');
                    // notification('success', 'Success', 'Berhasil menghapus data');

                    $('#modal_form').modal('hide');
                    reload_table();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('Error deleting data');
                }
            });

        }
    }
</script>
@endpush