@extends('layouts.app')

@section('title', 'Banks')

@section('content')	
	<!--start page wrapper -->
	<div class="page-wrapper">
		<div class="page-content">
			<!--breadcrumb-->
			<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
				<div class="ps-3">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb mb-0 p-0">
							<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i></a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">Manage member savings</li>
						</ol>
					</nav>
				</div>
				<div class="ms-auto">
					
				</div>
			</div>
			<!--end breadcrumb-->
			@if ($message = Session::get('success'))
					<div class="alert alert-success">
						<p>{{ $message }}</p>
					</div>
				@endif
            <div class="p-4 border rounded">
                <div class="" aria-current="page"><h3>Mass Upload</h3>
                    <p>Download a sample csv, fill in the details of the member savings then upload.</p>
					<h5 style="color: red">Please Note:</h5>
					<p>The file name should include the date uploaded e.g. (savings_31_02_2000)</p>
					<p>For backdated records, toggle on the button below</p>
                </div>

                <a href="{{route('accounts.savings-csv')}}" class="btn btn-success">Download CSV</a>
                <div class="csv">
                <form action="{{route('accounts.savingcsv')}}" method="POST" enctype="multipart/form-data">
                @csrf
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="backdateToggle">
                        <label class="form-check-label" for="backdateToggle">Backdate</label>
                    </div>
                  
                  <div id="dateInputContainer" style="display: none;">
					<div class="row">
						<div class="col-md-1">
						<label for="dateInput">Select Date:</label>
						</div>
						<div class="col-md-6">               
							<input type="date" class="form-control" id="dateInput" name="dateInput">
						</div>
                  	</div>
                  </div>
                 
                <div class="row">
                    <div class="col-md-7">
                        <input type="file" name="csv_file" class="form-control" id="csv">
						@error('csv_file')
						<span class="text-danger">{{ $message }}</span>
						@enderror
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-success" type="submit">Upload CSV</button>
                    </div>
                </div>
                
               
                </form>
            </div>
            </div>
            <br>
			<div class="card border-top border-0 border-4 border-primary">
				<div class="card-body">
					
					<hr/>
					<div class="table-responsive">
						<table id="example" class="table table-striped table-bordered" style="width:100%">
							<thead>
								<tr>
                                    <th>Member Number</th>
									<th>Member Name</th>
                                    <th>Account Type</th>	
                                    <th>Account Balance</th>								
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
							@foreach($savings as $saving)
								<tr>
									<td>{{ $saving->account->user->member_number }}</td>
									<td>{{ $saving->account->user->fname }} {{ $saving->account->user->lname }}</td>
									<td>{{ $saving->account->accountType->name }}</td>								
									<td>{{ $saving->account_balance }}</td>
									
									<td>
										<div class="dropdown">
                                            <div class="cursor-pointer font-24 dropdown-toggle " data-bs-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                            </div>
                                            <div class="dropdown-menu dropdown-menu-end"> 
                                                <a class="dropdown-item" href="#" class="approve" data-bs-toggle="modal" data-bs-target="#show{">View</a>                                       
                                                <a class="dropdown-item" href="#" class="reject" data-bs-toggle="modal" data-bs-target="#editLoanModal">Edit</a>
                                                                                        
                                            </div>
                                        </div>
									</td>
								</tr>
							@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<!--end page wrapper -->
@endsection
	
@pushOnce('scripts')
	<script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/sweetalerts/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalerts/custom-sweetalert.js') }}"></script>
	<script>
        // Get the toggle button and date input container
        const toggle = document.getElementById('backdateToggle');
        const dateInputContainer = document.getElementById('dateInputContainer');
      
        // Add an event listener to the toggle button
        toggle.addEventListener('change', function() {
          if (toggle.checked) {
            dateInputContainer.style.display = 'block';
          } else {
            dateInputContainer.style.display = 'none';
          }
        });
      </script>
      
@endpushOnce