@extends('front.'.config('app.template', 'tendra').'.master')

@section('body')

{{-- HERO SECTION --}}
<div class="pb-[5rem] relative top-[-90px] pt-[130px] flex items-center flex-col justify-start bg-[radial-gradient(#3f4a54,#2a3137)] after:content-[''] after:h-full after:w-full after:absolute after:top-0 after:left-0 after:bg-[linear-gradient(180deg,#00000014_50%,transparent_70%)] [&>*:not(.absolute)]:relative [&>*]:z-[2] px-[1.5rem]">
	<div class="top-0 left-0 w-full h-full absolute bg-bottom bg-cover opacity-[.3]" style="background-image:url('{{ src('storage/images/'.config('app.top_cover')) }}')"></div>
	<div class="text-[2.5rem] font-[700] max-[650px]:font-[600] max-w-[800px] mx-auto text-center leading-[1.8] capitalize text-[#fff] max-[768px]:text-[1.8rem]">
		{{ __('Audio Stories') }}
	</div>
	<div class="max-w-[500px] w-full mt-[2rem] relative">
		<form class="flex items-center" action="{{ route('stories.index') }}" method="GET">
			<input type="search" name="search" value="{{ request('search') }}" class="rounded-l-[.5rem] w-full h-[55px] bg-[#ffffff26] px-[1rem] text-[#fff] border-0 focus:outline-none placeholder-[#cbd5e0]" placeholder="{{ __('Search stories') }}...">
			<button class="rounded-r-[.5rem] p-[.5rem_1.5rem] h-[55px] bg-[#68359A] text-[#fff] flex items-center font-semibold" type="submit">
				{{ __('Search') }}
			</button>
		</form>
	</div>
</div>

{{-- FILTERS --}}
<div class="mt-[-90px] mb-[3rem] px-[1.5rem]">
	<div class="max-w-[1200px] w-full mx-auto">
		<div class="flex flex-wrap gap-[1rem] justify-center items-center mb-[2rem]">
			<a href="{{ route('stories.index') }}" class="px-[1.5rem] py-[.5rem] rounded-[.5rem] {{ !request('category') && !request('type') ? 'bg-[#68359A] text-white' : 'bg-gray-200 text-gray-700' }}">
				{{ __('All Stories') }}
			</a>
			<a href="{{ route('stories.index', ['type' => 'free']) }}" class="px-[1.5rem] py-[.5rem] rounded-[.5rem] {{ request('type') === 'free' ? 'bg-[#68359A] text-white' : 'bg-gray-200 text-gray-700' }}">
				{{ __('Free Stories') }}
			</a>
			<a href="{{ route('stories.index', ['type' => 'premium']) }}" class="px-[1.5rem] py-[.5rem] rounded-[.5rem] {{ request('type') === 'premium' ? 'bg-[#68359A] text-white' : 'bg-gray-200 text-gray-700' }}">
				{{ __('Premium Stories') }}
			</a>
		</div>

		{{-- Categories --}}
		<div class="flex flex-wrap gap-[.5rem] justify-center items-center mb-[2rem]">
			@foreach($categories as $category)
			<a href="{{ route('stories.index', ['category' => $category->slug]) }}" class="px-[1rem] py-[.25rem] text-[.9rem] rounded-[.25rem] {{ request('category') === $category->slug ? 'bg-[#68359A] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
				{{ $category->name }}
			</a>
			@endforeach
		</div>
	</div>
</div>

{{-- STORIES GRID --}}
<div class="px-[1.5rem] mb-[5rem]">
	<div class="max-w-[1200px] w-full mx-auto">
		@if($stories->count() > 0)
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-[1.5rem]">
			@foreach($stories as $story)
			<div class="bg-white rounded-[.5rem] shadow-lg overflow-hidden">
				<div class="relative">
					@if($story->cover_image)
					<img src="{{ asset('storage/' . $story->cover_image) }}" alt="{{ $story->title }}" class="w-full h-[200px] object-cover">
					@else
					<div class="w-full h-[200px] bg-gray-200 flex items-center justify-center">
						<i class="text-[3rem] text-gray-400">🎧</i>
					</div>
					@endif
					
					@if($story->is_free)
					<span class="absolute top-[.5rem] left-[.5rem] bg-green-500 text-white px-[.5rem] py-[.25rem] rounded-[.25rem] text-[.8rem] font-semibold">
						{{ __('Free') }}
					</span>
					@else
					<span class="absolute top-[.5rem] left-[.5rem] bg-[#68359A] text-white px-[.5rem] py-[.25rem] rounded-[.25rem] text-[.8rem] font-semibold">
						{{ config('payments.currency_symbol') }}{{ $story->price }}
					</span>
					@endif

					@if($story->duration)
					<span class="absolute top-[.5rem] right-[.5rem] bg-black bg-opacity-70 text-white px-[.5rem] py-[.25rem] rounded-[.25rem] text-[.8rem]">
						{{ $story->duration }}
					</span>
					@endif
				</div>

				<div class="p-[1rem]">
					<h3 class="font-[600] text-[1.1rem] mb-[.5rem] line-clamp-2">
						<a href="{{ route('stories.show', $story->slug) }}" class="hover:text-[#68359A]">{{ $story->title }}</a>
					</h3>
					
					<p class="text-gray-600 text-[.9rem] mb-[.75rem] line-clamp-3">{{ Str::limit($story->description, 120) }}</p>
					
					<div class="flex items-center justify-between">
						<span class="text-[.8rem] text-gray-500">{{ $story->category->name ?? __('Uncategorized') }}</span>
						<a href="{{ route('stories.show', $story->slug) }}" class="bg-[#68359A] text-white px-[1rem] py-[.5rem] rounded-[.25rem] text-[.9rem] hover:bg-[#5a2d85]">
							{{ __('Listen') }}
						</a>
					</div>
				</div>
			</div>
			@endforeach
		</div>

		{{-- Pagination --}}
		@if($stories->hasPages())
		<div class="mt-[3rem] flex justify-center">
			{{ $stories->appends(request()->input())->links() }}
		</div>
		@endif

		@else
		<div class="text-center py-[3rem]">
			<div class="text-[2rem] mb-[1rem]">🎧</div>
			<h3 class="text-[1.5rem] font-[600] mb-[.5rem]">{{ __('No stories found') }}</h3>
			<p class="text-gray-600">{{ __('Try adjusting your search or browse all stories') }}</p>
			<a href="{{ route('stories.index') }}" class="inline-block mt-[1rem] bg-[#68359A] text-white px-[2rem] py-[.75rem] rounded-[.5rem] hover:bg-[#5a2d85]">
				{{ __('Browse All Stories') }}
			</a>
		</div>
		@endif
	</div>
</div>

@endsection