@extends('layouts.layout')

    @section('body_class', 'nav-md')

    @section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            


            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3>Dashboard Summary Customer</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <ol class="breadcrumb">
                            <li><a href="{{ route('dashboard') }}">Home</a></li>
                            <li><a href="{{ route('dashboard_summary_customer') }}">Dashboard Summary Customer</a></li>
                        </ol>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="x_panel">
                            <div class="x_title">
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                                </ul>
                                <h2>Filter</h2>
                            </div>
                            <div class="x_content">
                                <form id="form-search" class="form-horizontal">
                                    <div class="col-xs-12 col-sm-12">
                                        <div class="form-group">
                                            <label class="col-xs-12 col-sm-4 control-label">Tanggal Mulai :</label>
                                            <div class="col-xs-6 col-sm-4">
                                                <input id="start_date" name="start_date" value="{{ $request['start_date'] ? : (date('Y-m') . '-01') }}" type="date" class="form-control" placeholder="start_date">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-xs-12 col-sm-4 control-label">Tanggal Selesai :</label>
                                            <div class="col-xs-6 col-sm-4">
                                                <input id="end_date" name="end_date" value="{{ $request['end_date'] ? : date('Y-m-d') }}" type="date" class="form-control"  placeholder="Date End">
                                            </div>
                                        </div>
                                        <div class="form-group" style="margin-top:20px">
                                            <label class="col-xs-12 col-sm-5 control-label"></label>
                                            <div class="col-xs-12 col-sm-7">
                                                <button id="btn-search" class="btn btn-info"><i class="fa fa-search"></i> Search</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" id="content-table"></div>

            </div>
        </div>
    </div>
    @endsection

    @section('scripts')
        <script type="text/javascript">
    $('#form-search').on('submit', function(e){
        e.preventDefault();

        $('#btn-search')
            .attr("disabled", true)
            .html('<i class="fa fa-spinner fa-spin"></i> Loading...');

        $.ajax({
            url: "{{ url('summary/data-table_dashboard_summary_customer') }}",
            method: "POST",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: { 
                'start_date' : $('#start_date').val(),
                'end_date' : $('#end_date').val(),
            },
            success: function(response) {
                $('#content-table').html(response);
            },
            error: function(response){
                var response = response.responseJSON;
                alert(response.error);
            },
            complete: function(){ 
                $('#btn-search')
                    .removeAttr("disabled")
                    .html('<i class="fa fa-search"></i> Search');
            }
        });
    });

    @if($request['start_date'])
        $('#form-search').trigger('submit');
    @endif
</script>

    @endsection