@include('includes.header')
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12">
            <ul class="pull-right d-inline-flex" style="list-style: none;">
                <li class="btn-sm">
                    <a href="{{route('all-account')}}" class="btn btn-primary rounded-pill" style="width: 110px; text-align: center;">All Account</a>
                </li>
                <li class="btn-sm">
                    <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 130px; text-align: center; color: white;">Today History</a>
                </li>
                <li class="btn-sm">
                    <a href="{{route('all-history')}}" class="btn btn-success rounded-pill" style="width: 110px; text-align: center;">All History</a>
                </li>
            </ul><br>
            <b style="color: #009688; margin-left: 5%;">Sub-Categories</b>
        </div>
    </div>
    <hr/>
    <div class="container-fluid">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <button class="btn-sm btn btn-success rounded-pill mb-2"
                style="width: 140px; text-align: center; color: white; padding: 7px;"
                onclick="showDialog()">Add Sub-Category</button>

        @if(isset($subcategories) && $subcategories->isNotEmpty())
            <table class="table table-striped account-table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Parent Category</th>
                        <th>Image</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($subcategories as $category)
                        <tr>
                            <td>{{ $category->title }}</td>
                            <td>{{ $category->category_title }}</td>
                            <td>
                                <img src="{{ url('assets/subcategories/' . $category->image) }}" 
                                     class="rounded-circle" 
                                     style="width: 60px; height: 60px; object-fit: cover; border: 2px solid #fff; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);" 
                                     loading="lazy">
                            </td>
                            <td style="color: {{ $category->status ? 'rgb(6, 211, 6)' : 'red' }}">
                                {{ $category->status == 1 ? 'Active' : 'Inactive' }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p class="text-center text-muted">No Subcategories available.</p>
        @endif
    </div>

    <!-- Add Category Dialog -->
    <div id="serviceCard" class="service-dialog" style="display: none;">
        <div class="service-dialog-content">
            <p class="top-txt">
                <span>Add Sub-Category</span>
                <span class="close-btn" onclick="closeDialog()">&times;</span>
            </p>
            <form id="addSubCategoryForm" method="POST" action="{{ route('add-subcategory') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group text-center mt-3">
                    <label for="categoryImage" style="cursor: pointer;">
                        <img id="previewImage" 
                             src="{{ url('assets/category.png') }}" 
                             alt="Upload Image" 
                             class="rounded-circle" 
                             style="width: 100px; height: 100px; object-fit: cover;">
                    </label>
                    <input type="file" name="image" id="categoryImage" class="d-none" accept="image/*" required>
                </div>
                <div class="form-group text-center mt-2">
                    <label for="title">Title</label>
                    <input type="text" id="title" name="title" 
                           class="form-control" 
                           style="border-top: 0; border-right: 0; border-left: 0;" 
                           placeholder="Enter Title" required>
                </div>

                <!-- Category Select Field -->
                <div class="form-group text-center mt-2">
                    <label for="category_id">Category</label>
                    <select id="category_id" name="category_id" class="form-control" required>
                        <option value="" disabled selected>Select a Category</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group d-flex align-items-center justify-content-center mt-4">
                    <button type="submit" class="btn-sm btn btn-success rounded-pill"
                            style="width: 150px; text-align: center; color: white; padding: 7px;">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.getElementById('categoryImage').addEventListener('change', previewImage);

        function previewImage(event) {
            const input = event.target;
        
            if (input.files && input.files[0]) {
                const reader = new FileReader();
        
                reader.onload = function (e) {
                    document.getElementById('previewImage').src = e.target.result;
                };
        
                reader.readAsDataURL(input.files[0]);
            }
        }

        function showDialog() {
            document.getElementById('serviceCard').style.display = 'block';
        }
    
        function closeDialog() {
            document.getElementById('serviceCard').style.display = 'none';
        }
    </script>
@include('includes.footer')