@extends('admin.layouts.master')

@section('title')
    Top Performers
@stop

@section('style')

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

    <style>
    thead input {
        width: 100%;
    }
    .fstyle {
        text-align: center;
        width: 90%;
        padding:5px;
    }
    </style>
@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-money"></span> Top Performers
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-money"></i> Admin Panel</a></li>
                <li class="active">Top Performers</li>
            </ol>
        </section>
        <div style="margin: 20px;"></div>

        <!-- Main content -->
        <section class="content">
            {{--<div class="page-header">
                <a href="{{route('reports.sales')}}" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Generate Report</a>
            </div>--}}
            <div style="margin: 40px;"></div>

            <div>
            {{--style="border: solid #555555;padding:5px; border-radius: 7px;"--}}
            <form action="{{route('reports.cash-advances')}}" method="post" class="form-inline form-template">
              {{ csrf_field() }}
              <div class="clearfix"></div>
                  <div class="col-lg-12">
                     <div class="form-group width-100-percent" style="padding:20px;">
                          <div class="col-md-4 no-padding">
                            <label for="" class="not-required">Year:</label>
                          </div>
                          <div class="col-md-6 no-padding">
                           <div class='input-group date' id='year-datetimepicker'>
                              <input type='text' name="year" id="year" 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-4 no-padding">
                                <label for="month" class="not-required">Month:</label>
                           </div>
                          <div class="col-md-4 no-padding">
                          <select class="form-control" name="month" style="width: 120%;" required="required">
                            <option value=""></option>
                            @foreach($months as $month)
                                <option value="{{$month->id}}">{{$month->name}}</option>
                            @endforeach
                          </select>
                         </div>
                         <div class="clearfix"></div>
                     </div>
                  </div>

                <div class="form-group " style="padding-left:15px;">
                    <button type="submit" class="btn btn-success"><i class="fa fa-filter" aria-hidden="true"></i> Generate</button>
                </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() {
        $('#year-datetimepicker').datetimepicker({
             format: 'YYYY'
        });
    });
    </script>
@stop