@extends('admin.layout.master')
@section('content')
@section('advertisement', 'active')
@section('title', 'Advertisement')
<!--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">Advertisement</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.advertisement') }}">

                        <button type="button" class="btn btn-primary">Add Advertisement</button>

                    </a>
                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        <h6 class="mb-0 text-uppercase">All Advertisements</h6>
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        <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>Image</th>
                                <th>Title</th>
                                <th>Price</th>
                                <th>Page</th>
                                <th>Date & Time</th>
                                <th>Action</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($advertisements as $advertisement)

                                <tr>
                                    <td>
                                        <a href="{{$advertisement->url}}">
                                            <img src="{{asset($advertisement->image)}}" alt="" style="width: 50px">
                                        </a>
                                    </td>

                                    <td>{{ $advertisement->title }}</td>
                                    <td>{{ $advertisement->price }}</td>
                                    <td>{{ $advertisement->page }}</td>


                                    <td>{{ $advertisement->created_at }}</td>
                                    <td>
                                        <a href="{{route('admin.edit.advertisement',['id'=>$advertisement->id])}}" class="bx bx-edit">
                                        </a>
                                        <a href="{{route('admin.delete.advertisement',['id'=>$advertisement->id])}}" class="bx bx-trash">
                                        </a>
                                    </td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#example').DataTable({
            pageLength: 10,
            order: [
                [0, 'desc']
            ]
        });
    });
</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