@extends('layouts.app')
@section('content')
 <style>
    .custom-select-option {
      border: 1px solid #dee2e6;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: border-color 0.3s;
    }
    .custom-select-option:hover {
      border-color: #0d6efd;
    }
    .custom-select-option.active {
      border-color: #0d6efd;
      background-color: #e9f5ff;
    }
    .custom-select-option .icon {
      margin-right: 10px;
    }
    .custom-select-option .text {
      flex-grow: 1;
    }
    .form-checkout label::after {
        content: ""!important;
        position: absolute;
        color: var(--primary);
    }
    table.table-bordered {
        border: 1px solid #dee2e6 !important;
    }
    
    table.table-bordered td,
    table.table-bordered th {
        border: 1px solid #dee2e6 !important;
    }
  </style>
<!-- page-title -->
<div class="tf-page-title">
    <div class="container-full">
        <div class="heading text-center">Encash</div>
    </div>
</div>
<!-- /page-title -->

<!-- page-cart -->
<section class="flat-spacing-11">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                @include('account.menu')
            </div>
            <div class="col-lg-9">
                <form method="POST" >
                    @csrf
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="form-checkout mb-2">
                                <!--<fieldset class="box fieldset mb-2">-->
                                <!--    <label>Encashment Type</label>-->
                                <!--    <div class="select-custom">-->
                                <!--        <select class="tf-select w-100" id="encashment-type" name="encashment_type" data-default="">-->
                                <!--            <option>CHEQUE</option>-->
                                <!--            <option>GCASH</option>-->
                                <!--        </select>-->
                                <!--    </div>-->
                                <!--</fieldset>-->
                                <div class="container p-0 m-0">
                                  <h5>Choose Option</h5>
                                  <p>Select your option</p>
                                
                                  <!-- Option: Cheque -->
                                  <label class="custom-select-option active" for="option-cheque" onclick="selectOption(this)">
                                    <input type="radio" name="encashment_type" id="option-cheque" value="CHEQUE" class="d-none" checked>
                                    <div class="icon">
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="#13C56B" width="27" height="27" viewBox="0 0 16 16">
                                        <path
                                          d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                        <path fill-rule="evenodd"
                                          d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z" />
                                      </svg>
                                    </div>
                                    <div class="text">
                                      <strong>Cheque</strong>
                                      <br>
                                      <small>Payout released within 24 - 48 Hours</small>
                                    </div>
                                    <div class="check-icon">
                                      <i class="bi bi-check-circle text-primary"></i>
                                    </div>
                                  </label>
                                
                                  <!-- Option: GCash -->
                                  <label class="custom-select-option" for="option-gcash" onclick="selectOption(this)">
                                    <input type="radio" name="encashment_type" id="option-gcash" value="GCASH" class="d-none">
                                    <div class="icon">
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="#136BC5" width="27" height="27" viewBox="0 0 16 16">
                                        <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
                                        <path
                                          d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z" />
                                      </svg>
                                    </div>
                                    <div class="text">
                                      <strong>GCash</strong>
                                      <br>
                                      <small>Payout release within the day</small>
                                    </div>
                                    <div class="check-icon">
                                      <i class="bi bi-check-circle text-primary d-none"></i>
                                    </div>
                                  </label>
                                </div>


                                <fieldset class="fieldset gcash-details mb-2" style="display:none">
                                    <label for="first-name">GCash Account Name</label>
                                    <input type="text" name="gcash_account_name" value="{{$gcash_details->GCashAccountName}}">
                                </fieldset>
                                <fieldset class="fieldset gcash-details mb-2" style="display:none">
                                    <label for="first-name">Gcash Account Number</label>
                                    <input type="text" name="gcash_account_number" value="{{$gcash_details->GCashNumber}}">
                                </fieldset>
                                <fieldset class="fieldset mb-2">
                                    <label for="first-name">Amount</label>
                                    <input type="number" name="amount" id="amount" value="{{$encashment_minimum}}">
                                </fieldset>
                                
                            </div>
                            <button class="tf-btn radius-3 btn-fill btn-icon animate-hover-btn justify-content-center w-100 mt-3" id="submit" {{$encashment_minimum > auth()->user()->account->current_income ? 'disabled' : '' }}>Submit</button>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card border-0">
                                <div class="card-body">
                                    <table class="table table-bordered w-100">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="d-flex justify-content-between p-2">
                                                        <div style="font-weight:bold">
                                                            Requested Amount:
                                                        </div>
                                                        <div>
                                                            ₱<span id="requested-amount">{{number_format($encashment_minimum,2)}}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    
                                                    <div class="d-flex justify-content-between p-2">
                                                        <div style="font-weight:bold">
                                                            Tax({{number_format($encashment_tax,2)}}%):
                                                        </div>
                                                        <div >
                                                            ₱<span id="tax">{{number_format($encashment_minimum * $encashment_tax / 100,2)}}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    
                                                    <div class="d-flex justify-content-between p-2">
                                                        <div style="font-weight:bold">
                                                            Processing Fee:
                                                        </div>
                                                        <div >
                                                            ₱<span id="processing-fee">{{number_format($encashment_fee,2)}}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    
                                                    <div class="d-flex justify-content-between p-2">
                                                        <div style="font-weight:bold">
                                                            Payout Amount:
                                                        </div>
                                                        <div >
                                                            ₱<span id="payout-amount">{{number_format(($encashment_minimum - ($encashment_minimum * $encashment_tax / 100)) - $encashment_fee,2)}}</span>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                        
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- page-cart -->


@endsection           
@section('page_script') 
@parent

<script>
  function selectOption(selected) {
  // Remove the 'active' class and uncheck other inputs
  document.querySelectorAll('.custom-select-option').forEach(option => {
    option.classList.remove('active');
    option.querySelector('input').checked = false;
    option.querySelector('.check-icon i').classList.add('d-none');
  });

  // Add 'active' class and check the selected input
  selected.classList.add('active');
  selected.querySelector('input').checked = true;
  selected.querySelector('.check-icon i').classList.remove('d-none');
}

</script>
<script>
    
    $(".account-menu.encashments").addClass('active')
    var minimum_encashment          = {{$encashment_minimum}}
    var fee                         = {{$encashment_fee}}
    var tax                         = {{$encashment_tax}}
    var current_income              = {{auth()->user()->account->current_income}}
    $("#amount").change(function(){
        let entered_amount          = $(this).val();
        if(entered_amount > current_income || entered_amount < minimum_encashment){
            $("#submit").attr('disabled',1)
        }
        else{
            
            $("#submit").removeAttr('disabled')
        }
        $("#requested-amount").html(Number(entered_amount).toLocaleString(undefined,{
            minimumFractionDigits : 2,
            maximumFractionDigits : 2
            
        }))
        $("#tax").html(Number(entered_amount * tax / 100).toLocaleString(undefined,{
            minimumFractionDigits : 2,
            maximumFractionDigits : 2
            
        }))
        $("#payout-amount").html(Number((entered_amount - entered_amount * tax / 100) - fee).toLocaleString(undefined,{
            minimumFractionDigits : 2,
            maximumFractionDigits : 2
            
        }))
    })
    $("#encashment-type").change(function(){
        if($(this).val() == 'GCASH'){
            $(".gcash-details").show()
        } 
        else{
            
            $(".gcash-details").hide()
        }
    });
</script>
@endsection                                  
<!-- App js -->