@extends('admin.layout')

@section('content')
<style>
  .bankcard.shadow-sm.p-4 {
    max-width: 500px;
    height: auto;
    background: #fff;
    border-radius: 10px;
  }

  .bank-history {
    width: 100%;
    margin-top: 20px;
  }


  .btn {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
  }
</style>

<div class="row mb-3">
  <div class="col d-flex justify-content-between">
    <h4 class="page-top-heading">User Bank Details</h4>
    {{-- <a href="{{ route('admin.edit_bank_history') }}" class="btn btn-primary py-2 px-4">History</a> --}}
  </div>
</div>

<div class="row d-flex justify-content-center">
  <div class="bankcard shadow-sm p-4">

    <!-- Add Bank Form -->
    <form action="{{ route('edit_bank_form') }}" method="POST" enctype="multipart/form-data" id="editForm">
      @csrf
      <div class="my-4">
        <label for="accountHolderName" class="form-label fw-bold">Account Holder Name</label>
        <input type="text" id="accountHolderName" name="acc_holder_name" value="{{ $bank_details->acc_holder_name ?? '' }}"
          class="form-control" placeholder="Enter Account Holder Name" />

        <input type="hidden" name="user_id" value="{{ $user_details->user_id }}" class="form-control" />
      </div>

      <div class="my-4">
        <label for="bankName" class="form-label fw-bold">Bank Name</label>
        <input type="text" id="bankName" class="form-control" name="bank_name"
          value="{{ $bank_details->bank_name ?? ''  }}" placeholder="Enter Bank Name" />
      </div>

      <div class="my-4">
        <label for="accountNumber" class="form-label fw-bold">Account Number</label>
        <input type="text" id="accountNumber" class="form-control" name="acc_no" value="{{ $bank_details->acc_no ?? ''  }}"
          placeholder="Enter Account Number" />
      </div>

      <div class="my-4">
        <label for="ifscCode" class="form-label fw-bold">IFSC Code</label>
        <input type="text" id="ifscCode" class="form-control" name="ifsc" value="{{ $bank_details->ifsc ?? ''  }}"
          placeholder="Enter IFSC Code" />
      </div>

      <div class="my-4">
        <label for="branchName" class="form-label fw-bold">Branch Name</label>
        <input type="text" id="branchName" class="form-control" name="branch_name"
          value="{{ $bank_details->branch_name ?? '' }}" placeholder="Enter Branch Name" />
      </div>
      <div class="my-4">
        <label for="branchName" class="form-label fw-bold">PAN Card Number</label>
        <input type="text" id="pan_number" class="form-control" name="pan_number"
          value="{{ $user_details->pan_number ?? '' }}" placeholder="Enter Branch Name" />
      </div>

      <div class="my-4">
        <label for="branchName" class="form-label fw-bold">PAN Card Image</label>
        <input type="file" id="pan_number" class="form-control" name="pan_card_image"
          onchange="previewImage(event)" />
        <div class="mt-3">
          <img id="pan_preview"
            src="{{ asset($user_details->pan_image ?? '') }}"
            alt="PAN Card Image"
            style="width: 150px; height: 150px; object-fit: cover; border-radius: 10px; display: {{ isset($user_details->pan_image) ? 'block' : 'none' }};">
        </div>
      </div>

      {{-- <button type="submit" class="btn btn-primary w-100 p-3">Submit</button> --}}

      <button type="button" class="btn btn-primary w-100 p-3" data-bs-toggle="modal"
        data-bs-target="#confirmationModal">Submit</button>
    </form>

  </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body text-center p-5">
        <h4 class="mb-3 fw-bold">Are you sure?</h4>
        <hr>
        <h6 class="mb-4 fw-regular mt-3">Are you sure you want to submit bank details?</h6>
        <div class="d-flex justify-content-center gap-3 mt-4">
          <button type="button" class="btn btn-outline-primary py-3 w-50" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary py-3 w-50" id="submitButton"
            onclick="disableButtonnn(this)">Yes, Proceed</button>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  function disableButtonnn(button) {
    button.disabled = true;
    button.innerText = 'Processing...';
    document.getElementById('editForm').submit();
  }
</script>
<script>
  function previewImage(event) {
    let input = event.target;
    let reader = new FileReader();
    reader.onload = function() {
      let img = document.getElementById('pan_preview');
      img.src = reader.result;
      img.style.display = 'block';
    };
    reader.readAsDataURL(input.files[0]);
  }
</script>
@endsection