@extends('frontend.layouts.app')
@section('content')

<style>
    .np-dashborad-card{
        border: unset;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    
    .np-dashborad-card .card-body{
        row-gap: 35px;
        padding: 34px 24px;
    }
    
    .np-dashborad-card .card-body .top-section .icon{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #E4FEFF;
    }
    
    .np-dashborad-card .card-body .content .contents .title{
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        color: #2D6668;
        margin: 0;
    }
    
    .np-dashborad-card .card-body .content .contents .sub-title{
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        margin: 0;
        color: #7DAEB0;
    }
    </style>

    <main class="container mt-5">
        <div class="row">
            @foreach (@$userAccount->permission_access_modules as $key => $permission)
            <div class="col-md-4 col-sm-6 mb-4">
                <a href="{{ @$permission->domain }}" class="userAccount-link">
                    <div class="card np-dashborad-card">
                        <div class="card-body d-flex flex-column">
                            <div class="top-section">
                                <div class="icon d-flex justify-content-center align-items-center">
                                    <img src="{{ asset('images/book.svg') }}" alt="">
                                </div>
                            </div>
                            <div class="content d-flex align-items-start justify-content-between">
                                <div class="contents">
                                    <h2 class="title">{{ $permission->name }}</h2>
                                    <h2 class="sub-title">{{ $permission->description }}</h2>
                                </div>
                                <div class="arrow">
                                    <img src="{{ asset('images/arrow-right.svg') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </main>

<style>
    .account-letter {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #FFF;
        color: #FFF;
    }
    .gr-1 {
        background: linear-gradient(170deg, #01E4F8 0%, #1D3EDE 100%);
    }

    .gr-2 {
        background: linear-gradient(170deg, #B4EC51 0%, #429321 100%);
    }

    .gr-3 {
        background: linear-gradient(170deg, #C86DD7 0%, #3023AE 100%);
    }

    .userAccount-link {
        text-decoration: none;
    }

    .userAccount-card-domain-name {
        color: white;

    }

    .dashboard-image {
        height: 70px;
        width: 70px;
    }

    .userAccount-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        transform: scale(1);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .userAccount-card:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
</style>
@endsection