@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" />

    <style>
    /*thead input {
        width: 100%;
    }
    .fstyle {
        text-align: center;
        width: 90%;
        padding:5px;
    }*/
        .checkbox label:after {
          content: '';
          display: table;
          clear: both;
        }

        .checkbox .cr {
          position: relative;
          display: inline-block;
          border: 1px solid #a9a9a9;
          border-radius: .25em;
          width: 1.3em;
          height: 1.3em;
          float: left;
          margin-right: .5em;
        }

        .checkbox .cr .cr-icon {
          position: absolute;
          font-size: .8em;
          line-height: 0;
          top: 50%;
          left: 15%;
        }

        .checkbox label input[type="checkbox"] {
          display: none;
        }

        .checkbox label input[type="checkbox"]+.cr>.cr-icon {
          opacity: 0;
        }

        .checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
          opacity: 1;
        }

        .checkbox label input[type="checkbox"]:disabled+.cr {
          opacity: .5;
        }
    </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-percent"></span> Agent Releases
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-percent"></i> Admin Panel</a></li>
                <li class="active">Agent Releases</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 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>
            {{--style="border: solid #555555;padding:5px; border-radius: 7px;"--}}
            <form action="{{route('reports.commission.releases')}}" 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">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-6 no-padding">
                            <label for="month" class="not-required">Month:</label>
                       </div>
                      <div class="col-md-6 no-padding">
                      <select class="form-control" id="month" 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="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->id}}">{{$agent->fullname}}</option>
                            @endif
                        @endforeach
                     </select>
                    </div>

                    @if (Auth::user()->role_id != 4)
                    <div class="col-md-6 no-padding">
                          <label for="month" class="not-required"></label>
                     </div>
                    <div class="col-md-6 no-padding">
                      <div class="checkbox" style="padding-top: 10px;">
                        <label for="chkALL" class="custom-checkbox checked">
                              <input type="checkbox" id="chkALL" name="chkALL" >
                              <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>Summary by Agents
                        </label>
                      </div>
                    </div>
                    @endif

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

                <div class="form-group " style="padding-top:30px;">
                    <button id="btnOK" name="btnOK" type="submit" class="btn btn-success">Generate</button>
                    {{--<button id="btnShow" name="btnShow" class="btn btn-primary">View ALL</button>--}}
                    {{--<a href="" id="btnShow" name="btnShow" class="btn btn-primary btn-s">View ALL</a>--}}
                </div>

              </div>

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

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

        </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'
        });

        /*$('#from-datetimepicker').datetimepicker({
             format: 'MMMM/DD/YYYY'
        });

        $('#to-datetimepicker').datetimepicker({
             format: 'MMMM/DD/YYYY'
        });*/

         /*$("#user_table").dataTable().fnDestroy();
         $('#user_table').DataTable( {
                initComplete: function () {
                    this.api().columns().every( function () {
                        var column = this;
                        var select = $('<select class="fstyle"><option value=""></option></p>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                }
            } );*/

        });

        $('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);
            }*/
        });

        /*$('#btnShow').on('click', function () {
        //var ttl_sell_price = $('#total_selling_price').val();
            var mmonth = $('#month').val();
            var yyear = $('#year').val();
            $.ajax({
                url:"{{route('reports.commission.rpt_releases_summary')}}",
                method: 'get',
                headers:  {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data:{
                  'mmonth':mmonth,
                  'yyear':yyear
                },
                dataType:'json',
                success:function(data){
                    console.log(data);
                    /*$('#project_id').empty();
                    $('#project_id').append("<option selected disabled>Select Project</option>");
                    data.devs.forEach(function(prj){
                        $('#project_id').append('<option value="'+prj.id+'">'+prj.name+'</option>');
                    });
                    //$('#spinner').modal('toggle');
            },
            error: function (jqXHR, exception) {
                console.log(jqXHR);
            }
        });

    });*/
    </script>
@stop