@extends('admin.layouts.default')
@section('content')

 <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous"> -->

 <!-- <style>
  /* body{
    background-color: #dfdfdf;
  } */

  /* .container {
    max-width: 960px;
    margin: 30px auto;
    padding: 20px;
  } */
  h1 {
    font-size: 20px;
    text-align: center;
    margin: 20px 0 20px;
  }
  h1 small {
    display: block;
    font-size: 15px;
    padding-top: 8px;
    color: gray;
  }
  .avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 50px auto;
  }
  .avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
  }
  .avatar-upload .avatar-edit input {
    display: none;
  }
  .avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
  }
  .avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
  }
  .avatar-upload .avatar-edit input + label:after {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
  }
  .avatar-upload .avatar-preview {
    width: 192px;
    height: 192px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
  .avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .container2 .btn {
      position: absolute;
      top: 90%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);

      color: white;
      font-size: 16px;

      border: none;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
  }
  #image {
    display: block;
    / This rule is very important, please don't ignore this /
    max-width: 100%;
}

</style> -->

<!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>

<!--********************************* Content body start  **********************************-->
<div class="container-fluid">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">

        </div>
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="{{route($modelName.'.view')}}">All Bonus</a></li>
                <li class="breadcrumb-item">Add</li>
            </ol>
        </div>
    </div>
    <!-- row -->
    <div class="row">
        <div class="col-xl-12 col-xxl-12">
            <div class="card" data-aos="fade-up">
                <div class="card-header">
                    <h4 class="card-title">Add Bonus</h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">
                        {{ Form::open(['role' => 'form','id'=>'playerAddForm','route'=>[$modelName.'.add'], 'files' => true]) }}

                            <div class="form-row">

                              <div class="form-group col-md-6">
                                  <label class="lbl_frm py-2">Bonus Name</label>
                                  <input class="form-control in_text" autocomplete="off" placeholder="enter bonus name here" id="player_name" name="type" type="text" value={{ old('type') }}"">
                                  <div class="error-message help-inline">
                                    {{$errors->first('type')}}
                                  </div>
                              </div>
                              <div class="form-group col-md-6">
                                  <label class="lbl_frm py-2">Bonus Price</label>
                                  <input class="form-control in_text" autocomplete="off" placeholder="enter bonus price here" id="player_name" name="price" type="number" value="{{ old('price') }}">
                                  <div class="error-message help-inline">
                                    {{$errors->first('price')}}
                                  </div>
                              </div>

                            </div>
                            <div class="form-row">
                              <div class="form-group col-md-6">
                                  <label class="lbl_frm py-2">Bonus Type</label>
                                  <!-- <input class="form-control in_text" autocomplete="off" placeholder="enter bonus price here" id="player_name" name="bonus_type" type="text" value="{{ old('bonus_type') }}"> -->
                                  <select class="form-control in_text sport_types" name="bonus_type">
                                      <option value="">Select Bonus</option>
                                        <option value="Amount">Amount</option>
                                          <option value="Percentage">Percentage</option>
                                  </select>
                                  <div class="error-message help-inline">
                                    {{$errors->first('bonus_type')}}
                                  </div>
                              </div>

                              <div class="form-group col-md-6">
                                  <label class="lbl_frm py-2">Status</label>
                                  <select class="form-control in_text sport_types" name="status">
                                      <option value="">Select Status</option>
                                        <option value="1">Active</option>
                                          <option value="0">InActive</option>
                                  </select>
                                  <div class="error-message help-inline">
                                    {{$errors->first('status')}}
                                  </div>
                              </div>
                            </div>
                            <div class="form-row">
                              <!-- <div class="form-group col-md-6">
                                <div class="form-group col-md-4 py-2"> -->
                                  <!-- <label>Multi Entry</label> -->
                                  <!-- <div class="form-check mb-2">
                                      <input type="checkbox" class="form-check-input" id="first_deposit" name="first_deposit" value="1">
                                      <label class="form-check-label">First Deposit</label>
                                  </div> -->
                                  <div class="form-group col-md-6">
                                  <label class="lbl_frm py-2">First Deposit</label>
                                  <!-- <input type="checkbox" id="myCheck" onclick="myFunction()"> -->
                                    <input type="checkbox" class="form-check-input" id="myCheck" onclick="checkBoxcheck()">
                                    <input type="hidden" id="text" name="first_deposit" value="">

                              </div>
                                <!-- </div>
                              </div> -->
                              <div class="form-group col-md-6">
                                  <label class="lbl_frm py-2">First Deposit Conditions </label>
                                  <input class="form-control in_text" autocomplete="off" placeholder="enter bonus price here" id="player_name" name="first_deposit_condition" type="text" value="{{ old('first_deposit_condition') }}">
                                  <div class="error-message help-inline">
                                    {{$errors->first('first_deposit_condition')}}
                                  </div>
                              </div>

                            </div>
                            <div class="form-row" >

                          <div class="form-group col-md-6" id="maxlimit" style="display:none">
                              <label class="lbl_frm py-2">Max Deposit Limit</label>
                                <input class="form-control in_text" autocomplete="off" placeholder="Enter Max Deposit Limit" name="max_deposit_limit" type="number" value="">

                          </div>


                        </div>

                                  <input type="hidden" name="_token" value="{{csrf_token()}}">



                            <div class="py-2">
                            <button type="submit" class="btn btn-primary mr-2">Submit</button>
                            <button class="btn btn-gray" type="button" id="cancel_btn">Cancel</button>
                          </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>







<div class="modal fade bd-example-modal-lg imagecrop" id="model" tabindex="-1"  data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button> -->
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <div class="row">
                        <div class="col-md-11">
                            <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                        </div>
                    </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="crop1" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary crop" id="crop">Crop</button>
              </div>
          </div>
        </div>
      </div>



      <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
          <script>
              var $modal = $('.imagecrop');
              var image = document.getElementById('image');
              var cropper;
              $("body").on("change", ".imageUpload", function(e){
                  var files = e.target.files;
                  var done = function(url) {
                      image.src = url;
                      $modal.modal('show');
                  };
                  var reader;
                  var file;
                  var url;
                  if (files && files.length > 0) {
                      file = files[0];
                      if (URL) {
                          done(URL.createObjectURL(file));
                      } else if (FileReader) {
                          reader = new FileReader();
                          reader.onload = function(e) {
                              done(reader.result);
                          };
                          reader.readAsDataURL(file);
                      }
                  }
              });
              $modal.on('shown.bs.modal', function() {
                  cropper = new Cropper(image, {
                      aspectRatio: 1,
                      viewMode: 1,
                  });
              }).on('hidden.bs.modal', function() {
                  cropper.destroy();
                  cropper = null;
              });
              $("body").on("click", "#crop,#crop1", function() {
                  canvas = cropper.getCroppedCanvas({
                      width: 160,
                      height: 160,
                  });
                  canvas.toBlob(function(blob) {
                      url = URL.createObjectURL(blob);
                      var reader = new FileReader();
                      reader.readAsDataURL(blob);
                      reader.onloadend = function() {
                           var base64data = reader.result;
                           $('#base64image').val(base64data);
                           // document.getElementById('imagePreview').style.backgroundImage = "url("+base64data+")";
                           $modal.modal('hide');
                      }
                  });
              })

          </script>
<!-- hk end -->
<script type="text/javascript">


    $(document).ready(function(){
        $("#dob").datetimepicker({
            timepicker: false,
            format:'Y-m-d'
        });
        $(document).on("click","#cancel_btn", function(){
            let href = $(".breadcrumb-item.active a").attr("href");
            window.location = href;
        });


        $(".cricket_div").hide();
        $(".sport_types").on("change",function(){
          var sport_type = $(this).val();
          if(sport_type == 1)
          {
            var rolehtml =  '<option value="">Select Role</option>';
            rolehtml +=  '<option value="batsman">Batsman</option>';
            rolehtml +=  '<option value="bowler">Bowler</option>';
            rolehtml +=  '<option value="allrounder">All rounder</option>';
            rolehtml +=  '<option value="keeper">Wicket Keeper</option>';
            $(".roles").html(rolehtml);
            $(".cricket_div").show();
          }
          else if(sport_type == 2)
          {
            var rolehtml =  '<option value="">Select Role</option>';
            rolehtml +=  '<option value="Goalkeeper">Goalkeeper</option>';
            rolehtml +=  '<option value="Defender">Defender</option>';
            rolehtml +=  '<option value="Midfielder">Midfielder</option>';
            rolehtml +=  '<option value="Forward">Forward</option>';
            $(".roles").html(rolehtml);
            $(".cricket_div").hide();
          }
          else
          {
            var rolehtml =  '<option value="">Select Role</option>';

            $(".roles").html(rolehtml);

            $(".cricket_div").hide();
          }
        });
    });


    function checkBoxcheck() {

        var checkBox = document.getElementById("myCheck");
        var text = document.getElementById("text");
        // var Max_Deposit_Limit = document.getElementById("maxlimit");


        if (checkBox.checked == true){
          var text = document.getElementById("text").value = '1';
          maxlimit.style.display = "block";

        } else {
          var text = document.getElementById("text").value = '0';
            maxlimit.style.display = "none";
        }
      }

</script>

</script>
<!--**********************************
Content body end
***********************************-->
@endsection