@extends('backend.layouts.master')
@section('content')
    <style>
        input.select2-search__field {
            margin-top: 0 !important;
        }

        .modal-header.bg-main {
            height: 35px;
        }

        .modal-header.bg-main .modal-title {
            line-height: 10px;
            font-size: 18px;
        }

        #exampleModal .table-responsive{
            height: 70vh;
        }
        tr.bold td{
            font-weight: 700;
        }

    </style>
    <div class="content-body">
        <!-- card actions section start -->
        <section id="card-actions">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        {!! Form::open(array('url' => url()->current(), 'method' => 'get', 'id'=> 'gridForm','role'=>'form')) !!}
                        <div class="card-header fix-header bottom-card add-paginate">
                            <div class="row" style="align-items: baseline">
                                <h4 class="col-lg-3">2.1 Marketing Dashboard</h4>
                                @if(count($marketings))
                                    <div class="col-lg-2 col-md-6">
                                        <select name="marketing_id" id="" class="select2"
                                                data-placeholder="-- Marketing --">
                                            <option></option>
                                            @foreach($marketings as $item)
                                                <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif

                                <div class="col-lg-2">
                                    <input type="text" class="form-control square" placeholder="Tên nguồn" name="source_name">
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <input type="hidden" name="start_date" id="start_date">
                                    <input type="hidden" name="end_date" id="end_date">
                                    <input id="reportrange" type="text" class="form-control square">
                                </div>
                                <button class="btn btn-primary"><i class="fa fa-search"></i> Tìm kiếm</button>
                            </div>
                            <div class="row mt-1">
                                <div class="col-2">
                                    <select class="select2 square" name="is_contact"
                                            data-placeholder="--Tất cả--">
                                        <option></option>
                                        <option value="1">Có Contact về(Hoặc chốt đơn)</option>
                                        <option value="2">Không có contact về</option>
                                    </select>
                                </div>
                                <div class="col-2">
                                    <select class="select2 square" name="source_type"
                                            data-placeholder="--Nguồn dữ liệu--">
                                        <option></option>
                                        <option value="1">Nguồn Facebook</option>
                                        <option value="2">Nguồn Ladipage</option>
                                        <option value="3">Nguồn Website</option>
                                    </select>
                                </div>
                                <div class="col-2">
                                    <select class="form-control square" name="type_customer">
                                        <option value="">--Nguồn khách hàng--</option>
                                        <option value="1">Khách cũ</option>
                                        <option value="0">Khách mới</option>
                                    </select>
                                </div>
                                <div class="col-2">
                                    <select class="select2 square" name="chanel" id="kenh_qc"
                                            data-placeholder="--Kênh quảng cáo--">
                                        <option></option>
                                        <option value="1">Google ads</option>
                                        <option value="2">Facebook ads</option>
                                        <option value="3">Zalo ads</option>
                                    </select>
                                </div>
                                <div class="col-2">
                                    <select class="select2 square" name="product_id" id=""
                                            data-placeholder="--Tất cả sản phẩm--">
                                        <option></option>
                                        @if(count($products))
                                            @foreach($products as $item)
                                                <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                {{--<div class="col-2">--}}
                                    {{--<select name="" id="" class="select2 space" multiple>--}}
                                        {{--<option value="1">UTM Campaign</option>--}}
                                        {{--<option value="2">Ngân sách</option>--}}
                                        {{--<option value="3">Số click</option>--}}
                                        {{--<option value="4">Số contact</option>--}}
                                        {{--<option value="5">Tỷ lệ contact/click</option>--}}
                                        {{--<option value="6">Giá contact</option>--}}
                                        {{--<option value="7">Chốt đơn</option>--}}
                                        {{--<option value="8">Tỷ lệ chốt đơn</option>--}}
                                        {{--<option value="9">Số sản phẩm</option>--}}
                                        {{--<option value="10">Sản phẩm/đơn</option>--}}
                                        {{--<option value="11">Doanh số</option>--}}
                                        {{--<option value="12">Doanh thu sau ck</option>--}}
                                        {{--<option value="13">NS/Doanh số</option>--}}
                                        {{--<option value="14">NS/Doanh số trừ ck</option>--}}
                                    {{--</select>--}}
                                {{--</div>--}}
                            </div>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    {{--<li class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
                                        {{--<i style="font-size: 20px;cursor: pointer" class="fa fa-filter pointer"></i>--}}
                                        {{--<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                                            {{--<a class="dropdown-item" href="#">Action</a>--}}
                                            {{--<a class="dropdown-item" href="#">Another action</a>--}}
                                            {{--<a class="dropdown-item" href="#">Something else here</a>--}}
                                        {{--</div>--}}
                                    {{--</li>--}}
                                    <li class="dropdown dropdown-custom nav-item">
                                        <i style="font-size: 20px;cursor: pointer"  class="dropdown-toggle nav-link fa fa-filter pointer" aria-expanded="true"></i>
                                        <div class="dropdown-menu-custom dropdown-menu dropdown-menu-right show">
                                            <div class="row">
                                                <div class="col item"><label><input {{in_array(1,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="1">&nbsp; UTM Campain</label></div>
                                                <div class="col item"><label><input {{in_array(2,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="2">&nbsp; Ngân sách</label></div>
                                                <div class="col item"><label><input {{in_array(3,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="3">&nbsp; Số click</label></div>
                                                <div class="col item"><label><input {{in_array(4,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="4">&nbsp; Số contact</label></div>
                                            </div>
                                            <div class="row">
                                                <div class="col item"><label><input {{in_array(5,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="5">&nbsp; Tỷ lệ contact/click</label></div>
                                                <div class="col item"><label><input {{in_array(6,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="6">&nbsp; Giá contact</label></div>
                                                <div class="col item"><label><input {{in_array(7,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="7">&nbsp; Chốt đơn</label></div>
                                                <div class="col item"><label><input {{in_array(8,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="8">&nbsp; Tỷ lệ chốt đơn</label></div>
                                            </div>
                                            <div class="row">
                                                <div class="col item"><label><input {{in_array(9,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="9">&nbsp; Số sản phẩm</label></div>
                                                <div class="col item"><label><input {{in_array(10,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="10">&nbsp; Sản phẩm/đơn</label></div>
                                                <div class="col item"><label><input {{in_array(11,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="11">&nbsp; Doanh số</label></div>
                                                <div class="col item"><label><input {{in_array(12,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="12">&nbsp; Doanh số sau ck</label></div>
                                            </div>
                                            <div class="row">
                                                <div class="col item"><label><input {{in_array(13,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="13">&nbsp; NS/Doanh số</label></div>
                                                <div class="col item"><label><input {{in_array(14,$user_filter_grid) ? 'checked':''}} getDataItem type="checkbox" value="14">&nbsp; NS/Doanh số trừ ck</label></div>
                                                <div class="col item"><label><input type="checkbox" id="checkAll">&nbsp; Tất cả</label></div>
                                                <div class="col item"><label><input type="button" class="btn btn-primary saveFilter" value="Lưu lại"></label></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        {!! Form::close() !!}
                        <div class="card-header fix-header"></div>

                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        {{--<div class="">--}}
                                        {{--<div class="pu-caption">Danh sách tác nghiệp sau bao lâu</div>--}}
                                        {{--</div>--}}
                                        @include('backend.marketing.dashboard.ajax')
                                        <div class="mt-2">
                                            {{--{{$posts->links()}}--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Modal -->
    @include('backend.marketing.dashboard.modal')

@endsection
@section('script')
    @include('backend.layouts.script')

    <script type="text/javascript" src="{{asset('js/moment.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/daterangepicker.min.js')}}"></script>
    <link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}"/>
    <script type="text/javascript" src="{{asset('js/dateranger-config.js')}}"></script>
    <script>
        // show modal
        var source_item = null;
        var name_product = '';
        $(document).on('click', '.btnThemLandingData', function () {
            $('.list-data').html('');
            source_item = $(this).data('item');
            name_product = $(this).data('name_product');
            $('#exampleModal').modal('show');
        })

        // search date addlanding
        $(document).on('click', '.searchAddLanding', function (e) {
            e.preventDefault();
            let source = source_item;
            console.log(9999,source);
            let html = '';
            $.ajax({
                type: "post",
                data: {
                    start_date: $('.start_date').val(),
                    end_date: $('.end_date').val(),
                    source_id : source.id
                },
                url: '/ajax/marketing/addLanding',
                success: function (data) {
                    console.log(123, data)
                    if (data.length > 0) {
                        data.forEach((el, i) => {
                            let chanel = source.chanel == 1 ? 'GOOGLE ADS' : source.chanel == 2 ? 'FACEBOOK ADS' : 'ZALO ADS'
                            html += `
                                <tr>
                                    <input type="hidden" name="id[]" value="` + el.id + `">
                                    <input type="hidden" name="source_id" value="` + source.id + `">
                                    <input type="hidden" name="date[]" value="` + el.date + `">
                                    <td>` + i + `</td>
                                    <td>` + el.productName + `</td>
                                    <td>` + source.name + `</td>
                                    <td>` + chanel + `</td>
                                    <td><input type="text" class="txt-dotted budget number" name="budget[]" value="` + formatNumber(el.budget) + `"></td>
                                    <td><input type="text" class="txt-dotted" name="number_click[]" value="` + el.number_click + `"></td>
                                    <td>` + el.date + `</td>
                                    <td>` + el.username + `</td>
                                    <td class="text-center">
                                        <a href="javascript:void(0)" class="delete-item" data-id="` + el.id + `"><i class="fa fa-trash fa-2x"></i></a>
                                    </td>
                                </tr>
                            `
                            $('.list-data').html(html);
                        });
                    } else {
                        $('.list-data').html('');
                    }
                }
            })
        })


        let form = $('#validateForm');
        form.submit(function (e, page) {
            showLoading();
            $.post($(this).attr('action'), $(this).serialize(), function (data) {
                if (data) {
                    alertify.success('Cập nhật thành công !');
                }
            });
            hideLoading();
            return false;
        });

        //thêm mới line
        $(document).on('click', '#add_new_price_marketing', function () {

            let source = source_item;
            let name = name_product;
            let chanel = source.chanel == 1 ? 'GOOGLE ADS' : source.chanel == 2 ? 'FACEBOOK ADS' : 'ZALO ADS';
            console.log(1111,source);
            $.ajax({
                type: "post",
                data: {
                    source_id: source_item.id
                },
                url: '/ajax/marketing/add-line-price-marketing',
                success: function (data) {
                    $('.list-data').append(
                    `
                            <tr>
                                <input type="hidden" name="source_id" value="` + source.id + `">
                                <input type="hidden" name="id[]" value="` + data.id + `">
                                <td>` + data.id + `</td>
                                <td>` + name + `</td>
                                <td>` + source.name + `</td>
                                <td>` + chanel + `</td>
                                <td>
                                    <input type="text" class="txt-dotted budget" name="budget[]">
                                </td>
                                <td><input type="text" class="txt-dotted" name="number_click[]"></td>
                                <td><input type='text' name="date[]" class="form-control datetimepicker4"/></td>
                                <td></td>
                                <td class="text-center">
                                    <a href="javascript:void(0)" class="delete-item" data-id="` + data.id + `"><i class="fa fa-trash fa-2x"></i></a>
                                </td>
                            </tr>
                        `
                    )
                    $('.datetimepicker4').datetimepicker({
                        format: 'DD/MM/YYYY'
                    });

                }
            })
        })

        // lưu thay đổi
        $(document).on('click', '.savePriceMarketing', function () {
            $("#validateForm").submit();
        })

        $(document).on('change', '.budget', function () {
            $(this).val(formatNumber($(this).val()))
        })

        $(document).on('click', '.delete-item', function () {
            var elt = $(this).parents('tr');
            var data_id = $(this).data('id');
            swal({
                title: 'Bạn có chắc chắn xóa mục này?',
                type: 'error',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                showCloseButton: true,
            }).then(function () {
                $.ajax({
                    url: "/ajax/marketing/delete-price-marketing/" + data_id,
                    method: 'delete',
                    success: function (data) {
                        if (data && data.success === false) {
                            swal({
                                title: data.message ? data.message : '',
                                type: 'warning'
                            })
                        } else {
                            swal({
                                title: 'Đã xóa thành công!',
                                type: 'success'
                            })
                            elt.remove();
                        }
                    }
                });
            }, function (dismiss) {
            });
        })
    </script>
    <script>
        $(document).on('click','.dropdown-custom',function () {
            console.log(1222222222);
            $(this).toggleClass('show');
        })
        $(document).on('click.bs.dropdown.data-api', 'label', function (e) {
            e.stopPropagation();
        });

        $("#checkAll").click(function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });

        $(document).on('click', '.saveFilter', function () {
            let favorite = [];
            $.each($("input[getDataItem]:checked"), function () {
                favorite.push($(this).val());
            });

            $.ajax({
                url:'/ajax/user-filter-grid',
                method: 'POST',
                data: {
                    url: location.pathname,
                    fields: JSON.stringify(favorite)
                },
                success:function (data) {
                    if(data && data == 1){
                        alertify.success('Cập nhật thành công !')
                    }
                }
            })
            console.log(1111,favorite);
        })
    </script>
@endsection