@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">
    <!-- Toastify CSS -->
    <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' => 'Daily Offer', 'url' =>route('admin.dailyoffer')],
            ['label' => 'Approved Offer', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="Approved Offer" />
    <!-- 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="">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <x-form.dropdown label="Bulk Actions" class="bulk-actions">
                            <li><a class="dropdown-item" href="#" id="delete" data-id="dailyoffer_log">Delete</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>
                  
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => true, 'class' => 'ps-4'],
                        ['label' => 'User'],
                        ['label' => 'Offer Title'],
                        ['label' => 'Proof'],
                        ['label' => 'Submit Date'],
                        ['label' => 'Updated Date'],
                        ['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).ready(function() {
            const table = new DataTableUtility('data_table', "{{ route('admin.dailyoffer.log') }}", {
                status:'Approved'
            }, [{
                    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: 'user_id',
                    orderable: false,
                    render: function(data, type, row) {
                        return `<a href="/admin/users/track/`+row.user_id+`" target="blank" class="text-primary">${row.user_id}</a>`;
                    }
                },
                {
                    data: 'title'
                },
                {
                    data: 'media',
                    render: function(data, type, row) {
                        if(data==null){
                            return `-`;
                        }else
                          if(row.media_type==0){
                            return `<div class="d-flex">
                                        <a href="{{ asset('uploads/dailyoffer/proof/') }}/` + data + `" target="blank">
                                        <span class="avatar avatar-xxl border p-1 bg-light">
                                            <img src="{{ asset('uploads/dailyoffer/proof/') }}/` + data + `" alt="" style="width:100px;">
                                        </span>
                                        </a>
                                    </div>`;
                          }else{
                            return `<div class="d-flex">
                                        <a classs="open-video"  data-id="{{ asset('uploads/dailyoffer/proof/video/') }}/` + data + `" >
                                        <span class="avatar avatar-xxl border p-1 bg-light">
                                            <img src="{{ asset('assets/images/video_placeholder.png') }}" alt="" style="width:100px;">
                                        </span>
                                        </a>
                                    </div>`;
                          }
                        }
            
                },
                {
                    data: 'message'
                },
                {
                    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: 'updated_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="#" id="` + row.id + `" 
                            data-id="dailyoffer_log" class="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();
        });
        
    </script>
@endsection