@extends('layouts.app')

@section('content')
<div class="flex h-screen bg-gray-100">
    <!-- Sidebar -->
    @include('components.sidebar')

    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- Top Navigation -->
        @include('components.navbar')

        <!-- Page Content -->
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50">
            <div class="container mx-auto px-6 py-8">
                <!-- Breadcrumbs -->
                @if(isset($breadcrumbs))
                <nav class="text-sm mb-6">
                    <ol class="flex items-center space-x-2 text-gray-600">
                        @foreach($breadcrumbs as $index => $breadcrumb)
                            @if($index > 0)
                                <li>
                                    <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                                    </svg>
                                </li>
                            @endif
                            <li>
                                @if(isset($breadcrumb['url']))
                                    <a href="{{ $breadcrumb['url'] }}" class="hover:text-blue-600 transition">
                                        {{ $breadcrumb['label'] }}
                                    </a>
                                @else
                                    <span class="text-gray-900 font-medium">{{ $breadcrumb['label'] }}</span>
                                @endif
                            </li>
                        @endforeach
                    </ol>
                </nav>
                @endif

                <!-- Page Header -->
                @if(isset($pageTitle) || isset($pageDescription))
                <div class="mb-8">
                    @isset($pageTitle)
                        <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $pageTitle }}</h1>
                    @endisset
                    @isset($pageDescription)
                        <p class="text-gray-600">{{ $pageDescription }}</p>
                    @endisset
                    @isset($pageActions)
                        <div class="mt-4">
                            {{ $pageActions }}
                        </div>
                    @endisset
                </div>
                @endif

                <!-- Flash Messages -->
                @if(session('success'))
                    <div class="mb-6 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                        <span class="block sm:inline">{{ session('success') }}</span>
                    </div>
                @endif

                @if(session('error'))
                    <div class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                        <span class="block sm:inline">{{ session('error') }}</span>
                    </div>
                @endif

                @if($errors->any())
                    <div class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                        <ul class="list-disc list-inside">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Main Content Area -->
                @yield('page-content')
            </div>
        </main>
    </div>
</div>
@endsection