@extends('backend.layouts.app')
@section('title', 'Products')
@section('content')
    <div class="content container-fluid">
        <div class="card">
            <div class="card-header">
                <button class="btn btn-primary add" onclick="showModal()">Add Product</button>
            </div>

            <div class="card-body">
                <div class="">
                    <table id="datatable" class="table table-striped table-hover dt-responsive display nowrap">
                        <thead class="thead-dark">
                            <tr>
                                <th>#</th>
                                <th>Image</th>
                                <th>Title</th>
                                <th>Category</th>
                                <th>Status</th>
                                <th>Featured</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Product Modal -->
    <div class="modal fade" id="productModal" tabindex="-1">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <form id="productForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Add/Edit Product</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="product_id">
                        <div class="mb-3">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control" id="title" required>
                        </div>
                        <div class="mb-3">
                            <label>Short Description</label>
                            <textarea class="form-control editor" name="short_description" id="short_description"
                                required></textarea>
                        </div>
                        <div class="mb-3">
                            <label>Description</label>
                            <textarea class="form-control editor" name="description" id="description" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label>Category</label>
                            <select class="form-control form-select" name="category_id" id="category_id">
                                <option value="" selected>Select Category Name</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                                <option value="new">Add New Category</option>
                            </select>
                        </div>

                        <div id="newCategoryField" class="mb-3" style="display:none;">
                            <label>New Category Name</label>
                            <input type="text" class="form-control" name="category_name" id="new_category_name" placeholder="Enter new category">
                            <!-- <button type="button" id="saveCategoryBtn" class="btn btn-primary mt-2">Save Category</button> -->
                        </div>


                        <div class="mb-3">
                            <label>Image</label>
                            <input type="file" class="form-control mb-3" name="image" id="image" accept="image/*">
                            <!-- image preview  -->
                            <img id="imagePreview" src="" width="100" style="display:none; border:1px solid #ddd; padding:5px;" />
                        </div>
                        <div class="mb-3">
                            <label>Status</label>
                            <select class="form-control form-select" name="status" id="status">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <hr>
                        <div class="form-check form-switch mb-4">
                            <input type="checkbox" class="form-check-input is-valid" id="validSwitch" name="is_featured">
                            <label class="form-check-valid">Featured Product</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="submitBtn" class="btn btn-success">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function showModal() {
            $('#productForm')[0].reset();
            $('#short_description').summernote('code', '');
            $('#description').summernote('code', '');
            $('#productModal').modal('show');
            $('#imagePreview').hide();
        }

        $(document).ready(function () {
            function loadDataTable() {
                if ($.fn.DataTable.isDataTable('#datatable')) {
                    $('#datatable').DataTable().destroy();
                }

                $('#datatable').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    ajax: '{{ route("products.index") }}',
                    columns: [
                        { data: 'id' },
                        { data: 'image' },
                        { data: 'title' },
                        { data: 'category' },
                        { data: 'status' },
                        { data: 'featured' },
                        { data: 'action' }
                    ]
                });
            }

            loadDataTable();

            // Save (Create/Update) Product
            $('#productForm').on('submit', function (e) {
                e.preventDefault();
                let formData = new FormData(this);

                let productId = $('#product_id').val();
                let url = productId ? `/admin/products/update/${productId}` : '/admin/products/store';
                $('#submitBtn').attr('disabled', true);
                $('#submitBtn').text('Uploading...')

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        iziToast.success({ title: 'Success', message: response.success });
                        $('#productModal').modal('hide');
                        $('#productForm')[0].reset();
                        $('#submitBtn').attr('disabled', false);
                        $('#submitBtn').text('Save');
                        loadDataTable();
                    },
                    error: function (xhr) {
                        let errors = xhr.responseJSON.errors;
                        if (errors) {
                            $.each(errors, function (key, value) {
                                iziToast.error({ title: 'Error', message: value });
                            });
                        }
                        $('#submitBtn').attr('disabled', false).text('Save');
                    }
                });
            });

            // Edit Product
            $('body').on('click', '.edit', function () {
                let id = $(this).data('id');
                var specificOption = $("#category_id option[value='new']");
                specificOption.hide(); // Hide the option

                $.get(`/admin/products/edit/${id}`, function (data) {
                    console.log(data);

                    $('#product_id').val(data.id);
                    $('#title').val(data.title);
                    $('#short_description').summernote('code', data.short_description);
                    $('#description').summernote('code', data.description);
                    $('#status').val(data.status);
                    $('#category_id').val(data.category_id);
                    if(data.is_featured == 1){
                        $('#validSwitch').attr('checked', true);
                    }else{
                        $('#validSwitch').attr('checked', false);

                    }
                    // Show previous image if available
                    if (data.image) {
                        $('#imagePreview').attr('src', '/uploads/products/' + data.image).show();
                    } else {
                        $('#imagePreview').hide();
                    }
                    $('#productModal').modal('show');
                });
            });

            // Delete Product
            $('body').on('click', '.delete', function () {
                let id = $(this).data('id');
                if (!confirm("Are you sure you want to delete this product?")) {
                    return;
                }
                $.ajax({
                    url: `/admin/products/delete/${id}`,
                    type: 'DELETE',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') },
                    success: function (response) {
                        iziToast.success({ title: 'Deleted', message: response.success });
                        loadDataTable();
                    },
                    error: function (xhr) {
                        iziToast.error({ title: 'Error', message: 'Failed to delete the product' });
                    }
                });
            });
        });

        //show category add modal
        $('#category_id').change(function () {
            if ($(this).val() === 'new') {
                $('#newCategoryField').show();
            } else {
                $('#newCategoryField').hide();
            }
        });

        //change featued status
        $(document).on('change', '.featured-toggle', function () {
            var id = $(this).data('id');
             $.ajax({
                url: `/admin/products/is-featured/${id}`,
                type: 'get',
                data: { _token: $('meta[name="csrf-token"]').attr('content') },
                success: function (response) {
                     iziToast.success({ title: 'Success', message: response.success });
                     loadDataTable();
                 },
                 error: function (xhr) {
                     iziToast.error({ title: 'Error', message: response.error });
                 }
             });

        });


    </script>
@endpush