@extends('backend.layout.master')
@section('content')
    <section class="content mt-3">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Product List</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{url('/manager')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Product List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-12 text-left">
                <div class="text-right"><a href="{{route('manager.product.create')}}"><button type="button" class="btn btn-lg btn-dark">Add Product</button></a></div>
                <table id="dataTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                    <thead class="thead-dark">
                        <tr>
                            <th>No</th>
                            <th>Product Name</th>
                            <th>Product Slug</th>
                            <th>Created By</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($products as $key => $product)
                            <tr>
                                <td>{{ ++$key }}</td>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->alias }}</td>
                                <td>{{ $product->owner->name }}</td>
                                <td>
                                    <a href="{{ route('manager.product.changestatus',$product->id) }}">             
                                        @if ($product->isvisible == 1)
                                            <i class="fa fa-toggle-on" style="color:green;"></i> Enabled                           
                                        @else
                                            <i class="fa fa-toggle-off" style="color:red;"></i> Disabled                           
                                        @endif
                                    </a>
                                </td>
                                <td>
                                    <a class="btn btn-xs btn-primary" href="{{ route('manager.product.edit', \Crypt::encrypt($product->id)) }}"><i class="fa-solid fa-pen-to-square"></i></a>
                                    <form id="deleteProductForm{{$key}}" method="POST" action="{{route('manager.product.destroy', \Crypt::encrypt($product->id))}}" style="display:inline">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
                                        <button type="submit" class="btn btn-xs btn-danger" onclick="deleteFunction({{$key}})"><i class="fa fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection

@push('specific_css')
@endpush

@push('specific_js')
    <script>
        function deleteFunction(key) {
            event.preventDefault(); // prevent form submit
            var form = $("#deleteProductForm"+key);
            Swal.fire({
                title: "Are you sure, you want to delete this Product?",
                text: "You won't be able to revert this, Product will be deleted!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                    Swal.fire({
                        title: "Deleted!",
                        text: "Product has been deleted.",
                        icon: "success"
                    });
                }
            });
        }
        $(document).ready(function(){
            $("#dataTable").dataTable();
        });
    </script>
@endpush