@extends('layouts.admin')

@section('title', '카테고리 관리')
@section('breadcrumb-parent', '환경설정')

@section('content')
<div class="container-fluid px-0">

    <!-- 상단 타이틀 및 등록 버튼 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center gap-3">
            <h4 class="fw-bold text-dark mb-0">카테고리 관리</h4>
            
            <!-- 용도별 분류 탭 (뷰티샵 / 프로그램 / 제품) -->
            <ul class="nav nav-pills bg-white p-1 rounded shadow-xs border" role="tablist">
                <li class="nav-item">
                    <a class="nav-link px-3 py-1.5 small fw-semibold {{ $type === 'shop' ? 'active bg-primary text-white' : 'text-secondary' }}" 
                       href="{{ route('admin.categories.index', ['type' => 'shop']) }}">뷰티샵 분류</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-3 py-1.5 small fw-semibold {{ $type === 'program' ? 'active bg-primary text-white' : 'text-secondary' }}" 
                       href="{{ route('admin.categories.index', ['type' => 'program']) }}">프로그램 분류</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-3 py-1.5 small fw-semibold {{ $type === 'product' ? 'active bg-primary text-white' : 'text-secondary' }}" 
                       href="{{ route('admin.categories.index', ['type' => 'product']) }}">제품 분류</a>
                </li>
            </ul>
        </div>

        <div>
            <!-- 대분류 등록 버튼 -->
            <button type="button" class="btn btn-primary btn-sm px-3 py-2 shadow-sm" onclick="openCreateModal('', '대분류')">
                <i class="fa-solid fa-plus me-1"></i> 대분류 등록
            </button>
        </div>
    </div>

    <!-- 성공 메시지 알림 (세션) -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
            <i class="fa-solid fa-circle-check me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- 카테고리 계층형 테이블 뷰 -->
    <div class="card border-0 shadow-sm overflow-hidden">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 text-nowrap">
                    <thead class="table-light text-secondary small text-uppercase">
                        <tr>
                            <th class="py-3 ps-4" style="width: 15%;">계층 구조</th>
                            <th class="py-3" style="width: 35%;">카테고리 명칭</th>
                            <th class="py-3 text-center" style="width: 12%;">노출 순서</th>
                            <th class="py-3 text-center" style="width: 12%;">사용 상태</th>
                            <th class="py-3 text-end pe-4" style="width: 26%;">관리</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $category)
                            <!-- 대분류 및 무제한 하위 카테고리 재귀 호출 퍼셜 -->
                            @include('admin.categories.partials.category_row', ['cat' => $category])
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    등록된 카테고리가 없습니다. 상단의 [대분류 등록] 버튼을 눌러 추가해주세요.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- ==========================================================
   [모달] 카테고리 등록 / 수정 팝업
   ========================================================== -->
<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="categoryForm" action="{{ route('admin.categories.store') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">
                <input type="hidden" name="type" value="{{ $type }}">
                <input type="hidden" name="parent_id" id="modalParentId" value="">

                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold text-dark" id="modalTitle">카테고리 등록</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <div class="modal-body p-4">
                    <!-- 상위 분류 안내 텍스트 -->
                    <div class="mb-3" id="parentInfoBox" style="display: none;">
                        <label class="form-label text-muted small fw-bold">상위 분류</label>
                        <div class="form-control-plaintext fw-bold text-primary bg-light px-3 py-2 rounded border" id="parentNameText"></div>
                    </div>

                    <div class="mb-3">
                        <label for="categoryName" class="form-label fw-bold small">카테고리 명칭 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="categoryName" name="name" required placeholder="예: 네일아트, 스킨케어 등">
                    </div>

                    <div class="mb-3">
                        <label for="categorySortOrder" class="form-label fw-bold small">노출 순서</label>
                        <input type="number" class="form-control" id="categorySortOrder" name="sort_order" value="1" min="1">
                        <div class="form-text small text-muted">숫자가 낮을수록 상단에 우선 노출됩니다.</div>
                    </div>

                    <div class="mb-3" id="statusFieldBox" style="display: none;">
                        <label class="form-label fw-bold small">사용 상태</label>
                        <select class="form-select" id="categoryIsActive" name="is_active">
                            <option value="1">사용함</option>
                            <option value="0">미사용</option>
                        </select>
                    </div>
                </div>

                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary btn-sm px-3" data-bs-dismiss="modal">취소</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4" id="modalSubmitBtn">저장하기</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 모달 제어용 스크립트 -->
<script>
    // Bootstrap 5의 getOrCreateInstance를 사용하여 모달 객체를 안전하게 가져오거나 생성
    function getCategoryModal() {
        const modalElement = document.getElementById('categoryModal');
        return bootstrap.Modal.getOrCreateInstance(modalElement);
    }

    // 등록 모달 열기 (대분류 또는 하위분류)
    function openCreateModal(parentId, parentName) {
        document.getElementById('categoryForm').action = "{{ route('admin.categories.store') }}";
        document.getElementById('formMethod').value = "POST";
        document.getElementById('modalTitle').innerText = parentId ? "하위 카테고리 등록" : "대분류 카테고리 등록";
        document.getElementById('modalParentId').value = parentId;
        document.getElementById('categoryName').value = '';
        document.getElementById('categorySortOrder').value = 1;
        
        // 상태 필드는 등록 시 기본 사용함이므로 숨김
        document.getElementById('statusFieldBox').style.display = 'none';

        if (parentId) {
            document.getElementById('parentNameText').innerText = parentName;
            document.getElementById('parentInfoBox').style.display = 'block';
        } else {
            document.getElementById('parentInfoBox').style.display = 'none';
        }

        getCategoryModal().show();
    }

    // 수정 모달 열기
    function openEditModal(category) {
        document.getElementById('categoryForm').action = `/admin/categories/${category.id}`;
        document.getElementById('formMethod').value = "PUT";
        document.getElementById('modalTitle').innerText = "카테고리 수정";
        document.getElementById('modalParentId').value = category.parent_id || '';
        document.getElementById('categoryName').value = category.name;
        document.getElementById('categorySortOrder').value = category.sort_order;
        document.getElementById('categoryIsActive').value = category.is_active ? 1 : 0;
        
        // 수정 시에는 상태 변경 가능하도록 노출
        document.getElementById('statusFieldBox').style.display = 'block';
        document.getElementById('parentInfoBox').style.display = 'none';

        getCategoryModal().show();
    }
</script>
@endsection