@extends('layouts.app')

@section('content')
    <div class="card card-outline-info">
        <div class="card-header">
            <h4 class="m-b-0 text-white">Place Business</h4>
        </div>
    <div class="card-body">
    {!! Form::open(['method' => 'POST','id'=> 'register_frm', 'data-parsley-validate'=>'', 'route' => ['users.binary.store']]) !!}
        <div class="form-body control-group">
            <h3 class="card-title">Sponsor & Position</h3>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        {!! Form::label('pin', 'Pin*', ['class' => 'control-label']) !!}
                        @if($selected_pin!=null)
                          {{$pins[$selected_pin]}}
                          <input type="hidden" name="pin_id" value="{{ $selected_pin }}" />
                        @endif
                        <p class="help-block"></p>
                        @if($errors->has('pin'))
                            <p class="help-block error alert">
                                {{ $errors->first('pin') }}
                            </p>
                        @endif
                    </div>
                </div>
                <!--/span-->
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('sponsor_id', 'Sponsor Id*', ['class' => 'control-label']) !!}
                        <input type="text" name="sponsor_id" id="sponsor-typeahead" class="form-control form-control-normal" placeholder="Sponsor's Username" value="{{ ((old('sponsor_id')==NULL)?$user->username:old('sponsor_id')) }}" required="" style="margin-bottom: 0px; " />
                        <p class="help-block"></p>
                        @if($errors->has('sponsor_id'))
                            <p class="help-block error">
                                {{ $errors->first('sponsor_id') }}
                            </p>
                        @endif
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('sponsor_name', 'Sponsor name*', ['class' => 'control-label']) !!}
                        {!! Form::text('sponsor_name', ((old('sponsor_id')==NULL)?$user->full_name:old('sponsor_name')), ['class' => 'form-control form-control-normal', 'id' => 'sponsor_name', 'placeholder' => '','disabled'=>'']) !!}
                        <p class="help-block"></p>
                        @if($errors->has('sponsor_name'))
                            <p class="help-block error">
                                {{ $errors->first('sponsor_name') }}
                            </p>
                        @endif
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('position', 'Position*', ['class' => 'control-label']) !!}
                        {!! Form::select('position',array('Left'=>'Left', 'Right'=>'Right'), old('position'), ['class' => 'form-control form-control-normal', 'id' => 'positionLegIn', 'required', 'placeholder' => 'Select']) !!}
                        <p class="help-block"></p>
                        @if($errors->has('position'))
                            <p class="help-block error">
                                {{ $errors->first('position') }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                <div class="form-group">
                    {{ Form::checkbox('agreeterms', 1, null, ['id' => 'agreeterms']) }}
                    {!! Form::label('agreeterms', 'By submitting this form I agree to the Terms and Conditions.', ['class' => 'control-label', 'style'=>'color:#455a64;']) !!}
                    <p class="help-block"></p>
                    @if($errors->has('agreeterms'))
                        <p class="help-block error">
                            {{ $errors->first('agreeterms') }}
                        </p>
                    @endif
                </div>
              </div>

            </div>
        </div>
    {!! Form::button('Submit', ['class' => 'btn btn-primary', 'id' => "preview_btn", 'data-target' => "#exampleModal"]) !!}
    <div class="modal fade" tabindex="-1" role="dialog" id="exampleModal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Are you sure?</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>
              Are you sure? Please check Name, Sponsor ID, Position
              These value can not be updated later!
            </p>
            <p>
              <strong>Sponsor Name : </strong><span id="sponsorName"></span> <br />
              <strong>Sponsor ID : </strong><span id="sponsorID"></span> <br />
              <strong>Position : </strong><span id="positionLeg"></span> <br />
            </p>
          </div>
          <div class="modal-footer">
            {!! Form::submit('Proceed To register', ['class' => 'btn btn-danger']) !!}
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    {!! Form::close() !!}
    </div>
    </div>

@stop

@section('javascript')
    <!-- Date picker plugins css -->
    <link href="{{ url('assets') }}/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <!-- Daterange picker plugins css -->
    <link href="{{ url('assets') }}/plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
    <link href="{{ url('assets') }}/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- Date Picker Plugin JavaScript -->
    <script src="{{ url('assets') }}/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <!-- Date range Plugin JavaScript -->
    <script src="{{ url('assets') }}/plugins/timepicker/bootstrap-timepicker.min.js"></script>
    <script src="{{ url('assets') }}/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script src="{{ url('assets') }}/js/jqBootstrapValidation.js"></script>
    <link href="{{ url('assets') }}/plugins/EasyAutocomplete/easy-autocomplete.min.css" rel="stylesheet">
    <script src="{{ url('assets') }}/plugins/EasyAutocomplete/jquery.easy-autocomplete.min.js"></script>
    <script src="{{ url('assets') }}/js/typeahead.bundle.js"></script>
    <!-- Parsley -->
    <script>
      jQuery('.mydatepicker, #datepicker').datepicker({format: 'dd-mm-yyyy'});

      $(document).ready(function() {
        $("form#register_frm").not("[type=submit]").jqBootstrapValidation();
        
        $( "span#sponsorName" ).text($("input#sponsor_name").val());
        $( "span#sponsorID" ).text($("input#sponsor-typeahead").val());
        
        $( "span#newUserName" ).text($("input#new_user_name").val());
        $( "span#newUserID" ).text($("input#new-user-typeahead").val());
        
        $( "span#positionLeg" ).text($("#positionLegIn option").filter(":selected").val());
        
        $('#preview_btn').click(function(event) {
          $("#exampleModal").modal();
        });
        
        
        $( "input#sponsor_name" ).change(function() {
          $( "span#sponsorName" ).text($("input#sponsor_name").val());
        });
        
        $( "input#sponsor-typeahead" ).change(function() {
          $( "span#sponsorID" ).text($("input#sponsor-typeahead").val());
        });
        
        $( "input#new_user_name" ).change(function() {
          $( "span#newUserName" ).text($("input#new_user_name").val());
        });
        
        $( "input#new-user-typeahead" ).change(function() {
          $( "span#newUserID" ).text($("input#new-user-typeahead").val());
        });
        
        $( "#positionLegIn" ).change(function() {
          $( "span#positionLeg" ).text($(this).val());
        });
        
      });

      var options = {

        url: function(phrase) {
          return "{{ url('/') }}/users/getSponsors/" + phrase;
        },

        getValue: function(element) {
          return element.username;
        },

        template: {
            type: "description",
            fields: {
                description: "full_name"
            }
        },
        list: {
              onSelectItemEvent: function() {
                var data = $("#sponsor-typeahead").getSelectedItemData().full_name;
                $("input#sponsor_name").val(data).trigger("change");
              }
        },
        theme: "plate-dark",
        ajaxSettings: {
          dataType: "json",
          method: "GET",
          data: {
            dataType: "json"
          }
        },
        preparePostData: function(data) {
          data.phrase = $("#sponsor-typeahead").val();
          return data;
        },

        requestDelay: 400
      };

      $("#sponsor-typeahead").easyAutocomplete(options);

/*      
      var options = {

        url: function(phrase) {
          return "{{ url('/') }}/users/getSponsors/" + phrase;
        },

        getValue: function(element) {
          return element.username;
        },

        template: {
            type: "description",
            fields: {
                description: "full_name"
            }
        },
        list: {
              onSelectItemEvent: function() {
                var data = $("#new-user-typeahead").getSelectedItemData().full_name;
                $("input#new_user_name").val(data).trigger("change");
              }
        },
        theme: "plate-dark",
        ajaxSettings: {
          dataType: "json",
          method: "GET",
          data: {
            dataType: "json"
          }
        },
        preparePostData: function(data) {
          data.phrase = $("#new-user-typeahead").val();
          return data;
        },

        requestDelay: 400
      };

      $("#new-user-typeahead").easyAutocomplete(options);
      */
</script>
@endsection
