@extends('admin.layouts.app')
@section('content')
    <style>
        table.dataTable.no-footer {
            border-bottom: none !important;
        }


        .color-bordered-table.red-bordered-table {
            border: none !important;
        }

        .newButton {
            background-color: #00c292 !important;
        }
    </style>
    <link href="/assets/node_modules/switchery/dist/switchery.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
    <div class="row page-titles">
        <div class="col-md-12">
            <h4 class="text-white">YSİİD</h4>
        </div>
        <div class="col-md-6">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Anasayfa</a></li>
                <li class="breadcrumb-item active">Ürün Listesi</li>
            </ol>
        </div>
        <div class="col-md-6 text-right">
            <form class="app-search d-none d-md-block d-lg-block">
                <input type="text" class="form-control" placeholder="Search &amp; enter">
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('status'))
                        <script>
                            $(document).ready(function() {
                                Swal.fire({
                                    position: 'center-center',
                                    type: 'success',
                                    title: '{{ session("status") }}',
                                    showConfirmButton: false,
                                    timer: 3000
                                })
                            });
                        </script>
                    @endif


                    <div class="table-responsive">
                        <table id="myTable" class="table color-bordered-table red-bordered-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Ürün Adı</th>
                                    <th>Seo Adresi</th>
                                    <th>Son Düzenlenme Tarihi</th>
                                    <th>Aktif/Pasif</th>
                                    <th>İşlem</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="//cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
    <script src="/assets/node_modules/switchery/dist/switchery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script>
        $(function() {
            table = $('#myTable').DataTable({
                "responsive": true,
                "dom": '<"html5buttons"B>lTfgitp',
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.13.2/i18n/tr.json"
                },
                buttons: ['copy', 'csv', 'excel', 'pdf'],
                processing: true,
                serverSide: true,
                ajax: "{{ route('product.ajaxList') }}",

                "drawCallback": function(settings) {
                    $('.js-switch').each(function() {
                        new Switchery($(this)[0], $(this).data());
                    });
                },

                "columnDefs": [{
                        "render": createManageBtn,
                        "data": 1,
                        "id": 1,
                        "targets": [5]
                    }, {
                        "render": createStatusSwitcher,
                        "data": 1,
                        "id": 1,
                        "targets": [4]
                    },
                    {
                        "render": createSeoLink,
                        "data": 1,
                        "id": 1,
                        "targets": [2]
                    }
                ],
                columns: [{
                        data: 'product_id'
                    },
                    {
                        data: 'product_title'
                    },
                    {
                        data: 'product_title_seo'
                    },
                    {
                        data: 'updated_at'
                    },
                    {
                        data: 'product_status'
                    },

                    {
                        data: 'id'
                    }
                ],

            });

        });

        function createSeoLink(data) {
            return data;
        }

        function createManageBtn(data) {
            let html = `
        
                <a href="/admin/urun/edit/${data}" id="manageBtn" class="btn btn-success btn-xs">Düzenle</a>
                <button id="manageBtn" type="button" onclick="del(${data})" class="btn btn-danger btn-xs">Sil</button>
             `;
            return html;
        }

        function createStatusSwitcher(x, y, data) {
            return `<input onchange="statusChanger(this)" data-id="${data.id}" type="checkbox"${data.product_status == "on"  ? ' checked="true" ' : '' } class="js-switch" data-size="small" data-color="#009efb" style="display: none;" data-switchery="true">`;
        }
        function statusChanger(e) {
            var id = $(e).attr('data-id');
            $.ajax({
                type: "POST",
                url: "{{ Route('product.statusChanger') }}",
                data: {
                    id
                },
                success: function(response) {
                    console.log(response);
                }
            });
        }
        $(document).ready(function() {
            var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
            $('.js-switch').each(function() {
                new Switchery($(this)[0], $(this).data());
            });
        });

        function del(e) {
            var id = e;
            if (confirm("Silmek istiyor musunuz?") === true) {


                $.ajax({
                    type: "POST",
                    url: "{{ Route('product.delete') }}",
                    data: {
                        id
                    },
                    success: function(response) {
                        let res = JSON.parse(response);
                        if (res.status) {

                            Swal.fire({
                                position: 'center-center',

                                timer: 3000,
                                type: 'success',
                                title: 'Silme işlemi başarılı',
                                showConfirmButton: false,
                            }).then(function() {
                                window.location.reload();
                            })

                        } else {
                            Swal.fire({
                                position: 'center-center',
                                type: 'error',
                                title: 'Silme işlemi başarısız.',
                                showConfirmButton: false,
                                timer: 3000,
                                function() {
                                    location.reload();
                                }
                            });
                        }
                    }
                });


            } else {


                Swal.fire({
                    position: 'center-center',

                    timer: 3000,

                    title: 'İşlem iptal edildi!',
                    showConfirmButton: false,
                })
            }
        }
    </script>
@endsection