<style>
  .error {
    color: red;
  }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" integrity="sha512-0V10q+b1Iumz67sVDL8LPFZEEavo6H/nBSyghr7mm9JEQkOAm91HNoZQRvQdjennBb/oEuW+8oZHVpIKq+d25g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js" integrity="sha512-zP5W8791v1A6FToy+viyoyUUyjCzx+4K8XZCKzW28AnCoepPNIXecxh9mvGuy3Rt78OzEsU+VCvcObwAMvBAww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- ! Main -->
<main class="main users job-role-page" id="">
  <div class="container">
    <!-- <h2 class="main-title">Job Role</h2> -->
    <div class="row mrg15B justify-content-between">
      <div class="col-auto">
        <h2 class="app-page-title mb-0">Add New Return in Vehicle</h2> 
      </div>
      <div class="col-auto">
        <div class="page-utilities">
          <div class="row">

            <div class="col-auto">
              <a class="btn app-btn-primary" href="<?= base_url('admin/rentIn') ?>">
                VIEW ALL Return in Vehicle
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">

        <div class="white-block">
          <form class="row" method="post" id="rentin_submit_form" enctype="multipart/form-data" autocomplete="off">
            <input type="hidden" id="car_id" name="car_id" value="">
            <input type="hidden" class="form-control" id="rentout_odometer_reading" name="rentout_odometer_reading" value="">
            <div class="col-lg-8 col-md-12 offset-2">
              <div class="form-group">
                <label for="" class="">Driver <span class="asterisk"> *</span></label>
                <select class="form-control select2" id="driver_id" name="driver_id" style="width: 100%;" required>
                  <option selected="selected">Select Driver </option>
                  <?php foreach ($drivers as $driver) { ?>
                    <option value="<?= $driver['driver_id'] ?>"><?= $driver['first_name'] . ' ' . $driver['middle_name'] . ' ' . $driver['last_name'].' - '.$driver['mobile'].' - '.$driver['car_no'] ?></option>
                  <?php } ?>
                </select>
              </div>
            </div>
            <div class="col-md-12">
              <hr>
              <div class="row">

                <div class="col-lg-4 col-md-12 ">
                  <div class="form-group">
                    <label for="" class="">Rent out Date <span class="asterisk"> *</span></label>
                    <div class="Datepicker_sec">
                      <input type="text" class="form-control" id="rent_out_date" name="rent_out_date" value="" required="required" placeholder="29/09/2022" readonly>
                    </div>

                  </div>
                </div>
                <div class="col-lg-4 col-md-12">
                  <div class="form-group">
                    <label for="" class="mrg20R">Rent out No. <span class="asterisk"> *</span></label>
                    <input type="text" class="form-control" id="rent_out_no" name="rent_out_no" value="365412" readonly>
                  </div>
                </div>
                <div class="col-lg-1 col-md-12">
                  <div class="form-group">
                    <img src="assets/img/car-img.jpg" alt="">
                  </div>
                </div>
                <div class="col-lg-3 col-md-12">
                  <div class="form-group">
                    <label for="" class="mrg20R">Car No. <span class="asterisk"> *</span></label>
                    <input type="text" class="form-control" id="car_no" name="car_no" value="" readonly>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <hr>
            </div>

            <div class="col-lg-6 col-md-12">
              <div class="form-group">
                <label for="" class="mrg20R">Odometer Reading <span class="asterisk"> *</span></label>
                <input type="text" class="form-control allow_decimal" id="odometer_reading" name="odometer_reading" placeholder="Odometer Reading">
              </div>
            </div>
            <div class="col-lg-6 col-md-12">
              <div class="form-group">

                <label for="" class="mrg20R mrg40T">Damage</label>
                <div class="form-check form-check-inline damage_yes">
                  <input class="form-check-input" type="radio" name="damage" id="damage1" value="Yes">
                  <label class="form-check-label" for="inlineRadio1">Yes</label>
                </div>
                <div class="form-check form-check-inline damage_no">
                  <input class="form-check-input" type="radio" name="damage" id="damage2" value="No" checked>
                  <label class="form-check-label" for="inlineRadio2">No</label>
                </div>
              </div>
            </div>
            <div class="col-lg-12 Damage_yes_sec">
              <div class="row">
                <div class="col-lg-6 col-md-12 ">
                  <div class="form-group">
                    <label for="" class="">Damage Amount <span class="asterisk"></span></label>
                    <div class="input-group mb-2">
                      <div class="input-group-prepend">
                        <div class="input-group-text">$</div>
                      </div>
                      <input type="text" class="form-control allow_decimal" id="damage_amount" name="damage_amount" placeholder="0.00">
                    </div>
                  </div>
                </div>

                <div class="col-lg-6 col-md-12">
                  <div class="form-group">
                    <label for="" class="mrg20R">Damage Image <span class="asterisk"> </span></label>
                    <input type="file" class="form-control" id="damage_img" name="damage_img" value="">
                  </div>
                </div>

              </div>
              <hr>
            </div>

            <div class="col-lg-6 col-md-12">
              <div class="form-group">
                <label for="" class="mrg20R">Fuel </label>
                <div class="input-group ">
                  <div class="input-group-prepend">
                    <div class="input-group-text">$</div>
                  </div>
                  <input type="text" class="form-control allow_decimal" id="fuel" name="fuel" placeholder="0.00">
                </div>
              </div>
            </div>

            <div class="col-lg-12 col-md-12">
              <hr>
              <div class="form-group">

                <label for="" class="mrg20R">Bond Refund Request</label>
                <div class="form-check form-check-inline request_yes">
                  <input class="form-check-input" type="radio" name="bond_refund_request" id="bond_refund_request2" value="Yes">
                  <label class="form-check-label" for="inlineRadio12">Yes</label>
                </div>
                <div class="form-check form-check-inline request_no">
                  <input class="form-check-input" type="radio" name="bond_refund_request" id="bond_refund_request2" value="No" checked>
                  <label class="form-check-label" for="inlineRadio22">No</label>
                </div>
              </div>
            </div>

            <!-- <div class="col-lg-6 col-md-12 request_sec ">
              <div class="form-group">
                <label for="" class="">Bond Refund date <span class="asterisk"> </span></label>
                <div class="Datepicker_sec">
                  <input type="text" class="form-control datepicker" id="bond_refund_date" name="bond_refund_date" value="<?=date('d/m/Y')?>" required="required">
                </div>

              </div>
            </div> -->
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="">Total Bond Amount <span class="asterisk"> *</span></label>

                <div class="input-group mb-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">$</div>
                  </div>
                  <input type="text" class="form-control" id="bond_refund_amount" name="bond_refund_amount" placeholder="0.00" readonly>
                  <input type="hidden" class="form-control" id="bond_refund_amount_hid" name="bond_refund_amount_hid" placeholder="0.00" readonly>
                </div>
              </div>
            </div>
            <!-- <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="">Bond Refund Amount <span class="asterisk"></span></label>
                <div class="input-group mb-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">$</div>
                  </div>
                  <input type="text" class="form-control allow_decimal" id="bond_refund_amount" name="bond_refund_amount" placeholder="0.00">
                </div>
              </div>
            </div> -->
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="mrg20R">Refund Type <span class="asterisk"> *</span></label>
                <select name="refund_type" id="refund_type" class="form-control">
                  <option value="" selected disabled>Select Refund Type</option>
                  <option value="FULL">Full</option>
                  <option value="PARTIAL">Partial</option>
                </select>
              </div>
            </div>
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="mrg20R">Amount Want to Refund</label>
                <div class="input-group mb-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">$</div>
                  </div>
                  <input type="text" class="form-control allow_decimal" id="amount_want_to_refund" name="amount_want_to_refund" placeholder="0.00">
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="mrg20R">Payment Method <span class="asterisk"> *</span></label>
                <select name="bond_payment_method" id="bond_payment_method" class="form-control" required>
                  <option value="" selected disabled>Select Payment Method</option>
                  <option value="Cash">Cash </option>
                  <option value="Bank Transfer">Bank Transfer </option>
                  <option value="EFT POS">EFT POS</option>

                </select>
              </div>
            </div>
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="">Notice Date <span class="asterisk"> *</span></label>
                <div class="Datepicker_sec">
                  <input type="text" class="form-control datepicker" id="notice_date" name="notice_date" value="" required="required" placeholder="DD/MM/YYYY">
                </div>

              </div>
            </div>
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="">Bond Refund Due Date <span class="asterisk"> *</span></label>
                <div class="Datepicker_sec">
                  <input type="text" class="form-control datepicker" id="bond_refund_due_date" name="bond_refund_due_date" value="" required="required" placeholder="DD/MM/YYYY">
                </div>

              </div>
            </div>
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="mrg20R">Reference Number</label>
                <input type="text" class="form-control" id="bond_reference_no" name="bond_reference_no" value="" placeholder="Reference Number">
              </div>
            </div>
            <div class="col-lg-6 col-md-12 request_sec">
              <div class="form-group">
                <label for="" class="">Remarks<span class="asterisk"> *</span></label>
                <div class="">
                    <textarea name="remarks" id="remarks" cols="" rows="2" class="form-control" placeholder="Enter your Notes" required="required"></textarea>
                </div>

              </div>
            </div>
            <div class="col-md-12">
              <hr>
              <h3>Upload 6 pictures of car being returned</h3>
              <hr>
            </div>

            <div class="col-lg-4 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Front <span class="asterisk"> *</span></label>
                <input type="file" class="form-control" id="front_img" name="front_img" placeholder="" required>
              </div>
            </div>
            <div class="col-lg-4 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Rear <span class="asterisk"> *</span></label>
                <input type="file" class="form-control" id="rear_img" name="rear_img" placeholder="" required>
              </div>
            </div>
            <div class="col-lg-4 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Driver Side <span class="asterisk"> *</span></label>
                <input type="file" class="form-control" id="driver_side_img" name="driver_side_img" placeholder="" required>
              </div>
            </div>
            <div class="col-lg-4 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Passenger Side <span class="asterisk"> *</span></label>
                <input type="file" class="form-control" id="passenger_side_img" name="passenger_side_img" placeholder="" required>
              </div>
            </div>
            <div class="col-lg-4 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Odometer <span class="asterisk"> *</span></label>
                <input type="file" class="form-control" id="odometer_img" name="odometer_img" placeholder="" required>
              </div>
            </div>
            <div class="col-lg-4 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Jack & Tire <span class="asterisk"> *</span></label>
                <input type="file" class="form-control" id="fuel_guage_img" name="fuel_guage_img" placeholder="" required>
              </div>
            </div>

            <div class="col-md-12">
              <hr>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label for="" class="">Notes <span class="asterisk">*</span></label>
                <textarea name="notes" id="notes" cols="" rows="4" class="form-control" placeholder="Enter your Notes" required></textarea>
              </div>
            </div>

            <div class="col-md-12">
              <div class="form-group">
                <button type="submit" id="submit_btn" name="submit_btn" class="btn btn-primary mrg15R">SUBMIT</button>
                <a class="btn btn-danger" href="<?= base_url('admin/rentIn') ?>">CANCEL</a>
              </div>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</main>

<script>
  $(function() {
    // $("#bond_refund_date").datepicker({
    //           dateFormat: 'dd/mm/yy',
    //           changeMonth: true,
    //           changeYear: true,
    //           minDate: new Date()
    //       });

    $(".datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        minDate: new Date()
    });

  });
</script>
<script>
  $(function() {
    //Initialize Select2 Elements
    $('.select2').select2()

  })
</script>
<script>
  $(document).ready(function() {

    $(".allow_decimal").on("input", function(evt) {
            var self = $(this);
            self.val(self.val().replace(/[^0-9\.]/g, ''));
            if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57)) 
            {
                evt.preventDefault();
            }
        });

    $('#driver_id').change(function() {
      var driver_id = $(this).val();

      $.ajax({
        url: '<?php echo base_url("admin/rentIn/getRentOutDetails"); ?>',
        method: 'post',
        data: {
          'driver_id': driver_id
        },
        dataType: 'json',
        success: function(response) {
          if (response.status) {
            $("#rent_out_date").val(response.rent_out_data.rent_out_date);
            $("#rent_out_no").val(response.rent_out_data.rent_out_no);
            $("#car_no").val(response.rent_out_data.car_no);
            $("#car_id").val(response.rent_out_data.car_id);
            $("#rentout_odometer_reading").val(response.rent_out_data.odometer_reading);
            $("#bond_refund_amount").val(response.actual_bond_amount);
            $("#bond_refund_amount_hid").val(response.actual_bond_amount);
            

          } else {
            alert("Insert Driver Rent Out First");
          }
        }
      })
    })


    $("#damage_amount,#fuel").keyup(function () {
      
      cal_actual_bond_refund_amount();
    })

    function cal_actual_bond_refund_amount(){
      var damage_amount = $("#damage_amount").val();
      var fuel = $("#fuel").val();
      var bond_refund_amount=$("#bond_refund_amount_hid").val();

      //alert(Number(bond_refund_amount));
      var actual_bond_refund_amount = Number(bond_refund_amount) - Number(damage_amount) - Number(fuel);
      $("#bond_refund_amount").val(actual_bond_refund_amount);
    }



    $('#rentin_submit_form').validate({

      errorPlacement: function(error, element) {

        if (element.attr("type") == "checkbox") {
          $(element).parents('.form-group').append(error);
        } else {
          $(element).parents('.form-group').append(error);
        }

      },
      submitHandler: function(form) {
        $("#submit_btn").attr('disabled', true);
        $("#loader_div").show();
        $.ajax({
          url: "<?= base_url('admin/rentIn/submitrentin') ?>",
          type: form.method,
          data: new FormData(form),
          processData: false,
          contentType: false,
          async: false,
          success: function(response) {
            $("#loader_div").hide();
            var response = JSON.parse(response);
            if (response.status) {

              $.confirm({
                type: 'green',
                title: 'Success!',
                content: response.msg,
                buttons: {

                  OK: {
                    btnClass: 'btn-default',
                    action: function() {

                      window.location.href = "<?= base_url('admin/rentIn') ?>";
                    }

                  }
                }

              })

            } else {

              $("#submit_btn").prop('disabled', false);

              $.alert({
                title: 'Alert!',
                content: response.msg,
                type: 'red',
                typeAnimated: true,
              })
            }
          },
          error: function(xhr, status, error) {
            $("#submit_btn").prop('disabled', false);
            $("#loader_div").hide();
            $.alert({
              title: 'Alert!',
              content: 'Something went wrong...',
              type: 'red',
              typeAnimated: true,
            })
          }
        });
      }
    });

    $(".damage_yes").click(function() {
      $(".Damage_yes_sec").show();
    });
    $(".damage_no").click(function() {
      $(".Damage_yes_sec").hide();
      $("#damage_amount").val(0);
      cal_actual_bond_refund_amount();
    });

    $(".request_yes").click(function() {
      $(".request_sec").show();
    });
    $(".request_no").click(function() {
      $(".request_sec").hide();
    });

    $('#refund_type').change(function() {

      var refund_type = $(this).val();
      var bond_refund_amount = $("#bond_refund_amount").val();

      if(refund_type == 'FULL'){
        $("#amount_want_to_refund").val(bond_refund_amount);
        $("#amount_want_to_refund").prop('readonly', true);
      }else{
        $("#amount_want_to_refund").val(''); 
        $("#amount_want_to_refund").prop('readonly', false);
      }

    });

    $('#amount_want_to_refund').keyup(function(){

    var amount_want_to_refund = $(this).val();
    var bond_refund_amount = $("#bond_refund_amount").val();

      if(Number(amount_want_to_refund) > Number(bond_refund_amount)){
        $("#amount_want_to_refund").val('');
        $.alert({
            title: 'Alert!',
            content: 'Refund amonut not be greater that actual bond amount',
            type: 'red',
            typeAnimated: true,
          })
      }

    })

  });
</script>