@extends('layouts.app')
@section('title')
    User Manage Ads 
@endsection

@section('styles')
    <style>
        .ad-item {
            border: 1px solid #ddd;
            border-radius: 10px;

            margin-bottom: 20px;
            padding: 15px;
            transition: all 0.3s ease;
        }

        .ad-item:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .ad-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 10px;
        }

        .ad-image-container {
            height: 200px;
        }

        .ads-detail {
            text-align: left;
            padding-left: 20px;
        }

        .ad-title {
            font-size: 1.25rem;
            font-weight: bold;
        }

        .ad-price {
            font-size: 1.1rem;
            color: #28a745;
        }

        .ad-owner {
            color: #007bff;
        }

        .ad-btn {
            margin-top: 10px;
        }

        .ad-btn a {
            text-decoration: none;
        }
    </style>
@endsection



@section('content')
    <div class="container-fluid bg-success py-3 rounded">
        <div class="row">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4155905641018537"
                data-ad-slot="9487563407" data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>



    <div class="container my-5">
        <!-- Title -->
        <div class="text-center mb-4">
            <h1 class="fw-bold">Manage and View Your Ads</h1>
        </div>

        <!-- Search Bar -->
        <div class="row justify-content-center mb-4">
            <div class="col-md-6">
                <div class="input-group">
                    <input type="text" class="form-control" id="search-input" placeholder="Search by Ad Title"
                        aria-label="Search">
                    <button class="btn btn-primary" type="button">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Tab Controls -->
        <ul class="nav nav-tabs mb-4 justify-content-center" id="adTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="view-all-tab" data-bs-toggle="tab" data-bs-target="#view-all"
                    type="button" role="tab" aria-controls="view-all" aria-selected="true">
                    View All ({{ $counts['ads'] }})
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="active-ads-tab" data-bs-toggle="tab" data-bs-target="#active-ads"
                    type="button" role="tab" aria-controls="active-ads" aria-selected="false">
                    Active Ads ({{ $counts['active'] }})
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="inactive-ads-tab" data-bs-toggle="tab" data-bs-target="#inactive-ads"
                    type="button" role="tab" aria-controls="inactive-ads" aria-selected="false">
                    Inactive Ads ({{ $counts['inactive'] }})
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pending-ads-tab" data-bs-toggle="tab" data-bs-target="#pending-ads"
                    type="button" role="tab" aria-controls="pending-ads" aria-selected="false">
                    Pending Ads ({{ $counts['pending'] }})
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="moderated-ads-tab" data-bs-toggle="tab" data-bs-target="#moderated-ads"
                    type="button" role="tab" aria-controls="moderated-ads" aria-selected="false">
                    Moderated Ads ({{ $counts['moderate'] }})
                </button>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="adTabContent">
            <div class="tab-pane fade show active text-center" id="view-all" role="tabpanel"
                aria-labelledby="view-all-tab">
                <div class="container my-5">
                    <h4 class="text-center mb-4">My All Ads</h4>

                    <div class="row ad-item">
                        @if ($ads->count() > 0)
                            @foreach ($ads as $ad)
                                <!-- Left Side: Ad Image -->
                                <div class="col-4 col-md-4  ">
                                    <div class="ad-image-container ">
                                        @if ($ad->images->count() > 0)
                                            <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                alt="Ad Image" class="ad-img"
                                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                        @else
                                            <img src="{{ asset('storage/product_images/default.png') }}" alt="Default Image"
                                                class="ad-img">
                                        @endif
                                    </div>
                                </div>

                                <!-- Right Side: Ad Details -->
                                <div class=" col-7 col-md-8 ">
                                    <div class="ads-detail">
                                        <p class="ad-title text-left">{{ $ad->title ?? '' }}</p>
                                        <p class="ad-price">{{ config('app.currency_symbol') }}
                                            {{ number_format($ad->price, 2) }}</p>
                                        <p class="ad-brand"><strong>Brand:</strong> {{ $ad->brand->name ?? '' }}</p>
                                        <p class="ad-owner"><strong>Posted:</strong> {{ $ad->created_at }}</p>
                                        <p class="ad-status"><strong>Status:</strong> {{ $ad->status }}</p>
                                        <div class="ad-btn">
                                            <a href="{{ route('ads.edit', $ad->id) }}"
                                                class="btn_all_button btn-sm">Edit</a>
                                        </div>
                                    </div>
                                </div>
                                <hr class="mt-3">
                            @endforeach
                        @else
                            <p class="text-muted">No any ads available.</p>
                        @endif
                        {{ $ads->links('pagination::bootstrap-5') }}

                    </div>
                </div>

            </div>
            <div class="tab-pane fade text-center" id="active-ads" role="tabpanel" aria-labelledby="active-ads-tab">
                <div class="container my-5">
                    <h4 class="text-center mb-4">My Active Ads</h4>

                    <div class="row ad-item">
                        @if ($activeAds->count() > 0)
                            @foreach ($activeAds as $ad)
                                <!-- Left Side: Ad Image -->
                                <div class="col-4 col-md-4  ">
                                    <div class="ad-image-container ">
                                        @if ($ad->images->count() > 0)
                                            <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                alt="Ad Image" class="ad-img"
                                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                        @else
                                            <img src="{{ asset('storage/product_images/default.png') }}"
                                                alt="Default Image" class="ad-img">
                                        @endif


                                    </div>
                                </div>

                                <!-- Right Side: Ad Details -->
                                <div class=" col-7 col-md-8 ">
                                    <div class="ads-detail">
                                        <p class="ad-title text-left">{{ $ad->title ?? '' }}</p>
                                        <p class="ad-price">{{ config('app.currency_symbol') }}
                                            {{ number_format($ad->price, 2) }}</p>
                                        <p class="ad-brand"><strong>Brand:</strong> {{ $ad->brand->name ?? '' }}</p>
                                        <p class="ad-owner"><strong>Posted:</strong> {{ $ad->created_at }}</p>
                                        <div class="ad-btn">
                                            <a href="{{ route('ads.edit', $ad->id) }}"
                                                class="btn_all_button btn-sm">Edit</a>
                                        </div>
                                    </div>
                                </div>
                                <hr class="mt-3">
                            @endforeach
                        @else
                            <p class="text-muted">No active ads available.</p>
                        @endif
                        {{ $activeAds->links('pagination::bootstrap-5') }}

                    </div>
                </div>
            </div>
            <div class="tab-pane fade text-center" id="inactive-ads" role="tabpanel" aria-labelledby="inactive-ads-tab">

                <div class="container my-5">
                    <h4 class="text-center mb-4">Inactive Ads</h4>

                    <div class="row ad-item">
                        @if ($inactiveAds->count() > 0)
                            @foreach ($inactiveAds as $ad)
                                <!-- Left Side: Ad Image -->
                                <div class="col-4 col-md-4  ">
                                    <div class="ad-image-container ">
                                        @if ($ad->images->count() > 0)
                                            <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                alt="Ad Image" class="ad-img"
                                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                        @else
                                            <img src="{{ asset('storage/product_images/default.png') }}"
                                                alt="Default Image" class="ad-img">
                                        @endif
                                    </div>
                                </div>

                                <!-- Right Side: Ad Details -->
                                <div class=" col-7 col-md-8 ">
                                    <div class="ads-detail">
                                        <p class="ad-title text-left">{{ $ad->title ?? '' }}</p>
                                        <p class="ad-price">{{ config('app.currency_symbol') }}
                                            {{ number_format($ad->price, 2) }}</p>
                                        <p class="ad-brand"><strong>Brand:</strong> {{ $ad->brand->name ?? '' }}</p>
                                        <p class="ad-owner"><strong>Posted:</strong> {{ $ad->created_at }}</p>
                                        <div class="ad-btn">
                                            <a href="{{ route('ads.edit', $ad->id) }}"
                                                class="btn_all_button btn-sm">Edit</a>
                                        </div>
                                    </div>
                                </div>
                                <hr class="mt-3">
                            @endforeach
                        @else
                            <p class="text-muted">No inactive ads available.</p>
                        @endif
                        {{ $inactiveAds->links('pagination::bootstrap-5') }}

                    </div>
                </div>

            </div>
            <div class="tab-pane fade text-center" id="pending-ads" role="tabpanel" aria-labelledby="pending-ads-tab">
                <div class="container my-5">
                    <h4 class="text-center mb-4">Pendigs Ads</h4>

                    <div class="row ad-item">
                        @if ($pendingAds->count() > 0)
                            @foreach ($pendingAds as $ad)
                                <!-- Left Side: Ad Image -->
                                <div class="col-4 col-md-4  ">
                                    <div class="ad-image-container ">
                                        @if ($ad->images->count() > 0)
                                            <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                alt="Ad Image" class="ad-img"
                                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                        @else
                                            <img src="{{ asset('storage/product_images/default.png') }}"
                                                alt="Default Image" class="ad-img">
                                        @endif
                                    </div>
                                </div>

                                <!-- Right Side: Ad Details -->
                                <div class=" col-7 col-md-8 ">
                                    <div class="ads-detail">
                                        <p class="ad-title text-left">{{ $ad->title ?? '' }}</p>
                                        <p class="ad-price">{{ config('app.currency_symbol') }}
                                            {{ number_format($ad->price, 2) }}</p>
                                        <p class="ad-brand"><strong>Brand:</strong> {{ $ad->brand->name ?? '' }}</p>
                                        <p class="ad-owner"><strong>Posted:</strong> {{ $ad->created_at }}</p>
                                        <div class="ad-btn">
                                            <a href="{{ route('ads.edit', $ad->id) }}"
                                                class="btn_all_button btn-sm">Edit</a>
                                        </div>
                                    </div>
                                </div>
                                <hr class="mt-3">
                            @endforeach
                        @else
                            <p class="text-muted">No pending ads available.</p>
                        @endif
                        {{ $pendingAds->links('pagination::bootstrap-5') }}

                    </div>
                </div>

            </div>
            <div class="tab-pane fade text-center" id="moderated-ads" role="tabpanel"
                aria-labelledby="moderated-ads-tab">
                <div class="container my-5">
                    <h4 class="text-center mb-4">Moderated Ads</h4>

                    <div class="row ad-item">
                        @if ($moderateAds->count() > 0)
                            @foreach ($moderateAds as $ad)
                                <!-- Left Side: Ad Image -->
                                <div class="col-4 col-md-4  ">
                                    <div class="ad-image-container ">
                                        @if ($ad->images->count() > 0)
                                            <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                alt="Ad Image" class="ad-img"
                                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                        @else
                                            <img src="{{ asset('storage/product_images/default.png') }}"
                                                alt="Default Image" class="ad-img">
                                        @endif

                                        {{-- <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                            alt="Ad Image" class="ad-img"> --}}
                                    </div>
                                </div>

                                <!-- Right Side: Ad Details -->
                                <div class=" col-7 col-md-8 ">
                                    <div class="ads-detail">
                                        <p class="ad-title text-left">{{ $ad->title ?? '' }}</p>
                                        <p class="ad-price">{{ config('app.currency_symbol') }}
                                            {{ number_format($ad->price, 2) }}</p>
                                        <p class="ad-brand"><strong>Brand:</strong> {{ $ad->brand->name ?? '' }}</p>
                                        <p class="ad-owner"><strong>Posted:</strong> {{ $ad->created_at }}</p>
                                        <div class="ad-btn">
                                            <a href="{{ route('ads.edit', $ad->id) }}"
                                                class="btn_all_button btn-sm">Edit</a>
                                        </div>
                                    </div>
                                </div>
                                <hr class="mt-3">
                            @endforeach
                        @else
                            <p class="text-muted">No moderated ads available.</p>
                        @endif
                        {{ $moderateAds->links('pagination::bootstrap-5') }}


                    </div>
                </div>


            </div>
        </div>

        {{-- <!-- Discount Section -->
        <div class="alert alert-info text-center mt-5">
            <h5 class="fw-bold">Heavy Discount on Packages</h5>
            <a href="#" class="btn btn-success mt-2">View Packages</a>
        </div> --}}
    </div>
@endsection



@section('scripts')
    <script>
        $(document).ready(function() {
            console.log('document is ready');
            $(document).on('input', '#search-input', function() {
                console.log('ajax is calling');

                var searchText = $(this).val();
                var status = '';
                var activeTab = $('#adTabs .nav-link.active').attr('id');
                if (activeTab == 'view-all-tab') {
                    status = 'all';
                } else if (activeTab == 'active-ads-tab') {
                    status = 'active';
                } else if (activeTab == 'inactive-ads-tab') {
                    status = 'inactive';
                } else if (activeTab == 'pending-ads-tab') {
                    status = 'pending';
                } else if (activeTab == 'moderated-ads-tab') {
                    status = 'moderate';
                }

                $.ajax({
                    url: '{{ route('ads.filterMyAds') }}',
                    method: 'GET',
                    data: {
                        search: searchText,
                        activeTab: activeTab,
                        status: status
                    },
                    success: function(response) {
                        if (activeTab === 'view-all-tab') {
                            $('#view-all').html(response.view_all);
                        } else if (activeTab === 'active-ads-tab') {
                            $('#active-ads').html(response.active_ads);
                        } else if (activeTab === 'inactive-ads-tab') {
                            $('#inactive-ads').html(response.inactive_ads);
                        } else if (activeTab === 'pending-ads-tab') {
                            $('#pending-ads').html(response.pending_ads);
                        } else if (activeTab === 'moderated-ads-tab') {
                            $('#moderated-ads').html(response.moderated_ads);
                        }



                    },
                    error: function(xhr, status, error) {
                        if (xhr.status === 404) {
                            alert('No ads found for the search');
                        }
                        console.error('Error:', error);
                    }
                });
            });
        });


        document.addEventListener("DOMContentLoaded", function() {
            // Save the current tab in local storage on click
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                localStorage.setItem('activeTab', $(e.target).attr('href'));
            });

            // Show the saved tab on page load
            var activeTab = localStorage.getItem('activeTab');
            if (activeTab) {
                let tabTrigger = document.querySelector('a[href="' + activeTab + '"]');
                if (tabTrigger) new bootstrap.Tab(tabTrigger).show();
            }
        });
    </script>
@endsection