@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);
    });
    

    @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.cost_sales_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: [[ 2, 'desc' ]],
        buttons: {
            buttons: [
             
            ],
        },
        columns: [
            {
            ...window.dataTablesHelper.selectCheckbox.columnData,
                render: function ( data, type, row, meta ) {
                    //  window.dataTablesHelper.selectCheckbox.html;
                    return  window.dataTablesHelper.selectCheckbox.html;
                },
            },      
            { data: 'total_sales', name: 'total_sales',},
            { data: 'total_cost', name: 'total_cost',},
            { data: 'net_sales', name: 'net_sales',},
            { data:'roas', name:'roas',},
           
        ],
        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 And Sales

    @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>
        </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">
                        <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>Total Sales</th>
                    <th>Total Marketing Cost</th>
                    <th>Net Sales</th>
                    <th>ROAS</th>
                   
                    </tr>
                </thead>
            </table>
        </div>
    </div>



    @endsection