@extends('layouts.adminlayout')


@section('title')
<title>Manage Categories</title>
@endsection

@section('content')
<div class="container-fluid mt-4">
    <div class="row">
        @include('admin.adminnavbar')
        <div class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="card shadow">
                <div class="card-header text-white text-center table-back-color">
                    <h4>Manage Categories</h4>
                </div>
                <div class="card-body">
                    <!-- Tab Navigation -->
                    <ul class="nav nav-tabs" id="categoryTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="main-category-tab" data-bs-toggle="tab" data-bs-target="#main-category" type="button" role="tab" aria-controls="main-category" aria-selected="true">
                                Main Category
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="sub-category-tab" data-bs-toggle="tab" data-bs-target="#sub-category" type="button" role="tab" aria-controls="sub-category" aria-selected="false">
                                Sub Category
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="update-category-tab" data-bs-toggle="tab" data-bs-target="#update-category" type="button" role="tab" aria-controls="update-category" aria-selected="false">
                                Update Category
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content mt-4" id="categoryTabContent">
                        <!-- Main Category Tab -->
                        <div class="tab-pane fade show active" id="main-category" role="tabpanel" aria-labelledby="main-category-tab">
                            <form action="{{ route('category.store') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="main_category_name" class="form-label">Main Category Name</label>
                                    <input type="text" class="form-control" id="main_category_name" name="main_category_name" placeholder="Enter main category name" required>
                                </div>
                                <button type="submit" class="btn_all_button">Add Main Category</button>
                            </form>
                        </div>

                        <!-- Sub Category Tab -->
                        <div class="tab-pane fade" id="sub-category" role="tabpanel" aria-labelledby="sub-category-tab">
                            <form action="{{ route('subcategory.store') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="main_category_id" class="form-label">Select Main Category</label>
                                    <select class="form-select" id="main_category_id" name="main_category_id" required>
                                        <option value="" disabled selected>Select a main category</option>
                                        @foreach($mainCategories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="sub_category_name" class="form-label">Sub Category Name</label>
                                    <input type="text" class="form-control" id="sub_category_name" name="sub_category_name" placeholder="Enter sub category name" required>
                                </div>
                                <button type="submit" class="btn_all_button">Add Sub Category</button>
                            </form>
                        </div>
                        <!-- Update Category Tab -->
                        <div class="tab-pane fade" id="update-category" role="tabpanel" aria-labelledby="update-category-tab">
                            <form action="{{ route('category.update') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="main_category_id" class="form-label">Select Category</label>
                                    <select class="form-select" id="main_category_id" name="main_category_id" required>
                                        <option value="" disabled selected>Select a main category</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="category_name" class="form-label">Update Category Name</label>
                                    <input type="text" class="form-control" id="category_name" name="category_name" placeholder="Enter updated category name" required>
                                </div>
                                <button type="submit" class="btn_all_button">Update Category</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    @if (session('success'))
        <div class="custom-alert alert-dismissible fade show" id="successAlert" role="alert">
            {{ session('success') }}                    
        </div>
    @endif
@endsection


@section('rightads')
<p>Right Ads</p>
<img src="https://via.placeholder.com/150x600" alt="Left Ad">
@endsection


@section('leftads')
<p>Left Ads</p>
<img src="https://via.placeholder.com/150x600" alt="Left Ad">
@endsection


@section('scripts')
<script>
    setTimeout(function() {
        let alertBox = document.getElementById('successAlert');
        if (alertBox) {
            alertBox.style.opacity = '0'; 
            setTimeout(() => alertBox.remove(), 500); 
        }
    }, 5000); 
</script>
@endsection