@extends('layouts.main')
@section('page_css')
<style>
i.fa-circle {
    filter: drop-shadow(0px 0px 3px #aaa);
}
</style>
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-zig-zag-line-sign text-primary"></i>
            </span>
            <h3 class="card-label">Position</h3>
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <a href="javascript:;" onclick="openModalAndShow('{{ route('revshare.add.modal') }}')" class="btn btn-primary font-weight-bolder">
            <span class="svg-icon  svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo7\dist/../src/media/svg/icons\Code\Time-schedule.svg-->
                <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"></rect>
                        <path d="M5,19 L20,19 C20.5522847,19 21,19.4477153 21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 C4.55228475,3 5,3.44771525 5,4 L5,19 Z" fill="#000000" fill-rule="nonzero"></path>
                        <path d="M8.7295372,14.6839411 C8.35180695,15.0868534 7.71897114,15.1072675 7.31605887,14.7295372 C6.9131466,14.3518069 6.89273254,13.7189711 7.2704628,13.3160589 L11.0204628,9.31605887 C11.3857725,8.92639521 11.9928179,8.89260288 12.3991193,9.23931335 L15.358855,11.7649545 L19.2151172,6.88035571 C19.5573373,6.44687693 20.1861655,6.37289714 20.6196443,6.71511723 C21.0531231,7.05733733 21.1271029,7.68616551 20.7848828,8.11964429 L16.2848828,13.8196443 C15.9333973,14.2648593 15.2823707,14.3288915 14.8508807,13.9606866 L11.8268294,11.3801628 L8.7295372,14.6839411 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                    </g>
                </svg><!--end::Svg Icon-->
            </span>
            Create Position</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>Position Name</th>
                    <th>Revenue Share(%) </th>
                    <th>Actions</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">Position</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 
            $('body').on('click','.change-status', changeStatusHandler);  
            $('body').tooltip({selector: '[data-toggle="tooltip"]'});  
            $('body').on('focus','#start', function(){
                $(this).timepicker({
                    timeFormat: 'hh:mm p',
                    minuteStep: 1,
                    defaultTime: '',
                    showSeconds: false,
                    showMeridian: true,
                    snapToStep: true
                });
            });
        })
        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('revshare.ajax.list')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.name; 
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.revenue_share !=null ? full.revenue_share : '';
                        }
                    },                   
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            html += `
                            <button class="btn btn-md btn-light-warning btn-icon btn-circle"  onclick="openModalAndShow('${getWebUrl('revshare-edit-modal/'+full.id)}')" data-toggle="tooltip" title="Edit Position"><i class="flaticon-edit-1"></i></button>
                            `;

                            if(full.status == 1){
                               html += `
                                <a href="javascript:" class="btn btn-md btn-light-success btn-icon btn-circle change-status" data-toggle="tooltip" title="Disable Position" data-id="${full.id}" data-text="This Position will disable after your action!" data-btn="Yes, disable it!" data-toggle="tooltip"><i class="flaticon2-zig-zag-line-sign"></i></a>
                                `; 
                            }else{
                                html += `
                                <a href="javascript:" class="btn btn-md btn-light-danger btn-icon btn-circle change-status" data-toggle="tooltip" title="Enable Position" data-id="${full.id}" data-text="This Position will Enable after your action!" data-btn="Yes, Enable it!" data-toggle="tooltip"><i class="flaticon2-zig-zag-line-sign"></i></a>
                                `;
                            }
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }

        function changeStatusHandler() {
            var positionId = $(this).attr('data-id');
            var text = $(this).attr('data-text');
            var confirmButtonText = $(this).attr('data-btn');
            Swal.fire({
                title: "Are you sure?",
                text: text,
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                closeOnConfirm: false,
                showLoaderOnConfirm: true,
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: "{{route('revshare.ajax.status.change')}}",
                        type: 'get',
                        dataType: 'json',
                        data: {positionId:positionId},                    
                        success: function (response) {
                            if(response.status){
                                Swal.fire(
                                    response.title,
                                    response.message,
                                    "success"
                                )
                            }else{
                               toastr.error(response.message); 
                            }
                        },
                        error: function (response) {
                            toastr.error("An error occurred");                                
                        },
                        complete:function(){
                            initializeDatatable();
                        }
                    }); 
                }
            });
        }
    </script>
@endsection