@extends('shared.admin')
@section('content')
    <style>
        .modal {
            display:    none;
            position:   fixed;
            z-index:    1000;
            top:        0;
            left:       0;
            height:     100%;
            width:      100%;
            background: rgba( 255, 255, 255, .8 )
            url('{{asset('images/loading_gif.gif')}}')
            50% 50%
            no-repeat;
        }

        /* When the body has the loading class, we turn
           the scrollbar off with overflow:hidden */
        body.loading {
            overflow: hidden;
        }

        /* Anytime the body has the loading class, our
           modal element will be visible */
        body.loading .modal {
            display: block;
        }
    </style>
    <div class="container-fluid">
        <h2 class="mt-30 page-title">Media Report</h2>
        <ol class="breadcrumb mb-30">
            <li class="breadcrumb-item"><a href="{{asset('/admin')}}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{asset('/admin/media')}}">Media Report</a></li>
            <li class="breadcrumb-item active">Add Media Report</li>
        </ol>
        <div class="row">
            <div class="col-lg-12 col-md-6">
                <div class="card card-static-2 mb-30">
                    <div class="card-title-2">
                        <h4>Add New Media Report</h4>
                    </div>
                    <form id="Location" action="{{ action('MediaController@store') }}" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                        <div class="card-body-table">
                            @if (\Session::has('msg'))
                                <div class="alert alert-danger">
                                    <ul>
                                        <li>{!! \Session::get('msg') !!}</li>
                                    </ul>
                                </div>
                            @endif
                            <div class="news-content-right pd-20">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-label">Ngày *</label>
                                            <input type="text" name="date" id="date" class="form-control datepicker" value="">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Tổng số đơn</label>
                                            <input type="text" name="totalOrder" id="totalOrder" class="form-control" value="">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-label">Số lượng thùng</label>
                                            <input type="text" name="quanlity" id="quanlity" class="form-control" value="">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Giá trị hàng</label>
                                            <input type="text" name="total" id="total" class="form-control" value="">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-label">Impression</label>
                                            <input type="text" name="impression" id="impression" class="form-control" value="">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Channel</label>
                                            <select name="channel" id="channel" class="form-control">
                                                <option value="">Chọn channel</option>
                                                <option value="Website">Website</option>
                                                <option value="Facebook">Facebook</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-label">Số tiền chạy media</label>
                                            <input type="text" name="spendperchannel" id="spendperchannel" class="form-control" value="">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Số lượng lead</label>
                                            <input type="text" name="lead" id="lead" class="form-control" value="">
                                        </div>
                                    </div>
                                </div>
                                <button class="save-btn hover-btn" type="submit">Add New</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal"></div>
@endsection
@section('script')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $(document).ready(function () {
            $body = $("body");
            $(".datepicker").datepicker({dateFormat: 'yy-mm-dd'});

            $('#date').change(function () {
                $body.addClass("loading");
                $.ajax({
                    type: 'POST',
                    url: "{{ action('OrderController@checkDate') }}",
                    data: {
                        datecheck: this.value,
                        channel: $('#channel').val(),
                    },
                    success: function (response) {
                        console.log(response);
                        $body.removeClass("loading");
                        $('#totalOrder').val(response.totalOrder);
                        $('#total').val(response.total);
                        $('#quanlity').val(response.quanlity);
                    }
                });
            });

            $('#channel').on('change', function() {
                $body.addClass("loading");
                $.ajax({
                    type: 'POST',
                    url: "{{ action('OrderController@checkDate') }}",
                    data: {
                        datecheck: $('#date').val(),
                        channel: $('#channel').val(),
                    },
                    success: function (response) {
                        console.log(response);
                        $body.removeClass("loading");
                        $('#totalOrder').val(response.totalOrder);
                        $('#total').val(response.total);
                        $('#quanlity').val(response.quanlity);
                    }
                });
            });
        })
    </script>
@endsection