@extends("cms.layouts.app", ['page_id' => 'marketing'])

@push("css")
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@push("js")
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript">
$(function () {

    let datas = [];
  let count = 0;
  let shipping_bundle_no = [];
  let order_count =0;
  let selectedRow = [];

    $('input[name="dates"]').daterangepicker({
        startDate: new Date(),
        endDate: new Date(),
        locale: { cancelLabel: 'Clear', format: 'YYYY-MM-DD'}
    }, function(chosen_date) { });
    $('input[name="dates"]').on('cancel.daterangepicker', function(ev, picker) {
        // $('input[name="dates"]').val('');
        localStorage.clear();
        $('#dataTable').DataTable().ajax.reload();
    });

    // $('input[name="dates').val('');
    $('input[name="dates"],#date-option').on('change', function () {
        setTimeout(function(){
            $('#dataTable').DataTable().ajax.reload();
        }, 100);
    });



    $('select[name="vat_status_option"]').on('change', function () {
        setTimeout(function(){
            $('#dataTable').DataTable().ajax.reload();
        }, 100);
    });

    $('select[name="file_option"]').on('change', function () {
        setTimeout(function(){
            $('#dataTable').DataTable().ajax.reload();
        }, 100);
    });

    $(".custom-update").on('click',function(){
        location.href = '/cms/custom';
    })
    

    @php
        $no_data_message = "- No More Date - ";
    @endphp
    const table = window.dataTablesHelper.init({
        language: {
          emptyTable: "{{ $no_data_message }}"
        },
        serverSide: true,
        pageLength: 200,
        lengthMenu: [100, 200, 300, 400, 500, 600, 700, 800 ,900 ,1000,99999],
        stateSave: true,
        ajax: {
            url: "{!! route('cms.analysts.marketing_datatable') !!}",
            data: function (d) {

                d.file_name = $('[name=file_option] option:selected').val();
                d.vat_status = $('[name=vat_status_option] option:selected').val();
                if ($('input[name="dates"]').val()) {
                    var startDate = $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    var endDate = $('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    d.date_option = $('[name=date_option] option:selected').val(); // shipping_date
                    d.start_date = startDate;
                    d.end_date = endDate;
                }
            },
            dataSrc:function(data){

                datas = data.data;
                order_count = data.data.length;
               
                return data.data;
                // console.log(datas);
            },
        },
        order: [[ 3, 'desc' ]],
        buttons: {
            buttons: [
                {
                    extend: 'excel',
                    text: "Download Excel File",
                    className: 'btn-download-excel',
                    //key: 'p',
                    title:"Marketing Costs",
                    customize: function (xlsx) {
                            let r = "";
                          let sheet = xlsx.xl.worksheets['sheet1.xml'];
                          let numrows = 10;
                          let clR = $('row', sheet);
                          let rows = [];
                          

                        //   selectedRow.forEach(function(d){
                        //     rows.push(d);
                        //   })
                          //update Row
                          clR.each(function () {
                              let attr = $(this).attr('r');
                              let ind = parseInt(attr);
                              ind = ind + numrows;
                              $(this).attr("r", ind);
                          });

                          // Create row before data
                          $('row c ', sheet).each(function () {
                              let attr = $(this).attr('r');
                              let pre = attr.substring(0, 1);
                              let ind = parseInt(attr.substring(1, attr.length));
                              ind = ind + numrows;
                              $(this).attr("r", pre + ind);
                          });

                          function Addrow(index, data) {
                              var msg = '<row r="' + index + '">'
                              for (var i = 0; i < data.length; i++) {
                             
                                  var key = data[i].key;
                                  var value = data[i].value;
                                  msg += '<c t="inlineStr" r="' + key  + '">';
                                  msg += '<is>';
                                  msg += '<t>' + value + '</t>';
                                  msg += '</is>';
                                  msg += '</c>';
                              }
                              msg += '</row>';
                              r = r +msg;
                              return msg;
                          }

                          let status = 'All Status'

                          switch($('select[name="vat_status_option"]').val()){
                            case '1':
                                status = '10% VAT  WHT';
                                break;
                            case '2':
                                status = '10% VAT ';
                                break;
                            case '3':
                                status = 'WHT';
                                break;
                            case '4':
                                status = 'NO VAT';
                                break;
                          }

                          const initialValue = 0;
                          const totalDevp = selectedRow.reduce((accumulator, currentValue) => accumulator + currentValue.devp, initialValue);
                          const totalCosts = selectedRow.reduce((accumulator, currentValue) => accumulator + currentValue.marketing_cost, initialValue);
                          // var title = Addrow(1,[{key:'A1',value: $(t.selector).data('title')}]);
                          var k1 = Addrow(2, [{ key: 'A2', value: "Date range selected"},{key: 'B2', value:  $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')+"-"+$('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')}]);
                          var k2 = Addrow(3, [{ key: 'A3', value: "Total Number of Files"},{ key: 'B3', value: selectedRow.length}]);
                          var k3 = Addrow(4, [{ key: 'A4', value: "Total DEVP"},{key: 'B4', value: totalDevp.toLocaleString("en-US",{ minimumFractionDigits: 4 })}]);
                          var k4 = Addrow(5, [{ key: 'A5', value: "Total Marketing Costs"},{key: 'B5', value: "KRW "+totalCosts.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}]);
                          var k5 = Addrow(6, [{ key: 'A6', value: "Status selected"},{key: 'B6', value: status}]);
                       
                          var k9 = Addrow(8, [
                            {key: 'A8', value: "Date"},
                            {key: 'B8', value: "File Name" },
                            {key: 'C8', value: "DEVP" },
                            {key: 'D8', value: "Marketing Costs" },
                            {key: 'E8', value: "VAT status" },
                            {key: 'F8', value: "VAT value" },
                            ]);
                         
                             let count = 9;


                            if($('[id=excel-option] option:selected').val() == "1"){
                                let va = 0
                                if(selectedRow[0].vat_status =='10% VAT'){
                                    va = 0.1;
                                }

                    //             var startDate = $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    // var endDate = $('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD');
                                Addrow(count, [
                                {key: 'A'+count, value: $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD') +" - " + $('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')},
                                {key: 'B'+count, value: selectedRow[0].file_name },
                                {key: 'C'+count, value: selectedRow.reduce((accumulator, currentValue) => accumulator + currentValue.devp, 0).toFixed(4) },
                                {key: 'D'+count, value: selectedRow.reduce((accumulator, currentValue) => accumulator + currentValue.marketing_cost, 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") },
                                {key: 'E'+count, value: selectedRow[0].vat_status},
                                {key: 'F'+count, value: Math.ceil((selectedRow.reduce((accumulator, currentValue) => accumulator + currentValue.marketing_cost, 0) / 1.1)* va) },
                                ]);
                            }else{

                                // get unique file name
                            let file_name_array =  Array.from(
                                    new Set(
                                        selectedRow.reduce(
                                            (carry, current) => [...carry, current.file_name],
                                            []
                                        )
                                    )
                                )
                                file_name_array.forEach(function(d){
                              
                                    let va = 0
                                    if(selectedRow.filter(x=> x.file_name ==d)[0].vat_status =='10% VAT'){
                                        va = 0.1;
                                    }
                                    Addrow(count, [
                                        {key: 'A'+count, value: $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD') +" - " + $('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')},
                                        {key: 'B'+count, value: d },
                                        {key: 'C'+count, value: selectedRow.filter(x=> x.file_name ==d).reduce((accumulator, currentValue) => accumulator + currentValue.devp, 0).toFixed(4) },
                                        {key: 'D'+count, value: selectedRow.filter(x=> x.file_name ==d).reduce((accumulator, currentValue) => accumulator + currentValue.marketing_cost, 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") },
                                        {key: 'E'+count, value: selectedRow.filter(x=> x.file_name ==d)[0].vat_status},
                                        {key: 'F'+count, value: Math.ceil((selectedRow.filter(x=> x.file_name ==d).reduce((accumulator, currentValue) => accumulator + currentValue.marketing_cost, 0) / 1.1)* va) },
                                    ]);
                                    count++;
                                })
                            }
                             
                          
                          sheet.childNodes[0].childNodes[1].innerHTML = r ;

                        }
                },
               
                {
                    extend: 'selected',
                    text: "Download PDF",
                    className: 'btn-print-pdf',
                    //key: 'p',
                    action: function ( e, dt, node, config ) {
                        let url = "";
                        const rows = dt.rows( { selected: true } );
                        const ids = rows.data().toArray().map(item => item.id);

                        
                        const type = $("#excel-option").val();

                        const file_name = $("#file-option").val();
                        
                        const date = $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')+' - '+$('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD');
                        
                        if(ids.length>500){
                            url = "{{ route('cms.analysts.marketing_pdf')}}"+"?ids=all"+"&date="+date+"&status="+ $('[name=vat_status_option] option:selected').val()+"&type="+type+"&file_name="+file_name;
                        }else{
                            url = "{{ route('cms.analysts.marketing_pdf')}}"+"?ids="+ids.join(',')+"&date="+date+"&status="+ $('[name=vat_status_option] option:selected').val()+"&type="+type;
                        
                        }
                         
                        
                        window.open(url);
                    }
                },
            ],
        },
        columns: [
            {
            ...window.dataTablesHelper.selectCheckbox.columnData,
                render: function ( data, type, row, meta ) {
                    //  window.dataTablesHelper.selectCheckbox.html;
                    return  window.dataTablesHelper.selectCheckbox.html;
                },
            },      
            { data: 'file_date', name: 'file_date',},
            { data: 'created_at', name: 'created_at', render: function(data,type,row,meta){
                return moment(data).format('YYYY-MM-DD')
            }},
            { data: 'file_name', name: 'file_name',},
            { data: 'devp', name: 'devp', render: function(data,type,row,meta){
                return data == null ?'0.0000':data.toFixed(4)
            }},
            { data: 'marketing_cost', name: 'marketing_cost', render:function(data,type,row,meta){
                return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }},
            { data: 'vat_status', name: 'vat_status',},
        ],
        enableSelect: true,
        isSelectableRow: function(row, data, dataIndex) {
            return true;
        },
        onSelectRow: function (count) {
            selectedRow = table.rows({ selected: true }).data().toArray()
            $('.btn-download-excel span').html(`Download Excel File ${count > 0? ` (${count})` : ''}`)
            $('.btn-print-pdf span').html(`Download PDF ${count > 0? ` (${count})` : ''}`)
        },
        onClickRow: function(id) {
            if (!id) { return; }

            var url = '{{ route('cms.orders.show', '__id__') }}'.replace('__id__', id);
            window.location.href = url;
        },
        stateSaveCallback: function(settings,data) {
             // alert("save callback");
               localStorage.setItem( 'clist_DataTables_' + settings.sInstance, JSON.stringify(data) )
           },
        stateLoadCallback: function(settings) {
             // alert("load callback");
             if(performance.navigation.type == 2){
                 return JSON.parse( localStorage.getItem( 'clist_DataTables_' + settings.sInstance ) )
             }else{
               return true;
             }
        },
        dom: "<'row mb-2 dataTables-header-dom'<'col-sm-12 col-lg px-0 px-lg-2 mb-2 mb-lg-0 dataTables-buttons-dom'B><'col col-lg-auto px-0 px-lg-2 d-flex align-items-center mb-2 mb-sm-0 dataTable-custom-toolbar-dom'><'col col-sm-auto d-flex align-items-center px-0 px-md-2 dataTables-search-dom'f>>" +
        "<'row'<'col-sm-12'r>>" +
        "<'row dataTables-table-dom'<'col-sm-12'tr>>" +
        "<'row dataTables-footer-dom'<'col-sm-6 col-md-auto px-0 px-md-2 my-2 my-md-0 dataTables-length-dom'l><'col-sm-12 col-md px-0 px-md-2 dataTables-pagination-dom'p>>",
    })
});
</script>

@endpush

@section("title")

    Marketing Costs

    @endsection

    @section("content")
    <div class="alert alert-success sync-loading" role="alert" style="display:none">
      Processing...
    </div>
    <div class="row mb-5">
        <div class="col-md-auto mb-2 mb-md-0">
            <div class="row">
                <div class="col-auto">
                    <x-card.stat
                    class="testing-card"
                        title="Total Files Today"
                        value="{{$today_files}}"
                    >
                    </x-card.stat>
                </div>
                <div class="col-auto">
                    <x-card.stat
                        title="Total DEVP Today"
                        value="{{$today_devp}}"
                    />
                </div>

                <div class="col col-sm-auto">
                    <x-card.stat
                        title="Total Marketing Costs Today"
                        value="{{$today_cost}}"
                    />
                </div>

            </div>
        </div>
        <div class="col-md d-flex justify-content-md-end align-items-end col-lg-12 col-md-12">
        <div class="row">
            <div class="col-auto">
                <button type="button" class="btn btn-primary btn-icon " data-toggle="modal" data-target="#marketing_import">
                    <i class="las la-upload mr-2"></i>
                    Upload Excel File
                </button>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary btn-icon custom-update" >
                    <i class="las la-upload mr-2"></i>
                    Custom Update Files
                    
                </button>
            </div>
               
                
            </div>
        </div>
    </div>


    <div class="card">
        <div class="card-body table-dataTable table-responsive">
            <div class="dataTable-custom-toolbar--source">
                <div class="row justify-content-end align-items-center">


                <div class="col-sm-auto">
                {{
                            Form::select('excel_option', [
                                '1' => 'Excel File 1',
                                '2' => 'Excel File 2',
                            ], null, ['id' => 'excel-option', 'class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 100px;'])
                        }}
                </div>
                  <div class="col-sm-auto">
                  @php
                    $file_names = \App\MarketingCost::select('file_name')->groupBy('file_name')->pluck('file_name', 'file_name')->toArray();

                @endphp
                {{
                    Form::select('file_option',  array_merge(['0' =>'Select File Name'], $file_names), null, ['id' => 'file-option', 'class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 100px;'])
                }}

                
                  </div>
                    <div class="col-sm-auto">
                        {{
                            Form::select('date_option', [
                                '1' => 'Date',
                                '2' => 'Upload Date',
                            ], null, ['id' => 'date-option', 'class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 100px;'])
                        }}
                    </div>

                    <div class="col-sm-auto">
                        {{
                            Form::select('vat_status_option', [
                                '0' => 'All Status',
                                '1' => '10% VAT & WHT',
                                '2' => '10% VAT',
                                '3' => 'WHT',
                                '4' => 'NO VAT'
                            ], null, ['id' => 'status-option', 'class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 100px;'])
                        }}
                    </div>
                    <div class="col-sm-auto">
                        <div class="input-group">
                            <div class="input-group-prepend"> <span class="input-group-text"><i class="far fa-calendar"></i></span> </div>
                            <input type="text" name="dates" class="form-control pull-right form-control-sm" style="min-width:150px;">
                        </div>
                    </div>
               
                   
                </div>
            </div>
            <table id="dataTable" class="table table-hover w-100">
                <thead>
                    <tr>
                    <th class="align-middle"><span class="select-checkbox"></span></th>
                    <th>Date</th>
                    <th>Upload Date</th>
                    <th>File Name</th>
                    <th>DEVP</th>
                    <th>Marketing Costs</th>
                    <th>{{ __('cms.status')}}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>



    <x-modal.master id="marketing_import" class="modal-import" title="{{ __('cms.import') }}" size="lg">
        {{ Form::open(['route' => 'cms.analysts.marketing_import', 'method' => 'POST', 'id' => 'form_upload_excel', 'files' => true]) }}
            <x-form.form-group.master
                name="upload_marketing_file"
                label="{{ __('cms.order.raw_files_excel') }}"
                type="file"
            >
                {{ Form::fileUpload('upload_marketing_file', null, [
                    'multiple' => true,
                    'type' => 'document',
                    'accept' => '.xlsx, .xls, .csv',
                ]) }}
            </x-form.form-group.master>

            <div class="row my-6">
                <div class="col"></div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary btn-lg">
                        {{ __('cms.import') }}
                    </button>
                </div>
            </div>

        {{ Form::close() }}
    </x-modal.master>


    @endsection