<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm wallet-details-card">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0 fw-semibold">
                            <i class="fas fa-receipt me-2"></i><?= __('admin.withdraw_requests_details') ?> #<?= $request['id'] ?>
                        </h5>
                        <div class="d-flex gap-2">
                            <a href="<?= base_url('admincontrol/wallet_requests_list') ?>" class="btn btn-outline-light btn-sm">
                                <i class="fas fa-arrow-left me-1"></i><?= __('admin.back_to_list') ?>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
				<div class="row g-3 mb-4">
					<div class="col-lg-4 col-md-6">
						<div class="card h-100">
							<div class="card-header bg-info text-white">
								<h6 class="card-title mb-0 fw-semibold">
									<i class="fas fa-info-circle me-2"></i><?= __('admin.request_details') ?>
								</h6>
							</div>
							<div class="card-body">
								<table class="table table-borderless mb-0">
									<tbody>
										<tr>
											<td class="fw-semibold text-muted"><?= __('admin.id') ?></td>
											<td class="text-end"><?= $request['id'] ?></td>
										</tr>
										<tr>
											<td class="fw-semibold text-muted"><?= __('admin.total') ?></td>
											<td class="text-end fw-bold text-success"><?= c_format($request['total']) ?></td>
										</tr>
										<tr>
											<td class="fw-semibold text-muted"><?= __('admin.payment_method') ?></td>
											<td class="text-end">
												<span class="badge bg-primary"><?= $request['prefer_method'] ?></span>
											</td>
										</tr>
										<tr>
											<td class="fw-semibold text-muted"><?= __('admin.payment_status') ?></td>
											<td class="text-end"><?= withdrwal_status($request['status']) ?></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-md-6">
						<div class="card h-100">
							<div class="card-header bg-success text-white">
								<h6 class="card-title mb-0 fw-semibold">
									<i class="fas fa-user-check me-2"></i><?= __('admin.submitted_details') ?>
								</h6>
							</div>
							<div class="card-body">
								<table class="table table-borderless mb-0">
									<tbody>
										<?php
											$data = json_decode($request['settings'],1);
											foreach ($data as $key => $value) {
												if($key == 'payment_proof') {
													$payment_proof = '<tr>
													<td class="fw-semibold text-muted text-capitalize">'.str_replace("_", " ", $key) .'</td>
													<td class="text-end"> <a target="_blank" href="'.base_url('assets/user_upload/'.$value).'" class="btn btn-sm btn-outline-primary"><i class="fas fa-download me-1"></i>'.$value.'</a></td>
												</tr>';
												continue;
												}
										 ?>
												<tr>
												<td class="fw-semibold text-muted text-capitalize"><?= str_replace("_", " ", $key) ?></td>
												<td class="text-end">
													<?php 
													if(is_array($value)) {
														if($key == 'payment_details') {
															// For payment details, show a summary
															echo count($value) . ' fields provided';
														} else {
															echo htmlspecialchars(json_encode($value));
														}
													} else {
														echo htmlspecialchars($value);
													}
													?>
												</td>
											</tr>
										<?php } ?>

										<?php if(isset($payment_proof)) echo $payment_proof; ?>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-md-12">
						<div class="card h-100">
							<div class="card-header bg-warning text-dark">
								<div class="d-flex justify-content-between align-items-center">
									<h6 class="card-title mb-0 fw-semibold">
										<i class="fas fa-history me-2"></i><?= __('admin.status_history') ?>
									</h6>
									<button class="btn btn-outline-dark btn-sm" onclick="getHistory()" title="<?= __('admin.refresh') ?>">
										<i class="fas fa-sync-alt"></i>
									</button>
								</div>
							</div>
							<div class="card-body p-0">
								<div class="table-responsive">
									<table class="table table-hover mb-0">
										<thead class="table-light">
											<tr>
												<th class="fw-semibold"><?= __('admin.status') ?></th>
												<th class="fw-semibold"><?= __('admin.comment') ?></th>
											</tr>
										</thead>
										<tbody id="history_container">
											<tr>
												<td colspan="2" class="text-center text-muted py-3">
													<i class="fas fa-spinner fa-spin me-2"></i><?= __('admin.loading') ?>...
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				

				<div class="row mt-4">
					<div class="col-12">
						<div class="card">
							<div class="card-header bg-dark text-white">
								<div class="d-flex justify-content-between align-items-center">
									<h6 class="card-title mb-0 fw-semibold">
										<i class="fas fa-list me-2"></i><?= __('admin.transactions') ?>
									</h6>
									<div class="d-flex align-items-center gap-3">
										<div class="text-light small" id="transactions-summary">
											<?= pagination_summary_html(1, 15, count($transaction), 'start', 'sm') ?>
										</div>
									</div>
								</div>
							</div>
							<div class="card-body p-0">
								<div class="table-responsive">
									<table class="table table-hover mb-0 wallet-details-table" id="transactions-table">
										<thead class="table-dark">
											<tr>
												<th class="fw-semibold text-white"><?= __('admin.date') ?></th>
												<th class="fw-semibold text-white"><?= __('admin.user') ?></th>
												<th class="fw-semibold text-white"><?= __('admin.order') ?></th>
												<th class="fw-semibold text-white text-end" width="150px"><?= __('admin.commission') ?></th>
												<th class="fw-semibold text-white"><?= __('admin.type') ?></th>
												<th class="fw-semibold text-white"><?= __('admin.payment_status') ?></th>
												<th class="fw-semibold text-white"><?= __('admin.commission_status') ?></th>
												<th class="fw-semibold text-white text-center" width="60px"><?= __('admin.ip') ?></th>
												<th class="fw-semibold text-white text-center" width="80px"><?= __('admin.actions') ?></th>
											</tr>
										</thead>
										<tbody id="transactions-tbody">
											<?php
												foreach ($transaction as $key => $value) {
													$data = [];
													$data['value'] = $value;
													$data['class'] = $class;
													$data['stop_checkbox'] = 1; 
													$data['stop_child'] = 1; 
													$data['wallet_status'] = $status; 
													$data['hide_recursion_btn'] = true; 
													echo $this->Product_model->getHtml('usercontrol/users/parts/new_wallet_tr', $data);
												} 
											?>
										</tbody>
									</table>
								</div>
								<?php if(count($transaction) > 15): ?>
								<div class="card-footer bg-light wallet-details-pagination">
									<div class="d-flex justify-content-between align-items-center">
										<div class="text-muted small" id="pagination-summary">
											<?= pagination_summary_html(1, 15, count($transaction), 'start', 'sm') ?>
										</div>
										<div id="pagination-links">
											<?= easy_pagination(base_url('admincontrol/wallet_requests_details/' . $request['id']), count($transaction), 0, ['per_page' => 15, 'size' => 'sm']) ?>
										</div>
									</div>
								</div>
								<?php endif; ?>
							</div>
						</div>
					</div>
				</div>

				<?php 
				// Display custom gateway payment details if available
				$settings = json_decode($request['settings'], true);
				if(isset($settings['payment_details']) && !empty($settings['payment_details']) && isset($request['prefer_method'])) {
					$payment_details = $settings['payment_details'];
					$gateway_code = $request['prefer_method'];
				?>
				<div class="row mt-4">
					<div class="col-12">
						<div class="card">
							<div class="card-header bg-warning text-dark">
								<h6 class="card-title mb-0 fw-semibold">
									<i class="fas fa-credit-card me-2"></i><?= __('admin.payment_details') ?> - <?= ucfirst(str_replace('_', ' ', $gateway_code)) ?>
								</h6>
							</div>
							<div class="card-body">
								<div class="row">
									<?php foreach($payment_details as $field => $value): ?>
									<div class="col-md-6 mb-3">
										<label class="form-label fw-semibold text-muted"><?= ucfirst(str_replace('_', ' ', $field)) ?>:</label>
										<p class="form-control-plaintext bg-light p-2 rounded">
											<?php 
											if(is_array($value)) {
												echo htmlspecialchars(json_encode($value, JSON_PRETTY_PRINT));
											} else {
												echo htmlspecialchars($value);
											}
											?>
										</p>
									</div>
									<?php endforeach; ?>
								</div>
							</div>
						</div>
					</div>
				</div>
				<?php } ?>

				<div class="row mt-4">
					<div class="col-lg-8 col-md-12">
						<div class="card">
							<div class="card-header bg-info text-white">
								<h6 class="card-title mb-0 fw-semibold">
									<i class="fas fa-cogs me-2"></i><?= __('admin.actions') ?>
								</h6>
							</div>
							<div class="card-body">
								<?= $confirm ?>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-md-12">
						<div class="card">
							<div class="card-header bg-secondary text-white">
								<h6 class="card-title mb-0 fw-semibold">
									<i class="fas fa-plus-circle me-2"></i><?= __('admin.add_custom_status_history') ?>
								</h6>
							</div>
							<div class="card-body">
								<form class="add-history-form wallet-details-form" id="status-history-form">
									<div class="mb-3">
										<label class="form-label fw-semibold"><?= __('admin.status') ?> <span class="text-danger">*</span></label>
										<select class="form-select" name="status" required>
											<option value=""><?= __('admin.select_status') ?></option>
											<?php foreach ($status_list as $key => $value) { ?>
												<option value="<?= $key ?>"><?= $value ?></option>
											<?php } ?>
										</select>
									</div>
									<div class="mb-3">
										<label class="form-label fw-semibold"><?= __('admin.comment') ?> <span class="text-danger">*</span></label>
										<textarea name="comment" class="form-control" rows="3" required placeholder="<?= __('admin.add_status_comment') ?>"></textarea>
									</div>
									<div class="d-grid gap-2">
										<button type="button" class="btn btn-primary btn-add-status" data-close="true">
											<i class="fas fa-check me-1"></i><?= __('admin.add_status_and_close') ?>
										</button>
										<button type="button" class="btn btn-info btn-add-status">
											<i class="fas fa-plus me-1"></i><?= __('admin.add_status') ?>
										</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		// Initialize form validation
		$('#status-history-form').on('submit', function(e) {
			e.preventDefault();
			$('.btn-add-status[data-close="true"]').click();
		});

		// Add status button handlers
		$(".btn-add-status").on("click", function(){
			const $el = $(this);
			const $form = $('#status-history-form');
			
			// Validate form
			if (!validateForm($form)) {
				showToast('<?= __('admin.error') ?>', '<?= __('admin.please_fill_required_fields') ?>', 'error', 3000);
				return;
			}
			
			// Store original text
			if (!$el.data('original-text')) {
				$el.data('original-text', $el.html());
			}
			
			$.ajax({
				url: '<?= base_url('admincontrol/wallet_requests_details/' . $request['id']) ?>',
				type:'POST',
				dataType:'json',
				data: $form.serialize(),
				beforeSend:function(){
					$el.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span><?= __('admin.loading') ?>...');
					$form.find('.is-invalid').removeClass('is-invalid');
					$form.find('.invalid-feedback').remove();
				},
				complete:function(){
					$el.prop('disabled', false).html($el.data('original-text'));
				},
				success:function(json){
					if (json['success']){
						showToast('<?= __('admin.success') ?>', '<?= __('admin.status_added_successfully') ?>', 'success', 3000);
						
						if($el.data('close')){
							setTimeout(function() {
								window.location.href = '<?= base_url('admincontrol/wallet_requests_list') ?>';
							}, 1000);
						} else {
							if($form.find('select[name=status]').val() == "1"){
								window.location.reload();
							} else{
								getHistory();
							}
							$form[0].reset();
						}
					}
					
					if(json['errors']){
						showToast('<?= __('admin.error') ?>', '<?= __('admin.please_fix_errors') ?>', 'error', 5000);
						$.each(json['errors'], function(i,j){
							const $field = $form.find('[name="'+ i +'"]');
							if($field.length){
								$field.addClass("is-invalid");
								if($field.parent(".input-group").length){
									$field.parent(".input-group").after("<span class='invalid-feedback'>"+ j +"</span>");
								} else{
									$field.after("<span class='invalid-feedback'>"+ j +"</span>");
								}
							}
						});
					}
				},
				error: function(xhr, status, error) {
					console.error('AJAX Error:', error);
					showToast('<?= __('admin.error') ?>', '<?= __('admin.failed_to_add_status') ?>', 'error', 5000);
				}
			});
		});
	});

	// Form validation function
	function validateForm($form) {
		let isValid = true;
		$form.find('[required]').each(function() {
			const $field = $(this);
			if (!$field.val().trim()) {
				$field.addClass('is-invalid');
				if (!$field.next('.invalid-feedback').length) {
					$field.after('<span class="invalid-feedback"><?= __('admin.this_field_is_required') ?></span>');
				}
				isValid = false;
			} else {
				$field.removeClass('is-invalid');
				$field.next('.invalid-feedback').remove();
			}
		});
		return isValid;
	}

	function getHistory() {
		$.ajax({
			url:'<?= base_url('admincontrol/get_withdrwal_history/'. $request['id']) ?>',
			type:'POST',
			dataType:'json',
			beforeSend:function(){
				$("#history_container").html("<tr><td colspan='2' class='text-center text-muted py-3'><i class='fas fa-spinner fa-spin me-2'></i><?= __('admin.loading') ?>...</td></tr>");
			},
			success:function(json){
				if(json['html']) {
					$("#history_container").html(json['html']);
				} else {
					$("#history_container").html("<tr><td colspan='2' class='text-center text-muted py-3'><i class='fas fa-info-circle me-2'></i><?= __('admin.no_status_history') ?></td></tr>");
				}
			},
			error: function(xhr, status, error) {
				console.error('History Load Error:', error);
				$("#history_container").html("<tr><td colspan='2' class='text-center text-danger py-3'><i class='fas fa-exclamation-triangle me-2'></i><?= __('admin.failed_to_load_history') ?></td></tr>");
				showToast('<?= __('admin.error') ?>', '<?= __('admin.failed_to_load_history') ?>', 'error', 3000);
			}
		});
	}

	getHistory()

	// Initialize popovers with Bootstrap 5
	$(document).delegate('.wallet-popover','click', function(){
		const html = $(this).parents("tr").find(".dpopver-content").html();
        $(this).attr('data-bs-content', html);
        
        // Hide any existing popovers
        $('.popover').remove();
        
        // Initialize Bootstrap 5 popover
        const popover = new bootstrap.Popover(this, {
            placement: 'right',
            html: true,
            trigger: 'manual'
        });
        
        popover.show();
	});

	// Mobile responsiveness improvements
	$(window).on('resize', function() {
		// Adjust table responsiveness on mobile
		if ($(window).width() < 768) {
			$('#transactions-table').addClass('table-sm');
		} else {
			$('#transactions-table').removeClass('table-sm');
		}
	});

	// Initialize on page load
	$(document).ready(function(){
		// Initialize popovers with Bootstrap 5
		$(".wallet-popover").each(function() {
			const html = $(this).parents("tr").find(".dpopver-content").html();
			$(this).attr('data-bs-content', html);
		});

		// Trigger resize event to set initial mobile state
		$(window).trigger('resize');

		// Add loading states to buttons
		$('.btn-add-status').on('mouseenter', function() {
			if (!$(this).prop('disabled')) {
				$(this).addClass('shadow-sm');
			}
		}).on('mouseleave', function() {
			$(this).removeClass('shadow-sm');
		});
	});
</script>