@extends('layouts/contentNavbarLayout')

@section('title', 'Product List')

@section('page-style')
    <style>
        .avatar-xs {
            width: 2.563rem !important;
            height: 2.563rem !important;
        }
    </style>
@endsection
@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('dashboard') }}" class="text-muted text-decoration-none">Dashboard</a> /
        </span>
        Products
    </h4>

    <!-- Bootstrap Table with Header - Light -->
    <div class="card">
        <div class="row">
            <div class="col-md-6">
                <h5 class="card-header">Products List</h5>
            </div>
            <div class="col-md-6 card-header">
                <button type="button" onclick="window.location='{{ route('product.create') }}'"
                    class="float-end btn btn-primary waves-effect waves-light">
                    Add New Product
                </button>
            </div>
        </div>

        <div class="table-responsive text-nowrap">
            <table class="table" id="dataTable">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Product Name</th>
                        <th>Price</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @foreach ($products as $product)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar me-4">
                                        <img src="{{ $product->image ? asset('storage/products/' . $product->image) : asset('assets/img/avatars/3.png') }}"
                                            alt="{{ $product->name }}" class="rounded-circle">
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">{{ $product->name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>${{ $product->price ?? '0' }}</td>
                            <td>{{ $product->description }}</td>
                            <td>
                                <div class="dropdown">
                                    <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                        data-bs-toggle="dropdown"><i class="mdi mdi-dots-vertical"></i></button>
                                    <div class="dropdown-menu">
                                        @can('edit')
                                            <a class="dropdown-item" href="{{ route('product.edit', $product->id) }}"><i
                                                    class="mdi mdi-pencil-outline me-1"></i> Edit</a>
                                        @endcan
                                        @can('delete')
                                            <a class="dropdown-item" onclick="confirmDelete(this)"
                                                data-url="{{ route('product.destroy', encrypt($product->id)) }}">
                                                <i class="mdi mdi-trash-can-outline me-1"></i> Delete
                                            </a>
                                        @endcan
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <!-- Display pagination links -->
            </table>
        </div>
    </div>

    <!-- Bootstrap Table with Header - Light -->
@endsection
<script>
    function confirmDelete(element) {
        const deleteUrl = element.getAttribute('data-url'); // Get the URL from the data attribute
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "Cancel"
        }).then((result) => {
            if (result.isConfirmed) {
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                // Perform AJAX request to delete the product
                $.ajax({
                    url: deleteUrl, // Use the URL from data-url
                    type: "DELETE", // HTTP method
                    headers: {
                        "X-CSRF-Token": csrfToken // Add CSRF token for Laravel
                    },
                    success: function(response) {
                        Swal.fire(
                            "Deleted!",
                            "The product has been deleted.",
                            "success"
                        ).then(() => {
                            // Reload the page after the success message is closed
                            window.location.reload();
                        });
                        // Optionally, remove the deleted product from the DOM
                        // Example: document.getElementById(`product-row-${productId}`).remove();
                    },
                    error: function(xhr) {
                        Swal.fire(
                            "Error!",
                            "There was a problem deleting the product.",
                            "error"
                        );
                    }
                });
            }
        });
    }
</script>

<script>
    const csrfToken = '{{ csrf_token() }}'
</script>