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

@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 i = 0;
    let totalFiles = 0 ;
    let totalDevp = 0;
    let totalMarketing = 0;



    // $('input[name="dates"]').datepicker({
    //     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);
    // });

    $(".complete-update").on('click',function(){

        if(datas.length ==0){
            alert('Please add the file data first');
            return false;
        }


            $.ajax({
            type: "POST",
            url: '/cms/create_file',
            data: {"_token": "{{ csrf_token() }}","data":datas},
            success: function(){
                console.log("success");
            },
            dataType: 'json'
            })
            .done(function() {
                alert( "upload success." );
                location.reload();
            })
            .fail(function() {
                alert( "error" );
            })

        // const http = new XMLHttpRequest();
        // const params = 'data='+JSON.stringify(datas);
        // http.open('POST', '/cms/create_file', true);

        // //Send the proper header information along with the request
        // http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        // http.onreadystatechange = function() {//Call a function when the state changes.
        //     if(http.readyState == 4 && http.status == 200) {
        //         alert(http.responseText);
        //         alert('upload sucess');
        //     }else{

        //     }
        // }
        // http.send(params);
    })

    $('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);
    });

    $(".add-file-name").on('click',function(){
        
        $("#file-option").append($('<option>', {
            value: $("input[name='add_file_name']").val(),
            text: $("input[name='add_file_name']").val()
        }));

        $("input[name='add_file_name']").val('');
    });

    $(".delete-file").on('click',function(){
        console.log(datas);
        $('input[name="file_checkbox"]:checked').each(function() {
            const v = this.value;

            $(".total-file-updated > div > div > div > h2> span").text(parseInt($(".total-file-updated > div > div > div > h2> span").text())-1)
        $(".total-devp-updated > div > div > div > div> h2> span").text(parseInt($(".total-devp-updated  > div > div > div > div> h2> span").text())-parseInt(datas.filter(x=>x[0] == v)[0][4]))
        $(".total-marketing-costs-updated > div > div > div > div > h2 > span").text(parseInt($(".total-marketing-costs-updated > div > div > div > div > h2> span").text())-parseInt(datas.filter(x=>x[0] == v)[0][5]))


            datas = datas.filter(x=>x[0] !== v)

            $(this).parent().parent().remove();
            });
    });

    $(".add-file").on('click',function(){

        if($("input[name='dates']").val() ==''){
            alert('Please select the date');
            return false;
        }

        if($("#file-option").val() =='0'){
            alert('Please select the file name');
            return false;
        }

        if($("#status-option").val() =='0'){
            alert('Please select the vat status');
            return false;
        }

        if($("#devp_value").val() ==''){
            alert('Please input the devp value');
            return false;
        }

        if(!parseInt($("#devp_value").val())){
            alert('Please input the number');
            return false;
        }
        const day = $("input[name='dates']").val();
        const file_name = $("#file-option").val();
        const status = $("#status-option").val();
        const devp = $("#devp_value").val();
        const marketing = parseInt(devp) *10000;
        $('#dataTable > tbody:last-child')
        .append('<tr><td class="text-center checkbox selectable-cell"><input type="checkbox" name="file_checkbox" class="file-checkbox" value="A'+i+'"></td><td>'+day+'</td>'+'<td>'+moment().format('YYYY-MM-DD')+'</td><td>'+file_name+'</td><td>'+devp+'</td><td>'+marketing+'</td><td>'+status+'</td></tr>');
      
        $(".total-file-updated > div > div > div > h2> span").text(parseInt($(".total-file-updated > div > div > div > h2> span").text())+1)
        $(".total-devp-updated > div > div > div > div> h2> span").text(parseInt($(".total-devp-updated  > div > div > div > div> h2> span").text())+parseInt(devp))
        $(".total-marketing-costs-updated > div > div > div > div > h2 > span").text(parseInt($(".total-marketing-costs-updated > div > div > div > div > h2> span").text())+parseInt(marketing))

        datas.push(['A'+i,day,file_name,status,devp,marketing]);
        i++;
    });
    
});
</script>

@endpush

@section("title")

    Marketing Costs - Custom Update Files

    @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 total-file-updated"
                        title="Total Files Updated"
                        value="0"
                    >
                    </x-card.stat>
                </div>
                <div class="col-auto total-devp-updated">
                    <x-card.stat
                        title="Total DEVP Updated"
                        value="0"
                    />
                </div>

                <div class="col col-sm-auto total-marketing-costs-updated">
                    <x-card.stat
                        title="Total Marketing Costs updated"
                        value="0"
                    />
                </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-info btn-icon complete-update">
                    <i class="las la-upload mr-2"></i>
                    Complete Update
                </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  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="date" name="dates" class="form-control pull-right form-control-sm" style="min-width:150px;">
                        </div>
                    </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('vat_status_option', [
                                '0' => 'Selected VAT status',
                                '10%VAT' => '10% VAT',
                                'WHT' => 'WHT',
                                'NO VAT' => '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">
                            <input type="text" id="devp_value" name="enter_devp" placeholder="Enter the DEVP here" class="form-control pull-right form-control-sm" style="min-width:150px;">
                        </div>
                    </div>
                    
                    <div class="col-sm-auto">
                  <div class="input-group">
                            
                            <input type="text" placeholder="Enter the File Name here" name="add_file_name" class="form-control pull-right form-control-sm" style="min-width:150px;">
                        </div>
                
                  </div>

                  <div class="col-sm-auto">
                       <button class="btn btn-primary btn-sm add-file-name">Add File Name</button>
                    </div>

                    <div class="col-sm-auto">
                    <button class="btn btn-danger btn-sm delete-file">Delete File</button>
                    </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> -->
                        <button class="btn btn-primary btn-sm add-file">Add File</button>
                    </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>File Date</th>
                    <th>Upload Date</th>
                    <th>File Name</th>
                    <th>DEVP</th>
                    <th>Marketing Costs</th>
                    <th>{{ __('cms.status')}}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>

            </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