@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 -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Video Ads', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="Video Ads" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
         @foreach($cards as $card)
            <x-ui.stat-card 
            :number="$card['number']" 
            :title="$card['title']" 
            deltaClass="bg-danger-transparent"
            iconClass="{{$card['iconClass']}}" 
            iconColor="{{$card['iconColor']}}"
            circleBg="{{$card['circleBg']}}"
        />
        @endforeach
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="Interstitials Ads">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <x-form.dropdown label="Update Status Actions" class="bulk-actions">
                            <li><a class="dropdown-item" href="#" id="enable" data-id="ad">Active</a></li>
                            <li><a class="dropdown-item" href="#" id="hold" data-id="ad">Hold</a></li>
                            <li><a class="dropdown-item" href="#" id="completed" data-id="ad">Complete</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: 150px;">
                            <select name="created_by" id="created_by" class="form-control">
                                <option value="">Filter Created BY</option>
                                <option value="admin">Admin</option>
                                <option value="user">User</option>
                            </select>
                        </div>

                        <div class="form-group"  style="width: 150px;">
                            <select name="status" id="status" class="form-control">
                                <option value="">Filter Status</option>
                                <option value="1">Active</option>
                                <option value="2">Hold</option>
                                <option value="3">Completed</option>
                            </select>
                        </div>
                        <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-success btn-wave add-data" id="applyFilter">
                            <i class="ri-add-line me-1 align-middle"></i>
                            Apply Filter
                        </button>
                        <a href="/admin/ads/videos/create" class="btn btn-primary btn-wave add-data">
                            <i class="ri-add-line me-1 align-middle"></i>
                            Create Ad
                        </a>
                    </div>
                    
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => true, 'class' => 'ps-4 '],
                        ['label' => 'Title'],
                        ['label' => 'Media'],
                        ['label' => 'Ad Format'],
                        ['label' => 'Completed/Target'],
                        ['label' => 'Progress'],
                        ['label' => 'Created BY'],
                        ['label' => 'Status'],
                        ['label' => 'CreatedAT'],
                        ['label' => 'Action'],
                    ];
                @endphp

                <x-ui.table id="data_table" :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>
@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('data_table', "{{ route('admin.ads.data') }}", {
                adformat: 'VID',
                created_by:() => $('#created_by').val() || null,
                status:() => $('#status').val() || null,
                start_date: () => $('#daterange').val().split(' to ')[0] || null,
                end_date: () => $('#daterange').val().split(' to ')[1] || null
            }, [{
                    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'
                },
                {
                    data: 'media',
                    render: function(data, type, row) {
                        return `<div class="d-flex">
                                <span class="avatar avatar-xxl border p-1 bg-light">
                                    <img src="{{ asset('uploads/ads') }}/` + row.media + `" alt="" style="width:150px;">
                                </span>
                            </div>`;
                    }
                },
                {
                    data: 'ad_format',
                    render: function(data, type, row) {
                        return `<span class="badge bg-primary-transparent">VideoAd</span>`;
                    }
                },
             
                {
                    data: 'target_impression',
                    render: function(data, type, row) {
                        return row.total_impression + ' / ' + row.target_impression;
                    }
                }, 
                {
                    data: null,
                    render: function(data, type, row) {
                        let per = ((row.total_impression / row.target_impression) * 100).toFixed(1)
                        return `<div class="d-flex-column align-items-center">
                                    <div class="progress progress-sm w-100" role="progressbar" aria-valuenow="` + per + `" aria-valuemin="0" aria-valuemax="100">
                                        <div class="progress-bar  bg-primary" style="width: ` + per + `%"></div>
                                    </div>
                                    <div class="ms-2">` + per + `%</div>
                                </div>`;
                    }
                },
                {
                    data: 'created_by',
                    render: function(data, type, row) {
                        if(data=="admin"){
                            return '<p class="text-dark">Admin</p>'
                        }else{
                            return `<a href='/admin/users/track/${row.user_id}' target='blank' class='text-primary'>User</a>`;
                        }
                    }
                },
                {
                    data: 'status',
                    render: function(data, type, row) {
                        if (data == 0) {
                            return `<span class="fw-medium text-warning fs-12"><i class="ri-circle-line fw-semibold fs-7 me-2 lh-1 align-middle"></i>Pending</span>`
                        } else if (data == 1) {
                            return `<span class="fw-medium text-success fs-12"><i class="ri-circle-line fw-semibold fs-7 me-2 lh-1 align-middle"></i>Active</span>`
                        } else if (data == 2) {
                            return `<span class="fw-medium text-info fs-12"><i class="ri-circle-line fw-semibold fs-7 me-2 lh-1 align-middle"></i>Hold</span>`
                        } else if (data == 3) {
                            return `<span class="fw-medium text-primary fs-12"><i class="ri-circle-line fw-semibold fs-7 me-2 lh-1 align-middle"></i>Completed</span>`
                        } else if (data == 4) {
                            return `<span class="fw-medium text-danger fs-12"><i class="ri-circle-line fw-semibold fs-7 me-2 lh-1 align-middle"></i>Rejected</span>`
                        }
                    }
                },{
                    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'
                        });
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="/admin/ads/videos/edit/` + 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="ads" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light delete">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();
            $('#applyFilter').on('click', () => table.reload({ resetPage: true }));
        });
    </script>
@endsection