@extends('admin.layouts.app')
@include('admin.nav')
@section('main')
<script>
    $(document).ready(function () {
        $('.status-toggle input').change(function () {
            var serviceId = $(this).attr('id').replace('status_', '');
            var isChecked = $(this).prop('checked');

            // Send AJAX request to update the status
            $.ajax({
                url: 'update-service-status/' + serviceId,
                type: 'POST',
                data: { status: isChecked ? 1 : 0 },
                headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
                success: function (response) {
                    console.log(response);
                    // Optionally handle success
                },
                error: function (error) {
                    console.error(error);
                    // Optionally handle error
                }
            });
        });
    });
</script>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="contact-breadcrumb">

                    <div class="breadcrumb-main add-contact justify-content-sm-between ">
                        <div class=" d-flex flex-wrap justify-content-center breadcrumb-main__wrapper">
                            <div class="d-flex align-items-center add-contact__title justify-content-center mr-sm-25">
                                <h4 class="text-capitalize fw-500 breadcrumb-title">Services Page</h4>
                                <span class="sub-title ml-sm-25 pl-sm-25"></span>
                            </div>

                            <form method="get" action="{{ route('admin.services-page') }}"
                                class="d-flex align-items-center add-contact__form my-sm-0 my-2"
                                style="width:500px;box-shadow:0 5px 5px rgb(0 0 0 / 12%)">
                                <span data-feather="search"></span>
                                <input class="form-control mr-sm-2 border-0 box-shadow-none" type="search"
                                    placeholder="Search by Title, link or Category " name="query" aria-label="Search"
                                    value="{{ request('query') }}">
                            </form>

                        </div>
                        <div class="action-btn">
                           

                            <!-- Modal -->
                          
                            <!-- Modal -->


                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="contact-list-wrap mb-25">
                    <div class="contact-list bg-white radius-xl w-100">
                        <div class="table-responsive">

                            <table class="table mb-0 table-borderless table-rounded">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="d-flex align-items-center">
                                                <div class="custom-checkbox  check-all">
                                                    <label for="check-3">
                                                        <span class="checkbox-text userDatatable-title">Title</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="c-phone">
                                            <span class="">Link</span>
                                        </th>
                                        <th class="c-phone">
                                            <span class="">Category</span>
                                        </th>
                                        <th class="c-phone">
                                            <span class="">Action</span>
                                        </th>
                                        
                                        
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($servicesform as $services)
                                        <tr>
                                            <td>
                                                <div class="contact-item d-flex align-items-center">
                                                    
                                                    <div class="contact-personal-info d-flex">
                                                        
                                                        <div class="contact_title">
                                                            <h6>
                                                                <a href="#">{{ $services->title }}</a>
                                                            </h6>
                                                           
                                                        </div>
                                                    </div>

                                                </div>
                                            </td>
                                            <td>
                                                <span class="phone"><a
                                                        href="">{{ $services->link }}</a></span>
                                            </td>
                                            <td>
                                                <span>{{ $services->category_name }}</span>
                                            </td>
                                            <td>
                                                <!-- Toggle Button -->
                                                <div class="status-toggle">
                                                <label class="switch">
                                                    <input type="checkbox" id="status_{{ $services->id }}" {{ $services->status == 1 ? 'checked' : '' }}>
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>

                                            </td>
                                           
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                {{ $servicesform->links('vendor.pagination.custom') }}
            </div>
            <!-- ends: col-12 -->
        </div>
    </div>
  
@endsection