<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library Management System</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
        }

        body {
            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
            color: white;
            padding: 20px 0;
            margin-bottom: 40px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            position: relative;
            z-index: 1000;
        }

        .header h1 {
            font-weight: 700;
            font-size: 2.2rem;
            margin: 0;
            letter-spacing: 0.5px;
        }

        .nav-link {
            color: white !important;
            margin: 0 12px;
            font-weight: 500;
            padding: 8px 15px !important;
            border-radius: 4px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--light-color) !important;
            background-color: rgba(255,255,255,0.15);
            transform: translateY(-2px);
        }

        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--light-color);
            transition: width 0.3s ease;
        }

        .nav-link:hover:after {
            width: 100%;
        }

        .content {
            padding: 30px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            margin-bottom: 40px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .content:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        h2 {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        h2:after {
            content: '';
            position: absolute;
            width: 60px;
            height: 3px;
            bottom: 0;
            left: 0;
            background: linear-gradient(to right, var(--secondary-color), var(--accent-color));
        }

        .card {
            border: none;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            height: 100%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 14px 28px rgba(0,0,0,0.12);
        }

        .card-body {
            padding: 25px;
        }

        .card-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }

        .card-text {
            color: #666;
            margin-bottom: 20px;
        }

        .card-icon {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

        .footer {
            margin-top: 50px;
            padding: 30px 0;
            background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
            color: white;
            text-align: center;
            position: relative;
        }

        .footer:before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            right: 0;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%232c3e50" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%232c3e50" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%232c3e50"/></svg>');
            background-size: cover;
        }

        .footer p {
            margin: 0;
            font-size: 0.9rem;
        }

        .footer a {
            color: var(--light-color);
            transition: color 0.3s ease;
        }

        .footer a:hover {
            color: var(--secondary-color);
            text-decoration: none;
        }

        .welcome-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        @media (max-width: 768px) {
            .header {
                padding: 15px 0;
            }

            .header h1 {
                font-size: 1.8rem;
            }

            .navbar-nav {
                margin-top: 15px;
            }

            .nav-link {
                margin: 5px 0;
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                <h1><i class="fas fa-book-open me-2"></i>Library Management System</h1>
                <nav class="navbar navbar-expand-lg navbar-dark">
                    <div class="navbar-nav">
                        <a class="nav-link active" href="/"><i class="fas fa-home me-1"></i> Home</a>

                        <?php if(auth()->guard()->check()): ?>
                            <!-- Show these links when user is logged in -->
                            <a class="nav-link" href="/books"><i class="fas fa-book me-1"></i> Books</a>
                            <a class="nav-link" href="/issues"><i class="fas fa-exchange-alt me-1"></i> Issuance</a>
                             <a class="nav-link" href="/issues/create"><i class="fas fa-exchange-alt me-1"></i>new book Issuance</a>
                            <a class="nav-link" href="/books/create"><i class="fas fa-plus-circle me-1"></i> Add Book</a>
<form action="<?php echo e(route('logout')); ?>" method="POST" class="d-inline">
                                <?php echo csrf_field(); ?>
                            <button type="submit" class="btn btn-outline-light">
                                    <i class="fas fa-sign-out-alt me-1"></i> Logout
                                </button>
                        <?php else: ?>
                            <!-- Show these links when user is not logged in -->
                            <a class="nav-link" href="<?php echo e(route('login')); ?>"><i class="fas fa-sign-in-alt me-1"></i> Login</a>
                            <a class="nav-link" href="<?php echo e(route('register')); ?>"><i class="fas fa-user-plus me-1"></i> Register</a>
                        <?php endif; ?>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="content">
            <h2>Welcome to Our Library</h2>
            <p class="welcome-text">Manage your library resources efficiently with our comprehensive management system. Explore our vast collection of books, track issuances, and maintain your inventory with ease. Our system provides powerful tools to help librarians and patrons alike in creating a seamless library experience.</p>

            <div class="row mt-4 g-4">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <div class="card-icon">
                                <i class="fas fa-book-reader"></i>
                            </div>
                            <h5 class="card-title">Book Collection</h5>
                            <p class="card-text">Browse our extensive collection of books across various genres and categories. Find exactly what you're looking for with our advanced search features.</p>
                            <a href="/books" class="btn btn-outline-primary">Explore Books</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <div class="card-icon">
                                <i class="fas fa-hand-holding"></i>
                            </div>
                            <h5 class="card-title">Issue Books</h5>
                            <p class="card-text">Easily issue books to members, track due dates, and manage returns. Get notifications for overdue books and streamline your circulation process.</p>
                            <a href="/issues" class="btn btn-outline-primary">Manage Issuance</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <div class="card-icon">
                                <i class="fas fa-copy"></i>
                            </div>
                            <h5 class="card-title">Manage Copies</h5>
                            <p class="card-text">Track multiple copies of the same book, monitor their availability status, and manage your inventory efficiently with our intuitive system.</p>
                            <a href="/books" class="btn btn-outline-primary">View Inventory</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <p>&copy; <script>document.write(new Date().getFullYear())</script> Library Management System. All rights reserved.</p>
            <div class="mt-3">
                <a href="#" class="mx-2"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="mx-2"><i class="fab fa-twitter"></i></a>
                <a href="#" class="mx-2"><i class="fab fa-instagram"></i></a>
                <a href="#" class="mx-2"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\library\resources\views/welcome.blade.php ENDPATH**/ ?>