@extends('layouts.app')

@section('content')
<!-- start page title -->
<div class="row">
  <div class="col-12">
    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
      <h4 class="mb-sm-0 font-size-18">Registration Payment Edit</h4>

      <div class="page-title-right">
        <ol class="breadcrumb m-0">
          <!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Invoices</a></li> -->
          <li class="breadcrumb-item active">Registration Payment Edit</li>
        </ol>
      </div>

    </div>
  </div>
</div>
<!-- end page title -->

<div class="row">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-sm">
            <div class="mb-4">
            </div>
          </div>
        </div>
        <!-- end row -->

        <div class="row">
          <div class="col">
            <table class="table align-middle">
              <thead>
                <tr class="bg-transparent">
                  <th>Registration Number</th>
                  <th>Members Name</th>
                  <th> Date of Birth </th>
                  <th>Gender</th>
                </tr>
              </thead>
              <tbody>
                <td>{{$memberInfo->reg_no}}</td>
                <td> {{$memberInfo->nameeng}} </td>
                <td>{{$memberInfo->dob}} </td>
                <td>{{$memberInfo->gender}} </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <br />
        <br />

        <center>
          <h3>Registration Payment Form</h3>
        </center>
        <br />
        <form action="{{make_route('member.update-payment') }}" method="POST" enctype="multipart/form-data">
          @csrf

          <div class="row">
            <div class="col-md-4 mb-3">
              <label class="form-label">Paid Amount</label>
              <input id="reg_payment_amount" type="text" class="form-control @error('reg_payment_amount') is-invalid @enderror" name="reg_payment_amount" value="{{ $memberInfo->reg_payment_amount }}" required autocomplete="off">
              @error('reg_payment_amount')
              <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
              </span>
              @enderror
            </div>

            <div class="col-md-4 mb-3">
              <label class="form-label">Voucher Number</label>
              <input id="reg_voucher_no" type="text" class="form-control @error('reg_voucher_no') is-invalid @enderror" name="reg_voucher_no" value="{{ $memberInfo->reg_voucher_no }}" required autocomplete="off">
              @error('reg_voucher_no')
              <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
              </span>
              @enderror
            </div>

            <div class="col-md-4 mb-3">
              <label class="form-label">Voucher Upload <i style="color: red;"> *pdf/jpg/jepg/png</i>
                @if ($memberInfo->reg_voucher_file !== '0' && !empty($memberInfo->reg_voucher_file ))
                <a href="{{ storage_url($memberInfo->reg_voucher_file ) }}" target="_blank"> (View File) </a>
                @endif
              </label>
              <input id="reg_voucher_file" type="file" class="form-control @error('reg_voucher_file') is-invalid @enderror" name="reg_voucher_file" value="{{ $memberInfo->reg_voucher_file }}" autocomplete="off">
              @error('reg_voucher_file')
              <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
              </span>
              @enderror
            </div>


          </div>

          <center>
            <div class="mb-3 col-sm-4">
              <button class="btn btn-primary w-100 waves-effect waves-light" type="submit">Update Payment</button>
            </div>
          </center>
        </form>
        <!-- end form -->



        <!-- end table responsive -->
      </div>
      <!-- end card body -->
    </div>
    <!-- end card -->
  </div>
  <!-- end col -->
</div>
<!-- end row -->

<script>
  // Wait for the document to be fully loaded
  document.addEventListener('DOMContentLoaded', function() {
    // Find all elements with class 'delete-link'
    var deleteLinks = document.querySelectorAll('.delete-link');

    // Attach event listener to each delete link
    deleteLinks.forEach(function(link) {
      link.addEventListener('click', function(event) {
        // Prevent the default action of the link
        event.preventDefault();

        // Display a confirmation dialog
        var confirmDelete = confirm("Do you really want to delete this?");

        // If user confirms deletion, proceed with the deletion action
        if (confirmDelete) {
          // Redirect to the delete URL
          window.location.href = link.href;
        }
      });
    });
  });
</script>

@endsection