@extends('template.layouts.template-base')
@section('title', 'Product Management - Category')

@section('styles')
<style>
  .page-content{
    background-color:#F0F4F8!important;
    padding: 80px 10px;
  }
</style>
@endsection

@section('content')
    <div class="page-header">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        Product Management / <span class="breadcrumb-link">Category</span>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class=" action-buttons d-none"  id="bulkActions">
                    <button class="btn-delete-category " data-bs-toggle="modal" data-bs-target=".remove-category-screen">
                        Detele List  <i class="ri-delete-bin-4-fill fs-5"></i>
                    </button>
                    <button class="btn-export-category">
                        Export
                      <svg xmlns="http://www.w3.org/2000/svg"
                         width="16" height="16"
                         viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 16V3"></path>
                        <polyline points="7 8 12 3 17 8"></polyline>
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>

                    </button>
                    </div>
                    <button class="btn-add-category" data-bs-toggle="offcanvas" data-bs-target="#addCategoryOffcanvas">
                        Add Category  <i class="ri-add-fill fs-5"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="content-wrapper">
            <div class="filter-section">
                <button class="badge-total">Total Category - {{ $categories_count }}</button>
                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="statusFilter" class="dropdown-btn">
                            <option value="">All Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body pt-3 pb-0">

                <div id="formSuccess" class="alert alert-success d-none"></div>
                <div id="editFormSuccess" class="alert alert-success d-none"></div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="categoriesTable" class="table">
                        <thead>
                            <tr>
                                {{-- <th scope="col"><input type="checkbox" id="selectAll"></th> --}}
                                <th scope="col">S.No</th>
                                <th scope="col">Category Name</th>
                                <th scope="col">No of Products</th>
                                <th scope="col">Description</th>
                                {{-- <th scope="col">Total Earnings</th> --}}
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Category Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addCategoryOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close"  data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Add Category</h5>
        </div>
        <div class="offcanvas-body">
           <form id="addCategoryForm" method="POST" action="{{ route('backend.categories.store') }}" enctype="multipart/form-data">
                @csrf
                <div id="formErrors" class="alert alert-danger d-none"></div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Category Name English<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="category_name_en" id="category_name_en" placeholder="Enter category name english">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category Name Tamil</label>
                        <input type="text" class="form-control" name="category_name_tamil" id="category_name_tamil" placeholder="Enter category name tamil">
                    </div>
                    <div class="col-md-6 my-4">
                        <label class="form-label">Category Status <span class="text-danger">*</span></label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusActive" value="1" checked>
                                <label class="form-check-label" for="addStatusActive">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusInactive" value="0">
                                <label class="form-check-label" for="addStatusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Category Image <span class="text-danger">*</span> <small class="text-muted">(110px*100px)</small></label>
                    <div class="mt-2">
                        <div class="image-upload-box-2">
                            <input type="file" name="image" id="categoryImage" hidden>
                            <label for="categoryImage" class="upload-label">
                                <div class="upload-content">
                                    <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"  class="add-img" alt="Images">
                                        <div class="upload-text">Choose a file or drag and drop it here</div>
                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description English</label>
                    <textarea class="form-control description-textarea" name="description_en" id="description_en" placeholder="Type Here"></textarea>
                    <div class="char-count">0/100</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Description Tamil</label>
                    <textarea class="form-control description-textarea" name="description_tamil" id="description_tamil" placeholder="Type Here"></textarea>
                    <div class="char-count">0/100</div>
                </div>
                <div class="d-flex justify-content-end gap-4  offcan-btn">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn show-toast">Save</button>
                </div>
            </form>
        </div>
    </div>

    <!-- View Category Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="viewCategoryOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">
                ✕ </button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">View Category</h5>
        </div>
        <div class="offcanvas-body">
            <form id="viewCategoryForm">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Category Name English</label>
                        <p id="view_category_name_en"></p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category Name Tamil</label>
                        <p id="view_category_name_tamil"></p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category Status</label>
                        <p id="view_category_status"></p>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Category Image</label>
                    <div>
                        <img id="view_category_image"
                        src=""
                        class="category-image-upload">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description English</label>
                    <p id="view_description_en"></p>

                </div>
                <div class="mb-3">
                    <label class="form-label">Description Tamil</label>
                   <p id="view_description_tamil"></p>

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

    <!-- Edit Category Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="editCategoryOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Edit Category</h5>

        </div>
        <div class="offcanvas-body">
            <form id="editCategoryForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div id="editFormErrors" class="alert alert-danger d-none"></div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Category Name English<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="category_name_en" id="edit_category_name_en" placeholder="Enter category name english" value="">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category Name Tamil</label>
                        <input type="text" class="form-control" name="category_name_tamil" id="edit_category_name_tamil" placeholder="Enter category name tamil" value="">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category Status <span class="text-danger">*</span></label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="editStatusActive" value="1" checked>
                                <label class="form-check-label" for="editStatusActive">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="editStatusInactive" value="0">
                                <label class="form-check-label" for="editStatusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Category Image <span class="text-danger">*</span> <small class="text-muted">(110px*100px)</small></label>
                    <div class="mt-2">
                        <div class="image-upload-box-2">
                            <input type="file" name="image" id="editCategoryImage" hidden>
                            <label for="editCategoryImage" class="upload-label">
                                <div class="upload-content">
                                    <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"  class="add-img" alt="Images">
                                        <div class="upload-text">Choose a file or drag and drop it here</div>
                            <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                </div>
                            </label>
                        </div>
                        <div>
                            <img id="edit_category_image">
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description English</label>
                    <textarea class="form-control description-textarea" name="description_en" id="edit_description_en" placeholder="Type Here"></textarea>
                    <div class="char-count">0/100</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Description Tamil</label>
                    <textarea class="form-control description-textarea" name="description_tamil" id="edit_description_tamil" placeholder="Type Here"></textarea>
                    <div class="char-count">0/100</div>
                </div>
                <div class="d-flex justify-content-end gap-4 offcan-btn-1">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn show-toast">Update</button>
                </div>
            </form>
        </div>
    </div>

    {{-- <div class="position-fixed top-0 end-25 p-4" style="z-index: 1090">
        <div id="categoryAddedActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                            ✓
                    </div>
            </div>
            <div class="toast-right">
            <h6>Category Added Successfully</h6>
            <p>The Category has been added successfully and is now available in the category list.</p>
            </div>

            </div>
        </div>
    </div> --}}
    @include('template.layouts.confirm-delete-modal')

@endsection
@section('scripts')
<script src="{{ asset('assets/auth/js/jquery-ui.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#addCategoryForm').on('submit', function (e){
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,

                success: function (response) {

                    $('#formErrors').addClass('d-none').html('');

                    $('#formSuccess')
                        .removeClass('d-none')
                        .html(response.message);

                    // reload datatable
                    $('#categoriesTable').DataTable().ajax.reload(null, false);

                    // reset form
                    $('#addCategoryForm')[0].reset();

                    $('#addCategoryOffcanvas').offcanvas('hide');

                    // scroll to success message
                    $('html, body').animate({
                        scrollTop: $('#formSuccess').offset().top - 100
                    }, 500);

                    setTimeout(() => {
                        $('#formSuccess').addClass('d-none');
                    }, 2000);

                },
                error: function (xhr) {

                    $('#formErrors').removeClass('d-none').html('');

                    if (xhr.status === 422) {
                        $.each(xhr.responseJSON.errors, function (key, value) {
                            $('#formErrors').append('<p>' + value[0] + '</p>');
                        });
                    } else {
                        $('#formErrors').html('Something went wrong. Please try again.');
                    }

                    // ⬆️ scroll to error inside form
                    $('.offcanvas-body').animate({
                        scrollTop: 0
                    }, 300);
                }
            });
        });
    });

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

        $('#statusFilter').on('change', function () {
            table.ajax.reload();
        });

        var table = $('#categoriesTable').DataTable({
            processing: true,
            ordering: false,
            searching: true,
            serverSide: true,
            responsive: true,
            pageLength: 10,
            language: {
                paginate: {
                    next: '{{__('Next')}}',
                    previous: '{{__('Previous')}}'
                }
            },
            ajax: {
                url: "{{ route('backend.categories.index') }}",
                data: function(d) {
                    d.category_name_en      = $('#category_name_en').val(),
                    d.category_name_tamil   = $('#category_name_tamil').val(),
                    d.status                = $('#statusFilter').val();
                    d.search = $('input[type="search"]').val()
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'products_count',
                    name: 'products_count'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
        });
        $('input[type="search"]').keyup(function(e) {
            countByFilter();
            table.draw();
            e.preventDefault();
        });
        $("#applyFilter").click(function(e) {
            table.draw();
            e.preventDefault();
        });


    });

    $("#resetFilter").click(function() {
        $(".filter").val('');
        $('#categoriesTable').DataTable().ajax.reload();
        countByFilter();
    });



    $(document).on('click', '.view-category', function (e) {
        e.preventDefault();

        let url = $(this).data('url');

        $.get(url, function (data) {

            // Text values
            $('#view_category_name_en').text(data.category_name_en ?? '-');
            $('#view_category_name_tamil').text(data.category_name_tamil ?? '-');

            // Status
            $('#view_category_status').text(
                data.status == 1 ? 'Active' : 'Inactive'
            );

            // Descriptions
            $('#view_description_en').text(data.description_en ?? '-');
            $('#view_description_tamil').text(data.description_tamil ?? '-');

            // Image
            if (data.image) {
                $('#view_category_image').attr('src', '/' + data.image);
            } else {
                $('#view_category_image').attr(
                    'src',
                    "{{ asset('assets/template/images/cate-img.png') }}"
                );
            }

            // Show offcanvas
            let offcanvas = new bootstrap.Offcanvas('#viewCategoryOffcanvas');
            offcanvas.show();
        });
    });

    $(document).on('click', '.edit-category', function (e) {
        e.preventDefault();

        let editUrl   = $(this).data('url');
        let updateUrl = $(this).data('update-url');
        $('#editCategoryForm').attr('action', updateUrl);
        // clear previously selected file
        // $('#categoryImage').val('');
        $.get(editUrl, function (data) {

            // Text values
            $('#edit_category_name_en').val(data.category_name_en);
            $('#edit_category_name_tamil').val(data.category_name_tamil);

            // Status
            if (data.status == 1) {
                $('#editStatusActive').prop('checked', true);
            } else {
                $('#editStatusInactive').prop('checked', true);
            }

            // Descriptions
            $('#edit_description_en').val(data.description_en ?? '-');
            $('#edit_description_tamil').val(data.description_tamil ?? '-');

            //Image
            if (data.image) {
            $('#edit_category_image')
                .attr('src', '/' + data.image)
                .removeClass('d-none');
            } else {
                $('#edit_category_image')
                    .attr('src', '')
                    .addClass('d-none');
            }

            // Show offcanvas
            let offcanvas = new bootstrap.Offcanvas('#editCategoryOffcanvas');
            offcanvas.show();
        });
    });

    $(document).ready(function () {
        $('#editCategoryForm').on('submit', function (e){
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,

                success: function (response) {

                    $('#editFormErrors').addClass('d-none').html('');

                    $('#editFormSuccess')
                        .removeClass('d-none')
                        .html(response.message);

                    // reload datatable
                    $('#categoriesTable').DataTable().ajax.reload(null, false);

                    // reset form
                    $('#editCategoryForm')[0].reset();

                    $('#editCategoryOffcanvas').offcanvas('hide');

                    //scroll to success message
                    $('html, body').animate({
                        scrollTop: $('#editFormSuccess').offset().top - 100
                    }, 500);

                    setTimeout(() => {
                        $('#editFormSuccess').addClass('d-none');
                    }, 2000);

                },
                error: function (xhr) {

                    $('#editFormErrors').removeClass('d-none').html('');

                    if (xhr.status === 422) {
                        $.each(xhr.responseJSON.errors, function (key, value) {
                            $('#editFormErrors').append('<p>' + value[0] + '</p>');
                        });
                    } else {
                        $('#editFormErrors').html('Something went wrong. Please try again.');
                    }

                    //scroll to error inside form
                    $('.offcanvas-body').animate({
                        scrollTop: 0
                    }, 300);
                }
            });
        });
    });

    $(document).ready(function () {
        initDeleteHandler();
    });

</script>
@endsection