@extends('layouts.adminlayout')


@section('content')
    <div class="container-fluid">
        <div class="row">
            @include('admin.adminnavbar')
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div
                    class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">Manage Ads</h1>
                </div>
                
                <div class="p-3">
                    <form method="GET" action="{{ route('admin.manage.ads') }}" class="d-flex" style="max-width: 400px;">
                        <input type="text" name="search" class="form-control me-2"
                               placeholder="Search ads (title, user, ID, state)..."
                               value="{{ $search ?? '' }}">
                
                        <button class="btn btn-primary" type="submit">Search</button>
                    </form>
                </div>
                
                <!-- Table for Managing Ads -->
                <div class="card mt-4">
                    <div class="card-header table-back-color text-white">
                        <h5 class="mb-0">All Ads ({{ $ads->total() }})</h5>


                    </div>
                    <div class="card-body">

                        @foreach ($ads as $ad)
                            <div class="card mb-4 shadow-sm">
                                <!-- Header with Ad ID and Status -->
                                <div class="card-header bg-dark text-white">
                                    <div class="row align-items-center">
                                        <div class="col-md-6 col-12 mb-2 mb-md-0">
                                            <strong>Ad ID:</strong> #{{ $ad->id }}
                                        </div>
                                        <div class="col-md-6 col-12 text-md-end">
                                            <select class="form-select form-select-sm w-auto d-inline-block status-dropdown"
                                                data-ad-id="{{ $ad->id }}">
                                                <option value="active" @selected($ad->status == 'active')>Active</option>
                                                <option value="inactive" @selected($ad->status == 'inactive')>Inactive</option>
                                                <option value="pending" @selected($ad->status == 'pending')>Pending</option>
                                                <option value="moderate" @selected($ad->status == 'moderate')>Moderate</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Body -->
                                <div class="card-body">
                                    <h5 class="card-title text-primary">{{ $ad->title }}</h5>

                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <p><strong>Owner:</strong> {{ $ad->user->name }} ({{ $ad->user->email }})</p>
                                            <p><strong>Category:</strong> {{ $ad->category->name ?? 'N/A' }}</p>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <p><strong>State:</strong> {{ $ad->state ?? '' }}</p>
                                            <p><strong>Posted:</strong> {{ $ad->created_at->format('d M Y, h:i A') }}</p>
                                        </div>
                                    </div>

                                    <p class="mb-2"><strong>Description:</strong> {{ $ad->description }}</p>

                                    <!-- Actions -->
                                    <div class="d-flex flex-wrap justify-content-end gap-2 mt-3">


                                        <a href="{{ route('ads.user.profile', $ad->user->id) }}"
                                            class="btn btn-sm btn-danger">
                                            <i class="bi bi-person-lines-fill"></i> User Profile
                                        </a>

                                        <a href="{{ route('ads.edit', $ad->id) }}" class="btn btn-sm btn-primary">
                                            <i class="bi bi-pencil"></i> Edit
                                        </a>

                                        <form action="{{ route('ads.delete', $ad->id) }}" method="POST"
                                            id="deleteForm-{{ $ad->id }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-sm btn-danger"
                                                onclick="confirmDelete({{ $ad->id }})">
                                                <i class="bi bi-trash"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach



                        <!-- Pagination if needed -->
                        {{ $ads->links('pagination::bootstrap-5') }}

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

        @if (session('success'))
            <div class="custom-alert alert-dismissible fade show" id="successAlert" role="alert">
                {{ session('success') }}
            </div>
        @endif

        <div id="successAlert" class="custom-alert alert-dismissible fade show d-none" role="alert"></div>

    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.status-dropdown').change(function() {
                var adId = $(this).data('ad-id');
                var newStatus = $(this).val();
                $.ajax({
                    url: '/admin/ads/' + adId + '/update-status',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        status: newStatus
                    },
                    success: function(response) {
                        if (response.success) {
                            var successMessage = response.message;
                            // alert('Ad status updated successfully');
                            $('#successAlert').html(successMessage).removeClass('d-none')
                                .addClass('alert-success alert-dismissible fade show');
                            setTimeout(function() {
                                $('#successAlert').alert('close');
                            }, 5000);
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    },
                    error: function() {
                        alert('Error updating the status.');
                    }
                });
            });
        });

        function confirmDelete(adId) {
            if (confirm('Are you sure you want to delete this ad?')) {
                document.getElementById('deleteForm-' + adId).submit();
            } else {
                return false;
            }
        }
    </script>
@endsection