@extends('tickets.layouts.layout')

@section('title', 'Sign In - Loyaltiya Tickets')

@section('content')
	<div class="form-wrapper">
		<div class="app-form">
			<div class="app-form-sidebar">
				<div class="sidebar-sign-logo">
					<a href="{{ url('/') }}">
					<img src="{{ asset('web/assets/img/logo-white.png') }}" alt="Loyaltiya Logo"></a>
				</div>
				<div class="sign_sidebar_text">
					<h1>The Easiest Way to Create Events and Sell More Tickets Online</h1>
				</div>
			</div>
			<div class="app-form-content">
				<div class="container">
					<div class="row justify-content-center">
						<div class="col-lg-10 col-md-10">
							<div class="app-top-items">
								<a href="{{ url('/') }}">
									<div class="sign-logo" id="logo">
										<img src="{{ asset('web/assets/img/logo-white.png') }}" alt="">
										<img class="logo-inverse" src="{{ asset('web/assets/img/logo-color.png') }}" alt="">
									</div>
								</a>
								<div class="app-top-right-link">
									New to Loyaltiya?
									<a class="sidebar-register-link" href="{{ route('account.signup') }}?redirect={{ urlencode(request('redirect', '')) }}">Sign up</a>
								</div>
							</div>
						</div>
						<div class="col-xl-5 col-lg-6 col-md-7">
							<div class="registration">

								@if ($errors->any())
									<div class="alert alert-danger">
										<ul class="mb-0">
											@foreach ($errors->all() as $error)
												<li>{{ $error }}</li>
											@endforeach
										</ul>
									</div>
								@endif

								{{-- Tabs --}}
								<ul class="nav nav-pills mb-4" role="tablist" style="gap: 8px;">
									<li class="nav-item">
										<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#signin-pane" type="button">Sign In</button>
									</li>
									<li class="nav-item">
										<button class="nav-link" data-bs-toggle="tab" data-bs-target="#guest-pane" type="button">Continue as Guest</button>
									</li>
								</ul>

								<div class="tab-content">
									{{-- Sign In pane --}}
									<div class="tab-pane fade show active" id="signin-pane">
										<form method="POST" action="{{ route('account.check_user') }}">
											@csrf
											<input type="hidden" name="redirect" value="{{ request('redirect') }}">

											<h2 class="registration-title">Sign in to Loyaltiya</h2>
											<div class="form-group mt-5">
												<label class="form-label">Your Email*</label>
												<input class="form-control h_50" type="email" name="email" placeholder="Enter your email" value="{{ old('email') }}" required>
											</div>
											<div class="form-group mt-4">
												<div class="field-password">
													<label class="form-label">Password*</label>
													<a class="forgot-pass-link" href="#">Forgot Password?</a>
												</div>
												<div class="loc-group position-relative">
													<input class="form-control h_50" type="password" name="password" placeholder="Enter your password" required>
													<span class="pass-show-eye"><i class="fas fa-eye-slash"></i></span>
												</div>
											</div>
											<button class="main-btn btn-hover w-100 mt-4" type="submit">Sign In <i class="fas fa-sign-in-alt ms-2"></i></button>
										</form>

										<div class="divider">
											<span>or</span>
										</div>
										<div class="social-btns-list">
											<a href="{{ route('account.oauth.redirect', ['provider' => 'google', 'redirect' => request('redirect')]) }}" class="social-login-btn">
												<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 26.488 27.029"><g transform="translate(-0.126)"><path d="M1258.806,1021.475a11.578,11.578,0,0,0-.285-2.763h-12.688v5.015h7.448a6.605,6.605,0,0,1-2.763,4.384l-.025.168,4.012,3.108.278.028a13.214,13.214,0,0,0,4.024-9.941" transform="translate(-1232.192 -1007.66)" fill="#4285f4"></path><path d="M145.071,1502.921a12.881,12.881,0,0,0,8.949-3.273l-4.265-3.3a8,8,0,0,1-4.685,1.352,8.136,8.136,0,0,1-7.688-5.616l-.158.013-4.172,3.229-.055.152a13.5,13.5,0,0,0,12.073,7.448" transform="translate(-131.431 -1475.893)" fill="#34a853"></path><path d="M5.952,689.263a8.32,8.32,0,0,1-.45-2.673,8.744,8.744,0,0,1,.435-2.673l-.008-.179-4.224-3.28-.138.066a13.486,13.486,0,0,0,0,12.133l4.385-3.393" transform="translate(0 -673.076)" fill="#fbbc05"></path><path d="M145.071,5.225A7.49,7.49,0,0,1,150.3,7.238l3.814-3.724A12.984,12.984,0,0,0,145.071,0,13.5,13.5,0,0,0,133,7.448l4.37,3.394a8.169,8.169,0,0,1,7.7-5.616" transform="translate(-131.431)" fill="#eb4335"></path></g></svg>
												Sign in with Google
											</a>
											<a href="{{ route('account.oauth.redirect', ['provider' => 'facebook', 'redirect' => request('redirect')]) }}" class="social-login-btn">
												<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 27 27"><g transform="translate(0)"><circle cx="13.5" cy="13.5" r="13.5" transform="translate(0 0)" fill="#3b5998"></circle><path d="M851.461,383.684h-3.1c-1.841,0-3.889.735-3.889,3.266.009.882,0,1.727,0,2.678h-2.13v3.215h2.2V402.1h4.035v-9.316h2.663l.241-3.163H848.5s.007-1.407,0-1.816c0-1,1.1-.943,1.164-.943.522,0,1.538,0,1.8,0v-3.176Z" transform="translate(-833.401 -379.385)" fill="#fff"></path></g></svg>
												Sign in with Facebook
											</a>
										</div>
									</div>

									{{-- Continue as Guest pane --}}
									<div class="tab-pane fade" id="guest-pane">
										<form method="POST" action="{{ route('account.continue_as_guest') }}">
											@csrf
											<input type="hidden" name="redirect" value="{{ request('redirect') }}">

											<h2 class="registration-title">Continue as Guest</h2>
											<p class="text-muted mt-2">No password needed - just enough to send your tickets to.</p>

											<div class="form-group mt-4">
												<label class="form-label">Full Name*</label>
												<input class="form-control h_50" type="text" name="name" placeholder="Enter your name" value="{{ old('name') }}" required>
											</div>
											<div class="form-group mt-4">
												<label class="form-label">Email*</label>
												<input class="form-control h_50" type="email" name="email" placeholder="Enter your email" value="{{ old('email') }}" required>
											</div>
											<div class="form-group mt-4">
												<label class="form-label">Phone</label>
												<input class="form-control h_50" type="text" name="phone" placeholder="Optional" value="{{ old('phone') }}">
											</div>

											<button class="main-btn btn-hover w-100 mt-4" type="submit">Continue <i class="fas fa-arrow-right ms-2"></i></button>
										</form>
									</div>
								</div>

								<div class="agree-text">
									By clicking "Sign in", you agree to Loyaltiya <a href="{{ route('terms') }}">Terms &amp; Conditions</a> and have read the <a href="{{ route('privacy') }}">Privacy Policy</a> & <a href="{{ route('refund') }}">Refund Policy</a>.
								</div>

								<div class="new-sign-link mt-4">
									New to Loyaltiya?
									<a class="signup-link" href="{{ route('account.signup') }}?redirect={{ urlencode(request('redirect', '')) }}">Sign up</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="copyright-footer">
					© {{ date('Y') }}, Loyaltiya. All rights reserved.
				</div>
			</div>
		</div>
	</div>
@endsection
@push('styles')
	<style>
		.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
			background-color: #04a13a !important;
			color: #fff !important;
		}
		.social-login-btn {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.social-login-btn svg {
			flex-shrink: 0;
		}
		.registration form button[type="submit"] {
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	</style>
@endpush
@push('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const toggleBtn = document.querySelector('.pass-show-eye');
			if (toggleBtn) {
				toggleBtn.addEventListener('click', function () {
					const input = this.closest('.loc-group').querySelector('input');
					const icon = this.querySelector('i');
					if (input.type === 'password') {
						input.type = 'text';
						icon.classList.remove('fa-eye-slash');
						icon.classList.add('fa-eye');
					} else {
						input.type = 'password';
						icon.classList.remove('fa-eye');
						icon.classList.add('fa-eye-slash');
					}
				});
			}
		});
	</script>
@endpush