@extends('layouts.app')

@section('content')

	
	@if(Auth::user()->user_type == 'customer' && Auth::user()->document_verified_at == null && get_option('enable_kyc') == 'yes')
		<div class="row">
			<div class="col-lg-12">
				<div class="alert alert-danger">
					<strong><i class="mdi mdi-information-outline"></i> {{ _lang('Your account is not verified. Please submit all necessary documents') }}. <a href="{{ route('profile.document_verification') }}">{{ _lang('Submit Documents') }} </a></strong>
				</div>
			</div>
		</div>
	@endif

	<div class="row kajgs-sec">
		<div class="col-xl-12">
			<div class="card mb-4">
				<div class="card-body">
				     <img src="{{ profile_picture(Auth::user()->profile_picture) }}" alt="user-image" class="lakooi">
				     <h1 style="font-size:30px !important; font-weight:700 !important;">Hi {{ Auth::user()->name }} </h1>
				     <h1 style="font-size:18px !important; font-weight:700 !important; color:#A0C8FC !important;">Welcome to your account</h1>
					<h6 style="color:#fff !important;">{{ _lang('Account Number') }}</h6>
					<h6  style="color:#fff !important;"><b>{{ Auth::user()->account_number }}</b></h6>
				</div>
			</div>
		</div>
	</div>
	
	<style>
	    .kajgs-sec11 .col-md:first-child{
	        display:none !important;
	    }
	</style>
	
	

	
	
	
	






	
	<div class="row kajgs-sec11">
		@foreach($account_balance as $currency)
		<div class="col-md">
			<div class="card mb-4">
				<div class="card-body">
					<h6>{{ $currency->name.' '._lang('Balance') }}</h6>
					<h6 style="font-size:40px !important; font-weight:700 !important;" class="pt-1"><b>{{ decimalPlace($currency->balance, currency($currency->name)) }}</b></h6>
				</div>
			</div>
		</div>
		@endforeach
	</div>
	
	<style>
	    .task-btn{
	        border:none !important;
	    }
	</style>
	
<div class="row">
    <div class="col-lg-12">
        <div class="card mb-4">
            <div class="card-header">Recent Transactions</div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Status</th>
                                <th>Amount</th>
                                <th>Charge</th>
                                <th>Grand Total</th>
                                <th>DR/CR</th>
                                <th>Type</th>
                                <th>Method</th>
                                <th>Currency</th>
                                <th>Task Code</th> <!-- New column for Task Code Button -->
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recent_transactions as $transaction)
                            @php
                            $symbol = $transaction->dr_cr == 'dr' ? '-' : '+';
                            $class  = $transaction->dr_cr == 'dr' ? 'text-danger' : 'text-success';
                            @endphp
                            <tr data-transaction-id="{{ $transaction->id }}">
                                <td>{{ $transaction->created_at }}</td>
                                <td>
                                    {!! xss_clean(transaction_status($transaction->status)) !!}
                                </td>

                                @if($transaction->dr_cr == 'dr')
                                    <td>{{ decimalPlace(($transaction->amount - $transaction->fee), currency($transaction->currency->name)) }}</td>
                                @else
                                    <td>{{ decimalPlace(($transaction->amount + $transaction->fee), currency($transaction->currency->name)) }}</td>
                                @endif

                                <td>{{ $transaction->dr_cr == 'dr' ? '+ '.decimalPlace($transaction->fee, currency($transaction->currency->name)) : '- '.decimalPlace($transaction->fee, currency($transaction->currency->name)) }}</td>
                                <td><span class="{{ $class }}">{{ $symbol.' '.decimalPlace($transaction->amount, currency($transaction->currency->name)) }}</span></td>
                                <td>{{ strtoupper($transaction->dr_cr) }}</td>
                                <td>{{ str_replace('_',' ',$transaction->type) }}</td>
                                <td>{{ $transaction->method }}</td>
                                <td>{{ $transaction->currency->name }}</td>

                             <!-- Task Code Column -->
<td>
    @if ($transaction->task_code_accepted == 0 || $transaction->task_code_accepted == NULL)
        <!-- Show the button only if task_code_accepted is 0 or NULL -->
        <button class="badge badge-danger task-btn" type="button" 
                data-id="{{ $transaction->id }}" 
                data-toggle="modal" data-target="#taskCodeModal">
            Task Code
        </button>
    @else
        <!-- Show "Accepted" text when task_code_accepted is 1 -->
        <span>Accepted</span>
    @endif
</td>

                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Task Code Modal -->
<div class="modal fade" id="taskCodeModal" tabindex="-1" role="dialog" aria-labelledby="taskCodeModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="taskCodeModalLabel">Task Code</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="taskCodeForm" class="validate" autocomplete="off">
          <div class="alert alert-info" role="alert">
            Please contact your bank for TASK CODE.
          </div>
          <input type="hidden" id="transaction-id" name="transaction_id">
          <div class="form-group">
            <label class="control-label">ENTER TASK CODE</label>
            <input type="text" class="form-control" name="task_code" required>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-block">
              <i class="icofont-check-circled"></i> Submit
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


	<div class="row">

		<div class="col-xl-3 col-md-6 mb-4">
			<div class="card h-100 border-bottom-card" style="background:linear-gradient(230deg, #759bff, #843cf6) !important; color:#fff !important;">
				<div class="card-body">
					<div class="d-flex">
						<div class="flex-grow-1">
							<h6>{{ _lang('Active Loans') }}</h6>
							<h6 class="pt-1 mb-0"><b>{{ $loans->count() }}</b></h6>
						</div>
						<div>
							<a href="{{ route('loans.my_loans') }}" style="color:#fff !important; font-size:12px !important;"><i class="icofont-arrow-right"></i>{{ _lang('View') }}</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xl-3 col-md-6  mb-4">
			<div class="card h-100 border-bottom-card" style="background:linear-gradient(230deg, #fc5286, #fbaaa2) !important; color:#fff !important;">
				<div class="card-body">
					<div class="d-flex">
						<div class="flex-grow-1">
							<h6>{{ _lang('Payment Requests') }}</h6>
							<h6 class="pt-1 mb-0"><b>{{ $payment_request }}</b></h6>
						</div>
						<div>
							<a href="{{ route('payment_requests.index') }}" style="color:#fff !important; font-size:12px !important;"><i class="icofont-arrow-right"></i>{{ _lang('View') }}</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		

		<div class="col-xl-3 col-md-6  mb-4">
			<div class="card h-100 border-bottom-card" style="background:linear-gradient(230deg, #ffc480, #ff763b) !important; color:#fff !important;">
				<div class="card-body">
					<div class="d-flex">
						<div class="flex-grow-1">
							<h6>{{ _lang('Active Fixed Deposits') }}</h6>
							<h6 class="pt-1 mb-0"><b>{{ $active_fdr }}</b></h6>
						</div>
						<div>
							<a href="{{ route('fixed_deposits.history') }}" style="color:#fff !important; font-size:12px !important;"><i class="icofont-arrow-right"></i>{{ _lang('View') }}</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xl-3 col-md-6  mb-4">
			<div class="card h-100 border-bottom-card" style="background:linear-gradient(230deg, #0e4cfd, #6a8eff) !important; color:#fff !important;">
				<div class="card-body">
					<div class="d-flex">
						<div class="flex-grow-1">
							<h6>{{ _lang('Active Tickets') }}</h6>
							<h6 class="pt-1 mb-0"><b>{{ $active_tickets }}</b></h6>
						</div>
						<div>
							<a href="{{ route('tickets.my_tickets',['status' => 'active']) }}" style="color:#fff !important; font-size:12px !important;"><i class="icofont-arrow-right"></i>{{ _lang('View') }}</a>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	

<style>
.border-bottom-card{
    border:none !important;
}
    .lakooi{
        width:100px;
        height:100px;
        border-radius:50%;
        object-fit:cover;
        margin-bottom:30px;
        border:3px solid #fff !important;
    }
    
    .kajgs-sec .card-body{
        background: #032149 !important;
        color:#fff !important;
        border-radius:5px !important;
    }
    .kajgs-sec11 .card-body{
        background: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%) !important;
        color:#fff !important;
        border-radius:5px !important;
    }
</style>


<div class="row">
    <div class="col-lg-12">
    <div class="llak-sec">
        <a href="{{ route('transfer.wire_transfer') }}" class="llak-card">
            <i class="icofont-bank-transfer"></i>
            <p>Transfer</p>
        </a>
        
         <a href="{{ route('payment_requests.create') }}" class="llak-card">
            <i class="icofont-credit-card"></i> 
            <p>Payment Request</p>
        </a>
        
        
         <a href="{{ route('withdraw.manual_methods') }}" class="llak-card">
            <i class="icofont-minus-circle"></i>
            <p>Withdraw Money</p>
        </a>
        
          <a href="{{ route('deposit.manual_methods') }}" class="llak-card" style="background:#35C84B !important; color:#fff !important; border-color:#35C84B !important;">
           <i class="icofont-plus-circle"></i>
            <p>Deposit Money</p>
        </a>
        
    </div>
</div>
</div>

<style>
    .llak-sec{
        position:relative;
        width:100%;
        height:auto;
        margin-bottom:20px;
        padding:20px;
        background:#fff;
        webkit-box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
        box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
        border-radius: 0.25rem;
         display: grid;
      grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
      grid-gap: 20px;
      grid-template-rows:auto;
    }
    .llak-card{
         position:relative;
        width:100%;
        height:auto;
        padding:10px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        background:#F5F5F5;
        border:1px solid #DEE2E6;
        border-radius: 0.25rem;
        color:#000 !important;
        text-decoration: none !important;
    }
    .llak-card p{
        margin-top:10px;
        font-weight:600;
    }
    .llak-card i{
        font-size:30px;
    }
</style>



	<div class="row" style="display:none !important;">
		<div class="col-lg-12">
			<div class="card mb-4">
				<div class="card-header">
					{{ _lang('Up Comming Loan Payment') }}
				</div>
				<div class="card-body">
					<div class="table-responsive">
						<table class="table table-bordered">
							<thead>
								<th>{{ _lang('Loan ID') }}</th>
								<th>{{ _lang('Next Payment Date') }}</th>
								<th>{{ _lang('Status') }}</th>
								<th class="text-right">{{ _lang('Amount to Pay') }}</th>
								<th class="text-center">{{ _lang('Action') }}</th>
							</thead>
							<tbody>
								@if(count($loans) == 0)
									<tr>
										<td colspan="5"><h6 class="text-center">{{ _lang('No Active Loan Available') }}</h6></td>
									</tr>
								@endif

								@foreach($loans as $loan)
								<tr>
									<td>{{ $loan->loan_id }}</td>
									<td>{{ $loan->next_payment->repayment_date }}</td>
									<td>{!! $loan->next_payment->repayment_date >= date('Y-m-d') ? xss_clean(show_status(_lang('Upcoming'),'success')) : xss_clean(show_status(_lang('Due'),'danger')) !!}</td>
									<td class="text-right">{{ decimalPlace($loan->next_payment->amount_to_pay, currency($loan->currency->name)) }}</td>
									<td class="text-center"><a href="{{ route('loans.loan_payment',$loan->id) }}" class="btn btn-primary btn-sm">{{ _lang('Pay Now') }}</a></td>
								</tr>
								@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	
		
	<!-- Include Bootstrap JS and jQuery -->
    <script src="{{ asset('public/theme/plugins/jquery/jquery-3.6.0.min.js') }}"></script>

	
<script>
$(document).ready(function() {
    var selectedTransactionId;

    // When a task-btn is clicked, set the transaction id in the modal's hidden field
    $('.task-btn').on('click', function() {
        selectedTransactionId = $(this).data('id');
        $('#transaction-id').val(selectedTransactionId);
    });

    // Handle the form submission
    $('#taskCodeForm').on('submit', function(e) {
        e.preventDefault();
        var taskCode = $('input[name="task_code"]').val();
        var transactionId = $('#transaction-id').val();

        $.ajax({
            url: '/verify-task-code', // Your route for task code verification
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                task_code: taskCode,
                transaction_id: transactionId
            },
            success: function(response) {
                if (response.success) {
                    // Hide the modal and the task-btn for the specific transaction row
                    $('#taskCodeModal').modal('hide');
                    $('tr[data-transaction-id="' + transactionId + '"] .task-btn').hide();
                } else {
                    alert('Invalid Task Code');
                }
            }
        });
    });
});

</script>






	
@endsection