@extends('admin.layout.main')
@section('title',$header['title'])
@section('content')
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-4 mt-2">
            <div class="col-sm-12 d-flex breadcrumb-style">
              <h1 class="m-0">Redeem - Edit</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard </a></li>
                <li class="breadcrumb-item"><a href="{{ route('redeem.index') }}">Redeems</a></li>
                <li class="breadcrumb-item active">Edit</li>
              </ol>
            </div><!-- /.col -->

          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Info boxes -->
          <div class="row">
            <div class="card pb-4 pt-3 px-3 w-100">
              <form id="dataForm" class="form row pt-3 mb-0 validate" enctype="multipart/form-data" method="post">
                
                  <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="text" id="username" name="user_name" autocomplete="off" class="is-valid" value="{{ $redeemDetail['user_name'] }}" disabled>
                      <label for="username">User Name</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="number" id="mobile" autocomplete="off" class="is-valid" value="9460944244" onkeypress="return isNumber(event)" disabled>
                      <label for="mobile">Mobile Number</label>
                    </div>

                  </div>
                
                
                  <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="number" id="rewards" autocomplete="off" class="is-valid" value="{{ $redeemDetail['reward_points'] }}" onkeypress="return isNumber(event)" disabled>
                      <label for="rewards">Rewards Points</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-item form-float-style">
                      <input type="number" id="redeem" autocomplete="off" class="is-valid" value="{{ $redeemDetail['redeem_points'] }}" onkeypress="return isNumber(event)">
                      <label for="redeem">Redeem Points</label>
                    </div>

                  </div>
                

                
                  <div class="col-md-6">
                    <!-- <div class="form-item"> -->
                    <div class="form-floating form-item mb-0">
                                                <div class="form-item form-float-style serach-rem mb-0">
                                                  <div class="select top-space-rem after-drp form-float-style ">
                                                    <select data-live-search="true" name="gift_id" class="order-td-input selectpicker select-text height_drp is-valid">
                                                      @foreach(App\Models\Gift::select('id','name')->where('status','1')->orderBy('name','asc')->get() as $value)
                                                        <option value="{{$value->id}}" @if($redeemDetail['gift_id'] == $value->id) selected="selected" @endif disabled>{{ ucwords($value->name) }}</option>
                                                      @endforeach
                                                    </select>
                                                    <label class="select-label searchable-drp">Gift Product</label>
                                                  </div>                        
                                                </div>
                    </div>
                    <!-- </div> -->
                  </div>
                  <div class="col-md-6">
                    

                    <div class="form-floating form-item mb-0">
                                                <div class="form-item form-float-style serach-rem mb-0">
                                                  <div class="select top-space-rem after-drp form-float-style ">
                                                    <select data-live-search="true" name="redeem_status" class="order-td-input selectpicker select-text height_drp is-valid">
                                                      <option value="1" @if($redeemDetail['status'] == '1')  selected="selected") @endif>Pending</option>
                                                      <option value="2" @if($redeemDetail['status'] == '2')  selected="selected") @endif>Approved</option>
                                                      <option value="3" @if($redeemDetail['status'] == '3')  selected="selected") @endif>Dispatch</option>
                                                    </select>
                                                    <label class="select-label searchable-drp">Redeem Status</label>
                                                  </div>                        
                                                </div>
                    </div>
                    <!-- </div> -->
                  </div>
                

                
                  <div class="col-md-6">
                    <!-- <div class="form-item"> -->
                    <div class="form-floating form-item mb-0">
                                                <div class="form-item form-float-style serach-rem mb-0">
                                                  <div class="select top-space-rem after-drp form-float-style ">
                                                    <select data-live-search="true" name="admin_approve_status" class="order-td-input selectpicker select-text height_drp is-valid">
                                                      <option value="1" @if($redeemDetail['admin_approve']=='1') selected="selected" @endif>True</option>
                                                      <option value="0" @if($redeemDetail['admin_approve']=='0') selected="selected" @endif>False</option>
                                                    </select>
                                                    <label class="select-label searchable-drp">Admin Confirmation</label>
                                                  </div>                        
                                                </div>
                    </div>
                    <!-- </div> -->
                  </div>
                  <div class="col-md-6">
                    <div class="form-floating form-item mb-0">
                                                <div class="form-item form-float-style serach-rem mb-0">
                                                  <div class="select top-space-rem after-drp form-float-style ">
                                                    <select data-live-search="true" name="dispatch_status" class="order-td-input selectpicker select-text height_drp is-valid">
                                                      <option value="1" @if($redeemDetail['dispatch']=='1') selected="selected" @endif>True</option>
                                                      <option value="0" @if($redeemDetail['dispatch']=='0') selected="selected" @endif>False</option>
                                                    </select>
                                                    <label class="select-label searchable-drp">Gift Dispatch Status</label>
                                                  </div>                        
                                                </div>
                    </div>
                    <!-- </div> -->
                  </div>
                
                  <div class="col-md-6">
                    <div class="form-item form-float-style mb-0">
                      <textarea type="text" id="comment" name="dispatch_address" autocomplete="off" class="is-valid" >Amar Infotech, Navrangpura Ahmedabad, Guj..</textarea>
                      <label for="comment">Dispatch Address</label>
                    </div>
                  </div>

                </form>


              <div class="cards-btn">
                <button type="submit" class="btn btn-success form-btn-success">Submit</button>
                <a href="{{ route('redeem.index') }}" class="btn btn-danger form-btn-danger">Cancel</a>
              </div>

            </div>



          </div>
          <!-- /.row -->
        </div>
        <!--/. container-fluid -->
      </section>
     
@endsection
@section('js')


<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
<!-- Page specific script -->
<script>
    // valid in input materila js

    const inputs = document.querySelectorAll("input");

    inputs.forEach((input) => {
      input.addEventListener("blur", (event) => {
        if (event.target.value) {
          input.classList.add("is-valid");
        } else {
          input.classList.remove("is-valid");
        }
      });
    });

    const textareas = document.querySelectorAll("textarea");

    textareas.forEach((textarea) => {
      textarea.addEventListener("blur", (event) => {
        if (event.target.value) {
          textarea.classList.add("is-valid");
        } else {
          textarea.classList.remove("is-valid");
        }
      });
    });
    // //////

    CKEDITOR.replace('editor1');
    CKEDITOR.on('instanceReady', function (evt) {
      var editor = evt.editor;

      editor.on('change', function (e) {
        var contentSpace = editor.ui.space('contents');
        var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
        var ckeditorFrame = ckeditorFrameCollection[0];
        var innerDoc = ckeditorFrame.contentDocument;
        var innerDocTextAreaHeight = $(innerDoc.body).height();
        console.log(innerDocTextAreaHeight);
      });
    });


    jQuery.validator.addMethod("lettersonly", function (value, element) {
      return this.optional(element) || /^[a-z ]+$/i.test(value);
    }, "Letters only please");
    $(function () {
      // check value is empty remove valid class
      $('*[value=""]').removeClass('is-valid');
      //jquery Form validation
      $('#dataForm').validate({
        rules: {
          category_user_name: {
            required: true,
            lettersonly: true
          },
          sort_number: {
            required: true,
            digits: true
          },
          upload_profile: {
            required: true,
            extension: "jpg|jpeg",

          }
        },


        messages: {
          category_user_name: {
            required: "Please enter a Category Name"

          },
          owner_name: {
            required: "Please enter an Owner Name"
          },
          sort_number: {
            required: "Please enter a Sort Number"
          },
          upload_profile: {
            required: "Please Upload Category Image",
            extension: "Please select image format must be .jpg, .jpeg or .png",

          }
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-item').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }
      });
    });



    // Check all fields on submit
    document.addEventListener('submit', function (event) {

      // Only run on forms flagged for validation
      if (!event.target.classList.contains('validate')) return;

      // Get all of the form elements
      var fields = event.target.elements;

      // Validate each field
      // Store the first field with an error to a variable so we can bring it into focus later
      var error, hasErrors;
      for (var i = 0; i < fields.length; i++) {
        error = hasError(fields[i]);
        if (error) {
          showError(fields[i], error);
          if (!hasErrors) {
            hasErrors = fields[i];
          }
        }
      }

      // If there are errrors, don't submit form and focus on first element with error
      if (hasErrors) {
        event.preventDefault();
        hasErrors.focus();
      }

      // Otherwise, let the form submit normally
      // You could also bolt in an Ajax form submit process here

    }, false);
  </script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

@append