@extends('new_layouts.app')
@section('content')
<style>
  select {
    border: 0;
  }
.amount-input{
        font-size: 38px;
    color: #cbc6c6;
}
  .payamount.btn {
    width: 48%;
    padding: 13px 1px !important;
  }
header .osahan-header{
        display:none!important;
    }

    </style>
    <div class="notification d-flex flex-column vh-100">
<div class="d-flex  main-head align-items-center justify-content-between mb-auto p-3  shadow-lg osahan-header">
            <a href="javascript: history.go(-1)" class="text-white icon back-arrow">
            <img width="12" height="12" src="https://img.icons8.com/ios-filled/50/FFFFFF/back.png" alt="back"></a>
            <h6 class=" w-100 text-center fw-bold text-white">Withdraw Cash</h6>
          
         </div>
<div class="vh-100 my-auto overflow-auto body-fix-osahan-footer ">
  <div class="home d-flex flex-column vh-100 container addcash mb-5">


    <div class="container mt20">
      <div class="bg-grey rounded-3 p-3 text-center">

<p class="mt-3 p-0 mb-0 amount-input">₹ {{Auth::user()->wallet}}</p>
        <!--<input type="number" class="mt-3 amount-input" placeholder="₹ 0.00"  style="    font-size: 25px;" pattern="\d{10}">-->
        <div class=" text-white mb-2 " style="    font-size: 25px;" for="lname">Total Balance</div>
        <p class="greenbtn mt-4 mb-3 ">
          100% safe & Secure
        </p>
      </div>

      <form action="{{route('withdrawalStore')}}" class=" mb-5 pb-5" method="Post">
        @csrf
        <select class="w-100 bg-grey rounded-3 p-3 mt-2 text-white rounded-4 mb-3" aria-label="Default select example" name="payment_type" id="payment_type" onchange="paymentType();" required="">
          <option value="bank">Bank</option>
          <option value="upi">Upi</option>
        </select>
        <div class="mb-3">
          <label for="exampleFormControlName" class="f f-10 orm-label mb-1 text-white">Enter the Point</label>
          <div class="input-group  bg-grey rounded-3 py-1" id="exampleFormControlName">

            <input type="number" class="form-control  rounded-0 border-0 px-0 bg-grey" pattern="\d{10}" placeholder="00" aria-label="T₹ 00" aria-describedby="amount" name="amount" required>
          </div>
        </div>
        <div id="upidetail" style="display:none;">
        <div class="mb-3">
          <label for="upilable" class="f f-10 orm-label mb-1 text-white">Upi</label>
          <div class="input-group  bg-grey rounded-3 py-1" id="upilable">
            <input type="text" class="form-control  rounded-0 border-0 px-0" id="upi" name="upi">
          </div>
        </div>
        </div>
       
        <div id="bankdetail">
        <div class="mb-3">
          <label for="exampleFormControlName" class="f f-10 orm-label mb-1 text-white">Bank account number</label>
          <div class="input-group  bg-grey rounded-3 py-1" id="exampleFormControlName">

            <input type="number" class="form-control bg-grey rounded-0 border-0 px-0" placeholder="xxxx-xxxx-xxxx-xxxx" pattern="\d{10}" aria-label="Bank account number" aria-describedby="account_no" name="account_no" id="account_no" required="">
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleFormControlName1" class=" f-10 form-label mb-1  text-white">Confirm bank account number</label>
          <div class="input-group  bg-grey rounded-3 py-1" id="exampleFormControlName1">

            <input type="number" class="form-control bg-grey rounded-0 border-0 px-0" placeholder="xxxx-xxxx-xxxx-xxxx" aria-describedby="c_account_no" id="c_account_no" name="c_account_no" required="">
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleFormControlNumber" class="f-10 form-label mb-1  text-white">Name</label>
          <div class="input-group bg-grey rounded-3 py-1" id="exampleFormControlNumber">

            <input type="text" class="form-control bg-transparent rounded-0 border-0 px-0" placeholder="name" aria-label="Type your name"  name="name" required="" id="name">
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleFormControlNumber" class="f-10 form-label mb-1  text-white">Mobile Number</label>
          <div class="input-group bg-grey rounded-3 py-1" id="exampleFormControlNumber">

            <input type="text" class="form-control bg-transparent rounded-0 border-0 px-0" placeholder="Mobile Number" maxlength="10" pattern="[1-9]{1}[0-9]{9}" aria-label="Type your Mobile Number" aria-describedby="Mobile Number" name="mobile_no" pattern="\d{10}" required="" id="mobile_no">
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleFormControlNumber" class="f-10 form-label mb-2  text-white">Bank Name</label>
          <div class="input-group bg-grey rounded-3 py-1" id="exampleFormControlNumber">

            <input type="text" class="form-control bg-transparent rounded-0 border-0 px-0" placeholder="Bank Name" aria-label="Type your Bank Name" aria-describedby="Bank Name" name="bank_name" id="bank_name" required="">
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleFormControlNumber" class="f-10 form-label mb-2  text-white">Branch Name</label>
          <div class="input-group bg-grey rounded-3 py-1" id="exampleFormControlNumber">

            <input type="text" class="form-control bg-transparent rounded-0 border-0 px-0" placeholder="Branch Name" aria-label="Type your Branch Name" aria-describedby="Branch Name" id="branch_name" name="branch_name" required="">
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleFormControlNumber" class="f-10 form-label mb-2  text-white">IFSC Code</label>
          <div class="input-group bg-grey rounded-3 py-1" id="exampleFormControlNumber">

            <input type="text" class="form-control bg-transparent rounded-0 border-0 px-0" placeholder="UMB141" aria-label="Type your IFSC Code" aria-describedby="IFSC Code" name="IFSC_code" id="IFSC_code" required="">
          </div>
        </div>
</div>
        <div class="d-flex mb-3">
          <button onclick="" class=" payamount btn yellow-common-btn text-dark sm-btn mt-1 m-auto d-block">WITHDRAW </button>
          <button onclick="" class=" payamount btn outline-common-btn text-white sm-btn mt-1 m-auto d-block"><a href="{{route('deposithistory')}}" class="text-white">WITHDRAW HISTORY </a></button>
        </div>
        <p class="text-white pb-1 m-0 f-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos sunt quam similique dolorem voluptatem aut veniam officia, iste, blanditiis recusandae porro, unde non quo? Cum aut quidem eum sapiente? Reprehenderit in molestiae deleniti facilis.</p>
        <a href="" aria-label="bdyhh" class="f-10">Note:
          m dolor sit amet consectetur adipisicing elit. Quos sunt quam similique dolorem voluptatem aut veniam officia, iste, blanditiis
        </a>
      </form>
    </div>


  </div>


</div>
</div>
<script>
  function paymentType(){
  //  alert($('#payment_type').val());
   var value = $('#payment_type').val();
   if(value == 'upi'){
    $('#bankdetail').hide();
    $('#upidetail').show();
    $('#upi').attr('required', true);
    var status = false;
   }else{
    var status = true;
    $('#upi').attr('required', false);
    $('#upidetail').hide();
    $('#bankdetail').show();
   }

   $('#account_no').attr('required', status);
   $('#c_account_no').attr('required', status);
   $('#mobile_no').attr('required', status);
   $('#bank_name').attr('required', status);
   $('#branch_name').attr('required', status);
   $('#IFSC_code').attr('required', status);

}
</script>
@endsection