@extends('admin.layout.master')
@section('content')
   <div class="content datatable">
        <div class="p-4 code-to-copy">
            <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                    <div class="card shadow-none border">
                        <div class="card-header p-4 border-bottom bg-body">
                            <div class="row g-3 justify-content-between align-items-end">
                                <div class="col-md-12">
                                    <h4 class="text-body mb-0" data-anchor="data-anchor" id="pagination-with-numbering">
                                        Add category and subcategories
                                    </h4>
                                </div>
                            </div>
                        </div>
                          <div class="card-body p-0">
                            <div class="p-4 code-to-copy">
                                <form action="{{ route('admin.support_categories_list') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ @$data['edit']['id'] }}">
                                     <div class="col-md-12 mb-3">
                                    <label class="form-label" for="category_name">Category
                                        <span class="text-danger">*</span> </label>
                                    <input class="form-control" name="category_name" id="category_name" type="text"
                                        value="{{ old('category_name', @$data['edit']['name']) }}" required />
                                        @error('category_name')
                                            <div class="col-form-alert-label">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                  <div class="col-md-12 mb-3">
                                        <label class="form-label">Sub categories</label>
                                  <div id="subcategory-container">
                                        @if(isset($data['edit']) && $data['edit'] && count($data['edit']['subcategories']) > 0)
                                            @foreach($data['edit']['subcategories'] as $index => $sub)
                                                <div class="d-flex mb-2 subcat-row">
                                                    <input type="hidden" name="subcategory_ids[]" value="{{ $sub->id }}">
                                                    <input type="text" class="form-control me-2" name="subcategories[]" value="{{ $sub->name }}" 
                                                        @if($loop->first) required @endif>
                                                    @if(!$loop->first)
                                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeSubcategory(this)">X</button>
                                                    @endif
                                                </div>
                                            @endforeach
                                        @else
                                            <!-- Default first input (for Add mode) -->
                                            <div class="d-flex mb-2 subcat-row">
                                                <input type="hidden" name="subcategory_ids[]" value="">
                                                <input type="text" class="form-control me-2" name="subcategories[]" placeholder="Enter Subcategory" required>
                                                <!-- No X button -->
                                            </div>
                                        @endif
                                    </div>



                                        <!-- Empty template to clone -->
                                      <div id="subcategory-template" class="d-none">
                                            <div class="d-flex mb-2 subcat-row">
                                                <input type="hidden" name="subcategory_ids[]" value="">
                                                <input type="text" class="form-control me-2" name="subcategories[]" placeholder="New Subcategory">
                                                <button type="button" class="btn btn-sm btn-danger" onclick="removeSubcategory(this)">X</button>
                                            </div>
                                     </div>


                                        <button type="button" onclick="addSubcategory()" class="btn btn-sm btn-outline-primary mt-2">+ Add More</button>
                                    </div>

                                    <div class="col-md-12 mt-3">
                                        <button type="submit" class="btn btn-primary">{{ $data['button'] }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
          

                   <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                    <div class="card shadow-none border">
                        <div class="card-header p-4 border-bottom bg-body">
                            <div class="row g-3 justify-content-between align-items-end">
                                 <div class="col-md-6">
                                    <h4 class="text-body mb-0" data-anchor="data-anchor" id="pagination-with-numbering">
                                        Categories List
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="p-4 code-to-copy">
                                <table class="table table-striped table-sm fs-9 mb-0 data-table">

                                    <thead>
                                        <tr>
                                            <th class="sort border-top border-translucent ps-3" data-sort="">#</th>
                                             
                                             <th class="sort border-top" data-sort="cname">Category Name</th>
                                              <th class="sort border-top" data-sort="cname">Subcategory</th>
                                            <th class="sort text-end align-middle pe-0 border-top" scope="col">ACTION
                                            </th>
                                        </tr>
                                    </thead>
                                   <tbody class="list">
                                        @php $i = 1; @endphp
                                        @foreach($data['categories'] as $cat)
                                            <tr>
                                                <td class="ps-3">{{ $i++ }}</td>
                                                <td>{{ $cat->name }}</td>

                                                <td>
                                                    @if($cat->children->count())
                                                        <ul class="mb-0 ps-3">
                                                            @foreach($cat->children as $child)
                                                                <li>{{ $child->name }}</li>
                                                            @endforeach
                                                        </ul>
                                                    @else
                                                        <span class="text-muted">No Subcategories</span>
                                                    @endif
                                                </td>

                                                <td class="text-end pe-3">
                                                    <a href="{{ url('admin/support_category/' . $cat->id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <script>
function addSubcategory() {
    const template = document.getElementById('subcategory-template').innerHTML;
    const container = document.getElementById('subcategory-container');
    container.insertAdjacentHTML('beforeend', template);
}

function removeSubcategory(btn) {
    btn.closest('.subcat-row').remove();
}
</script>

@endsection