@extends('layouts.main')

@section('content')
<style>
/* Page-specific styles */
.btn-add {
    background: #6366f1 !important;
    color: #ffffff !important;
    border: 1px solid #818cf8 !important;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    transition: .25s;
    cursor: pointer;
    font-family: inherit;
}

.btn-add:hover {
    background: #818cf8 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    transition: .25s;
    cursor: pointer;
}

.btn-edit {
    background: #ffc107 !important;
    color: #000 !important;
}

.btn-edit:hover {
    background: #e0a800 !important;
    transform: scale(1.08);
}

.btn-delete {
    background: #dc3545 !important;
    color: #fff !important;
}

.btn-delete:hover {
    background: #bb2d3b !important;
    transform: scale(1.08);
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    color: #F3F4F6;
}

.modern-table thead th {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 1rem 1.2rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #818CF8;
}

.modern-table tbody tr {
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.modern-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.modern-table tbody td {
    padding: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: middle;
}

.modern-table tbody tr:last-child td {
    border-bottom: none;
}

.empty-state {
    text-align: center;
    padding: 3.5rem;
    background: rgba(17, 24, 39, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #9CA3AF;
}

/* Custom Nav Tabs for Dark Theme */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}
.nav-tabs .nav-link {
    color: #9CA3AF;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.nav-tabs .nav-link:hover {
    color: #fff;
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: #818CF8;
    background: transparent;
    border-color: #818CF8;
}
</style>

<div class="form-section">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem;">
        <h2 style="margin: 0;">Category & SubCategory Management</h2>
    </div>

    @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        @can('category_management')
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="category-tab" data-bs-toggle="tab" data-bs-target="#category" type="button" role="tab" aria-controls="category" aria-selected="true">Categories</button>
        </li>
        @endcan
        @can('subcategory_management')
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ !Gate::check('category_management') ? 'active' : '' }}" id="subcategory-tab" data-bs-toggle="tab" data-bs-target="#subcategory" type="button" role="tab" aria-controls="subcategory" aria-selected="{{ !Gate::check('category_management') ? 'true' : 'false' }}">Sub Categories</button>
        </li>
        @endcan
    </ul>

    <!-- Tab panes -->
    <div class="tab-content" id="myTabContent">
        @can('category_management')
        <!-- CATEGORY TAB -->
        <div class="tab-pane fade show active" id="category" role="tabpanel" aria-labelledby="category-tab">
            <div style="display: flex; justify-content: flex-end; margin-bottom: 1rem;">
                <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addCategoryModal">+ Add Category</button>
            </div>
            <div style="overflow-x: auto;">
                <table class="modern-table">
                    <thead>
                        <tr>
                            <th width="60">#ID</th>
                            <th>Tenant</th>
                            <th>Name</th>
                            <th width="150" style="text-align: center;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $key => $category)
                        <tr>
                            <td><span style="color: #818CF8; font-weight: 600;">{{ $key + 1 }}</span></td>
                            <td>
                                @if($category->tenant)
                                    <span class="badge bg-primary">{{ $category->tenant->name }}</span>
                                @else
                                    <span class="badge bg-secondary">Global</span>
                                @endif
                            </td>
                            <td>{{ $category->name }}</td>
                            <td style="text-align: center;">
                                <div style="display: flex; justify-content: center; gap: 0.5rem;">
                                    <button class="btn-action btn-edit" data-bs-toggle="modal"
                                        data-bs-target="#editCategoryModal{{$category->id}}">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <form action="{{ route('super-admin.category.destroy', $category->id) }}" method="POST">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn-action btn-delete"
                                            onclick="return confirm('Delete this Category?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3">
                                <div class="empty-state">No Categories found.</div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @endcan

        @can('subcategory_management')
        <!-- SUBCATEGORY TAB -->
        <div class="tab-pane fade {{ !Gate::check('category_management') ? 'show active' : '' }}" id="subcategory" role="tabpanel" aria-labelledby="subcategory-tab">
            <div style="display: flex; justify-content: flex-end; margin-bottom: 1rem;">
                <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addSubCategoryModal">+ Add SubCategory</button>
            </div>
            <div style="overflow-x: auto;">
                <table class="modern-table">
                    <thead>
                        <tr>
                            <th width="60">#ID</th>
                            <th>Tenant</th>
                            <th>Parent Category</th>
                            <th>SubCategory Name</th>
                            <th width="150" style="text-align: center;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($subcategories as $key => $subcategory)
                        <tr>
                            <td><span style="color: #818CF8; font-weight: 600;">{{ $key + 1 }}</span></td>
                            <td>
                                @if($subcategory->tenant)
                                    <span class="badge bg-primary">{{ $subcategory->tenant->name }}</span>
                                @else
                                    <span class="badge bg-secondary">Global</span>
                                @endif
                            </td>
                            <td>{{ $subcategory->category->name ?? 'N/A' }}</td>
                            <td>{{ $subcategory->name }}</td>
                            <td style="text-align: center;">
                                <div style="display: flex; justify-content: center; gap: 0.5rem;">
                                    <button class="btn-action btn-edit" data-bs-toggle="modal"
                                        data-bs-target="#editSubCategoryModal{{$subcategory->id}}">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <form action="{{ route('super-admin.subcategory.destroy', $subcategory->id) }}" method="POST">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn-action btn-delete"
                                            onclick="return confirm('Delete this SubCategory?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4">
                                <div class="empty-state">No SubCategories found.</div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @endcan
    </div>
    </div>
</div>

{{-- MODALS --}}
@foreach($categories as $category)
<div class="modal fade" id="editCategoryModal{{ $category->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('super-admin.category.update', $category->id) }}" method="POST" class="modal-content" style="background:#111827; color:#fff;">
            @csrf @method('PUT')
            <div class="modal-header border-bottom border-secondary">
                <h5>Edit Category</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Assign to Tenant (Optional)</label>
                    <select name="tenant_id" class="form-control bg-dark text-white border-secondary" style="{{ isset($currentTenant) ? 'pointer-events: none; opacity: 0.6;' : '' }}" {{ isset($currentTenant) ? 'tabindex="-1"' : '' }}>
                        <option value="">No Tenant (Global)</option>
                        @foreach($tenants as $t)
                            <option value="{{ $t->id }}" {{ $category->tenant_id == $t->id ? 'selected' : '' }}>{{ $t->name }} ({{ $t->custom_domain }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>Category Name</label>
                    <input type="text" name="name" value="{{ $category->name }}" class="form-control bg-dark text-white border-secondary" required>
                </div>
            </div>
            <div class="modal-footer border-top border-secondary"><button type="submit" class="btn-add">Update Category</button></div>
        </form>
    </div>
</div>
@endforeach

<div class="modal fade" id="addCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('super-admin.category.store') }}" method="POST" class="modal-content" style="background:#111827; color:#fff;">
            @csrf
            <div class="modal-header border-bottom border-secondary">
                <h5>Add New Category</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Assign to Tenant (Optional)</label>
                    <select name="tenant_id" class="form-control bg-dark text-white border-secondary" style="{{ isset($currentTenant) ? 'pointer-events: none; opacity: 0.6;' : '' }}" {{ isset($currentTenant) ? 'tabindex="-1"' : '' }}>
                        <option value="">No Tenant (Global)</option>
                        @foreach($tenants as $t)
                            <option value="{{ $t->id }}" {{ (isset($currentTenant) && $currentTenant->id == $t->id) ? 'selected' : '' }}>{{ $t->name }} ({{ $t->custom_domain }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>Category Name</label>
                    <input type="text" name="name" class="form-control bg-dark text-white border-secondary" required>
                </div>
            </div>
            <div class="modal-footer border-top border-secondary"><button type="submit" class="btn-add">Save Category</button></div>
        </form>
    </div>
</div>

@foreach($subcategories as $subcategory)
<div class="modal fade" id="editSubCategoryModal{{ $subcategory->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('super-admin.subcategory.update', $subcategory->id) }}" method="POST" class="modal-content" style="background:#111827; color:#fff;">
            @csrf
            @method('PUT')
            <div class="modal-header border-bottom border-secondary">
                <h5>Edit SubCategory</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                <div class="mb-3">
                    <label>Assign to Tenant (Optional)</label>
                    <select name="tenant_id" class="form-control bg-dark text-white border-secondary" style="{{ isset($currentTenant) ? 'pointer-events: none; opacity: 0.6;' : '' }}" {{ isset($currentTenant) ? 'tabindex="-1"' : '' }}>
                        <option value="">No Tenant (Global)</option>
                        @foreach($tenants as $t)
                            <option value="{{ $t->id }}" {{ ($subcategory->tenant_id == $t->id || (isset($currentTenant) && $currentTenant->id == $t->id)) ? 'selected' : '' }}>{{ $t->name }} ({{ $t->custom_domain }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>Select Category</label>
                    <select name="category_id" class="form-control bg-dark text-white border-secondary" required>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ $subcategory->category_id == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>SubCategory Name</label>
                    <input type="text" name="name" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->name }}" required>
                </div>

                <h6 class="mt-4 mb-3 text-warning border-bottom border-secondary pb-2">Page Details (Optional)</h6>
                <div class="mb-3">
                    <label>Description</label>
                    <textarea name="description" class="form-control bg-dark text-white border-secondary" rows="3">{{ $subcategory->description }}</textarea>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Heading 1</label>
                            <input type="text" name="heading1" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->heading1 }}">
                        </div>
                        <div class="mb-3">
                            <label>Dec 1</label>
                            <input type="text" name="dec1" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->dec1 }}">
                        </div>
                        <div class="mb-3">
                            <label>Dec 2</label>
                            <input type="text" name="dec2" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->dec2 }}">
                        </div>
                        <div class="mb-3">
                            <label>Dec 3</label>
                            <input type="text" name="dec3" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->dec3 }}">
                        </div>
                        <div class="mb-3">
                            <label>Dec 4</label>
                            <input type="text" name="dec4" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->dec4 }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Heading 2</label>
                            <input type="text" name="heading2" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->heading2 }}">
                        </div>
                        <div class="mb-3">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control bg-dark text-white border-secondary" value="{{ $subcategory->title }}">
                        </div>
                        <div class="mb-3">
                            <label>Dec (Heading 2 description)</label>
                            <textarea name="dec" class="form-control bg-dark text-white border-secondary" rows="3">{{ $subcategory->dec }}</textarea>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer border-top border-secondary"><button type="submit" class="btn-add">Save Changes</button></div>
        </form>
    </div>
</div>
@endforeach

<div class="modal fade" id="addSubCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('super-admin.subcategory.store') }}" method="POST" class="modal-content" style="background:#111827; color:#fff;">
            @csrf
            <div class="modal-header border-bottom border-secondary">
                <h5>Add New SubCategory</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                <div class="mb-3">
                    <label>Assign to Tenant (Optional)</label>
                    <select name="tenant_id" class="form-control bg-dark text-white border-secondary" style="{{ isset($currentTenant) ? 'pointer-events: none; opacity: 0.6;' : '' }}" {{ isset($currentTenant) ? 'tabindex="-1"' : '' }}>
                        <option value="">No Tenant (Global)</option>
                        @foreach($tenants as $t)
                            <option value="{{ $t->id }}" {{ (isset($currentTenant) && $currentTenant->id == $t->id) ? 'selected' : '' }}>{{ $t->name }} ({{ $t->custom_domain }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>Select Category</label>
                    <select name="category_id" class="form-control bg-dark text-white border-secondary" required>
                        <option value="">Select Category</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>SubCategory Name</label>
                    <input type="text" name="name" class="form-control bg-dark text-white border-secondary" required>
                </div>
                
                <h6 class="mt-4 mb-3 text-warning border-bottom border-secondary pb-2">Page Details (Optional)</h6>
                <div class="mb-3">
                    <label>Description</label>
                    <textarea name="description" class="form-control bg-dark text-white border-secondary" rows="3"></textarea>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Heading 1</label>
                            <input type="text" name="heading1" class="form-control bg-dark text-white border-secondary">
                        </div>
                        <div class="mb-3">
                            <label>Dec 1</label>
                            <input type="text" name="dec1" class="form-control bg-dark text-white border-secondary">
                        </div>
                        <div class="mb-3">
                            <label>Dec 2</label>
                            <input type="text" name="dec2" class="form-control bg-dark text-white border-secondary">
                        </div>
                        <div class="mb-3">
                            <label>Dec 3</label>
                            <input type="text" name="dec3" class="form-control bg-dark text-white border-secondary">
                        </div>
                        <div class="mb-3">
                            <label>Dec 4</label>
                            <input type="text" name="dec4" class="form-control bg-dark text-white border-secondary">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Heading 2</label>
                            <input type="text" name="heading2" class="form-control bg-dark text-white border-secondary">
                        </div>
                        <div class="mb-3">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control bg-dark text-white border-secondary">
                        </div>
                        <div class="mb-3">
                            <label>Dec (Heading 2 description)</label>
                            <textarea name="dec" class="form-control bg-dark text-white border-secondary" rows="3"></textarea>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer border-top border-secondary"><button type="submit" class="btn-add">Save SubCategory</button></div>
        </form>
    </div>
</div>
@endsection