@extends('admin.layouts.master')

@section('title')
    Agent Releases
@stop

@section('style')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />

@stop

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span class="fa fa-book"></span> Agent Vouchers
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-book"></i> Admin Panel</a></li>
                <li class="active">Agent Vouchers</li>
            </ol>
        </section>
        <div style="margin: 20px;"></div>

        <!-- Main content -->
        <section class="content">

            {{--<div class="btn-group dropdown">
                <button type="button" class="btn btn-info">Action Options</button>
                <button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
                    <span class="caret"></span>
                    <span class="sr-only">Action option</span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
                    <li><a href="#">View PDF</a></li>
                    <li><a href="#">Export to Excel</a></li>
                </ul>
            </div>--}}
            <div style="margin: 1px;"></div>

            <div>

            <form action="{{route('reports.commission.vouchers')}}" method="post" class="form-inline form-template">
              {{ csrf_field() }}
              <div class="clearfix"></div>
              <div class="col-lg-6">
                 <div class="form-group width-100-percent" style="padding:20px;">
                      <div class="col-md-6 no-padding">
                        <label for="" class="not-required">From Date:</label>
                      </div>
                      <div class="col-md-6 no-padding">
                       <div class='input-group date year-datetimepicker'>
                          <input type='text' name="dtFrom" id="dtFrom" class="form-control" required="required" />
                          <span class="input-group-addon">
                              <i class="fa fa-calendar" aria-hidden="true"></i>
                          </span>
                       </div>
                      </div>

                      <div class="col-md-6 no-padding">
                          <label for="" class="not-required">To Date:</label>
                        </div>
                        <div class="col-md-6 no-padding">
                         <div class='input-group date year-datetimepicker'>
                            <input type='text' name="dtTo" id="dtTo" class="form-control" required="required" />
                            <span class="input-group-addon">
                                <i class="fa fa-calendar" aria-hidden="true"></i>
                            </span>
                         </div>
                        </div>
                     <div class="col-md-6 no-padding">
                           <label for="developer" class="not-required">Agent:</label>
                      </div>
                     <div class="col-md-6 no-padding">
                     <select class="form-control" id="agent" name="agent" style="width: 120%;">
                        <option ></option>
                        @foreach($agents as $agent)
                            @if (Auth::user()->role_id == 4)
                                <option value="{{$agent->id}}" selected>{{$agent->fullname}}</option>
                            @else
                                <option value="{{$agent->agent_id}}">{{$agent->agent_name}}</option>
                            @endif
                            {{--<option value="{{$agent->agent_id}}" required>{{$agent->agent_name}}</option>--}}
                        @endforeach
                     </select>
                    </div>

                    <div class="col-md-6 no-padding">
                          <label for="month" class="not-required"></label>
                    </div>

                    <div class="col-md-6 no-padding">
                          <label for="remarks" class="not-required"></label>
                          <textarea id="remarks" name="remarks" class="form-control" rows="3" cols="50" style="resize: none;" placeholder="Add notes/remarks"></textarea>
                    </div>

                    <div class="col-md-6 no-padding">
                          <label for="month" class="not-required"></label>
                    </div>

                    <div class="clearfix"></div>

                <div class="form-group " style="padding-top:30px;">
                    <button id="btnOK" name="btnOK" type="submit" class="btn btn-success"><i class="fa fa-filter" aria-hidden="true"></i> Generate</button>
                </div>

              </div>

                </div>
                </form>
            </div>

            <div class="clearfix"></div>

            @if(Session('info'))
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <div class="tem alert alert-success navbar-fixed-bottom"><span class="glyphicon glyphicon-ok-circle"></span> {{Session('info')}}</div>
                    </div>
                </div>
            @endif


        </section>

    </div>
@stop

@section('script')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

    <script>

    $(document).ready(function() {

    //$('#btnShow').attr( "disabled", true);
    $('.year-datetimepicker').datetimepicker({
         format: 'YYYY-MM-DD'
        });
    });

    $('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            console.log('checked');
            $('#agent').empty();
            //alert("Checkbox is checked.");
            //$('#agent').attr("disabled", true);
            //$('#btnShow').attr( "disabled", false);
        }
        /*else if($(this).prop("checked") == false){
            console.log('uncheck');
            //alert("Checkbox is unchecked.");
            //$('#btnShow').attr( "disabled", true);
            //$('#btnOK').attr("disabled",false);
        }*/
    });

    </script>
@stop