@extends('layout.admin_v2.main')
@push('css')
<link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
<style>
    .tab_right_top {
        display: flex;
        align-items: center;
        color: #51595C;
        margin-top: 20px;
        margin-left: 50px;
    }

    .tab_right_top i {
        background-color: #F2F2F2;
        border-radius: 5px;
        color: white;
        padding: 8px 7px;
        cursor: pointer;
        font-size: 23px;
    }

    .tab_right_top>* {
        margin-left: 9px;
    }

    #myChart {
        margin: 50px;
        padding: 30px;
        width: 100%;
        height: 100%;
        max-width: 100%;
        border: 1px solid #00000029;
        box-shadow: 0px 3px 6px #00000029;

        /* width: 100%;
        max-width: 45%;
        height: 100%;
        max-height: 70%;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 80px;
        margin-left: 30px;
        border: 1px solid #D3D3D3; */
    }

    #myChart2 {
        /* margin: 50px;
        padding: 30px;
        width: 100%;
        max-width: 1200px;
        border: 1px solid #00000029;
        box-shadow: 0px 3px 6px #00000029; */

        margin: 50px;
        padding: 30px;
        width: 100%;
        height: 100%;
        max-width: 100%;
        border: 1px solid #00000029;
        box-shadow: 0px 3px 6px #00000029;
    }
</style>
@endpush
@section('content')
<section class="masteredit" id="managementMonthlySales" v-cloak>
    <div class="tab_right_top">
        <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preYear()"></i>
        <input type="year" v-model="filter_year" class="form-control text-center " style="width: 145px; border: 1px solid #E8E8E8; height: 40px; font-weight:bold">
        <i class="fas fa-chevron-right" v-on:click="nextYear()"></i>
    </div>
</section>
<!-- <div id="resizable">
    <div>
        <canvas id="myChart"></canvas>
    </div>
</div> -->
<div>
    <canvas id="myChart"></canvas>
</div>
<div>
    <canvas id="myChart2"></canvas>
</div>
<a href="{{route('managementMonthlySales')}}" type="button" class="btn  font-weight-bold" style="background-color: #F2F2F2; color: #51595C ; font-size: 17px; width: 150px; height: 45px; line-height: 30px; text-decoration: none; margin-left: 50px;"> 戻る</a>

@endsection
@push('script')
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
<!-- <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script> -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/js/vue-paginate.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="application/javascript" src="/js/admin/monthly_sales_charts.js?v={{config("sns-line.version")}}"></script>

<script type="text/javascript">
    // $(document).ready(function() {
    //     var datePickerObj = {
    //         format: 'yyyy-mm-dd',
    //         todayHighlight: true,
    //         autoclose: true
    //     };

    //     $('.datepicker').datepicker(datePickerObj);s
</script>

@endpush