@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">दर्ता गर्दा लाग्ने दस्तुर भुक्तानी</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">दर्ता गर्दा लाग्ने दस्तुर भुक्तानी</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">
            <table class="table align-middle">
              <thead>
                <tr class="bg-transparent">
                  <th>निवेदकको नाम</th>
                  <th> भुक्तानी गरिएको रकम </th>
                  <th>रसिद/भौचर नं.</th>
                  <th>रसिद/भौचर को प्रतिलिपि</th>
                </tr>
              </thead>
              <tbody>
                <td>{{$memberInfo->nameeng}}</td>
                <td> {{$memberInfo->reg_payment_amount}} </td>
                <td>{{$memberInfo->reg_voucher_no}} </td>
                <td>
                  @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
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <br />
      <br />

      <h3>Registration Payment Form</h3>

      <form action="{{make_route('member.save-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="{{ payment_by_level($memberInfo->level->id) }}" required autocomplete="off" placeholder="{{payment_by_level($memberInfo->level->id)}}">
            @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="{{ old('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> </label>
            <input id="reg_voucher_file" type="file" class="form-control @error('reg_voucher_file') is-invalid @enderror" name="reg_voucher_file" value="{{ old('reg_voucher_file') }}" required 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">Save</button>
          </div>
        </center>
      </form>
      <!-- end form -->


      @include('components.bank-details')

      <!-- 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