@section('title', 'SEO Management')

<div class="container">
    <div class="row">
        <div class="col-md-12">
            @extends('layouts.invoicetab')
        </div>
    </div>
  </div>
  @section('invoice_content')




  <div class="row">
    <div class="col-md-4 mb-4">
        <div class="card shadow-lg border-light rounded-3 h-100">
            <div class="card-body text-center">
                <a class="nav-link {{ request()->is('seo_categories') ? 'active' : '' }} waves-effect waves-light" href="{{ url('seo_categories') }}">
                    <div class="mb-3">
                        <i class="mdi mdi-file-document-outline display-4 text-primary"></i>
                    </div>
                    <h5 class="card-title">SEO Services</h5>
                    <p class="card-text">Optimize your site with our professional SEO services to boost visibility.</p>
                    <p class="text-primary">Add SEO Services</p>
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card shadow-lg border-light rounded-3 h-100">
            <div class="card-body text-center">
                <a class="nav-link {{ request()->is('security') ? 'active' : '' }} waves-effect waves-light" href="{{ url('security') }}">
                    <div class="mb-3">
                        <i class="mdi mdi-lock-outline display-4 text-danger"></i>
                    </div>
                    <h5 class="card-title">Security Services</h5>
                    <p class="card-text">Ensure the safety and security of your assets with our expert security solutions.</p>
                    <p class="text-primary">Add Security Services</p>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <h3 class="mb-4">SEO Services Management</h3>

    <!-- Add Category Button -->
    <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
        Add Category
    </button>

    <!-- Add Service Button -->
    <button type="button" class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#addServiceModal">
        Add Service
    </button>

    <!-- SEO Categories & Services in Cards -->
    <div class="row">
        @foreach($seo_categories as $category)
            <div class="col-md-4 mb-3">
                <div class="card">
                    <div class="card-header">
                        <h5><span class="editable" contenteditable="true" 
                              data-id="{{ $category->id }}" 
                              data-field="name" 
                              data-url="{{ route('seo_categories.update', $category->id) }}">
                            {{ $category->name }}
                        </span></h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group">
                            @foreach($category->services as $service)
                                <li class="list-group-item">
                                    <span class="editable" contenteditable="true" 
                                          data-id="{{ $service->id }}" 
                                          data-field="service_name" 
                                          data-url="{{ route('seo_services.update', $service->id) }}">
                                        {{ $service->service_name }}
                                    </span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add SEO Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('seo_categories.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Category Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Service Modal -->
<div class="modal fade" id="addServiceModal" tabindex="-1" aria-labelledby="addServiceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add SEO Service</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('seo_services.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <select name="category_id" class="form-control" required>
                            <option value="">Select Category</option>
                            @foreach($seo_categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Service Name</label>
                        <input type="text" name="service_name" class="form-control" required>
                    </div>
                   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Save Service</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- AJAX Inline Edit Script -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.editable').forEach(function (element) {
            element.addEventListener('blur', function () {
                let id = this.getAttribute('data-id');
                let field = this.getAttribute('data-field');
                let value = this.textContent;
                let url = this.getAttribute('data-url');

                fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ [field]: value, _method: 'PATCH' })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log("Updated Successfully");
                    } else {
                        console.error("Error updating record");
                    }
                })
                .catch(error => console.error('Error:', error));
            });
        });
    });
</script>
@endsection