@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><i class="fa fa-edit"></i> Report Verifikasi List</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('verifikasi_list') }}">Report Verifikasi List</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 class="btn btn-info"><i class="fa fa-search"></i> Search</button>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>

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

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

@section('scripts')
    <script type="text/javascript">
        @if($request['start_date'])
            $.ajax({
                url: "{{url('summary/data-table') }}",
                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);
                    $(".btn-approve").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');
                }
                
            });
        @endif

        function getDetail(param1, param2, param3) {
        $('#content-table-detail').html('<div style="text-align: center; padding-top: 20px;"><i class="fa fa-2x fa-spinner fa-pulse"></i></div>');
        $.ajax({
            url:"{{ url('summary/data-detail')}}",
            method: "POST",
            headers: { 'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')},
            data: {
                'start_date' : $('#start_date').val(),
                'end_date' : $('#end_date').val(),
                'param1' : param1,
                'param2' : param2,
                'param3' : param3,
            },
            success: function(response) {
                $('#content-table-detail').html(response);
                $('html, body').animate({
                    scrollTop: $('#content-table-detail').offset().top
                }, 1000);
            },
            error: function($response){
                var response = response.responseJSON;
                alert(response.error);
                $(".btn-approve").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');

            }
        });
        }

    </script>
@endsection