@extends('admin.layouts.app')

@section('title', 'Categories')

@section('content')
<div class="main-content app-content mt-0">
    <div class="side-app">
        <div class="main-container container-fluid">
            <div class="page-header">
                <h1 class="page-title">Categories</h1>
                <div>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Categories</li>
                    </ol>
                </div>
            </div>

            <!-- Toastr handles the success messages -->

            <div class="row">
                <!-- Total Categories Card -->
                <div class="col-sm-6 col-lg-6 col-md-12 col-xl-4">
                    <div class="card">
                        <div class="row">
                            <div class="col-4">
                                <div class="card-img-absolute circle-icon bg-primary align-items-center text-center box-primary-shadow bradius">
                                    <img src="{{ asset('admin/assets/images/svgs/circle.svg') }}" alt="img" class="card-img-absolute">
                                    <i class="lnr lnr-layers fs-30 text-white mt-4"></i>
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="card-body p-4">
                                    <h2 class="mb-2 fw-normal mt-2">{{ $totalCategories }}</h2>
                                    <h5 class="fw-normal mb-0">Total Categories</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Categories List</h3>
                            <a href="{{ route('admin.categories.create') }}" class="btn btn-primary btn-sm"><i class="fe fe-plus me-1"></i>Add Category</a>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                {{ $dataTable->table(['class' => 'table table-bordered text-nowrap border-bottom w-100 align-middle']) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image View Modal -->
<div class="modal fade" id="imageViewModal" tabindex="-1" aria-labelledby="imageViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title" id="imageViewModalLabel">Category Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i class="fe fe-x"></i></button>
            </div>
            <div class="modal-body text-center p-4">
                <img src="" id="modalImagePreview" class="img-fluid shadow-sm" alt="Category Image" style="max-height: 80vh; width: auto; object-fit: contain;">
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
    {{ $dataTable->scripts() }}
    <!-- INTERNAL Sweet-Alert js -->
    <script src="{{ asset('admin/assets/plugins/sweet-alert/sweetalert.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Handle Status Toggle
            $(document).on('change', '.toggle-status-btn', function() {
                var toggle = $(this);
                var id = toggle.data('id');
                var url = '{{ url("admin/categories") }}/' + id + '/toggle-status';

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if(response.success) {
                            toastr.success(response.message);
                        }
                    },
                    error: function() {
                        toastr.error('Something went wrong!');
                        toggle.prop('checked', !toggle.prop('checked')); // Revert
                    }
                });
            });

            // Handle Image View Modal
            $(document).on('click', '.view-image-btn', function(e) {
                e.preventDefault();
                var imageUrl = $(this).data('image');
                $('#modalImagePreview').attr('src', imageUrl);
                $('#imageViewModal').modal('show');
            });

            // Handle Delete
            $(document).on('click', '.delete-btn', function() {
                var button = $(this);
                var id = button.data('id');
                var deleteUrl = "{{ route('admin.categories.destroy', ':id') }}".replace(':id', id);

                swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this category!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "Cancel",
                    closeOnConfirm: false
                }, function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: deleteUrl,
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                _method: 'DELETE'
                            },
                            success: function(response) {
                                if (response.success) {
                                    swal({
                                        title: "Deleted!",
                                        text: response.message,
                                        type: "success",
                                        timer: 1500,
                                        showConfirmButton: false
                                    });
                                    // Reload Yajra DataTable
                                    if (window.LaravelDataTables && window.LaravelDataTables["categories-table"]) {
                                        window.LaravelDataTables["categories-table"].ajax.reload();
                                    } else {
                                        $('#categories-table').DataTable().ajax.reload();
                                    }
                                } else {
                                    swal("Failed!", response.message, "error");
                                }
                            },
                            error: function(xhr) {
                                var message = "Something went wrong. Please try again.";
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                swal("Failed!", message, "error");
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection