@extends('layouts.admin')

@section('title', 'Login History')

@push('head')
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
@endpush

@push('scripts')
	<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13"></script>
@endpush

@section('content')
	<div class="mb-3">
		<h1 class="h3 d-inline align-middle">Login History</h1>
	</div>

	@isset($filterUser)
		@if($filterUser)
			<div class="alert alert-primary alert-dismissible" role="alert">
				<a href="{{ route('admin.reports.login-history') }}" class="btn-close" aria-label="Clear filter"></a>
				<div class="alert-message">
					Showing login history for <strong>{{ $filterUser->name }}</strong> ({{ $filterUser->email }})
				</div>
			</div>
		@endif
	@endisset

	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h5 class="card-title mb-3">All login activity</h5>

					{{-- Filters --}}
					<div class="row g-2 align-items-end">
						<div class="col-md-3">
							<label class="form-label small mb-1">Status</label>
							<select id="filterStatus" class="form-select form-select-sm">
								<option value="">All</option>
								<option value="success">Success</option>
								<option value="failed">Failed</option>
							</select>
						</div>
						<div class="col-md-2">
							<label class="form-label small mb-1">Logout type</label>
							<select id="filterLogoutType" class="form-select form-select-sm">
								<option value="">All</option>
								<option value="manual">Manual</option>
								<option value="expired">Expired</option>
								<option value="forced">Forced</option>
							</select>
						</div>
						<div class="col-md-2">
							<label class="form-label small mb-1">From</label>
							<input type="text" id="filterFrom" class="form-control form-control-sm" placeholder="dd-mm-yyyy">
						</div>
						<div class="col-md-2">
							<label class="form-label small mb-1">To</label>
							<input type="text" id="filterTo" class="form-control form-control-sm" placeholder="dd-mm-yyyy">
						</div>
						<div class="col-md-3">
							<label class="form-label small mb-1 d-block">&nbsp;</label>
							<div class="d-flex gap-2">
								<button id="applyFilters" class="btn btn-sm btn-primary flex-fill"><i class="fas fa-search me-1"></i> Search</button>
								<button id="resetFilters" class="btn btn-sm btn-outline-secondary flex-fill"><i class="fas fa-sync-alt me-1"></i> Reset</button>
							</div>
						</div>
					</div>
				</div>
				<div class="card-body">
					<table class="table table-striped dataTable no-footer dtr-inline dt_table" data-export-title="Login History" style="width:100%">
						<thead>
							<tr>
								<th>S.No.</th>
								<th>User</th>
								<th>Status</th>
								<th>Logged In</th>
								<th>Logged Out</th>
								<th>Duration</th>
								<th class="noExport">Detail</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	{{-- Detail modal --}}
	<div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content position-relative">
				<div class="modal-header">
					<h5 class="modal-title">Session Detail</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
				</div>
				<div class="modal-body minheight position-relative">
					<div class="modal_loader_div">
						<div class="spinner-border text-primary"></div>
					</div>
					<div class="modal-inner-body"></div>
				</div>
			</div>
		</div>
	</div>
@endsection

@push('scripts')
<script>
	var historyTable;

	document.addEventListener("DOMContentLoaded", function() {
		backDropModel('detailModal');

		// Detail modal — load full record via AJAX
		let detailModal = document.getElementById('detailModal');
		detailModal.addEventListener('show.bs.modal', function(event) {
			let button = event.relatedTarget;
			let id = button ? button.getAttribute("data-record-id") : 0;

			$.ajax({
				type: 'POST',
				url: "{{ route('admin.reports.login-history.detail') }}",
				data: { id: id },
				dataType: 'json',
				beforeSend: function() {
					$('#detailModal .modal_loader_div').addClass('active');
					$('#detailModal .modal-inner-body').html('');
				},
				success: function(data) {
					$('#detailModal .modal-inner-body').html(data.html);
				},
				complete: function() {
					$('#detailModal .modal_loader_div').removeClass('active');
				}
			});
		});

		detailModal.addEventListener('hidden.bs.modal', function() {
			$('#detailModal .modal-inner-body').html('');
		});
	});

	$(document).ready(function() {
		// Date pickers — same Flatpickr convention as the rest of the admin panel
		// (visible d-m-Y, real value written back as Y-m-d for the server query).
		var fromPicker, toPicker;
		if (typeof flatpickr !== 'undefined') {
			var fpOpts = {
				dateFormat:    'Y-m-d',
				altInput:      true,
				altFormat:     'd-m-Y',
				allowInput:    true,
				altInputClass: 'form-control form-control-sm',  // keep the visible field Bootstrap 5 styled
			};
			fromPicker = flatpickr('#filterFrom', fpOpts);
			toPicker   = flatpickr('#filterTo',   fpOpts);
		}

		// Filter values are read fresh on every reload.
		initDatatable(
			'dt_table',
			"{{ route('admin.reports.login-history.data') }}",
			function(d) {
				d.status      = $('#filterStatus').val();
				d.logout_type = $('#filterLogoutType').val();
				d.from_date   = $('#filterFrom').val();
				d.to_date     = $('#filterTo').val();
				@isset($filterUser) @if($filterUser) d.user_id = {{ $filterUser->id }}; @endif @endisset
			},
			[
				{ targets: 0,  className: "dt-body-left dt-head-left" },
				{ targets: -1, className: "dt-body-right dt-head-right", orderable: false }
			],
			100,
			[],
			true,
			[]
		);
		historyTable = table;

		$('#applyFilters').on('click', function() {
			historyTable.ajax.reload();
		});

		$('#resetFilters').on('click', function() {
			$('#filterStatus, #filterLogoutType').val('');
			if (fromPicker) { fromPicker.clear(); } else { $('#filterFrom').val(''); }
			if (toPicker)   { toPicker.clear();   } else { $('#filterTo').val('');   }
			historyTable.ajax.reload();
		});
	});
</script>
@endpush