@extends('layouts.front_layout')

@section('title', 'Edexcel Papers')

@section('content')
<div class="storefront">
	<div class="top-bar">Join <strong>Edexcel Papers</strong>&nbsp; WhatsApp!</div>

	<header class="header">
		<div class="header-brand">
			<span class="header-brand-mark">e</span>
			<span>Edexcel Papers</span>
		</div>
		<button class="menu-btn" type="button" aria-label="Open menu" aria-expanded="false">&#9776;</button>
		<nav class="auth-actions" aria-label="Account actions">
			@auth
				<div class="customer-identity">
					@if (auth()->user()->avatar)
						<img src="{{ auth()->user()->avatar }}" alt="">
					@endif
					<div>
						<strong>{{ auth()->user()->name }}</strong>
						<small>{{ auth()->user()->email }}</small>
					</div>
				</div>
				<form method="POST" action="{{ route('logout') }}">
					@csrf
					<button class="header-button logout-button" type="submit">Log out</button>
				</form>
				@if (auth()->user()->isAdmin())
					<a class="header-button" href="{{ route('dashboard') }}">Admin dashboard</a>
				@endif
			@else
				<a class="header-button" href="{{ route('google.redirect') }}">Sign in with Google</a>
				<a class="header-button header-button-primary" href="{{ route('google.redirect') }}">Sign up with Google</a>
			@endauth
			<a class="cart-button {{ auth()->check() ? '' : 'guest-cart-button' }}" href="{{ auth()->check() ? route('cart.index') : route('google.redirect') }}" aria-label="View cart">
				<span class="cart-icon" aria-hidden="true">&#128722;</span>
				<span>{{ auth()->check() ? 'Cart' : 'Sign up to shop' }}</span>
				@if (auth()->check() && $cartItems->sum('quantity') > 0)
					<b class="cart-count">{{ $cartItems->sum('quantity') }}</b>
				@endif
			</a>
		</nav>
		<div class="header-icons" aria-label="Store tools">
			<button type="button" aria-label="Search">&#9906;</button>
		</div>
	</header>

	<div class="page-layout">
		<aside class="sidebar">
			<button class="sidebar-close" type="button" aria-label="Close menu">&times;</button>
			<nav class="side-menu" aria-label="Book categories">
				<a href="#">iPrimary 6 Papers</a>
				<a href="#">iLower 9 Papers</a>
				<a href="#">iGCSE OL Papers</a>
				<a href="#">iGCSE Textbooks</a>
				<a href="#">AS &amp; IAL Papers</a>
				<a href="#">AS &amp; IAL Textbooks</a>
				<a href="#">Cambridge OL</a>
				<a href="#">Cambridge AL</a>
				<a href="#">Lab Books &amp; Guides</a>
				<a href="#">Edexcel Paper Offers</a>
				<a href="#">Pearson Textbooks</a>
				<a href="#">Digital Nation Software</a>
				<a href="#">Best Sellers <span class="heart">&hearts;</span></a>
				<a href="#">Pearson Edexcel Exam Papers</a>
				<a href="#">Pearson Lab Books</a>
			</nav>
			<div class="sidebar-divider"></div>
			<a class="sidebar-link" href="#">Edexcel Buyer's Guide &amp; FAQ</a>
			<div class="sidebar-footer">
				<div class="sidebar-bottom">
					<div aria-label="Social links"><span>&#9824;</span><span>&#9835;</span></div>
					<button class="language" type="button">&#9673; EN <span>&#8597;</span></button>
				</div>
			</div>
		</aside>

		<main class="content">
			<div class="profile-column">
				<div class="hero-image">
					<img src="https://images.unsplash.com/photo-1521587760476-6c12a4b040da?auto=format&amp;fit=crop&amp;w=1200&amp;q=85" alt="Students studying in a library">
				</div>
				<div class="logo-wrapper" aria-hidden="true"><span>e</span></div>

				<section class="intro">
					<h1>EDexcel PAPERS</h1>
					<h3>Sri Lanka's Trusted Edexcel Resource</h3>
					<p class="description">Pearson &bull; Textbooks &bull; Past Papers &bull; Mark Schemes</p>
					<p class="contact"><a href="#">EdexcelPapers FB Page</a> <span>WhatsApp: 0788201302...</span></p>
					<button class="show-more" type="button">Show more</button>
					<div class="location"><span aria-hidden="true">&#9678;</span> Sri Lanka</div>
				</section>

				@guest
					<section class="guest-prompt" aria-label="Create an account">
						<div>
							<strong>Not signed in?</strong>
							<p>Sign up with Google to save your details and shop faster.</p>
						</div>
						<a class="guest-prompt-button" href="{{ route('google.redirect') }}">Sign up with Google</a>
					</section>
				@endguest

				<section class="catalogue" aria-labelledby="catalogue-title">
					<div class="catalogue-heading">
						<div>
							<p class="catalogue-eyebrow">Our catalogue</p>
							<h2 id="catalogue-title">Latest books</h2>
						</div>
						<span>{{ $books->count() }} {{ Str::plural('book', $books->count()) }}</span>
					</div>

					@if ($books->isEmpty())
						<p class="catalogue-empty">New books are being prepared. Please check back soon.</p>
					@else
						<div class="catalogue-grid">
							@foreach ($books as $book)
								<article class="catalogue-card">
									<div class="catalogue-cover">
										@if ($book->cover_image)
											<img src="{{ asset('storage/' . $book->cover_image) }}" alt="Cover of {{ $book->title }}">
										@else
											<span>{{ $book->title }}</span>
										@endif
									</div>
									<div class="catalogue-card-body">
										@if ($book->category)
											<span class="catalogue-category">{{ $book->category->name }}</span>
										@endif
										<h3>{{ $book->title }}</h3>
										<p class="catalogue-price">Rs. {{ number_format((float) $book->price, 2) }}</p>
										<span class="catalogue-stock">{{ $book->stock > 0 ? 'In stock' : 'Out of stock' }}</span>
										@if ($book->stock > 0)
											@auth
												<form method="POST" action="{{ route('cart.store', $book) }}" class="cart-form">
													@csrf
													<button class="add-cart-button" type="submit">Add to cart</button>
												</form>
											@else
												<a class="add-cart-button" href="{{ route('google.redirect') }}">Sign up to add</a>
											@endauth
										@endif
									</div>
								</article>
							@endforeach
						</div>
					@endif
				</section>


			</div>
		</main>
	</div>
	<div class="sidebar-overlay" aria-hidden="true"></div>
</div>

<style>
	.header { position: relative; gap: 1rem; height: 68px; padding: 0 28px; background: #102a43; border-bottom: 0; color: #fff; }
	.header-brand { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
	.header-brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #52d1c7; color: #102a43; font-size: 1.2rem; font-weight: 800; }
	.menu-btn { order: -1; color: #fff; }
	.cart-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 38px; border: 1px solid #f7c873; border-radius: 8px; padding: .45rem .9rem; color: #f7c873 !important; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s; }
	.cart-button:hover { background: rgba(247,200,115,.12); transform: translateY(-1px); }
	.cart-button { position: relative; }
	.cart-count { position: absolute; top: -9px; right: -9px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #ef6b5b; color: #fff; font-size: .68rem; line-height: 1; }
	.auth-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
	.header-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid rgba(255,255,255,.65); border-radius: 8px; padding: .45rem .9rem; color: #fff !important; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s; }
	.header-button:hover { border-color: #fff; background: rgba(255,255,255,.12); transform: translateY(-1px); }
	.header-button-primary { background: #52d1c7; border-color: #52d1c7; color: #102a43 !important; }
	.header-button-primary:hover { background: #7be0d8; border-color: #7be0d8; }
	.logout-button { cursor: pointer; background: transparent; }
	.customer-identity { display: flex; align-items: center; gap: .5rem; color: #fff; }
	.customer-identity img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #52d1c7; }
	.customer-identity div { display: flex; flex-direction: column; line-height: 1.15; }
	.customer-identity strong { font-size: .8rem; }
	.customer-identity small { max-width: 150px; overflow: hidden; color: #b8c7d6; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
	.guest-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid #b9e9e5; border-radius: 12px; background: #effcfb; color: #102a43; text-align: left; }
	.guest-prompt strong { font-size: .95rem; }
	.guest-prompt p { margin: .25rem 0 0; color: #526477; font-size: .82rem; }
	.guest-prompt-button { flex-shrink: 0; border-radius: 8px; padding: .6rem .85rem; background: #102a43; color: #fff !important; font-size: .8rem; font-weight: 700; text-decoration: none; }
	.header-icons { margin-left: .25rem; }
	.header-icons button { border: 0; background: transparent; color: #fff; font-size: 1.25rem; cursor: pointer; }
	.sidebar { position: relative; z-index: 20; transition: transform .25s ease; }
	.sidebar-close { display: none; }
	.sidebar-overlay { display: none; }
	.catalogue { margin-top: 2rem; }
	.catalogue-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
	.catalogue-heading h2 { margin: 0; }
	.catalogue-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; }
	.catalogue-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
	.catalogue-card { overflow: hidden; background: #fff; border: 1px solid #e5e1da; border-radius: 12px; box-shadow: 0 5px 18px rgba(16,42,67,.07); transition: transform .2s, box-shadow .2s; }
	.catalogue-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(16,42,67,.13); }
	.catalogue-cover { aspect-ratio: 4 / 5; display: grid; place-items: center; background: #eee9e1; text-align: center; }
	.catalogue-cover img { width: 100%; height: 100%; object-fit: cover; }
	.catalogue-card-body { padding: .8rem; }
	.catalogue-card h3 { margin: .3rem 0; font-size: 1rem; }
	.catalogue-category, .catalogue-stock { font-size: .75rem; opacity: .7; }
	.catalogue-price { margin: .5rem 0; font-weight: 700; }
	.cart-form { margin-top: .7rem; }
	.add-cart-button { display: inline-block; width: 100%; border: 0; border-radius: 7px; padding: .55rem .6rem; background: #102a43; color: #fff !important; font-size: .78rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
	.add-cart-button:hover { background: #1e466d; }
	.catalogue-empty { padding: 2rem; background: #f5f2ed; }
	@media (max-width: 900px) { .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	@media (max-width: 600px) {
		.header { padding: 0 14px; gap: .45rem; }
		.header-brand { font-size: .8rem; }
		.header-brand-mark { width: 25px; height: 25px; font-size: 1rem; }
		.cart-button { min-height: 34px; padding: .3rem .5rem; font-size: .72rem; }
		.header-button { min-height: 34px; padding: .3rem .5rem; font-size: .72rem; }
		.customer-identity small { display: none; }
		.customer-identity strong { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.logout-button { padding: .3rem .45rem; }
		.guest-prompt { align-items: flex-start; flex-direction: column; }
		.guest-prompt-button { width: 100%; text-align: center; }
		.cart-button span { display: none; }
		.cart-button span:first-child { display: inline; }
		.guest-cart-button span:last-child { display: inline; }
		.header-icons { display: none; }
		.catalogue-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
		.catalogue-card-body { padding: .6rem; }
		.catalogue-card h3 { font-size: .9rem; }
		.sidebar { position: fixed; inset: 0 auto 0 0; width: 270px; min-width: 270px; overflow-y: auto; transform: translateX(-100%); box-shadow: 8px 0 24px rgba(0,0,0,.16); }
		.sidebar.is-open { transform: translateX(0); }
		.sidebar-close { display: block; position: absolute; top: 12px; right: 14px; z-index: 1; border: 0; background: transparent; color: #64717c; font-size: 28px; line-height: 1; cursor: pointer; }
		.sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 10; background: rgba(16,42,67,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
		.sidebar-overlay.is-visible { opacity: 1; pointer-events: auto; }
		body.menu-open { overflow: hidden; }
	}
</style>
<script>
	document.addEventListener('DOMContentLoaded', function () {
		const menuButton = document.querySelector('.menu-btn');
		const sidebar = document.querySelector('.sidebar');
		const closeButton = document.querySelector('.sidebar-close');
		const overlay = document.querySelector('.sidebar-overlay');

		if (!menuButton || !sidebar || !closeButton || !overlay) return;

		const setMenuState = (isOpen) => {
			sidebar.classList.toggle('is-open', isOpen);
			overlay.classList.toggle('is-visible', isOpen);
			menuButton.setAttribute('aria-expanded', String(isOpen));
			document.body.classList.toggle('menu-open', isOpen);
		};

		menuButton.addEventListener('click', () => setMenuState(true));
		closeButton.addEventListener('click', () => setMenuState(false));
		overlay.addEventListener('click', () => setMenuState(false));
		document.addEventListener('keydown', (event) => {
			if (event.key === 'Escape') setMenuState(false);
		});
	});
</script>
@endsection