@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .center {
        margin: auto;
        width: 60%;
        padding: 10px;
    }

    @media only screen and (max-width:991px){
        .text-lg-center {
            display: flex;
            align-items: center;
            
        }
        .mb-3{
            margin-bottom: 0.4rem !important;
        }
    }

    @media only screen and (max-width:375px){
        .text-lg-center {
            justify-content: center
        }
    }
</style>

<div class="page-content">
    <div class="row">
        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        @php
            $masterList = masterList();
        @endphp

        @foreach($masterList as $key=>$value)
            <div class="col-xl-3 col-sm-6">
                <a href="{{$value['url']}}">
                    @if($value['default'] == 1)
                        <div class="card" style="background-color: lavender">
                    @else
                        <div class="card">
                    @endif
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="text-lg-center">
                                        <div class="avatar-sm me-3 mx-lg-auto mb-3 mt-1 float-start float-lg-none">
                                            <span class="avatar-title rounded-circle bg-primary bg-soft text-primary">
                                                <i class="{{$value['icon']}} font-size-24"></i>
                                            </span>
                                        </div>
                                        <h5 class="font-size-16 text-truncate">{{$value['display_name']}}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        @endforeach  
    </div>
</div>

@endsection