@extends('admin.layouts.app')
@push('style')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

@endpush

@section('content')
<section class="content home">

    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"><i class="zmdi zmdi-account"></i>
                    Approval Request
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item active"><a href="{{route('admin-manage_vendor_products')}}">Manage Vendor Products</a></li>
                    <li class="breadcrumb-item active">Approval Request</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Start Content-->

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        @include('admin.common.flash')

                        <a class="btn btn-white float-left ml-3 mt-2 mb-1" href="{{ back()->getTargetUrl() }}">
                            <i class="material-icons text-muted">arrow_back</i>
                        </a>

                        <!-- Search Input -->

                        <div class="row float-right">
                            <div class="col-12">
                                <div class="form-outline">
                                    <i class="zmdi zmdi-search search-icon ml-2"></i>
                                    <input type="text" id="search-input" class="form-control" placeholder="Search by name or ID no." />
                                </div>
                            </div>
                        </div>

                        <!-- DATA-TABLE FOR VENDOR PRODUCT'S APPROVAL REQUEST  -->
                        <div class="table-responsive">
                            <table id="approve_product-datatable" class="table dt-responsive nowrap table-striped w-100 mb-5 mt-2" style="width:100%;">
                                <thead class="text">
                                    <tr>
                                        <th>#</th>
                                        <th>Product Image</th>
                                        <th>Product Name</th>
                                        <th>Vendor Name</th>
                                        <th>Add Date</th>
                                        <th>Product Approve</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>


                                <tbody class="text">

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection


@push('script')
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script>
    $(document).ready(function() {
        $('.btn-default').hide();

        var table;
        table = $('#approve_product-datatable').DataTable({
            searching: false,
            processing: true,
            serverSide: true,
            responsive: false,
            pageLength: 15,
            lengthChange: false,
            aaSorting: [
                [0, 'desc']
            ],
            "ajax": {
                type: 'GET',
                url: '{{route("admin-get_product_approve_listing")}}',
                data: function(d) {
                    d.keyword = $('#search-input').val();
                }
            },

            "columns": [{
                    data: 'id',
                    render: function(data, type, row, meta) {
                        var serialNumber = meta.row + meta.settings._iDisplayStart + 1;
                        return serialNumber;
                    },

                },
                {
                    data: 'image',
                    orderable: false,
                    render: function(data, type, row, meta) {
                        return Dispalyimage(data, type, row, meta)
                    },
                },
                {
                    data: 'product_name',
                    orderable: false,
                },
                {
                    data: 'vendor_name',
                    orderable: false,
                },
                {
                    data: 'created_at',
                    orderable: false,
                    render: function(data, type, row) {
                        var mydate = moment(data).local().format('lll');
                        return mydate;
                    }
                },
                {
                    data: 'product_approve',
                    orderable: false,
                },
                {
                    data: 'action',
                    orderable: false,
                },
            ],
        });

        $('#search-input').on('keyup', function() {
            table.search($(this).val()).draw();
        });

    });

    //FUNCTION FOR DISPLAY IMAGE IN TABLE
    function Dispalyimage(data, type, row, meta) {
        if (data) {
            var str = '<img class="text-center border-light" id="image" src="{{ env("AWS_URL").env("AWS_FOLDER").env("PRODUCT_IMAGE") }}' + data + '" width="80px" height="80px" style="border: 6px solid #babab9 !important;border-radius: 12px;">';
        } else {
            var str = '';
        }
        return str;
    }

    //APPROVE PRODUCT
    $(document).on('click', '.approve-btn', function() {

        var productId = $(this).data('id');

        Swal.fire({
            icon: 'question',
            title: 'Confirmation',
            text: 'Are you sure you want to Approve this Product?',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No'
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    url: "{{ route('admin-approve_product', ['id' => '__productId__']) }}".replace('__productId__', productId),
                    method: 'POST',
                    data: {
                        product_id: productId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {

                        Swal.fire({
                            icon: 'success',
                            title: 'Product Approved',
                            text: response.message
                        });

                        $('#approve_product-datatable').DataTable().ajax.reload();
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            }
        });
    });

    //REJECT PRODUCT
    $(document).on('click', '.reject-btn', function() {

        var productId = $(this).data('id');

        Swal.fire({
            icon: 'question',
            title: 'Confirmation',
            text: 'Are you sure you want to Reject this Product?',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No'
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    url: "{{ route('admin-reject_product', ['id' => '__productId__']) }}".replace('__productId__', productId),
                    method: 'POST',
                    data: {
                        product_id: productId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {

                        Swal.fire({
                            icon: 'success',
                            title: 'Product Rejected',
                            text: response.message
                        });

                        $('#approve_product-datatable').DataTable().ajax.reload();
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            }
        });
    });

</script>
@endpush