@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title') Credit History @endsection

<script>
    $(document).ready(function() {
        $('#credithistorydashboard').DataTable({"bLengthChange": false,  "scrollX": true, "order": [[ 3, "desc" ]],},{ orderable: false, targets: '_all' });
        $('#start_date,#end_date').datepicker('setDate','today');
        $("#download-report").click(function(){
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var parent_id = $('#acc_id').val();
            var platform = $('#plat_form').val();
            var credit_status_hidden = $('#credit_status').val();
            var brandname = $('#brandname').val();
            var creditedby_hidden = $('#creditedby').val();

            $('#from_date_hidden').val(start_date);
            $('#to_date_hidden').val(end_date);
            $('#parent_id_hidden').val(parent_id);
            $('#platform_hidden').val(platform)
            $('#credit_status_hidden').val(credit_status_hidden);
            $('#brandname_hidden').val(brandname);
            $('#creditedby_hidden').val(creditedby_hidden);
            $(this).submit();
        });
        clientselection();
    });
</script>

<div class="alert" style='display:none;text-align: center;'>
   <button type="button" class="close" aria-hidden="true">&times;</button>
   <strong class='alert_sub'></strong>
</div>

<div class="container-fluid">
   
    <div class="card">
   
        <div class="card-header">
   
            <h3>Credit History
                @can('hasExcelPermission')
                    <form class="pull-right" method="post" action="{{ url('exportcredithistory') }}">
                        @csrf
                        <button type="submit" class="btn btn-success dashboard-excel-report excel-btn border-radius-0" id="download-report" ><i class="fa fa-download"></i> Export</button>
                        <input type="hidden" name="fromdate" id="from_date_hidden" />
                        <input type="hidden" name="todate" id="to_date_hidden"/>
                        <input type="hidden" name="parentid" id="parent_id_hidden"/>
                        <input type="hidden" name="platfrom" id="platform_hidden"/>
                        <input type="hidden" name="credit_status_hidden" id="credit_status_hidden"/>
                        <input type="hidden" name="brandname" id="brandname_hidden"/>
                        <input type="hidden" name="creditedby_hidden" id="creditedby_hidden"/>
                    </form>
                @endcan
            </h3>
       
        </div>

        <div class="card-body">
            <form>
                <div class="form-row">
                    <div class="form-group col-md-3">
                        <label for="acc_id">Choose Accounts</label>
                        <select class="form-control" name="acc_id[]" multiple id="acc_id">
                            <optgroup label="ACTIVE">
                                @foreach ($accname as $value)
                                @if($value->status > 0)
                                    <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                                @endif
                                @endforeach
                            </optgroup>
                            <optgroup label="INACTIVE">
                                @foreach ($accname as $value)
                                @if($value->status == 0)
                                    <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                                @endif
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="form-group col-md-2 pl-2 mr-2">
                        <label for="plat_form">Platform Type</label>
                        <select multiple id="plat_form" class="form-control">
                            <option value='1'>Promotional</option>
                            <option value='2'>Transactional</option>
                            <option value='3'>WA Transactional</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2 pl-2 mr-2">
                        <label for="credit_status">Credits Type</label>
                        <select class="form-control" name="credit_status" multiple id="credit_status">
                            <option value="1">PURCHASE</option>
                            <option value="2">ASSIGN</option>
                            <option value="3">DEDUCTED</option>
                            <option value="4">REVERTED</option>
                            <option value="5">ADMIN DEDUCTED</option>
                            <option value="6">POSTPAID</option>
                            <option value="7">RE-ASSIGN</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2 pl-2 mr-2"> 
                        <label for="brand_name">Campaign Name</label><br>
                        <select class="form-control" name="brand_name[]" multiple id="brand_name">
                            @foreach ($getBrandName as $value)
                            <option value="{{$value->campaign_name}}">
                                {{ $value->campaign_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-2 pl-2 mr-2">
                        <label>Credited By</label>
                        <select class="form-control" name="creditedby[]" multiple id="creditedby">
                        @foreach($creditingUsers as $user)
                            <option value="{{$user->credited_to}}">{{$user->credited_to}}</option>
                        @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3 pl-3 mr-3">
                        <label for="monthsel">Choose Time Period</label>
                        <select id="monthsel" class="form-control">
                            <option value=''>Select</option>
                            <option value="1" selected>Today</option>
                            <option value="2">Yesterday</option>
                            <option value="3">This Month</option>

                            <option value="4">Last Month</option>
                            <option value="5">Last 6 Months</option>
                            <option value="6">This Year</option>
                            <option value="7">Last Year</option>
                        </select>
                    </div>

                    <div class="form-group col-md-2 pl-2 mr-2">
                        <label for="inputPassword4">From Date</label>
                        <input type="text" id="start_date" class="dates-comb form-control" name="start_date" placeholder="Start Date">
                    </div>

                    <div class="form-group col-md-2 pl-2 mr-2">
                        <label for="inputPassword4">To Date</label>
                        <input type="text" id="end_date" class="dates-comb form-control" name="end_date" placeholder="End Date">
                    </div>
                </div>
                <hr>
            </form>        
            <div class="table-responsive">
                <table class="table-bordered" id="credithistorydashboard">
                    <thead>
                        <tr>
			                <th>Account ID</th>
                            <th>Organisation Name</th>
                            <th>Email</th>
                            <th>Date Time</th>
                            <th>Platform Type </th>
                            <th>Campaign Name</th>
                            <th>Volume</th>
                            <!-- <th>Balance</th> -->
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Credited By</th>
                            <th>Credited To</th>
                            <th>Approved by</th>
                            <th>Description</th>
                            @can('hasUpdatePermission')
                            <th>Action</th>
                            @endcan
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>

        </div>
    
    </div>

</div>

<div class="modal fade" id="update_credit_description" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div style="display: none" id="error_alert_div">
            <button type="button" class="close" data-dismiss="alert">×</button>   
            <strong id="error_alert_message"></strong>
        </div>

        <div class="modal-body">
            <h6>Update Credit Description </h6>
            <input type="hidden" id="credited_id" name="credited_id" value="">
            <textarea class="form-control credits_description" id="credits_description"></textarea>
        </div>
        <div class="modal-footer">
            <a type="button" class="btn btn-default c-btn" id="modal-close" data-dismiss="modal">Cancel</a>
            <a type="button" id="update_credit" class="btn btn-default c-btn">Submit</a>
        </div>
      </div>
   </div>
</div>
<link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet">
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>

<script>

    $(document).on('click', '.update_credit_description', function(){
        var credited_id = $(this).data('credited_id');
        var description = $(this).data('description');
        $(".modal-body #credited_id").val(credited_id);
        $(".modal-body #credits_description").val(description);
    });

    $('#acc_id').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });

    var start_date = end_date = '';

    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function (selectedDate) {
            var startDate = $('#start_date').datepicker('getDate');
            $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', startDate);
            clientselection();
            $('#monthsel').val('');
        }
    });

    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: $("#start_date").datepicker("getDate"),
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function() {
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate');
            if (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate');
                $('#end_date').datepicker('setDate', minDate);
            }
            clientselection();
        },
        onSelect: function() {
            $('#monthsel').val('');
        }
    });
    
    $(document).ready(function() {

        // ======  update credit description starts ========

        $('#update_credit').unbind('click').click(function() {
            $(this).addClass('disabled');
            var credited_id = $('#credited_id').val();
            var credits_description = $('#credits_description').val();

            $.ajax({
                type: 'post',
                url: "{{ url('/credit_history_update') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "credited_id":credited_id,
                    "description":credits_description
                },
                success: function(response) {
                    if(response.status == "ERROR") {
                        $('#update_credit').removeClass('disabled');
                        $('#error_alert_div').show().addClass('alert alert-block alert-danger').css('display','block');
                        $("#error_alert_message").html(response.message);
                    }

                    if(response.status == "SUCCESS"){
                        $('#update_credit_description').modal('hide');
                        $('#update_credit').removeClass('disabled');
                        $('#error_alert_div').hide().removeClass('alert alert-block alert-danger').css('display','none');
                        $('.alert').addClass('alert-success').css('display','block');
                        $('.alert_sub').html(response.message);
                    }

                    clientselection();                

                    setTimeout(function() {
                        $('.alert').fadeOut('fast');
                    }, 5000);
                }
            });
        
        });
           
        // ======  update credit description ends ========

        $("body").on("change", "#monthsel", function(){
            var selectValue = $(this).val();

            //filter by today
            if(selectValue=='1'){
                var start_date = new Date().toJSON().slice(0,10);
                var end_date = new Date().toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                clientselection(start_date, end_date);
            }

             //filter by yesterday
             else if(selectValue=='2'){
                var start_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                var end_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                clientselection(start_date, end_date);
            }

            //filter by this month
            else if(selectValue=='3'){
                var start_date = new Date();
                var end_date = new Date().toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth()));
                start_date = new Date(start_date.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                clientselection(start_date, end_date);
            }

            // filter by last month
            if(selectValue=='4'){
                var start_date = new Date();
                var end_date = new Date();
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 1));
                start_date = start_date.toJSON().slice(0,10);
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }

            //filter by last 6 month
            else if(selectValue=='5')
            {
                var start_date = new Date();
                var end_date = new Date();
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 6));
                start_date = start_date.toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }

             //filter by this year
            else if(selectValue=='6')
            {
                var end_date = new Date().toJSON().slice(0,10);
                var makeDate = new Date(end_date);
                var start_date = new Date(makeDate.setMonth(0));
                start_date = new Date(makeDate.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }

            //filter by previous year
            else if(selectValue=='7'){
                var end_date = new Date();
                var start_date = new Date();
                end_date = new Date(end_date.setMonth(0));
                end_date = new Date(end_date.setDate(1)-864e5).toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
                start_date = new Date(start_date.setMonth(0));
                start_date = new Date(start_date.setDate(1)).toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }
        });

    });// end of document ready

    $('#acc_id,#plat_form,#credit_status,#brand_name,#creditedby,#credits_approving_user').change(function(){
        clientselection()
    });

    function clientselection(){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var parent_id = $('#acc_id').val();
        var platform = $('#plat_form').val();
        var credit_status = $('#credit_status').val();
        var brandname = $('#brand_name').val();
        var creditedby = $('#creditedby').val();
        $.ajax({
            type: "POST",
            url: 'credithistory',
            data: {
                "_token"     : "{{ csrf_token() }}",
                "start_date" : start_date,
                "end_date"   : end_date,
                "parent_id"  : parent_id,
                "platfrom"   : platform,
                "credit_status" : credit_status,
                "brandname"   : brandname,
                "creditedby" : creditedby
            },
            success: function(data) {
                var clientdata = data['data'];
                $("#credithistorydashboard").DataTable().clear().destroy();
                $('#credithistorydashboard').DataTable({data: clientdata,  "scrollX": true,"bLengthChange": false, "bLengthChange": true,
                "scrollY":  400, "pageLength": 20, "scrollCollapse": true, "order": [[ 3, "desc" ]], orderable: false, targets: '_all',
                aoColumns: [
                    { data: "user_id"},
                    { data: "account_name"},
                    { data: "emailid"},
                    { data: "datetime" },
                    { data: "platform_type"},
                    { data: "campaignname" },
                    { data: "volume" },
                    // { data: "balance" },
                    { data: "type" },
                    { data: "amount" },
                    { data: "creditedby",
                         render: function(data, type, row, meta){
                         return ((row.creditedby ==null)  ? "NA" : row.creditedby)
                        }
                    },
                    { data: "creditedto",
                         render: function(data, type, row, meta){
                         return ((row.creditedto ==null)  ? "NA" : row.creditedto)
                        }
                    },
                    { data: "approved_by_username" },
                    { data: "description" },

                    @can('hasUpdatePermission')
                    { data:"",
                        render: function(data, type, row, meta){
                           
                            data = '<a data-toggle="modal" class="fa fa-edit greenIcon creditbtn update_credit_description" href="#update_credit_description" data-credited_id="'+ row.id +'" data-description="'+ row.description+'"></a>'

                            return data;
                        }
                    }
                    @endcan
                ]
                });
            }
        });
    }

    $('#acc_id').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });
    $('#plat_form').multiselect({
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Platform selected',
        nonSelectedText: 'No  Platform selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
    });
    $('#credit_status').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });
    $('#brand_name').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });
    $('#creditedby').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });
</script>
@endsection