@extends('admin.layout.master')
@section('content')
@section('ads', 'active')
@section('title', 'Ads')

<style>
    .filters h6 {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .form-check-inline {
        margin-bottom: 4px;
    }

    .filters {
        padding: 10px;
        background: #f9f9f9;
        border-radius: 8px;
    }

    .filters .form-check-input {
        width: 16px;
        height: 16px;
    }

    .filters .form-check-label {
        font-size: 12px;
        margin-left: 4px;
    }

    .filters .d-flex {
        gap: 10px;
    }

    /* Ensure the dropdown is scrollable when content overflows */
.dropdown-scroll {
    max-height: 200px; /* Set the maximum height for the dropdown */
    padding: 10px;
    overflow-y: auto;
    /* Add some padding for better appearance */
}

/* Adjust checkbox alignment inside dropdown */
.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Space between checkboxes */
}

/* Ensure the dropdown menu width matches the button */
.dropdown-menu {
    width: 100%; /* Match button width */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

</style>


<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Ads</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Ads</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    <a href="{{ route('admin.add.ads') }}">
                        <button type="button" class="btn btn-primary">Add Listing</button>
                    </a>
                </div>
            </div>
        </div>
        <h6 class="mb-0 text-uppercase">All Ads</h6>
        <hr />

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- <div class="filters mb-3">
            <div class="row g-2">
                <div class="col-md-12">
                    <h6 class="fw-bold">Category</h6>
                    <div id="category-filters" class="d-flex flex-wrap gap-2">
                        @foreach ($categories as $category)
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input filter-checkbox category-filter" id="category_{{ $loop->index }}" value="{{ $category }}">
                                <label class="form-check-label" for="category_{{ $loop->index }}">{{ $category }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-12">
                    <h6 class="fw-bold">City</h6>
                    <div id="city-filters" class="d-flex flex-wrap gap-2">
                        @foreach ($cities as $city)
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input filter-checkbox city-filter" id="city_{{ $loop->index }}" value="{{ $city }}">
                                <label class="form-check-label" for="city_{{ $loop->index }}">{{ $city }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-12">
                    <h6 class="fw-bold">Status</h6>
                    <div id="status-filters" class="d-flex flex-wrap gap-2">
                        @foreach (['Approved', 'Pending', 'Reject', 'Offer'] as $status)
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input filter-checkbox status-filter" id="status_{{ $loop->index }}" value="{{ $status }}">
                                <label class="form-check-label" for="status_{{ $loop->index }}">{{ $status }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="filters mb-4">
            <div class="row g-3 align-items-center">
                <!-- Category Dropdown -->
                <div class="col-md-4">
                    <h6 class="fw-bold mb-2">Category</h6>
                    <div class="dropdown">
                        <button class="btn btn-outline-primary dropdown-toggle w-100" type="button" id="categoryDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            Select Categories
                        </button>
                        <ul class="dropdown-menu dropdown-scroll w-100" aria-labelledby="categoryDropdown">
                            @foreach ($categories as $category)
                                <li>
                                    <div class="form-check px-3">
                                        <input type="checkbox" class="form-check-input filter-checkbox category-filter" id="category_{{ $loop->index }}" value="{{ $category }}">
                                        <label class="form-check-label" for="category_{{ $loop->index }}">{{ $category }}</label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <!-- City Dropdown -->
                <div class="col-md-4">
                    <h6 class="fw-bold mb-2">City</h6>
                    <div class="dropdown">
                        <button class="btn btn-outline-primary dropdown-toggle w-100" type="button" id="cityDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            Select Cities
                        </button>
                        <ul class="dropdown-menu dropdown-scroll w-100" aria-labelledby="cityDropdown">
                            @foreach ($cities as $city)
                                <li>
                                    <div class="form-check px-3">
                                        <input type="checkbox" class="form-check-input filter-checkbox city-filter" id="city_{{ $loop->index }}" value="{{ $city }}">
                                        <label class="form-check-label" for="city_{{ $loop->index }}">{{ $city }}</label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <!-- Status Dropdown -->
                <div class="col-md-4">
                    <h6 class="fw-bold mb-2">Status</h6>
                    <div class="dropdown">
                        <button class="btn btn-outline-primary dropdown-toggle w-100" type="button" id="statusDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            Select Status
                        </button>
                        <ul class="dropdown-menu dropdown-scroll w-100" aria-labelledby="statusDropdown">
                            @foreach (['Approved', 'Pending', 'Reject', 'Offer'] as $status)
                                <li>
                                    <div class="form-check px-3">
                                        <input type="checkbox" class="form-check-input filter-checkbox status-filter" id="status_{{ $loop->index }}" value="{{ $status }}">
                                        <label class="form-check-label" for="status_{{ $loop->index }}">{{ $status }}</label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        <hr />


        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>Date & Time</th>
                                <th>User Name</th>
                                <th>Category</th>
                                <th>Ad Title</th>
                                <th>City</th>
                                <th>Amount</th>
                                <th>View</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($ads as $ad)
                                <tr>
                                    <td>{{ $ad->created_at }}</td>
                                    <td>{{ $ad->client->full_name ?? 'Admin' }}</td>
                                    <td>{{ $ad->type }}</td>
                                    <td>{{ $ad->ad_title }}</td>
                                    <td>{{ $ad->city }}</td>
                                    <td>{{ $ad->price }}</td>
                                    <td><a href="{{ route('admin.ads.detail', ['id' => $ad->id]) }}">View</a></td>
                                    <td>
                                        <span class="badge bg-{{ $ad->is_approved == '1' ? 'success' : ($ad->is_approved == '2' ? 'danger' : ($ad->is_approved == '3' ? 'success' : 'warning')) }}">
                                            {{ $ad->is_approved == '1' ? 'Approved' : ($ad->is_approved == '2' ? 'Reject' : ($ad->is_approved == '3' ? 'Offer' : 'Pending')) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($ad->is_approved == '3')
                                        @if(!empty($ad->offer) && $ad->offer->offer_status == 'Accepted')
                                            <span class="badge bg-success">Offer Accepted</span>
                                        @else
                                            <span class="badge bg-success">Offer Sent</span>
                                        @endif

                                        @else
                                        <a href="javascript;:" class="bx bx-gift tribute" data-id="{{ $ad->id }}"
                                            data-status="{{ $ad->is_approved }}" data-bs-toggle="modal"
                                            data-bs-target="#comment">
                                        </a>
                                        @endif

                                        {{-- <a href="javascript;:" class="bx bx-gift offer" data-id="{{ $ad->id }}"
                                            data-bs-toggle="modal" data-bs-target="#offer">
                                        </a> --}}
                                        @if($ad->comment)
                                        <a href="javascript;:" class="bx bx-comment reject" data-id="{{ $ad->id }}"
                                            data-comment="{{ $ad->comment }}"
                                            data-bs-toggle="modal" data-bs-target="#reject">
                                        </a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Status Change Modal -->
<div class="modal fade" id="comment" tabindex="-1" aria-labelledby="comment" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Change Status</h5>
                {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button> --}}
            </div>
            <div class="modal-body">
                <form id="statusForm" action="{{ route('admin.ads.status') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" class="tribute_id" @if(!empty($ad)) value="{{ $ad->id }}" @endif>

                    <div class="mb-3">
                        <h6 class="card-title">Status</h6>
                        <select name="is_approved" class="form-control status" id="statusSelect">
                            <option value="1" @if (!empty($ad) && $ad->is_approved == '1') selected @endif>Approved</option>
                            <option value="0" @if (!empty($ad) && $ad->is_approved == '0') selected @endif>Pending</option>
                            <option value="2" @if (!empty($ad) && $ad->is_approved == '2') selected @endif>Reject</option>
                            <option value="3" @if (!empty($ad) && $ad->is_approved == '3') selected @endif>Offer</option>
                        </select>
                        <span class="text-danger">{{ $errors->first('is_approved') }}</span>
                    </div>

                    <div class="mb-3 d-none" id="rejectReason">
                        <h6 class="card-title">Rejection Reason</h6>
                        <textarea name="reject_reason" class="form-control" rows="3"></textarea>
                    </div>

                    <div id="offerFields" class="d-none">
                        <div class="mb-3">
                            <h6 class="card-title">Min</h6>
                            <input type="number" class="form-control" name="min"  value="500">
                            <span class="text-danger">{{ $errors->first('min') }}</span>
                        </div>

                        <div class="mb-3">
                            <h6 class="card-title">Max</h6>
                            <input type="number" class="form-control" name="max" value="1000">
                            <span class="text-danger">{{ $errors->first('max') }}</span>
                        </div>

                        <div class="mb-3">
                            <h6 class="card-title">Description</h6>
                            <textarea class="form-control" name="description" rows="4" cols="50" required></textarea>
                            <span class="text-danger">{{ $errors->first('description') }}</span>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Submit</button>

            </div>
            </form>

        </div>

    </div>
    </div>

    <!-- Rejection Modal -->
<div class="modal fade" id="reject" tabindex="-1" aria-labelledby="reject" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Rejection</h5>
            </div>
            <div class="modal-body">
                <form id="statusForm" action="{{ route('admin.offer_process') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="ad_id" class="ad_id"  @if(!empty($ad)) value="{{ $ad->id }}" @endif>



                    <div class="mb-3">
                        <h6 class="card-title">Rejection Reason</h6>
                        <textarea class="form-control comment" rows="4" cols="50" readonly></textarea>
                    </div>
            </div>

            </form>

        </div>

    </div>
</div>
@endsection



@section('script')
<script>
    $(document).ready(function() {
        const table = $('#example').DataTable({
            pageLength: 50,
            order: [[0, 'desc']]
        });

        $('.filter-checkbox').on('change', function() {
            filterTable();
        });

        $('#clear-filters').on('click', function() {
            $('.filter-checkbox').prop('checked', false);
            filterTable();
        });

        function filterTable() {
            const selectedCategories = getSelectedValues('.category-filter');
            const selectedCities = getSelectedValues('.city-filter');
            const selectedStatuses = getSelectedValues('.status-filter');

            table.columns(2).search(selectedCategories.join('|'), true, false); // Category
            table.columns(4).search(selectedCities.join('|'), true, false);    // City
            table.columns(7).search(selectedStatuses.join('|'), true, false); // Status

            table.draw();
        }

        function getSelectedValues(selector) {
            return $(`${selector}:checked`).map(function() {
                return this.value;
            }).get();
        }
    });
</script>

<script>
    $(".tribute").on("click", function() {
        var dataId = $(this).attr("data-id");
        var datastatus = $(this).attr("data-status");
        $(".tribute_id").val(dataId);
        $(".status").val(datastatus);
    });

    $(".offer").on("click", function() {
        var dataId = $(this).attr("data-id");
        $(".ad_id").val(dataId);
        // alert(dataId)
    });

    $(".reject").on("click", function() {
        var dataId = $(this).attr("data-id");
        var datacomment = $(this).attr("data-comment");
        $(".ad_id").val(dataId);
        $(".comment").val(datacomment);

        // alert(dataId)
    });

    // $(document).ready(function () {
    //     $('#statusSelect').on('change', function () {
    //         if ($(this).val() == '2') {
    //             $('#rejectReason').removeClass('d-none');
    //         } else {
    //             $('#rejectReason').addClass('d-none');
    //         }
    //     });
    // });

</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
    const statusSelect = document.getElementById('statusSelect');
    const offerFields = document.getElementById('offerFields');
    const rejectReason = document.getElementById('rejectReason');
    const descriptionField = document.querySelector('[name="description"]');
    const minField = document.querySelector('[name="min"]');
    const maxField = document.querySelector('[name="max"]');
    const rejectReasonField = document.querySelector('[name="reject_reason"]');

    statusSelect.addEventListener('change', function () {
        const selectedValue = this.value;

        // Show/Hide and Add/Remove required attributes
        if (selectedValue === '3') { // Offer
            offerFields.classList.remove('d-none');
            rejectReason.classList.add('d-none');

            // Make offer fields required
            descriptionField.setAttribute('required', 'true');
            minField.setAttribute('required', 'true');
            maxField.setAttribute('required', 'true');

            // Remove required from rejection reason
            rejectReasonField.removeAttribute('required');
        } else if (selectedValue === '2') { // Reject
            rejectReason.classList.remove('d-none');
            offerFields.classList.add('d-none');

            // Make rejection reason required
            rejectReasonField.setAttribute('required', 'true');

            // Remove required from offer fields
            descriptionField.removeAttribute('required');
            minField.removeAttribute('required');
            maxField.removeAttribute('required');
        } else {
            // Hide both sections and remove required attributes
            offerFields.classList.add('d-none');
            rejectReason.classList.add('d-none');

            descriptionField.removeAttribute('required');
            minField.removeAttribute('required');
            maxField.removeAttribute('required');
            rejectReasonField.removeAttribute('required');
        }
    });

    // Trigger change event on page load to set initial visibility
    statusSelect.dispatchEvent(new Event('change'));
});

</script>
@endsection