@extends('layouts.admin')

@section('content')

<div class="card">
	<div class="d-sm-flex align-items-center justify-content-between">
		<h5 class=" mb-0 text-gray-800 pl-3">{{ __('Invests') }}</h5>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
			<li class="breadcrumb-item"><a href="{{ route('admin.invests.index') }}">{{ __('Invests') }}</a></li>
		</ol>
	</div>
</div>


<div class="row mt-3">
  <div class="col-lg-12">
	@include('includes.admin.form-success')
	<div class="card mb-4">
		<div class="table-responsive p-3">
			<table class="custom-data-table">
				<thead>
					<tr>
						<th>{{__('Customer')}}</th>
						<th>{{__('Plan')}}</th>
						<th>{{__('Method')}}</th>
						<th>{{__('Invest')}}</th>
						<th>{{__('Status')}}</th>
						<th>{{__('Next Payment')}}</th>
						<th>{{__('Actions')}}</th>
					</tr>
				</thead>
				<tbody>
					@foreach($investments as $data)
					<tr>
						<td>
							<div class="user-info">
								{{ ucfirst($data->user->name ?? 'N/A') }}
								<p>@{{ $data->user->email ?? 'no-email@example.com' }}</p>
							</div>
						</td>
						<td>
							<div class="plan-info">
								{{ $data->plan->title ?? 'No Plan' }}
								<p>
									{{ $data->profit_amount ? showAdminAmount($data->profit_amount) : 'N/A' }} / 
									{{ $data->plan->schedule->name ?? 'N/A' }}
								</p>
							</div>
						</td>
						<td>
							<div class="method-info">
								{{ ucfirst($data->method ?? 'N/A') }}
							</div>
						</td>
						<td>
							<div class="amount-info">
								<strong>{{ showAdminAmount($data->amount, 2) }}</strong>
							</div>
						</td>
						<td>
							<div class="btn-group mb-1 status-dropdown">
								@php
									$statusMap = [
										0 => ['text' => 'Pending', 'sign' => 'warning'],
										1 => ['text' => 'Running', 'sign' => 'info'],
										2 => ['text' => 'Completed', 'sign' => 'success'],
									];
									$status = $statusMap[$data->status] ?? ['text' => 'Unknown', 'sign' => 'secondary'];
								@endphp
								<button type="button" class="btn btn-{{ $status['sign'] }} btn-sm btn-rounded dropdown-toggle" data-toggle="dropdown">
									{{ $status['text'] }}
								</button>
								<div class="dropdown-menu">
									<a href="javascript:;" data-toggle="modal" data-target="#statusModal" class="dropdown-item" 
									   data-href="{{ route('admin.invests.status',['id1' => $data->id, 'id2' => 0]) }}">Pending</a>
									<a href="javascript:;" data-toggle="modal" data-target="#statusModal" class="dropdown-item" 
									   data-href="{{ route('admin.invests.status',['id1' => $data->id, 'id2' => 1]) }}">Running</a>
									<a href="javascript:;" data-toggle="modal" data-target="#statusModal" class="dropdown-item" 
									   data-href="{{ route('admin.invests.status',['id1' => $data->id, 'id2' => 2]) }}">Completed</a>
								</div>
							</div>
						</td>
						<td>
							{{ $data->profit_time ? $data->profit_time->toDateString() : '--' }}
						</td>
						<td>
							<div class="btn-group mb-1 action-dropdown">
								<button type="button" class="btn btn-primary btn-sm btn-rounded dropdown-toggle" data-toggle="dropdown">
									Actions
								</button>
								<div class="dropdown-menu">
									<a href="javascript:;" data-href="{{ route('admin.invests.show',$data->id) }}" 
									   class="dropdown-item details-btn" data-toggle="modal" data-target="#details">
										Details
									</a>
								</div>
							</div>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
  </div>
</div>


<div class="modal fade confirm-modal" id="statusModal" tabindex="-1" role="dialog" aria-labelledby="statusModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{ __("Update Status") }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<p class="text-center">{{ __("You are about to change the status.") }}</p>
				<p class="text-center">{{ __("Do you want to proceed?") }}</p>
			</div>

			<div class="modal-footer">
				<a href="javascript:;" class="btn btn-secondary" data-dismiss="modal">{{ __("Cancel") }}</a>
				<a href="javascript:;" class="btn btn-success btn-ok">{{ __("Update") }}</a>
			</div>
		</div>
	</div>
</div>

<div class="modal fade confirm-modal" id="details" tabindex="-1" role="dialog" aria-labelledby="statusModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{ __("Invest Details") }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">

			</div>
			<div class="modal-footer">
				<a href="javascript:;" class="btn btn-secondary" data-dismiss="modal">{{ __("Back") }}</a>
			</div>
		</div>
	</div>
</div>


@section('scripts')
<script>
    $(document).on('click', '.details-btn', function() {
        let detailsUrl = $(this).data('href');
        $.get(detailsUrl, function(data) {
            $("#details .modal-body").html(data);
        });
    });

    // Status Modal Handler
    $('#statusModal').on('show.bs.modal', function(event) {
        let button = $(event.relatedTarget);
        let modal = $(this);
        modal.find('.btn-ok').attr('href', button.data('href'));
    });
</script>
<style>
    .custom-data-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .custom-data-table th,
    .custom-data-table td {
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        vertical-align: top;
    }
    
    .custom-data-table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }
    
    .user-info p,
    .plan-info p {
        margin: 4px 0 0;
        font-size: 0.9em;
        color: #666;
    }
    
    .status-dropdown .btn,
    .action-dropdown .btn {
        padding: 5px 12px;
        font-size: 0.875rem;
    }
    
    @media (max-width: 768px) {
        .custom-data-table {
            display: block;
            overflow-x: auto;
        }
        
        .custom-data-table td {
            min-width: 150px;
        }
    }
</style>
@endsection



@endsection