@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;
}
</style>

<div class="form-section">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem;">
        <h2 style="margin: 0;">📁 SubCategory Management</h2>
        <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addSubCategoryModal">+ Add SubCategory</button>
    </div>

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

    <div style="overflow-x: auto;">
        <table class="modern-table">
            <thead>
                <tr>
                    <th width="60">#ID</th>
                    <th>Category</th>
                      <th>Heading 1</th>
                      <th>Heading 2</th>
                      <th>Title</th>
                      <th>Dec</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>{{ $subcategory->category->name ?? 'N/A' }}</td>
                      <td>{{ $subcategory->heading1 }}</td>
                      <td>{{ $subcategory->heading2 }}</td>
                      <td>{{ $subcategory->title }}</td>
                      <td>{{ Str::limit($subcategory->dec, 30) }}</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>

{{-- MODALS --}}
@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