@extends('admin.layout.master')
@section('content')
@section('ads', 'active')
@section('title', 'Ads')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->

        <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"></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>
        <!--end breadcrumb-->
        <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">
                <div class="col-md-4">
                    <h6>Filter by Category</h6>
                    <div id="category-filters">
                        @foreach ($categories as $category)
                            <label>
                                <input type="checkbox" class="filter-checkbox category-filter" value="{{ $category }}">
                                {{ $category }}
                            </label><br>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-4">
                    <h6>Filter by City</h6>
                    <div id="city-filters">
                        @foreach ($cities as $city)
                            <label>
                                <input type="checkbox" class="filter-checkbox city-filter" value="{{ $city }}">
                                {{ $city }}
                            </label><br>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-4">
                    <h6>Filter by Status</h6>
                    <div id="status-filters">
                        <label><input type="checkbox" class="filter-checkbox status-filter" value="Approved"> Approved</label><br>
                        <label><input type="checkbox" class="filter-checkbox status-filter" value="Pending"> Pending</label><br>
                        <label><input type="checkbox" class="filter-checkbox status-filter" value="Reject"> Reject</label><br>
                        <label><input type="checkbox" class="filter-checkbox status-filter" value="Offer"> Offer</label><br>
                    </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>
                                        @if (!empty($ad->client->full_name))
                                            {{ $ad->client->full_name }}
                                        @else
                                            Admin
                                        @endif
                                    </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>
                                        @if ($ad->is_approved == '1')
                                            <span class="badge bg-success">Approved</span>
                                        @elseif($ad->is_approved == '2')
                                            <span class="badge bg-danger">Reject</span>
                                        @elseif($ad->is_approved == '3')
                                            <span class="badge bg-success">Offer</span>
                                        @else
                                            <span class="badge bg-warning">Pending</span>
                                        @endif
                                    </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>
@endsection

<!-- 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>

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

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

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

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

            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