@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-piggy-bank text-primary"></i>
            </span>
            <h3 class="card-label">Manage Incentives</h3>
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <a href="{{ route('incentives.create') }}" class="btn btn-primary font-weight-bolder">
            <span class="svg-icon svg-icon-2x">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect x="0" y="0" width="24" height="24"/>
                        <g transform="translate(12.500000, 12.000000) rotate(-315.000000) translate(-12.500000, -12.000000) translate(6.000000, 1.000000)" fill="#000000" opacity="0.3">
                            <path d="M0.353553391,7.14644661 L3.35355339,7.14644661 C3.4100716,7.14644661 3.46549471,7.14175791 3.51945496,7.13274826 C3.92739876,8.3050906 5.04222146,9.14644661 6.35355339,9.14644661 C8.01040764,9.14644661 9.35355339,7.80330086 9.35355339,6.14644661 C9.35355339,4.48959236 8.01040764,3.14644661 6.35355339,3.14644661 C5.04222146,3.14644661 3.92739876,3.98780262 3.51945496,5.16014496 C3.46549471,5.15113531 3.4100716,5.14644661 3.35355339,5.14644661 L0.436511831,5.14644661 C0.912589923,2.30873327 3.3805571,0.146446609 6.35355339,0.146446609 C9.66726189,0.146446609 12.3535534,2.83273811 12.3535534,6.14644661 L12.3535534,19.1464466 C12.3535534,20.2510161 11.4581229,21.1464466 10.3535534,21.1464466 L2.35355339,21.1464466 C1.24898389,21.1464466 0.353553391,20.2510161 0.353553391,19.1464466 L0.353553391,7.14644661 Z" transform="translate(6.353553, 10.646447) rotate(-360.000000) translate(-6.353553, -10.646447) "/>
                            <rect x="2.35355339" y="13.1464466" width="8" height="2" rx="1"/>
                            <rect x="3.35355339" y="17.1464466" width="6" height="2" rx="1"/>
                        </g>
                    </g>
                </svg><!--end::Svg Icon-->
            </span>Create Incentive</a>
            <!--end::Button-->
        </div>
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>&nbsp;Image&nbsp;</th>
                    <th>Team Name</th>
                    <th># of Badges</th>
                    <th>Status</th>
                    <th>Action</th>                    
                </tr>
            </thead>
        </table>
        <!--end: Datatable-->
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Incentives</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection
@section('page_js')
    <script>
        var ajax_datatable_list = null;
        var tableName = $('#datatable');
        $(document).ready(function(){
            initializeDatatable(); 
            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 

            
        })
        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = tableName.DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('incentives.ajax.list')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.incentive_title!=null ?  full.incentive_title : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            //var img = full.secure_url!='' ?  full.secure_url : ((full.cloudinarySecureUrl!='') ? full.cloudinarySecureUrl: '');
                            var img =(full.cloudinarySecureUrl!='') ? full.cloudinarySecureUrl: '';
                            var isPdf = img.indexOf(".pdf");
                            //&& full.resource_type != 'pdf' && isPdf == -1
                            if(img != '' && isPdf == -1){
                                html += `
                                <div class="symbol symbol-100 symbol-lg flex-shrink-0 ">
                                    <img src="${img}">
                                </div>`;
                                return html;
                            }else{
                                return '';
                            }
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.team!=null ? full.team.team_name : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.incentive_badge!=null ? full.incentive_badge : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return (full.incentive_status == 1 ? '<span class="label label-lg label-success label-pill label-inline mr-2">Active</span>' : (full.incentive_status == 2 ? '<span class="label label-lg label-warning label-pill label-inline mr-2">Inactive</span>' : '<span class="label label-lg label-danger label-pill label-inline mr-2">Deleted</span>'));
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                             html += `
                            <a href="${getWebUrl('incentives/update/'+full.incentive_id)}" class="btn btn-sm btn-light-warning"><i class="flaticon-edit-1"></i> Edit </a>
                            `;
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }

    </script>
@endsection