@extends("common.layout")

@section('page-title', $pageServiceName . ' 카테고리 관리')

@section("content")

<h1>
    <a href="{{ route('product.category.list', $service) }}">{{ $pageServiceName }} 카테고리 관리</a>
</h1>

<div class="row g-2">
    <div class="col-3" style="min-width: 450px">
        <form name="category-form" action="{{ route('api.product.category.set') }}" method="POST">
            <input type="hidden" name="service" value="{{ $service }}">
            @csrf

            <section>
                <header>
                    <h6>총 <strong>{{ $productCategories->count() }}</strong>건</h6>

                    <div>
                        <button type="button" class="btn btn-success" onclick="addCategory()"><i class="bi bi-plus-circle-dotted"></i></button>
                        <button type="submit" class="btn btn-primary">변경사항저장</button>
                    </div>
                </header>

                <main>
                    <table class="table table-hover">
                        <colgroup>
                            <col width="30">
                            <col width="50">
                            <col />
                            <col width="50">
                            <col width="30">
                            <col width="40">
                        </colgroup>
                        <thead>
                            <tr>
                                <th class="text-center">정렬</th>
                                <th class="text-center">번호</th>
                                <th>카테고리명</th>
                                <th class="text-center">하위카테고리</th>
                                <th class="text-center">상품수</th>
                                <th class="text-center">사용</th>
                            </tr>
                        </thead>
                        <tbody id="category-body">
                            @forelse ($productCategories as $category)
                            <tr @class(['deactivated' => !$category->activated])>
                                <td class="text-center handle"><i class="bi bi-list"></i></td>

                                <td class="number text-center">
                                    {{ $category->id }}
                                    <input type="hidden" name="sort[]" value="{{ $category->id }}">
                                </td>

                                <td>
                                    <input name="categories[{{ $category->id }}]" value="{{ $category->name }}" class="form-control form-control-sm" maxlength="12">
                                </td>

                                <td class="number text-center">
                                    @if ($category->productSubCategories->count() > 0)
                                        <a href="javascript:void(0);" onclick="getSubCategories(this, {{ $category->id }})">{{ $category->productSubCategories->count() }}</a>
                                    @else
                                        <a href="javascript:void(0);" onclick="getSubCategories(this, {{ $category->id }})"><i class="bi bi-plus-circle-dotted"></i></a>
                                    @endif
                                </td>

                                <td class="number text-center">
                                    @if ($category->products->count() > 0)
                                        <a href="javascript:void(0);" onclick="getCategoryProducts(this, {{ $category->id }})">{{ $category->products->count() }}</a>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @php
                                        if ($category->products->count() > 0) {
                                            if ($category->activated) $icon = "bi-check2-circle";
                                            else $icon = "bi-dash-circle-fill";
                                        } else $icon = "bi-trash";
                                    @endphp
                                    <a href="javascript:void(0);" class="delete px-2" data-id="{{ $category->id }}">
                                        <i class="bi {{ $icon }}"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="6">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </main>
            </section>
        </form>
    </div>

    <div class="col-3 d-none" id="sub-category-wrapper"></div>

    <div class="col d-none" id="product-wrapper">
        <section>
            <header>
                <h6>상품</h6>
            </header>

            <main>
                카테고리에서 상품수를 클릭하세요.
            </main>
        </section>
    </div>
</div>
@endsection

@push("script")
<script>
    function addCategory() {
        const catInput = '<tr><td colspan="2" class="text-center">new</td><td colspan="2"><input type="text" name="new_categories[]" placeholder="카테고리명" class="form-control form-control-sm" maxlength="12"></td></tr>';
        $('#category-body').append(catInput);
    }

    function addSubCategory(category_id) {
        const catInput = '<tr><td colspan="2" class="text-center">new</td><td colspan="2"><input type="text" name="new_categories[]" placeholder="카테고리명" class="form-control form-control-sm" maxlength="12"></td></tr>';
        $('#subcategory-body').append(catInput);
    }

    function getSubCategories(obj, category_id) {
        $('#category-body tr').removeClass('active');

        $.ajax({
            url: '/api/products/categories/get-sub-categories/'+category_id,
            method: 'GET',
            success: function(response) {
                const $wrapper = $('#sub-category-wrapper');
                const $productWrapper = $('#product-wrapper');
                $(obj).closest('tr').addClass('active');

                if ($wrapper.hasClass('d-none')) $wrapper.removeClass('d-none');
                if (!$productWrapper.hasClass('d-none')) $productWrapper.addClass('d-none');

                $wrapper.html(response);;
            },
            error: function(xhr) {
                console.error("Failed to get sub categories:", xhr.responseText);
            }
        });
    }

    function getCategoryProducts(obj, category_id, subCategory_id = null) {
        if (!subCategory_id) $('#category-body tr').removeClass('active');
        if (subCategory_id) $('#subcategory-body tr').removeClass('active');

        let url;
        if (subCategory_id) url = '/api/products/categories/get-products/'+category_id+'/'+subCategory_id
        else url = '/api/products/categories/get-products/'+category_id;

        $.ajax({
            url: url,
            method: 'GET',
            success: function(response) {
                const $wrapper = $('#product-wrapper');
                const $subWrapper = $('#sub-category-wrapper');
                $(obj).closest('tr').addClass('active');

                if ($wrapper.hasClass('d-none')) $wrapper.removeClass('d-none');
                if (!$subWrapper.hasClass('d-none') && !subCategory_id) $subWrapper.addClass('d-none');

                $('#product-wrapper').html(response);
            },
            error: function(xhr) {
                console.error("Failed to get products:", xhr.responseText);
            }
        });
    }

    $(function () {
        $("#category-body").sortable({
            handle: ".handle",
            axis: "y",
            placeholder: "ui-state-highlight",
            helper: function(e, ui) {
                ui.children().each(function() {
                    $(this).width($(this).width());
                });
                return ui;
            }
        });

        $( "#category-body" ).disableSelection();

        $('a.delete').each(function() {
            const $obj = $(this);

            $obj.off('click').on('click', function(e) {
                e.preventDefault();
                let msg = '진행하시겠습니까?';

                if ($obj.has('.bi-trash').length) msg = '정말 삭제하시겠습니까?';
                else if ($obj.has('.bi-check2-circle').length) msg = '카테고리 및 해당 상품이 모두 비활성화 처리됩니다. 진행하시겠습니까?';
                else if ($obj.has('.bi-dash-circle-fill').length) msg = '다시 활성화 처리하시겠습니까? 카테고리 및 해당 상품 모두가 활성화됩니다.';

                alertify.confirm(msg, function() {
                    const category_id = $obj.data('id');

                    $.ajax({
                        url: '/api/products/categories/' + category_id,
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            console.log(response);
                            if (response == 'CATEGORY_DELETED') {
                                $obj.closest('tr').remove();
                                alertify.alert("알림", "카테고리가 삭제되었습니다.");
                            } else if (response == 'CATEGORY_DEACTIVATED') {
                                $obj.closest('tr').addClass('deactivated');
                                $obj.find('.bi-check2-circle').removeClass('bi-check2-circle').addClass('bi-dash-circle-fill');
                                alertify.alert("알림", "카테고리 및 해당 상품이 비활성화 처리되었습니다.");
                            } else if (response == 'CATEGORY_ACTIVATED') {
                                $obj.closest('tr').removeClass('deactivated');
                                $obj.find('.bi-dash-circle-fill').removeClass('bi-dash-circle-fill').addClass('bi-check2-circle');
                                alertify.alert("알림", "카테고리 및 해당 상품이 활성화 처리되었습니다.");
                            }
                        },
                        error: function(xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                });
            });
        });

    });
</script>
@endpush