@extends('layouts.invoicetab')
@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