@extends('layouts.app')

@section('content')
    <article class="active text">
        <header>
            <h2 class="h2 article-title">Product Catalog</h2>
        </header>
        <section>
            <span class="float-end mb-3">
                <a href="{{ route('dashboard') }}" class="float-left me-3"><i class="fa-solid fa-left-long"> Back</i></a>
                <a href="{{ route('admin.product.create') }}" class="float-end"><i class="fa-solid fa-file-circle-plus"> Create</i></a>
            </span>
            <table class="table table-striped w-100 table-dark table-auto">
                <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Name</th>
                    <th scope="col">Slug</th>
                    <th scope="col">Active</th>
                    <th scope="col">Plans</th>
                </tr>
                </thead>
                <tbody>
                @foreach($products as $product)
                    <tr>
                        <th scope="row">
                            <a href="{{ route('admin.product.show', $product) }}" title="View"><i class="fa-regular fa-eye text-primary pr-2"></i></a>
                            <a href="{{ route('admin.product.edit', $product) }}" title="Edit"><i class="fa-regular fa-pen-to-square text-success pr-2"></i></a>
                            <i
                                class="fa-regular fa-trash-can text-danger delete-product"
                                data-product-id="{{ $product->id }}"
                                data-product-name="{{ $product->name }}"
                                data-toggle="modal"
                                data-target="#deleteProductModal"
                                title="Delete"
                            ></i>
                        </th>
                        <td>{{ $product->name }}</td>
                        <td>{{ $product->slug }}</td>
                        <td class="text-center">{!! $product->is_active ? '<div class="alert-success">Yes</div>' : '<div class="alert-danger">No</div>' !!}</td>
                        <td class="text-center">{{ $product->plans_count }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </section>
    </article>

    <div class="modal fade" id="deleteProductModal" tabindex="-1" role="dialog" aria-labelledby="deleteProductModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h5 class="modal-title text-white fw-bold" id="deleteProductModalLabel">Delete Product?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span inert>&times;</span>
                    </button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="deleteProduct" type="button" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('.delete-product').click(function(event) {
            $('#deleteProductModal').data('productId', $(event.currentTarget).data('productId'));
            $('#deleteProductModal .modal-body').text('Are you sure you want to delete "' + $(event.currentTarget).data('productName') + '"?');
            $('#deleteProductModal').modal('show');
            $('#deleteProductModal').show();
        });
        $('#deleteProductModalLabel').click(function() {
            $('#deleteProductModal').modal('hide');
            $('#deleteProductModal').hide();
        });
        $('button#deleteProduct').click(function() {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                method: 'DELETE',
                url: '{{ route('admin.product.index') }}/' + $('#deleteProductModal').data('productId'),
                success: function() {
                    location.reload();
                }
            });
        });
    </script>
@endsection