@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Rewarded Ad Approve', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="[]" title="Interstital Ads Approval Submitted by User" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        {{-- <x-form.dropdown label="Bulk Actions">
                            <li><a class="dropdown-item" href="#" id="active" data-id="ad">Active</a></li>
                            <li><a class="dropdown-item" href="#" id="disable" data-id="ad">Disable</a></li>
                        </x-form.dropdown> --}}
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Here"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                    <div class="d-flex gap-4" >
                        <div class="form-group" style="width: 250px;">
                            <div class="input-group">
                                <div class="input-group-text text-muted"> <i class="ri-calendar-line"></i> </div>
                                <input type="text" class="form-control" id="daterange"  placeholder="Date range picker">
                            </div>
                        </div>
                        <button class="btn btn-primary btn-wave add-data" id="applyFilter">
                            <i class="ri-add-line me-1 align-middle"></i>
                            Apply Filter
                        </button>
                    </div>
                </x-slot>

                @php
                    $columns = [
                        ['label' => 'Action'],
                        ['checkbox' => false, 'class' => 'ps-4','label'=>'#'],
                        ['label' => 'User'],
                        ['label' => 'Title'],
                        ['label' => 'Logo'],
                        ['label' => 'Ad Image'],
                        ['label' => 'View Need'],
                        ['label' => 'Diamond'],
                        ['label' => 'Countries'],
                        ['label' => 'Button Text'],
                        ['label' => 'AdClick Url'],
                        ['label' => 'Description'],
                        ['label' => 'Submitted AT'],
                    ];
                @endphp

                <x-ui.table id="adtable"  :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>


<x-ui.modal id="country-modal" title="Selected Countries">
    <div class="modal-body">
          <div class="table-responsive">
            <table id="modalDataTable" class="table table-sm table-striped">
                <thead>
                <tr>
                    <th>Targeted Country</th>
                    <th>Targeted View</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>    

    @slot('footer')
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    @endslot
</x-ui.modal>

<x-ui.modal id="reject-modal" title="Reject Ad">
    <div class="modal-body">
        <textarea class="form-control" type="text" class="col-12"
            id="remark" placeholder="Reject Reason" col="6" row="6"
            aria-label=".form-control-sm example" ></textarea>
    </div>    
    @slot('footer')
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" id="submit-rej" class="btn btn-primary">Submit</button>
        </form>
    @endslot
</x-ui.modal>  
 
@endsection

@section('scripts')
    @include('layouts.components.common-script')
<script>

    document.addEventListener("DOMContentLoaded", function () {
        $('#daterange').val('');
        const picker = new DateRangePicker('#daterange', {
            dateFormat: 'Y-m-d',
            altFormat: 'd M Y',
            onApply: function(internalRange) {
            },
            onChange:function (selectedDates, dateStr, instance){
            }
        });
    });
    
        $(document).ready(function() {
            
            const table = new DataTableUtility('adtable', "{{ route('admin.ads.approval.data') }}", {
                ad_format: 'INT',
                created_by:'user',
                status:0,
                start_date: () => $('#daterange').val().split(' to ')[0] || null,
                end_date: () => $('#daterange').val().split(' to ')[1] || null
            }, [
                 {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `<a href="#" id="` + row.id + `" class="btn btn-sm btn-info-light btn-wave waves-effect waves-light approve-ad">
                                Approve
                                </a>
                                <a href="#" id="` + row.id + `" class="btn btn-sm btn-danger-light btn-wave waves-effect waves-light reject-ad">
                                Reject
                                </a>
                                <a href="javascript:void(0);" id="` + row.id + `" data-id="ads_promo" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light deleteItem">
                                    <i class="ri-delete-bin-line"></i>
                                </a>`;
                    }
                },{
                    data: 'id'
                },
                 {
                    data: 'user_id',
                    render:function(data,type,row){
                        return `<a href='/admin/users/track/${data}' target='blank' class='text-primary'>${row.name}</a>`;
                    }
                },        {
                    data: 'title'
                },
                  {
                    data: 'logo',
                    render: function(data, type, row) {
                        return `<div class="d-flex">
                                <a href="{{ asset('uploads/ads') }}/` + data + `" target="_blank">
                                    <span class="avatar avatar-xxl border p-1 bg-light">
                                        <img src="{{ asset('uploads/ads') }}/` + data + `" alt="" style="width:150px;">
                                    </span>
                                </a>
                            </div>`;
                    }
                },
               
                {
                    data: 'media',
                    render: function(data, type, row) {
                        return `<div class="d-flex">
                                <a href="{{ asset('uploads/ads') }}/` + data + `" target="_blank">
                                    <span class="avatar avatar-xxl border p-1 bg-light">
                                        <img src="{{ asset('uploads/ads') }}/` + data + `" alt="" style="width:150px;">
                                    </span>
                                </a>
                            </div>`;
                    }
                },
                {
                    data: 'target_impression'
                },
                {
                    data: 'amount_paid',  
                    render: function(data, type, row) {
                        return `<p class="text-danger fs-14 mt-2 d-flex align-items-center">-` + data + `</p>`;
                    }
                },
                 {
                    data: 'all_country',
                    render: function(data, type, row) {
                        if(data==1){
                            return `<span class="badge bg-success-transparent">All Country</span>`;
                        } else {
                            return `<span class="badge bg-dark-transparent btn btn-link btn-sm text-primary" style="cursor:pointer;" id="viewCountry" data-id="${row.id}"> ${row.country_count} Country</span>`;
                        }
                    }
                },
                 {
                    data: 'cta_text'
                },
                   {
                    data: 'url',
                    render: function(data, type, row) {
                        return `<a class="btn btn-link" href="` + data + `" target="_blank" >Visit Url</a>`;
                    }
                },
                  {
                    data: 'cta_desc'
                    
                }, {
                    data: 'created_at',
                    render: function (data, type, row) {
                        if (!data) return '';
                        const d = new Date(data);
                        return d.toLocaleDateString('en-GB', {  // you can change locale
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    }
                },
               
            ]);
            table.initialize();
            $('#applyFilter').on('click', () => table.reload({ resetPage: true }));
        });

        // $('#applyFilter').on('click', function() {
        //     console.log('ApplyFilter Clicked → start:', startDate, 'end:', endDate);

        //     // Now reload DataTable with new params
        //     $('#adtable').DataTable().ajax.reload();
        // });


        
        $('body').on('click', '#viewCountry', function() {
            const id = $(this).attr('data-id'); 
            if (id) {
                const url = `{{ route('admin.ads.approval.country', ['id' => '__ID__']) }}`.replace('__ID__', id);
                AjaxUtil.get(url, function(response) {
                        const rows = (response && response.length) ? response : [];
                        $("#country-modal").modal('show');
                        const $tbody = $('#country-modal tbody');

                        $tbody.empty();
                        if (!rows.length) {
                                $tbody.append(`<tr><td colspan="6" class="text-center">No country found</td></tr>`);
                        } else {
                            rows.forEach(r => {
                                const created = r.created_at ? new Date(r.created_at).toLocaleString() : '';
                                $tbody.append(`<tr>
                                    <td>${escapeHtml(r.name)}</td>
                                    <td>${escapeHtml(r.impression_cap)}</td>
                                </tr>
                                `);
                            });
                        }
                
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data.', 'error');
                });
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })

        function escapeHtml(str) {
            if (str === null || str === undefined) return '';
            return $('<div>').text(String(str)).html();
        }

        $('body').on('click', '.approve-ad', function() {
            const id = $(this).attr('id'); 
            if (id) {
                const url = `{{ route('admin.ads.approval.approve', ['id' => '__ID__']) }}`.replace('__ID__', id);
                AjaxUtil.get(url, function(response) {
                    if(response.status==201){
                        $("#"+id).remove();
                        AjaxUtil.showToast(response.message, 'success');
                    }else{
                        AjaxUtil.showToast(response.message, 'error');
                    }
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data.', 'error');
                });
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })
    
        $('body').on('click', '.reject-ad', function() {
            const id = $(this).attr('id'); 
            if (id) {
                $("#reject-modal").modal('show');
                
                $('#submit-rej').click(function(){
                    const url = `{{ route('admin.ads.approval.reject') }}`;
                    AjaxUtil.post(url,{
                        id:id,
                        remark:$("#remark").val(),
                    }, function(response) {
                        if(response.status==201){
                            $("#reject-modal").modal('hide');
                            $("#"+id).remove();
                            AjaxUtil.showToast(response.message, 'success');
                        }else{
                            AjaxUtil.showToast(response.message, 'error');
                        }
                    }, function(xhr, status, error) {
                        console.error('Error:', error);
                        AjaxUtil.showToast('Error loading data.', 'error');
                    });
                });
                
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })
   
    </script>
@endsection