@extends('layouts.app')

@push('styles')
    <style>
        body {
            background: url("{{ asset('images/background_main.png') }}") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .navbar-light .navbar-nav .nav-link {
            font-size: 12pt;
            color: #fff!important;
            padding: 5px 15px;
        }
    </style>
@endpush

@section('body')
    <nav class="navbar navbar-light navbar-expand-lg">
        <a class="navbar-brand" href="#">
            <img src="{{ asset('images/logo.png') }}" height="100" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="navbar-nav ml-auto">
                @foreach($list_fitur as $fitur)
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center bg-primary px-4 py-3 mr-3" href="{{ route('login', 'modul=' . $fitur->url) }}">
                            <img src="{{ asset("images/$fitur->icon") }}" alt="" style="height: 30px; width: auto;">
                            <h4 class="ml-2">{{ $fitur->nama }}</h4>
                        </a>
                    </li>
                @endforeach
                @auth
                    <li class="nav-item ">
                        <a class="nav-link d-flex align-items-center bg-danger px-4 py-3 mr-3" href="{{ route('logout') }}">
                            <img src="{{ asset("images/icon_logout.png") }}" alt="" style="height: 30px; width: auto;">
                            <h4 class="ml-2">Keluar</h4>
                        </a>
                    </li>
                @endauth
            </ul>
        </div>
    </nav>

    <div style="height: 40vh;">
        <div class="row h-100">
            <div class="col-sm-12 my-auto">
                <h1 class="text-center font-weight-bolder text-white" style="font-size: 5rem;">
                    SIPENAPKOP
                </h1>
                <h1 class="text-center font-weight-light text-white" style="font-size: 3rem;">
                    Sistem Informasi Penatausahaan Koperasi
                </h1>
            </div>
        </div>
    </div>
@endsection