@extends('admin.layouts.masterlayout')

@section('title', 'Advertisement Management')
@section('head_title', 'Advertisement Management')

@section('content')
<div class="dashboard-body-content">
    <div class="manage-offers-flex">
        <div class="admin-tab-container">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link ads_link active" data-bs-toggle="pill" href="#accepted-ads" data-tab="accepted">Accepted</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link ads_link" data-bs-toggle="pill" href="#pending-ads" data-tab="pending">Pending</a>
                </li>
            </ul>
        </div>
        <div class="d-flex gap-3 align-items-center manage-search-container">
            <div class="position-relative w-100">
                <input type="search" class="form-control shop-search" placeholder="Search here">
                <div class="search-icon">
                    <img src="{{ asset('assets/img/dashboard/search-icon.png') }}" alt="">
                </div>
            </div>
            @can('advertisement_management.create')
            <a href="{{ route('admin.addAdvertisement') }}" class="ct-btn text-center add-ct-btn max-width-fit-con">Add Advertisement</a>
            @endcan
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane ads_tab active" id="accepted-ads">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="accepted_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Media</th>
                                    <th>Title</th>
                                    <th>Shop</th>
                                    <!-- <th>Ad Type</th> -->
                                    <th>Budget</th>
                                    <th>Price</th>
                                    <th>Targeting</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane ads_tab fade" id="pending-ads">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="pending_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Media</th>
                                    <th>Title</th>
                                    <th>Shop</th>
                                    <!-- <th>Ad type</th> -->
                                    <th>Budget</th>
                                    <th>Targeting</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    var accepted_Table = $('#accepted_table').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.getAdvertisementsData") }}',
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'media',
                name: 'media',
                orderable: false,
                searchable: false
            },
            {
                data: 'title',
                name: 'title'
            },
            {
                data: 'shop',
                name: 'shop'
            },
            // {
            //     data: 'media_type',
            //     name: 'media_type'
            // },
            {
                data: 'budget',
                name: 'budget'
            },
            {
                data: 'price',
                name: 'price'
            },
            {
                data: 'audience_target',
                name: 'audience_target'
            },
            {
                data: 'start_date',
                name: 'start_date'
            },
            {
                data: 'end_date',
                name: 'end_date'
            },
            {
                data: 'payment_status',
                name: 'payment_status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ]
    });

    // pending Shops DATATABLE
    const pending_Table = $('#pending_table').DataTable({
        dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.getAdvertisementPendingsData') }}", // Make sure the route is correctly defined
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'media',
                name: 'media',
                orderable: false,
                searchable: false
            },
            {
                data: 'title',
                name: 'title'
            },
            {
                data: 'shop',
                name: 'shop'
            },
            // {
            //     data: 'media_type',
            //     name: 'media_type'
            // },
            {
                data: 'budget',
                name: 'budget'
            },
            {
                data: 'audience_target',
                name: 'audience_target'
            },
            {
                data: 'start_date',
                name: 'start_date'
            },
            {
                data: 'end_date',
                name: 'end_date'
            },
            {
                data: 'payment_status',
                name: 'payment_status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ]
    });

    $(document).ready(function() {

        var tab = getUrlParameter('tab') || 'accepted';

        // Activate correct tab
        $('.ads_link').removeClass('active');
        $('.ads_tab').removeClass('active show');
        if (tab === 'pending') {
            $('.ads_link[data-tab="pending"]').addClass('active');
            $('#pending-ads').addClass('active show');
        } else {
            $('.ads_link[data-tab="accepted"]').addClass('active');
            $('#accepted-ads').addClass('active show');
        }

        // Handle click + update URL
        $('.ads_link').on('click', function(e) {
            var selectedTab = $(this).data('tab');
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + selectedTab;
            window.history.pushState({
                path: newUrl
            }, '', newUrl);

            $('.ads_link').removeClass('active');
            $(this).addClass('active');

            $('.ads_tab').removeClass('active show');
            if (selectedTab === 'pending') {
                $('#pending-ads').addClass('active show');
            } else {
                $('#accepted-ads').addClass('active show');
            }
        });

        // SHARED SEARCH LOGIC
        $('.manage-search-container input[type="search"]').on('input', function() {
            const activeTab = $('.ads_tab.active').attr('id');
            const searchText = $(this).val();

            if (activeTab === 'accepted-ads') {
                accepted_Table.search(searchText).draw();
            } else if (activeTab === 'pending-ads') {
                pending_Table.search(searchText).draw();
            }
        });

        $(window).on('pageshow', function(event) {
            if (event.persisted || performance.getEntriesByType("navigation")[0].type === "back_forward") {
                $('.shop-search').val('');
                accepted_Table.search('').draw(false);
            }
        });
    });


    // DELETE Shop LOGIC
    $(document).on('click', '.delete_ads, .delete_unverifyshop', function() {
        var id = $(this).attr("data-id");
        var type = $(this).attr("data-type");

        $(".tattoo-delete-btn").attr('data-deleted-id', id);
        $(".tattoo-delete-btn").attr('data-delete-type', type);
        $('.tattoo-delete-modal').modal('show');
    });

    // Delete from Database
    $(document).on('click', '.tattoo-delete-btn', function() {
        var id = $(this).attr("data-deleted-id");
        var type = $(this).attr("data-delete-type");

        if (id !== "" && id != 0) {
            $('.tattoo-delete-btn').attr('disabled', true).addClass('loader-active');

            $.ajax({
                type: "POST",
                url: "{{ route('admin.deleteAdvertisement') }}",
                data: {
                    advertisement_id: id
                },
                success: function(response) {

                    $('.tattoo-delete-modal').modal('hide');
                    $('.tattoo-delete-btn').removeAttr('disabled').removeClass('loader-active');

                    if (response.status === true) {
                        // Clear search input and reset filters
                        if (type === "accepted") {
                            if (accepted_Table.rows({
                                    page: 'current'
                                }).count() === 1) {
                                accepted_Table.page('previous').draw('page');
                            } else {
                                accepted_Table.ajax.reload(null, false);
                            }
                        } else if (type === "pending") {
                            if (accepted_Table.rows({
                                    page: 'current'
                                }).count() === 1) {
                                pending_Table.page('previous').draw('page');
                            } else {
                                pending_Table.ajax.reload(null, false);
                            }
                        }

                        custom_message('success', response.message);
                    } else {
                        custom_message('error', response.message);
                    }
                }
            });
        } else {
            custom_message('error', "ID isn't valid");
        }
    });
</script>
@endsection