@extends('layouts.index')
@section('title')
    Banner
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Banner
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Banner</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-12 col-xl-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center mb-4">
                            <h4>Semua Banner</h4>
                            <div class="ms-auto">
                                <div class="btn-group">
                                    <a href="#!"
                                        class="
                      btn btn-primary
                      font-weight-medium
                      rounded-pill
                      px-4
                    "
                                        data-bs-toggle="modal" data-bs-target="#createmodel">
                                       <i class="fa fa-plus"></i> Tambah Banner
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div id="tableLoad">
                            @csrf
                            @include('banner.table_load')
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>
    <!-- create Modal -->
    <div class="modal fade" id="createmodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h5 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Tambah Banner Baru
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="tambah" enctype="multipart/form-data">
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="user" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Judul Banner..." aria-label="nama"
                                id="nama_tambah" name="nama" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="star" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Link ..." aria-label="nama"
                                id="link_tambah" name="link" />
                        </div>
                        <div id="preview" style="display: none">
                            <img id="imgshow_tambah" src="#" width="200" height="200"
                            style="object-fit: cover;border-radius: 20px;">
                            <br><br>
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="camera" class="feather-sm fil-white"></i>
                            </button>
                            <input type="file" class="form-control" id="gambar_tambah" name="gambar" />
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                    btn btn-light-danger
                    text-danger
                    font-weight-medium
                    rounded-pill
                    px-4
                "
                        data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-success rounded-pill px-4">
                        Save
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- update Modal -->
    <div class="modal fade" id="updatemodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h5 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Ubah Banner
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="ubah" enctype="multipart/form-data">
                        <input type="hidden" name="id" id="id_ubah">
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="user" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Judul Banner..." aria-label="nama"
                                id="nama_ubah" name="nama" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="star" class="feather-sm fil-white"></i>
                            </button>
                            <input type="text" class="form-control" placeholder="Link ..." aria-label="nama"
                                id="link_ubah" name="link" />
                        </div>
                        <div id="preview">
                            <img id="imgshow_ubah" src="#" width="200" height="200"
                            style="object-fit: cover;border-radius: 20px;">
                            <br><br>
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="camera" class="feather-sm fil-white"></i>
                            </button>
                            <input type="file" class="form-control" id="gambar_ubah" name="gambar" />
                        </div>
                        <div class="input-group mb-3">
                            <button type="button" class="btn btn-info">
                                <i data-feather="activity" class="feather-sm fil-white"></i>
                            </button>
                            <select name="status" class="form-select " id="status_ubah">
                                <option value="Y">Aktif</option>
                                <option value="T">Tidak Aktif</option>
                            </select>
                         </div>

                </div>
                <div class="modal-footer">
                    <button type="button"
                        class="
                    btn btn-light-danger
                    text-danger
                    font-weight-medium
                    rounded-pill
                    px-4
                "
                        data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" class="btn btn-success rounded-pill px-4">
                        Save
                    </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>
    <script>
        //Aksi Tambah
        const tambah = document.getElementById('tambah');

        tambah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = tambah.nama.value;
            const link = tambah.link.value;
            const gambar = $('#gambar_tambah')[0].files;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("nama", nama);
            formData.append("link", link);
            formData.append("gambar", gambar[0]);

            try {
                let response = await fetch("{{ route('banner.store-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_status = datasend.data.status;
                    var res_link = datasend.data.link;
                    var res_gambar = datasend.data.gambar;
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    var row = '<tr id="list_'+res_id+'"> <td> <img src="'+res_gambar+'" alt="user" class="rounded" width="100" /> </td>';
                    row += '<td> <b>'+res_nama+'</b> </td> <td>'+res_link+'</td>';
                    row += '<td> <span class="badge bg-'+res_badge+'">'+res_status_value+'</span> </td> <td> <button type="button" data-uid="'+res_id+'"';
                    row += 'data-status="'+res_status_value+'" data-nama='+res_nama+'" onclick="listUpdate(this)" class="btn btn-outline-info btn-sm"><i class="fa fa-edit"></i></button>';
                    row += '<button type="button" onclick="listDelete('+res_id+')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash"></i></button> </td> </tr>';

                    $('#nama_tambah').val("");
                    $('#link_tambah').val("");
                    $('#gambar_tambah').val("");
                    $('#list').append(row);
                    $('#createmodel').modal('hide');
                    Swal.fire('Banner berhasil ditambahkan', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Ubah

        function listUpdate(obj) {

            var id = obj.getAttribute('data-uid');

            fetch("{{url('banner-detail')}}/"+id).then(function(response) {
                response.json().then(function(text) {
                    var res = text;
                    var nama = res.data.nama;
                    var status = res.data.status;
                    var link = res.data.link;
                    var gambar = res.data.gambar;

                    $('#id_ubah').val(id);
                    $('#nama_ubah').val(nama);
                    $('#link_ubah').val(link);
                    $('#imgshow_ubah').attr('src', gambar);
                    $('#status_ubah').val(status);
                });
            });


            $('#updatemodel').modal('show');
        }

        const ubah = document.getElementById('ubah');

        ubah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const id = ubah.id.value;
            const nama = ubah.nama.value;
            const link = ubah.link.value;
            const gambar = $('#gambar_ubah')[0].files;
            const status = ubah.status.value;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id", id);
            formData.append("nama", nama);
            formData.append("link", link);
            formData.append("status", status);
            if (gambar[0] != undefined) {
                formData.append("gambar", gambar[0]);
            }
            formData.append("status", status);

            try {
                let response = await fetch("{{ route('banner.update-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_status = datasend.data.status;
                    var res_link = datasend.data.link;
                    var res_gambar = datasend.data.gambar;
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    var row = '<tr id="list_'+res_id+'"> <td> <img src="'+res_gambar+'" alt="user" class="rounded" width="100" /> </td>';
                    row += '<td> <b>'+res_nama+'</b></td> <td>'+res_link+'</td>';
                    row += '<td> <span class="badge bg-'+res_badge+'">'+res_status_value+'</span> </td> <td> <button type="button" data-uid="'+res_id+'"';
                    row += 'data-status="'+res_status_value+'" data-nama='+res_nama+'" onclick="listUpdate(this)" class="btn btn-outline-info btn-sm"><i class="fa fa-edit"></i></button>';
                    row += '<button type="button" onclick="listDelete('+res_id+')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash"></i></button> </td> </tr>';

                    $('#nama_ubah').val("");
                    $('#link_ubah').val("");
                    $('#gambar_ubah').val("");
                    $('#list_' + res_id).replaceWith(row);
                    $('#updatemodel').modal('hide');
                    Swal.fire('Banner berhasil diperbaharui', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        function listDelete(id) {
            Swal.fire({
                title: 'apakah kamu yakin menghapus Banner ini?',
                icon: 'info',
                confirmButtonText: `Ya, Hapus !`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('banner.delete-modal') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": id
                        },

                        success: function(result) {
                            Swal.fire('Banner berhasil dihapus', '', 'success')
                            $('#list_' + id).remove();
                        }
                    });
                } else {

                }
            });
        }

        $('document').ready(function() {
            $("#gambar_tambah").change(function() {
                $('#preview').show();
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow_tambah').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
            $("#gambar_ubah").change(function() {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow_ubah').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });

        // Pagintaion

        $(document).ready(function(){
    
            $(document).on('click', '.page-link', function(event){
                event.preventDefault(); 
                var page = $(this).attr('href').split('page=')[1];
                loadTable(page);
            });
            
            function loadTable(page) {
                var _token = "{{ csrf_token() }}";
                $.ajax({
                    url:"{{ route('banner.load-table') }}",
                    method:"POST",
                    data:{_token:_token, page:page},
                    success:function(data) {
                            $('#tableLoad').html(data);
                    }
                });
            }

        });
    </script>
@endsection