@extends('admin.layouts.main')
@section('title', 'Add Products')
@section('main')
    <div class="row mb-3">
        <div class="col-md-12">
            <a href="{{ route('products.add') }}" class="btn btn-primary">Add Product</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card" style="height: 100%;">
                <table class="table table-bordered data-table">
                    <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Title</th>
                        <th>Product Type</th>
                        <th width="105px">Action</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('scripts')

    <script>
        $(function () {

            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('product.list') }}",
                    method: 'POST',
                    data: function (d) {
                        d._token = '{{ csrf_token() }}'
                    }
                },
                columns: [
                    {
                        data: null,
                        name: 'id',
                        render: function (data, type, row, meta) {
                            return meta.settings._iDisplayStart + meta.row + 1;
                        },
                        title: 'ID'
                    },
                    { data: 'name', name: 'name' },
                    { data: 'title', name: 'title' },
                    { data: 'type', name: 'type' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });

            // $('#status').change(function(){
            //     table.draw();
            // });

        });

        $(document).ready(function() {
            $(document).on('click', '.change-status', function() {
                const button = $(this);
                const productId = button.data('id');
                const newStatus = button.data('status');
                const statusText = newStatus === 'active' ? 'Resume' : 'Pause';

                Swal.fire({
                    title: `Are you sure you want to ${statusText} this product?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, change it!',
                    cancelButtonText: 'No, cancel!',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{route('change-product-status')}}',
                            method: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                status: newStatus,
                                productId: productId
                            },
                            success: function(response) {
                                Swal.fire(
                                    'Updated!',
                                    `Product status has been ${statusText.toLowerCase()}d.`,
                                    'success'
                                );
                                $('.data-table').DataTable().ajax.reload(); // Refresh the DataTable
                            },
                            error: function() {
                                Swal.fire(
                                    'Error!',
                                    'There was an error updating the status.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });

            $(document).on('click', '.delete-product', function() {
                const button = $(this);
                const productId = button.data('id');

                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: 'No, cancel!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{route('delete-product')}}',
                            method: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                productId: productId
                            },
                            success: function(response) {
                                Swal.fire(
                                    'Deleted!',
                                    'Product has been deleted.',
                                    'success'
                                );
                                $('.data-table').DataTable().ajax.reload(); // Refresh the DataTable
                            },
                            error: function() {
                                Swal.fire(
                                    'Error!',
                                    'There was an error deleting the product.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection