@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Individual Doctor Commisstion
            <small>Preview</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Reports</a></li>
            <li class="active">Doctor Commission</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Custom Tabs -->
        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">

                <form name="searchForm" class="searchForm form-horizontal" method="get">

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Start Date:</label>
                        <div class="col-sm-9">

                            <input class="form-control datepicker" type="text" placeholder="Start Date"
                                   autocomplete="off"
                                   name="from" id="from">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">End Date:</label>
                        <div class="col-sm-9">

                            <input class="form-control datepicker" type="text" placeholder="End Date"
                                   autocomplete="off"
                                   name="to" id="to">
                        </div>
                    </div>

                    @can('individual-doctor-commission-view')

                        <div class="form-group">
                            <label class="col-sm-3 control-label">Please Select A Doctor</label>
                            <div class="col-sm-9">
                                {!! Form::select('doctor_id',$doctors,null, ['class'=> 'form-control select2', 'id'=>'select_doc', 'placeholder'=>'Select Doctor']) !!}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">Total Amount:</label>
                            <div class="col-sm-9">
                                <b id="total" style="color: red; font-size: 18px"></b>
                            </div>
                        </div>

                    @endcan

                </form>

                <!-- /.tab-content -->
                <div id="singleDoctor"></div>

                <!-- nav-tabs-custom -->
                <!-- SELECT2 EXAMPLE -->
            </div>
        </div>
    </section>


@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function () {

            $('#select_doc').change(function () {
                var doctor_id = $('#select_doc').val();
                var fromDate = $("#from").val();
                var toDate = $("#to").val();
                $.ajax({
                    url: 'get-monthly-single-doctor-commission-total-feagure/' + fromDate + '/' + toDate + '/' + doctor_id,
                    method: "GET",
                    dataType: '',
                    success: function (data) {
                        $("#total").empty();

                        $("#total").html(data);
                    },
                    error: function (data) {
                        alert('Something went wrong !');
                    }
                });
                $.ajax({
                    url: 'get-monthly-single-doctor-commission-list/' + fromDate + '/' + toDate + '/' + doctor_id,
                    method: "GET",
                    dataType: '',
                    success: function (data) {
                        console.log(data);
                        $("#singleDoctor").append(data.view);
                    },
                    error: function (data) {
                        alert('Something went wrong !');
                    }
                })
            });

        });


        function loadingImg() {
            $('#loading').ajaxStart(function () {
                $(this).show();
            }).ajaxComplete(function () {
                $(this).hide();
            });
        }

    </script>
@endsection