@php
    $key = 'all';
@endphp

@extends('layout.default')

@section('styles')
    <!--begin::Page Vendors Styles(used by this page)-->
    <link href="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.css?v=7.0.8" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .no_wrap {
            white-space:nowrap;
        }
        .pagination {
            justify-content: right !important;
        }
    </style>
    <!--end::Page Vendors Styles-->
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            @include('layout.notifications')
            <!--begin: Datatable-->
            <div style="overflow-x: scroll;white-space:nowrap">
                <table class="table table-bordered table-checkable" id="kt_datatable">
                    <thead>
                    <tr>
                        <th>Action</th>
                        <th>Product Image</th>
                        <th>Brand</th>
                        <th>Product Code</th>
                        <th width="40%">Product Name</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(!empty($data))
                        @foreach($data as $value)
                            <tr>
                                <td>
                                    <a href="{{ url('product/detail/'.$value['product_id']) }}" class="btn btn-sm btn-primary text-nowrap"><i class="fa fa-pen"></i>Edit</a>
                                    <a data-toggle="confirmation" data-popout="true" data-id="{{$value['product_id']}}" class="btn btn-sm btn-danger delete"><i class="fas fa-trash"></i> Delete</a>
                                </td>
                                <td>@if(!empty($value['product_images'])) <img src="{{$value['product_images']}}" style="width: 80px;height: 80px">@endif</td>
                                <td>{{$value['brand_name']}}</td>
                                <td>{{$value['product_code']}}</td>
                                <td>{{$value['product_name']}}</td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="10" style="text-align: center">Data Not Available</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
            <br>
            <div class="row">
                <div class="col-md-12">
                    @if (!empty($data_paginator))
                        {{ $data_paginator->links('pagination') }}
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <!--begin::Page Vendors(used by this page)-->
    <script src="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.js?v=7.0.8"></script>
    <!--end::Page Vendors-->
    <script>
        var table;
        $(document).ready(function() {
            table = $('#kt_datatable').DataTable({searching: false, "paging": false, ordering: false});
            $('#kt_datatable').on('click', '.delete', function () {
                const row = $(this).parents('tr');
                const url = "{{url('product/delete')}}/" + $(this).data("id")
                Swal.fire({
                    title: "Are you sure delete this product?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!"
                }).then(function (result) {
                    if (result.value) {
                        $.ajax({
                            type: "DELETE",
                            url: url,
                            data: {
                                '_token': '{{csrf_token()}}'
                            },
                            success: function (response) {
                                if (response.status == 'success') {
                                    $('#kt_datatable').DataTable().row(row).remove().draw();
                                    Swal.fire(
                                        "Deleted!",
                                        "Your data has been deleted.",
                                        "success"
                                    )
                                } else {
                                    Swal.fire(
                                        "Failed!",
                                        response.messages ? response.messages[0] : 'Something went wrong',
                                        "error"
                                    )
                                }
                            },
                            error: function () {
                                Swal.fire(
                                    "Failed!",
                                    "Failed delete data",
                                    "error"
                                )
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection