@extends('layouts.empty', ['paceTop' => true, 'bodyExtraClass' => 'bg-white'])

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


@push('css')
<style>
	/* ====== PERBAIKAN POSISI LOGO PADA LOGIN PAGE ====== */

/* Hilangkan jarak kosong dari container kanan login */
.login-with-news-feed .right-content {
    padding-top: 20px !important; /* default-nya biasanya 60px-80px */
}

/* Kurangi jarak dalam header login */
.login-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Pastikan logo utama menempel ke atas tanpa ruang tambahan */
.brand-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 5px;
}

/* Sesuaikan ukuran logo agar proporsional */
.brand-header .brand-logo-main {
    width: 200px;
    height: auto;
    margin-top: 0;
}

/* Di HP atau layar kecil */
@media (max-width: 576px) {
    .brand-header .brand-logo-main {
        width: 300px;
    }

	 .brand .logo {
        display: none !important;
    }
}


</style>
@endpush

@section('content')
<!-- begin login -->
<div class="login login-with-news-feed">
	<!-- begin news-feed -->
	<div class="news-feed">
		<div class="news-image" style="background-image: url(../assets/img/login-bg/bg-login.jpg)"></div>
		<div class="news-caption">
			<h4 class="caption-title"><b>E-Maintenance</b> Pengadilan Tinggi Riau</h4>
			<p>
				Digitalisasi Administrasi Pemeliharaan Aset BMN Pengadilan Tinggi Riau.
			</p>
		</div>
	</div>
	<!-- end news-feed -->

	<!-- begin right-content -->
	<div class="right-content">
		<!-- begin login-header -->
		<div class="login-header">
			
			<!-- ============================= -->
			<!-- 🔹 Logo utama di atas -->
			<!-- ============================= -->
			<div class="brand-header text-center">
				<img src="../assets/img/logo/logo-icon.png" alt="Logo Utama E-Maintenance" class="brand-logo-main">
			</div>

			<!-- ============================= -->
			<!-- 🔹 Brand Section BAWAHNYA -->
			<!-- ============================= -->
			<div class="brand text-center">
				<span class="logo"></span> <b>E-Maintenance</b>
				<small>Digitalisasi Administrasi Pemeliharaan Aset BMN Pada Pengadilan Tinggi Riau</small>
			</div>
			<div class="icon">
				<i class="fa fa-sign-in"></i>
			</div>
		</div>
		<!-- end login-header -->

		<!-- begin login-content -->
		<div class="login-content">
			<form id="loginForm" method="POST" action="{{ route('login') }}" class="margin-bottom-0">
				@csrf

				<div class="form-group m-b-15">
					<input type="text" name="login" value="{{ old('login') }}" required autofocus class="form-control form-control-lg" placeholder="Username / NIP / Nomor Hp" />
				</div>
				<div class="form-group m-b-15">
					<input type="password" name="password" required autocomplete="current-password" class="form-control form-control-lg" placeholder="Password" />
				</div>

				<div class="checkbox checkbox-css m-b-30">
					<input type="checkbox" id="remember_me" name="remember" />
					<label for="remember_me">
						Remember Me
					</label>
				</div>

				<div class="login-buttons">
					<button type="submit" class="btn btn-success btn-block btn-lg" id="btnLogin">Login</button>
				</div>

				<div class="m-t-20 m-b-40 p-b-40 text-inverse">
					<p class="m-t-20 text-center">
						Silahkan Login Menggunakan Akun <strong>Aplikasi e-PTSP</strong>					</p>
				</div>

				<hr />
				<p class="text-center text-grey-darker">
					&copy; Pengadilan Tinggi Riau All Right Reserved 2025
				</p>
			</form>
		</div>
		<!-- end login-content -->
	</div>
	<!-- end right-container -->
</div>
<!-- end login -->
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
	const form = document.getElementById('loginForm');

	form.addEventListener('submit', function (e) {
		e.preventDefault(); // cegah submit default

		// tampilkan animasi loading
		Swal.fire({
			title: 'Sedang memproses...',
			text: 'Mohon tunggu sebentar',
			allowOutsideClick: false,
			allowEscapeKey: false,
			didOpen: () => {
				Swal.showLoading();
			}
		});

		// kirim form secara manual via fetch
		fetch(form.action, {
			method: 'POST',
			headers: {
				'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value,
				'Accept': 'application/json',
				'X-Requested-With': 'XMLHttpRequest',
			},
			body: new FormData(form)
		})
		.then(async response => {
			if (response.ok) {
				// login sukses → redirect
				Swal.fire({
					icon: 'success',
					title: 'Login Berhasil!',
					text: 'Anda akan diarahkan ke dashboard...',
					showConfirmButton: false,
					timer: 1500
				}).then(() => {
					window.location.href = "{{ url('/dashboard') }}";
				});
			} else {
				let res = await response.json().catch(() => ({}));
				let message = res.message || 'Email atau password salah.';
				Swal.fire({
					icon: 'error',
					title: 'Login Gagal!',
					text: message,
				});
			}
		})
		.catch(() => {
			Swal.fire({
				icon: 'error',
				title: 'Terjadi Kesalahan',
				text: 'Tidak dapat menghubungi server.',
			});
		});
	});
});
</script>
@endpush