@extends("layouts.master")
@section('title')
    Page Title
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css"/>

    {{-- Empty --}}
@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Paneli</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Panelet</a></li>
                        <li class="breadcrumb-item active">Paneli</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header  border-0">
                    <div class="d-flex align-items-center">
                        <h5 class="card-title mb-0 flex-grow-1">Historia e Kategorisë</h5>
                        <div class="flex-shrink-0">
                            <a href="{{route('categories.create')}}" type="button" class="btn btn-success add-btn"
                               id="create-btn"><i class="ri-add-line align-bottom me-1"></i> Shto Kategori</a>
                            <button type="button" class="btn btn-info"><i
                                    class="ri-file-download-line align-bottom me-1"></i> Import
                            </button>
                            <button class="btn btn-soft-danger" onClick="deleteMultiple()"><i
                                    class="ri-delete-bin-2-line"></i></button>
                        </div>
                    </div>
                </div>
                <form class="app-search d-none d-md-block px-3 col-8">
                    <div class="position-relative">
                        <input type="text" class="form-control text-bg-light" placeholder="Search..."
                               autocomplete="off" id="search-options" value="">
                        <span class="mdi mdi-magnify search-widget-icon"></span>
                        <span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none"
                              id="search-close-options"></span>
                    </div>
                </form>

                <div class="card-body">
                    <table id="scroll-horizontal" class="table nowrap align-middle" style="width:100%">
                        <thead>
                        <tr>
                            <th scope="col" style="width: 10px;">
                                <div class="form-check">
                                    <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                </div>
                            </th>
                            <th>Emri</th>
                            <th>Kategoria Prind</th>
                            <th>Ikona</th>
                            <th>Statusi</th>
                            <th>Veprimet</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($categories as $category)
                            <tr>
                                <th scope="row">
                                    <div class="form-check">
                                        <input class="form-check-input fs-15" type="checkbox" name="checkAll"
                                               value="option1">
                                    </div>
                                </th>
                                <td>{{ $category->name }}</td>

                                <td>
                                    @php
                                        $ancestors = $category->ancestors();
                                    @endphp
                                    @if($ancestors->isNotEmpty())
                                        {{ getCategoryHierarchy($category) }}
                                    @else
                                        <i class="ri-subtract-line"></i>
                                    @endif
                                </td>
                                <td>
                                    @if(!empty($category->image))
                                        <div class="avatar-sm bg-light rounded p-1 me-2">
                                            <img
                                                src="{{ asset($category->image) }}"
                                                alt="" class="img-fluid d-block"/>
                                        </div>
                                    @else
                                        <div class="avatar-sm">
                                            <div class="avatar-title rounded bg-soft-primary text-primary">
                                                ikona
                                            </div>
                                        </div>
                                    @endif
                                </td>

                                <td>
                                    @if($category->status == 1)
                                        <a href="javascript:void(0);" class="updateCategoryStatus"
                                           id="category-{{$category->id}}" data-category_id="{{$category->id}}">
                                            <i class="las la-toggle-on" aria-hidden="true" status="Active"
                                               style="font-size:30px; color:#45cb85;"></i>
                                        </a>
                                    @else
                                        <a href="javascript:void(0);" class="updateCategoryStatus"
                                           id="category-{{$category->id}}" data-category_id="{{$category->id}}">
                                            <i class="las la-toggle-off" aria-hidden="true" status="Inactive"
                                               style="font-size:30px; color:#45cb85;"></i>
                                        </a>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('categories.edit', $category->id) }}"
                                       class="btn btn-sm btn-soft-warning waves-effect waves-light"><i
                                            class="ri-edit-line"></i></a>

                                    <a href="javascript:void(0);" onclick="confirmDelete({{$category->id}})"
                                       class="btn btn-sm btn-soft-danger btn-animation waves-effect waves-light"><i
                                            class="ri-delete-bin-5-line"></i></a>
                                    <form id="delete-form-{{ $category->id }}" method="POST"
                                          action="{{route('categories.destroy', $category->id)}}" style="display:none">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden buttons to trigger SweetAlert -->
    <button id="custom-sa-success" style="display:none;"></button>
    <button id="sa-error" style="display:none;"></button>
    <button id="custom-sa-success-delete" style="display:none;"></button>
    <button id="sa-error-delete" style="display:none;"></button>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // This script is used to update the status of the category
        $(document).ready(function () {
            $(".updateCategoryStatus").click(function () {
                var category_id = $(this).data('category_id');
                var el = $(this);

                $.ajax({
                    type: 'POST',
                    url: '{{ route("admin.updateCategoryStatus") }}',
                    data: {
                        _token: '{{ csrf_token() }}',
                        category_id: category_id
                    },
                    success: function (response) {
                        if (response.status == 1) {
                            el.html('<i class="las la-toggle-on" aria-hidden="true" status="Active" style="font-size:30px; color:#45cb85;"></i>');
                        } else {
                            el.html('<i class="las la-toggle-off" aria-hidden="true" status="Inactive" style="font-size:30px; color:#45cb85;"></i>');
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                    }
                });
            });
        });
    </script>

    <!-- Delete Category -->
    <script>
        function confirmDelete(categoryId) {
            Swal.fire({
                html: '<div class="mt-3">' +
                    '<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>' +
                    '<div class="mt-4 pt-2 fs-15 mx-5">' +
                    '<h4>Are you Sure ?</h4>' +
                    '<p class="text-muted mx-4 mb-0">You sure about Deleting this Category, all subcategories of this category will be deleted as well ? </p>' +
                    '</div>' +
                    '</div>',
                showCancelButton: true,
                confirmButtonClass: 'btn btn-primary w-xs me-2 mb-1',
                confirmButtonText: 'Yes, Delete It!',
                cancelButtonClass: 'btn btn-danger w-xs mb-1',
                buttonsStyling: true,
                showCloseButton: true
            }).then((result) => {
                if (result.isConfirmed) {
                    deleteData(categoryId);
                }
            });
        }

        // This function calls the backend to delete the category
        function deleteData(categoryId) {
            const form = document.getElementById('delete-form-' + categoryId);
            if (form) {
                form.submit();
            } else {
                console.error('Form not found for category ID: ' + categoryId);
            }
        }
    </script>

    <!-- Sweet alert popup -->
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('build/js/pages/sweetalerts.init.js') }}"></script>
    <script src="{{ URL::asset('build/js/admin/app.js') }}"></script>
    <script>
        <!-- This DOM event will trigger some popup messages to show confirmation status when deleting a category -->
        document.addEventListener('DOMContentLoaded', function () {
            @if (session('product_deleted'))
                document.getElementById('custom-sa-success-delete').click();
            @else(session('product_not_deleted'))
                document.getElementById('sa-error-delete').click();
            @endif
        });

        document.getElementById('sa-error-delete').addEventListener('click', function () {
            Swal.fire({
                title: 'Oops...',
                text: "We couldn't delete this category!",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });

        // Assuming you are using SweetAlert for the popup
        document.getElementById('custom-sa-success-delete').addEventListener('click', function () {
            Swal.fire({
                title: 'Success',
                text: "Category has been deleted successfully",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        });
    </script>

    <!-- Confirmation message alert when a new category has been created -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            @if (session('product_created'))
                document.getElementById('custom-sa-success').click();
            @endif
        });

        document.getElementById('sa-error').addEventListener('click', function () {
            Swal.fire({
                title: 'Oops...',
                text: "We couldn't create the new category!",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
        // Assuming you are using SweetAlert for the popup
        document.getElementById('custom-sa-success').addEventListener('click', function () {
            Swal.fire({
                title: 'Success',
                text: "{{ session('product_created') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        });
    </script>
@endsection