@extends('admin.layout.app')
@section('content')
    <div class="content-area">
        <div class="mr-breadcrumb">
            <div class="row">
                <div class="col-lg-12">
                    <h4 class="heading">Sub Categories</h4>
                    <ul class="links">
                        <li>
                            <a href="{{route('admin.dashboard')}}">Dashboard </a>
                        </li>
                        <li><a href="javascript:;">Manage Sub Categories</a></li>
                        <li>
                            <a href="{{route('admin.sub.category.index')}}">Sub Categories</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="product-area">
            <div class="row">
                <div class="col-lg-12">
                    <div class="mr-table allproduct">
                        <div class="alert alert-success validation" style="display: none;">
                            <button type="button" class="close alert-close"><span>×</span></button>
                            <p class="text-left"></p>
                        </div>
                        <div class="table-responsive">
                            <table id="geniustable" class="table table-hover dt-responsive" cellspacing="0"
                                   width="100%">
                                <thead>
                                <tr>
                                    <th>Category</th>
                                    <th>Name</th>
                                    <th>Slug</th>
                                    <th>Status</th>
                                    <th>Options</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="modal1" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="submit-loader">
                    <img src="{{asset('admin/images/1564224329loading3.gif')}}" alt="">
                </div>

                <div class="modal-header">
                    <h5 class="modal-title">Add New Sub Category</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>

                <div class="modal-body">
                    <div class="alert alert-danger validation" style="display:none;">
                        <button type="button" class="close alert-close"><span>×</span></button>
                        <p class="text-left"></p>
                    </div>

                    <form id="createSubCategoryForm" enctype="multipart/form-data">

                        <!-- Parent Category Dropdown -->
                        <div class="form-group">
                            <label>Select Parent Category <span class="text-danger">*</span></label>
                            <select name="category_id" id="create-category-id" class="form-control" required>
                                <option value="">-- Select Category --</option>
                            </select>
                        </div>

                        <!-- Sub Category Name -->
                        <div class="form-group">
                            <label>Subcategory Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" id="create-name" required>
                        </div>

                        <!-- Image Upload -->
                        <div class="form-group">
                            <label>Image <span class="text-danger">*</span></label>
                            <input type="file" name="image" class="form-control" id="create-image" required>
                        </div>

                        <button type="submit" class="btn btn-success btn-block">
                            <i class="fas fa-save"></i> Create Subcategory
                        </button>

                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="submit-loader">
                    <img src="{{asset('admin/images/1564224329loading3.gif')}}" alt="">
                </div>

                <div class="modal-header">
                    <h5 class="modal-title">Edit Sub Category</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>

                <div class="modal-body">
                    <form id="editSubCategoryForm" enctype="multipart/form-data">
                        <input type="hidden" name="id" id="subcat-id">

                        <!-- Category List -->
                        <div class="form-group">
                            <label>Parent Category</label>
                            <select name="category_id" id="subcat-category" class="form-control">
                                <!-- Options dynamically loaded -->
                            </select>
                        </div>

                        <!-- Name -->
                        <div class="form-group">
                            <label>Sub Category Name</label>
                            <input type="text" name="name" id="subcat-name" class="form-control">
                        </div>

                        <!-- Slug -->
                        <div class="form-group">
                            <label>Slug</label>
                            <input type="text" name="slug" id="subcat-slug" class="form-control" readonly>
                        </div>

                        <!-- Image -->
                        <div class="form-group">
                            <label>Image</label><br>
                            <img id="subcat-image-preview" src="" width="80" class="mb-2 rounded">
                            <input type="file" name="image" class="form-control">
                        </div>

                        <button type="submit" class="btn btn-success">Update</button>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header d-block text-center">
                    <h4 class="modal-title d-inline-block">Confirm Delete</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p class="text-center">You are about to delete this Sub Category. Everything under this category
                        will be
                        deleted.</p>
                    <p class="text-center">Do you want to proceed?</p>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <form action="" class="d-inline delete-form">
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>

            </div>
        </div>
    </div>




@endsection
@push('script')

    <script type="text/javascript">
        (function ($) {
            "use strict";

            var table = $('#geniustable').DataTable({
                ordering: false,
                processing: true,
                serverSide: true,
                ajax: '{{route('admin.sub.category.data')}}',
                columns: [
                    {data: 'category', name: 'category'},
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'slug',
                        name: 'slug'
                    },
                    {
                        data: 'status',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'action',
                        searchable: false,
                        orderable: false
                    }

                ],
                language: {
                    processing: '<img src="{{asset('admin/images/1564224329loading3.gif')}}">'
                },
                drawCallback: function (settings) {
                    $('.select').niceSelect();
                }
            });

            $(function () {
                $(".btn-area").append('<div class="col-sm-4 table-contents">' +
                    '<a class="add-btn" data-href="#" id="add-category-btn" data-toggle="modal" data-target="#modal1">' +
                    '<i class="fas fa-plus"></i> <span class="remove-mobile">Add New<span>' +
                    '</a>' +
                    '</div>');
            });


        })(jQuery);


        $(document).on('click', '.edit-subcategory', function () {
            let id = $(this).data('id');
            let name = $(this).data('name');
            let slug = $(this).data('slug');
            let image = $(this).data('image');
            let categoryId = $(this).data('category_id');

            // Set values
            $('#subcat-id').val(id);
            $('#subcat-name').val(name);
            $('#subcat-slug').val(slug);
            $('#subcat-image-preview').attr('src', image);

            // Load category list via AJAX
            $.ajax({
                url: "{{ route('admin.category.list') }}",
                type: "GET",
                success: function (categories) {
                    let options = '';
                    categories.forEach(cat => {
                        options += `<option value="${cat.id}" ${cat.id == categoryId ? 'selected' : ''}>${cat.name}</option>`;
                    });
                    $('#subcat-category').html(options);
                }
            });
        });


        $(document).on('click', '.delete-category', function () {
            let actionUrl = $(this).data('href');
            $('#confirm-delete').find('form').attr('action', actionUrl);
        });

        $(document).on('submit', '.delete-form', function (e) {
            e.preventDefault();

            let actionUrl = $(this).attr('action');

            $.ajax({
                url: actionUrl,
                type: 'DELETE',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    if (response.status === true) {
                        // Hide modal
                        $('#confirm-delete').modal('hide');

                        // Refresh DataTable
                        $('#geniustable').DataTable().ajax.reload(null, false);

                        // Show success notification
                        $('.validation').show().find('p').text('Sub Category deleted successfully!');
                        setTimeout(() => $('.validation').fadeOut(), 2000);
                    }
                },
                error: function (xhr) {
                    alert('Error deleting category, please try again.');
                }
            });
        });

        // 🔄 Handle status toggle click
        $(document).on('click', '.toggle-status', function () {
            const btn = $(this);
            const id = btn.data('id');
            const currentStatus = btn.data('status');

            btn.prop('disabled', true).text('Updating...');

            $.ajax({
                url: '{{ route('admin.sub.category.status') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                },
                success: function (response) {
                    if (response.success) {
                        const newStatus = response.status ? 1 : 0;
                        const newClass = newStatus ? 'btn-success' : 'btn-danger';
                        const newText = newStatus ? 'Active' : 'Inactive';

                        btn.removeClass('btn-success btn-danger')
                            .addClass(newClass)
                            .text(newText)
                            .data('status', newStatus);
                    } else {
                        alert('Failed to update status.');
                    }
                },
                error: function () {
                    alert('Something went wrong.');
                },
                complete: function () {
                    btn.prop('disabled', false);
                }
            });
        });

        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#editSubCategoryForm').on('submit', function (e) {
                e.preventDefault();

                let formData = new FormData(this);
                let id = $('#subcat-id').val();

                $('.submit-loader').show();

                $.ajax({
                    url: "{{ url('admin/sub/category/update') }}/" + id,
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        $('.submit-loader').hide();
                        if (response.status === true) {
                            $('#modal2').modal('hide');

                            // Refresh table
                            $('#geniustable').DataTable().ajax.reload();

                            // Success alert
                            $('.validation').show().delay(2000).fadeOut();
                            $('.validation p').text('Sub Category updated successfully.');
                        }
                    },
                    error: function (xhr) {
                        $('.submit-loader').hide();
                        alert('Error updating subcategory');
                    }
                });
            });

        });
        $(document).on('click', '#add-category-btn', function () {
            $('#modal1 .modal-title').text('Add New Sub Category');

            // Clear previous data
            $('#createSubCategoryForm')[0].reset();

            // Load parent categories in dropdown
            $.ajax({
                url: "{{ route('admin.category.list') }}", // This should return id & name
                type: "GET",
                success: function (data) {
                    let options = '<option value="">-- Select Category --</option>';
                    data.forEach(function (item) {
                        options += `<option value="${item.id}">${item.name}</option>`;
                    });
                    $('#create-category-id').html(options);
                }
            });
        });

        $('#createSubCategoryForm').on('submit', function (e) {
            e.preventDefault();

            let formData = new FormData(this);
            $('.submit-loader').show();

            $.ajax({
                url: "{{ route('admin.sub.category.store') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    $('.submit-loader').hide();
                    if (response.status === true) {
                        $('#modal1').modal('hide');
                        $('#geniustable').DataTable().ajax.reload(null, false);
                        $('.validation').show().find('p').text('Category Created Successfully');
                    }
                },
                error: function (xhr) {
                    $('.submit-loader').hide();

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';

                        // Loop through all errors and collect messages
                        $.each(errors, function (key, messages) {
                            errorMessages += `<li>${messages[0]}</li>`;
                        });

                        // Show validation error box
                        $('.validation').show().find('p').html(`<ul>${errorMessages}</ul>`);

                        // Auto hide after 3 seconds
                        setTimeout(() => $('.validation').fadeOut(), 3000);
                    } else {
                        alert('Something went wrong');
                    }
                }
            });
        });

    </script>

@endpush