@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">Membership Renewal</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">Membership Renewal</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>Members Name</th>
                  <th> Date of Birth </th>
                  <th>Father Name</th>
                  <th>Mother Name</th>
                  <th>Level</th>
                  <th>Specialization</th>
                </tr>
              </thead>
              <tbody>
                <td>{{$memberInfo->nameeng}}</td>
                <td> {{$memberInfo->dob}} </td>
                <td>{{$memberInfo->fname}} </td>
                <td>{{$memberInfo->mname}}</td>
                <td>{{$memberInfo->level->level}}</td>
                <td>{{$memberInfo->specialization->specialization}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <br />
        <br />

        <h3>Membership Renewal Form</h3>
        <form action="{{make_route('renewals.store') }}" method="POST" enctype="multipart/form-data">
          @csrf

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

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

            <div class="col-md-4 mb-3">
              <label class="form-label">Paid Amount</label>
              <input id="voucher_amount" type="text" class="form-control @error('voucher_amount') is-invalid @enderror" name="voucher_amount" value="{{ old('voucher_amount') }}" required autocomplete="off">
              @error('voucher_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="voucher_no" type="text" class="form-control @error('voucher_no') is-invalid @enderror" name="voucher_no" value="{{ old('voucher_no') }}" required autocomplete="off">
              @error('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="voucher_file" type="file" class="form-control @error('voucher_file') is-invalid @enderror" name="voucher_file" value="{{ old('voucher_file') }}" required autocomplete="off">
              @error('voucher_file')
              <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
              </span>
              @enderror
            </div>

            <div class="col-md-4 mb-3">
              <label class="form-label">Remarks</label>
              <input id="remarks" type="text" class="form-control @error('remarks') is-invalid @enderror" name="remarks" value="{{ old('remarks') }}" autocomplete="off">
              @error('remarks')
              <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 -->

        <!-- index table -->
        <table class="table align-middle datatable dt-responsive table-check nowrap" style="border-collapse: collapse; border-spacing: 0 8px; width: 100%;">
          <thead>
            <tr class="bg-transparent">
              <th style="width: 30px;">
                <div class="form-check font-size-16">
                  <input type="checkbox" name="check" class="form-check-input" id="checkAll">
                  <label class="form-check-label" for="checkAll"></label>
                </div>
              </th>
              <th style="width: 120px;">S.No.</th>
              <th>Start Date</th>
              <th>End Date</th>
              <th> Voucher No. </th>
              <th>Paid Amount</th>
              <th>Voucher File</th>
              <th>Remarks</th>
              <th>Approval</th>
              <th style="width: 90px;">Action</th>
            </tr>
          </thead>
          <tbody>

            @foreach($renewals as $sn=> $data)

            <tr>
              <td>
                <div class="form-check font-size-16">
                  <input type="checkbox" class="form-check-input">
                  <label class="form-check-label"></label>
                </div>
              </td>

              <td style="width: 120px;">{{ ++$sn }}</td>
              <td>{{$data->renew_from}}</td>
              <td> {{$data->renew_to}} </td>
              <td>{{$data->voucher_no}} </td>
              <td>{{$data->voucher_amount}}</td>
              <td>
                @if ($data->voucher_file !== '0')
                <a href="{{ storage_url($data->voucher_file) }}" target="_blank">View File</a>
                @endif
              </td>
              <td>{{$data->remarks}}</td>
              <td>
                @if($data->is_current == '1')
                active !
                @endif
              </td>

              <td>
                <div class="dropdown">
                  <button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bx bx-dots-horizontal-rounded"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="{{url('updatemembers', $data->id) }}">Edit</a></li>
                    <li><a class="dropdown-item delete-link" href="{{url('deletemember', $data->id) }}">Delete</a></li>
                  </ul>
                </div>
              </td>
            </tr>

            @endforeach



          </tbody>
        </table>

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