@extends('backend.layouts.app')
@section('content')
    <div class="content-page">
        <div class="content">

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <form class="d-flex">
                                    <a href="javascript:location.reload()" class="btn btn-primary ms-2">
                                        <i class="mdi mdi-autorenew"></i>
                                    </a>
                                    <a href="javascript:void(0);" class="btn btn-primary ms-1" id="sortButton">
                                        <i class="mdi mdi-filter-variant"></i> <span id="sortText">Ascending</span>
                                    </a>
                                </form>
                            </div>
                            <h4 class="page-title">Dashboard</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row" id="itemList">
                    <div class="col-xl-4 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="avatar-md me-3">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{ asset('frontend/images/tpl-dashboard.png') }}" alt="logo"
                                                class="avatar-sm rounded-circle">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="my-1"><a href="{{ route('service.index') }}"
                                                class="text-dark">Services</a></h4>
                                        <p class="text-muted text-truncate mb-0">
                                            <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="text-muted">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                <p class="text-truncate mb-0"><a
                                                        href="{{ route('service.index') }}">Complete Service Setup ...</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="avatar-md me-3">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{ asset('frontend/images/tpl-dashboard.png') }}" alt="logo"
                                                class="avatar-sm rounded-circle">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="my-1"><a href="{{ route('product.index') }}"
                                                class="text-dark">Products</a></h4>
                                        <p class="text-muted text-truncate mb-0">
                                            <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="text-muted">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                <p class="text-truncate mb-0"><a
                                                        href="{{ route('product.index') }}">Complete Products Setup ...</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="avatar-md me-3">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{ asset('frontend/images/tpl-dashboard.png') }}" alt="logo"
                                                class="avatar-sm rounded-circle">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="my-1"><a href="{{ route('faq.index') }}" class="text-dark">Faqs</a>
                                        </h4>
                                        <p class="text-muted text-truncate mb-0">
                                            <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="text-muted">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                <p class="text-truncate mb-0"><a href="{{ route('faq.index') }}">All Faqs
                                                        ...</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="col-xl-4 col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="avatar-md me-3">
                                    <div class="avatar-title bg-light rounded-circle">
                                        <img src="{{ asset('frontend/images/favicon.png') }}" alt="logo" class="avatar-sm rounded-circle">
                                    </div>
                                </div>
                                <div class="flex-1">
                                    <h4 class="my-1"><a href="{{route('gallery.index')}}" class="text-dark">Gallery.</a></h4>
                                    <p class="text-muted text-truncate mb-0">
                                        <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                    </p>
                                </div>
                            </div>
                            <hr>
                            <div class="text-muted">
                                <div class="row">
                                    <div class="col-12">
                                        <div>
                                            <p class="text-truncate mb-0"><a href="{{route('gallery.index')}}">Complete Gallery Page Setup ...</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}


                    <div class="col-xl-4 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="avatar-md me-3">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{ asset('frontend/images/tpl-dashboard.png') }}" alt="logo"
                                                class="avatar-sm rounded-circle">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="my-1"><a href="{{ route('client.index') }}"
                                                class="text-dark">Client.</a></h4>
                                        <p class="text-muted text-truncate mb-0">
                                            <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="text-muted">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                <p class="text-truncate mb-0"><a href="{{ route('client.index') }}">All
                                                        Clients ...</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="avatar-md me-3">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{ asset('frontend/images/tpl-dashboard.png') }}" alt="logo"
                                                class="avatar-sm rounded-circle">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="my-1"><a href="{{ route('team.index') }}"
                                                class="text-dark">Team</a></h4>
                                        <p class="text-muted text-truncate mb-0">
                                            <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="text-muted">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                <p class="text-truncate mb-0"><a href="{{ route('team.index') }}">All
                                                        Team ...</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="avatar-md me-3">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{ asset('frontend/images/tpl-dashboard.png') }}" alt="logo"
                                                class="avatar-sm rounded-circle">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="my-1"><a href="{{ route('testimonial.index') }}"
                                                class="text-dark">Testimonial</a></h4>
                                        <p class="text-muted text-truncate mb-0">
                                            <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="text-muted">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                <p class="text-truncate mb-0"><a
                                                        href="{{ route('testimonial.index') }}">All Testimonials ...</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div class="avatar-md me-3">
                                        <div class="avatar-title bg-light rounded-circle">
                                            <img src="{{ asset('frontend/images/tpl-dashboard.png') }}" alt="logo"
                                                class="avatar-sm rounded-circle">
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="my-1"><a href="{{ route('enquiry.index') }}"
                                                class="text-dark">Enquiry</a></h4>
                                        <p class="text-muted text-truncate mb-0">
                                            <i class="ri-map-pin-line align-bottom me-1"></i> Setup
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="text-muted">
                                    <div class="row">
                                        <div class="col-12">
                                            <div>
                                                <p class="text-truncate mb-0"><a href="{{ route('enquiry.index') }}">All
                                                        Enquiry ...</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- end row -->

            </div>
            <!-- container -->

        </div>
        <!-- content -->
    </div>
    <!-- END wrapper -->

    <script>
        let ascending = true;

        document.getElementById("sortButton").addEventListener("click", function() {
            const container = document.getElementById("itemList");
            const cards = Array.from(container.querySelectorAll(".col-xl-4.col-sm-6"));

            cards.sort((a, b) => {
                const titleA = a.querySelector("a.text-dark").textContent.trim().toLowerCase();
                const titleB = b.querySelector("a.text-dark").textContent.trim().toLowerCase();
                return ascending ? titleA.localeCompare(titleB) : titleB.localeCompare(titleA);
            });

            container.innerHTML = "";
            cards.forEach(card => container.appendChild(card));

            ascending = !ascending;
            document.getElementById("sortText").textContent = ascending ? "Ascending" : "Descending";
        });
    </script>
@endsection