@extends('layouts.app')
@section('title')
    {{ $title }}
@endsection
@section('breadcrumbs')
    <ul class="breadcrumbs" style="color: white">
        <li class="nav-home">
            <a href="/admin/dashboard">
                <i class="flaticon-home" style="color: white"></i>
            </a>
        </li>
        <li class="separator">
            <i class="flaticon-right-arrow" style="color: white"></i>
        </li>
        <li class="nav-item">
            <a href="/admin/resycle/products" style="color: white">Restore</a>
        </li>
        <li class="separator">
            <i class="flaticon-right-arrow" style="color: white"></i>
        </li>
        <li class="nav-item">
            <a href="/admin/resycle/products" style="color: white">Produk</a>
        </li>
    </ul>
@endsection
@section('content')
    {{-- filter --}}
    <div class="d-flex" style="width: 50%">
        <div style="width: 300px" class="col-sm-6 mb-3 mb-sm-0">
            <p class="h6 mb-2 text-gray-800">Filter berdasarkan kategori:</p>
            <select name="categorySelected" id="categorySelected" class="form-control" aria-label="Default select example"
                required>
                <option value="" selected>Semua Kategori</option>
                <option value="makanan">Makanan</option>
                <option value="minuman">Minuman</option>
                <option value="pembersih">Pembersih</option>
                <option value="lainnya">Lainnya</option>
            </select>
        </div>

        <div style="width: 300px" class="col-sm-6 mb-3 mb-sm-0">
            <p class="h6 mb-2 text-gray-800">Filter berdasarkan satuan:</p>
            <select name="unitSelected" id="unitSelected" class="form-control" aria-label="Default select example" required>
                <option value="" selected>Semua Satuan</option>
                <option value="pcs">Pcs</option>
                <option value="pack">Pack</option>
                <option value="dos">Dos</option>
                <option value="1/4">1/4 kg</option>
            </select>
        </div>

    </div>

    <div class="" style="height: 60px"></div>

    <!-- DataTales -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Semua Produk Yang Terhapus</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="myTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th style="background-color: #007bff; color: white;">Nama</th>
                            <th style="background-color: #007bff; color: white;">Harga</th>
                            <th style="background-color: #007bff; color: white;">Satuan</th>
                            <th style="background-color: #007bff; color: white;">Stok</th>
                            <th style="background-color: #007bff; color: white;">Kategori</th>
                            <th style="background-color: #007bff; color: white;">Gambar</th>
                            <th style="background-color: #007bff; color: white;">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <!-- Modal -->
    <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="" id="page"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {

            $('#myTable').DataTable({
                processing: true,
                serverside: true,
                autoWidth: false,
                ajax: {
                    url: '/admin/recycle/products-json',
                    data: function(d) {
                        let categorySelected = $('#categorySelected').val();
                        d.category = categorySelected ? categorySelected : null;

                        let unitSelected = $('#unitSelected').val();
                        d.unit = unitSelected ? unitSelected : null;
                    },
                },
                columns: [{
                    data: 'name',
                    name: 'Nama'
                }, {
                    data: 'formatted_amount',
                    name: 'Harga'
                }, {
                    data: 'unit',
                    name: 'Satuan'
                }, {
                    data: 'stock',
                    name: 'Stok'
                }, {
                    data: 'category',
                    name: 'Kategori'
                }, {
                    data: 'image',
                    name: 'Gambar'
                }, {
                    data: 'action',
                    name: 'Aksi'
                }]
            })

            // filter
            $('#categorySelected').change(function(e) {
                e.preventDefault();
                $('#myTable').DataTable().ajax.reload();
            });

            $('#unitSelected').change(function(e) {
                e.preventDefault();
                $('#myTable').DataTable().ajax.reload();
            });

        });

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

        // function restrore
        $('body').on('click', '.tombol-restore', function() {
            Swal.fire({
                title: "Apakah kmu yakin?",
                text: "Data akan di Restore/Recycle (diaktifkan kembali)",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ya, Restore"
            }).then((result) => {
                if (result.isConfirmed) {
                    var id = $(this).attr('data-id');
                    console.log('ini data id', id);
                    $.ajax({
                        url: '/admin/recycle/products/' + id + '/restore',
                        type: 'GET',
                        data: {
                            admin_id: "{{ session('userData')->id }}"
                        },
                        success: function(response) {
                            if (response.success) {
                                successNotification('Berhasil', response.success)
                                $('#myTable').DataTable().ajax.reload();
                            }
                        },
                        error: function(xhr, status, error) {
                            errorNotification('Gagal Merestore Data', xhr.responseJSON.message || xhr.responseJSON.details)
                        },
                    })
                }
            });
        })

        // function delete
        $('body').on('click', '.tombol-del', function() {
            Swal.fire({
                title: "Apakah kmu yakin?",
                text: "Data akan dihapus untuk selama nya",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ya, Hapus"
            }).then((result) => {
                if (result.isConfirmed) {
                    var id = $(this).attr('data-id');
                    console.log('ini data id', id);
                    $.ajax({
                        url: '/admin/recycle/products/' + id + '/destroy',
                        type: 'GET',
                        data: {
                            admin_id: "{{ session('userData')->id }}"
                        },
                        success: function(response) {
                            if (response.success) {
                                successNotification('Berhasil', response.success)
                                $('#myTable').DataTable().ajax.reload();
                            }
                        },
                        error: function(xhr, status, error) {
                            errorNotification('Gagal Merestore Data', xhr.responseJSON.message || xhr.responseJSON.details)
                        },
                    })
                }
            });
        })
    </script>
@endsection