@extends('backend.layouts.master')
@section('content')
    <style>
        .table-responsive{
            overflow: hidden;
        }
    </style>
    <div class="content-body">
        <form id="form-search" action="" method="GET">
            @csrf
            <ul class="nav nav-pills nav-fill">
                <li class="nav-item"><a class="nav-link" data-time="TODAY" href="javascript:void(0)">Hôm nay</a></li>
                <li class="nav-item"><a class="nav-link" data-time="YESTERDAY" href="javascript:void(0)">Hôm qua</a></li>
                <li class="nav-item"><a class="nav-link" data-time="THIS_WEEK" href="javascript:void(0)">Tuần này</a></li>
                <li class="nav-item"><a class="nav-link" data-time="LAST_WEEK" href="javascript:void(0)">Tuần trước</a></li>
                <li class="nav-item"><a class="nav-link active" data-time="THIS_MONTH" href="javascript:void(0)">Tháng này</a></li>
                <li class="nav-item"><a class="nav-link" data-time="LAST_MONTH" href="javascript:void(0)">Tháng trước</a>
                </li>
                <li class="date d-flex justify-content-between">
                    <input placeholder="Ngày bắt đầu" id="start_date" class="form-control" type="text" name="start_date" onfocus="(this.type='date')">
                    <input placeholder="Ngày kêt thúc" id="end_date" class="form-control" type="text" name="end_date" onfocus="(this.type='date')">
                </li>
                <input type="hidden" value="" name="data_time" id="data_time">
            </ul>
        </form>
        <div class="table-responsive">
            @include('backend.pages.Dashboard.chart')
        </div>
    </div>
    <script type="text/javascript" src="{{asset('backend/plugins/google-chart/loader.js')}}"></script>
    <script>
        $(document).ready(function () {
            $('#data_time').val('THIS_MONTH');
            $('#form-search').submit();

            $('#start_date,#end_date').change(function () {
                let end_date = $('#end_date').val();
                let start_date = $('#start_date').val();
                if (end_date && start_date){
                    $('#data_time').val(null);
                    $('#form-search').submit();
                }
            })
        })

        $(document).delegate('.nav-link', 'click', function () {
            $('.nav-link').removeClass('active');
            $(this).addClass('active');
            const type = $(this).data('time');
            $('#data_time').val(type);
            $('#end_date').val(null);
            $('#start_date').val(null);
            $('#form-search').submit();
        });
    </script>
@endsection