@extends('layouts.master')
@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <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 -->
                    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
                        <div>
                            <nav>
                                <ol class="breadcrumb mb-1">
                                    <li class="breadcrumb-item"><a href="javascript:void(0);">Offerwall</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Web</li>
                                </ol>
                            </nav>
                            <h1 class="page-title fw-medium fs-18 mb-0">Web Offerwalls</h1>
                        </div>
                      
                    </div>
                    <!-- Page Header Close -->

                    <!-- Start::row-1 -->
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card custom-card overflow-hidden">
                                <div class="card-header justify-content-between">
                                    <div class="card-title d-flex gap-2">
                                        <div class="dropdown">
                                            <a href="javascript:void(0);" class="form-control btn-wave font-bold" data-bs-toggle="dropdown" aria-expanded="false">
                                                Bulk Actions<i class="ri-arrow-down-s-line align-middle ms-1 d-inline-block"></i>
                                            </a>
                                            <ul class="dropdown-menu bulk-actions" role="menu">
                                                <li><a class="dropdown-item" href="javascript:void(0);" id="enable" data-id="offerwall">Active</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);" id="disable" data-id="offerwall">Disable</a></li>
                                            </ul>
                                        </div>

                                        <div>
                                            <input class="form-control" type="text" id="search" placeholder="Search Here" aria-label=".form-control-sm example">
                                        </div>
                                    </div> 
                                    <div class="d-flex flex-wrap gap-2">
                                        <a href="{{route('admin.offerwall.web.create')}}" class="btn btn-primary btn-wave align-items-center">
                                            <i class="ri-add-line me-1 align-middle"></i>Add Offerwall
                                        </a> 
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="data_table" class="table table-hover  text-nowrap">
                                            <thead>
                                                <tr>
                                                    <th class="ps-4"><input class="form-check-input check-all sub_chk_all" type="checkbox" id="checkboxNoLabeljob1" value="" aria-label="..."></th>
                                                    <th scope="col">Offerwall</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Open In</th>
                                                    <th scope="col">Earning Last Month</th>
                                                    <th scope="col">Earning This Month</th>
                                                    <th scope="col">Status</th>
                                                    <th scope="col">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                              
                            </div>
                        </div>
                    </div>
@endsection

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

    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('data_table',"{{ route('admin.offerwall.data') }}",{
                otype:'web',
            },[
                    {data: 'id',orderable:false,
                        render:function(data,type,row){
                        return `<input class="form-check-input sub_chk" type="checkbox" id="checkboxNoLabeljob22" data-id="${data}" value="${data}">`;
                    }},
                    {data: 'title',render:function(data,type,row){
                        return `<div class="d-flex">
                                <span class="avatar avatar-md border p-1 bg-light">
                                    <img src="{{asset('uploads/')}}/`+row.thumb+`" alt="">
                                </span>
                                <div class="ms-2">
                                    <p class="fw-medium fs-14 mt-2 d-flex align-items-center">`+data+`</p>
                                </div>
                            </div>`;
                    }},
                    {data: 'cat'},
                    {data: 'browser'},
                    { data: null,render: function(data, type, row) {
                            return '$0';
                        }},
                    { data: null,render: function(data, type, row) {
                        return '$0';
                    }},
                    {data: 'status',    
                        render: function(data, type, row) {
                            if(data == 1) {
                                return `<span class="badge fw-semibold badge-pill bg-success-transparent text-success fs-11">Active</span>`
                            } else {
                                return `<span class="badge fw-semibold badge-pill bg-danger-transparent text-danger fs-11">Inactive</span>`
                            }
                        }
                    },
                    { data: null,orderable:false,
                        render: function(data, type, row) {
                          
                            return `
                            <a href="#" class="btn btn-sm btn-primary-light btn-wave waves-effect waves-light view-postback" id="${row.postback_url}" data-slug="${row.pb_slug}" data-secret="${row.secret}" data-id="${row.pid}">
                                View Postback
                            </a>
                            <a href="/admin/offerwall/edit/web/`+row.id+`" class="btn btn-icon btn-sm btn-info-light btn-wave waves-effect waves-light">
                                <i class="ri-edit-line"></i>
                            </a>
                            <a href="javascript:void(0);" id="`+row.id+`" data-id="offerwall" 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>`;
                        }
                    }
                ]);
            table.initialize();
         
        });

        $("body").on('click','.view-postback',function(){
            let appUrl= "{{ env('APP_URL') }}/";
            let secret=$(this).attr('data-secret');
            let id=$(this).attr('data-id');
            let slug=$(this).attr('data-slug');
            let finalurl=appUrl+'offerwall-callback/'+slug+'/'+secret+'/'+id;
            $('#postback-modal').modal('show');
            $('#pb1').text(finalurl);
            $('#pb2').text(finalurl+$(this).attr('id'));
        });
    </script>

@endsection