@extends('layouts.app', ['title' => __('categories')])

@section('admin_title')
    {{ __('Item Category Manager') }}
@endsection

@section('content')
@include('category.owner.partials.modals')

<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5"></div>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col-lg-4">
                            <h3 class="mb-0">Item Category Manager</h3>
                        </div>
                        <div class="col-lg-8 text-right">
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-items-category">+ Add Category</button>
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-items-subcategory">+ Add Subcategory</button>
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-items-subcategory1">+ Add Sub Sub Category</button>
                            <button type="button" id="top-edit-category-btn" class="btn btn-sm btn-warning">Edit Selected</button>
                            <button type="button" id="top-delete-category-btn" class="btn btn-sm btn-danger">Delete Selected</button>
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-import-category">Import Categories</button>
                            <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#exportCategoriesModal">Export Categories</button>
                        </div>
                        <div class="col-lg-12 text-right mt-3">
                            <input type="text" id="categorySearch" class="form-control d-inline-block" placeholder="Search categories..." style="width:450px;">
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    @include('partials.flash')
                </div>

                <div class="category-wrapper">
                    @forelse($categories ?? [] as $category)
                        {{-- LEVEL 1: Main Category --}}
                        <div class="category-row level-1 searchable">
                            <div class="left">
                                <input type="checkbox" class="category-row-check mr-2" value="{{ $category->id }}"
                                       data-id="{{ $category->id }}" data-position="{{ $category->category_position }}"
                                       data-status="{{ $category->active }}" data-name="{{ $category->name }}"
                                       data-type_id="{{ $category->type_id }}">
                                <span class="toggle" style="cursor:pointer;">&#9660;</span>
                                <i class="fa fa-folder text-warning"></i>
                                <strong>{{ $category->name ?? 'N/A' }}</strong>
                                @if($category->type)
                                    <span class="badge badge-pill badge-soft-info ml-2">{{ $category->type->name }}</span>
                                @endif
                            </div>
                            <div class="right">
                                <span class="badge badge-pill badge-soft-primary mr-3">{{ $category->items_count ?? 0 }} Products</span>
                                <a href="javascript:void(0)" data-toggle="modal" data-target="#modal-edit-category" data-id="{{ $category->id }}" data-position="{{ $category->category_position }}" data-status="{{ $category->active }}" data-name="{{ $category->name }}" data-type_id="{{ $category->type_id }}" class="edit-category-btn text-info mr-2">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <a href="javascript:void(0)" class="text-danger delete-btn" data-id="{{ $category->id }}" data-type="category">
                                    <i class="fa fa-trash"></i>
                                </a>
                            </div>
                        </div>

                        <div class="children">
                            @foreach($category->forsubcategories ?? [] as $sub)
                                {{-- LEVEL 2: Sub Category --}}
                                <div class="category-row level-2 searchable">
                                    <div class="left">
                                        <span class="toggle" style="cursor:pointer;">&#9660;</span>
                                        <i class="fa fa-folder text-primary"></i>
                                        {{ $sub->name ?? 'N/A' }}
                                    </div>
                                    <div class="right">
                                        <span class="text-muted mr-3 small">{{ $sub->items_count ?? 0 }} Products</span>
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#modal-edit-subcategory" class="text-info mr-2 edit-subcategory-btn" data-id="{{ $sub->id }}" data-status="{{ $sub->active }}" data-name="{{ $sub->name }}" data-category_id="{{ $sub->category_id }}">
                                            <i class="fa fa-pencil"></i>
                                        </a>
                                        <a href="javascript:void(0)" class="text-danger delete-btn" data-id="{{ $sub->id }}" data-type="subcategory">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </div>

                                <div class="children">
                                    @foreach($sub->subsubCategories ?? [] as $subsub)
                                        {{-- LEVEL 3: Sub-Sub Category --}}
                                        <div class="category-row level-3 searchable">
                                            <div class="left">
                                                <i class="fa fa-file-text-o text-secondary"></i>
                                                {{ $subsub->name ?? 'N/A' }}
                                            </div>
                                            <div class="right">
                                                <span class="text-muted mr-3 small">{{ $subsub->items_count ?? 0 }} Products</span>
                                                <a href="javascript:void(0)" data-toggle="modal" data-target="#modal-edit-subsubcategory" class="text-info mr-2 edit-subsubcategory-btn" data-id="{{ $subsub->id }}" data-status="{{ $subsub->active }}" data-name="{{ $subsub->name }}" data-category_id="{{ $sub->category_id }}" data-subcategory_id="{{ $subsub->subcategory_id }}">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <a href="javascript:void(0)" class="text-danger delete-btn" data-id="{{ $subsub->id }}" data-type="subsubcategory">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    @empty
                        <div class="p-5 text-center text-muted">No categories found.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
    @include('layouts.footers.auth')
{{-- Hidden Delete Form --}}
<form id="delete-form" method="POST" style="display:none;">
    @csrf
</form>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<style>
    .category-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #f8f9fe; transition: 0.2s; }
    .category-row:hover { background: #f6f9fc; }
    .level-2 { padding-left: 50px; background-color: #fafafa; }
    .level-3 { padding-left: 90px; background-color: #ffffff; }
    .left { display: flex; align-items: center; gap: 10px; }
    .toggle { font-family: monospace; width: 15px; display: inline-block; }
</style>
<script>
$(document).ready(function () {

    function toggleExportFields() {
        let type = $('#export_type').val();

        $('.date_wise_field').hide();
        $('.id_wise_field').hide();

        if (type === 'date_wise') {
            $('.date_wise_field').show();
        } else if (type === 'id_wise') {
            $('.id_wise_field').show();
        }
    }

    $('#export_type').on('change', toggleExportFields);

    // Default load
    toggleExportFields();
});
</script>
<script>
$(document).ready(function() {
    // 1. Expand / Collapse Toggle
    $(document).on("click", ".toggle", function() {
        let parent = $(this).closest(".category-row");
        let childrenDiv = parent.next(".children");
        if (childrenDiv.is(":visible")) {
            childrenDiv.slideUp(200);
            $(this).html("&#9658;"); // Right triangle
        } else {
            childrenDiv.slideDown(200);
            $(this).html("&#9660;"); // Down triangle
        }
    });

    // 2. Live Search
    $("#categorySearch").on("keyup", function() {
        let value = $(this).val().toLowerCase();
        $(".searchable").each(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
        if(value === "") $(".children").show(); // Reset visibility if search cleared
    });

    // 3. Delete Logic (Swal)
    $(document).on('click', '.delete-btn', function () {
        let id = $(this).data('id');
        let type = $(this).data('type');
        let routes = {
            'category': "{{ route('owner.category.remove', ':id') }}",
            'subcategory': "{{ route('owner.subcategory.remove', ':id') }}",
            'subsubcategory': "{{ route('owner.subsubcategory.remove', ':id') }}"
        };
        let finalRoute = routes[type].replace(':id', id);

        Swal.fire({
            title: 'Are you sure?',
            text: "All nested items will be deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#f5365c',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if(result.isConfirmed){
                $('#delete-form').attr('action', finalRoute).submit();
            }
        });
    });

    // 4. Edit Category Modal
    $(document).on('click', '.edit-category-btn', function() {
        let id = $(this).data('id');
        let name = $(this).data('name');
        let status = $(this).data("status");
        let position = $(this).data("position");
        let type_id = $(this).data("type_id");
        $('#cat_name').val(name);
        $("#category_status").val(status);
        $("#category_position").val(position);
        $("#category_type_id").val(type_id ? type_id : "");

        let route = "{{ route('owner.category.update', ':id') }}".replace(':id', id);
        $("#form-edit-category").attr("action", route);
    });

    // 5. Edit Subcategory Modal
    $(document).on('click', '.edit-subcategory-btn', function () {
        let id = $(this).data('id');
        let name = $(this).data('name');
        let parent_id = $(this).data('category_id');
        let status = $(this).data("status");
        $('#sub_cat_name').val(name);
        $('#edit_parent_id').val(parent_id);
        $("#subcategory_status").val(status);
        let route = "{{ route('owner.subcategory.update', ':id') }}".replace(':id', id);
        $('#form-edit-subcategory').attr('action', route);
        $('#modal-edit-subcategory').modal('show');
    });

    // 6. Edit Sub-Subcategory Modal
    $(document).on('click', '.edit-subsubcategory-btn', function () {
        let id = $(this).data('id');
        let name = $(this).data('name');
        let cat_id = $(this).data('category_id');
        let sub_id = $(this).data('subcategory_id');
        let status = $(this).data("status");
        $('#edit_subsubcategory_name').val(name);
        $('#edit_subsubcategory_category').val(cat_id);
        $("#subsubcategory_status").val(status);
        // Dynamic Loading of subcategories
        $.get("{{ route('owner.subcategory.byCategory') }}", { category_id: cat_id }, function(data) {
            let options = '<option value="">Select Subcategory</option>';
            data.forEach(sub => {
                options += `<option value="${sub.id}" ${sub.id == sub_id ? 'selected' : ''}>${sub.name}</option>`;
            });
            $('#edit_subsubcategory_subcategory').html(options);
        });

        let route = "{{ route('owner.subsubcategory.update', ':id') }}".replace(':id', id);
        $('#form-edit-subsubcategory').attr('action', route);
        $('#modal-edit-subsubcategory').modal('show');
    });

    // 7. Top "Edit Selected" / "Delete Selected" for categories
    $('#top-edit-category-btn').on('click', function () {
        let selected = $('.category-row-check:checked');
        if (selected.length === 0) {
            alert('Please select a category to edit.');
            return;
        }
        if (selected.length > 1) {
            alert('Please select only one category at a time.');
            return;
        }
        let checkbox = selected.first();
        let id = checkbox.data('id');
        let name = checkbox.data('name');
        let status = checkbox.data('status');
        let position = checkbox.data('position');
        let type_id = checkbox.data('type_id');
        $('#cat_name').val(name);
        $('#category_status').val(status);
        $('#category_position').val(position);
        $('#category_type_id').val(type_id ? type_id : "");
        let route = "{{ route('owner.category.update', ':id') }}".replace(':id', id);
        $('#form-edit-category').attr('action', route);
        $('#modal-edit-category').modal('show');
    });

    $('#top-delete-category-btn').on('click', function () {
        let selected = $('.category-row-check:checked');
        if (selected.length === 0) {
            alert('Please select at least one category to delete.');
            return;
        }
        Swal.fire({
            title: 'Are you sure?',
            text: 'All nested items will be deleted!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#f5365c',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                let id = selected.first().val();
                let route = "{{ route('owner.category.remove', ':id') }}".replace(':id', id);
                $('#delete-form').attr('action', route).submit();
            }
        });
    });
});
</script>
<script>

    function selectcategory() {
        var country = $("#category_select").val();
        
        $.ajax({
            type: 'post',
            url: "{{ route('web.selectcategory') }}",
            dataType: 'json',
            data: {
                _token: "{{ csrf_token() }}",
                country: country
            },
            success: function(data) {
                console.log(data);
                $("#subcategory_select").html("");
                $.each(data, function(key, value) {
                    
                    $('select[id="subcategory_select"]').append('<option value="' + value.id + '">' + value
                    .name + '</option>');
                    
                });
                selectstates();
            }
        });
    }
    </script>
@endsection