{{--<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-randomNonce123' https://onesignal.com https://cdn.onesignal.com https://ajax.googleapis.com https://maps.googleapis.com;">--}}
@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
@section('content')
<style type="text/css">
    /* @keyframes fadeIn {
        0% { opacity: 0; transform: translateY(-20px); }
        100% { opacity: 1; transform: translateY(0); }
    } */
    .fade-in-up-item {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    /* Apply the animation to elements */
    .landing_img, .boxed {
        animation: fadeIn 0.5s ease-in-out;
    }
    .analytics_header{
        width: 1230px !important;
        margin-left: 10px !important;
        margin-top: 10px !important;
    }
    .heading{
        margin: 0 0 3px 105px;
        color: #3080ea !important;
        font: 12px Roboto;
    font-weight: 500 !important;
        /*font-weight: bold !important;*/
    }
    a:hover {
        text-decoration: none;
    }
    .landing_img {
    float: left;
    margin-top: -35px;
    height: 95px;
    width: 98px;
    margin-right: 3px;
}
.boxed {
    margin-top: 1px;
    border-top: 2px solid #e6e6e6 !important;
    width: 195px;
    float: left;
    padding: 5px;
    font-weight: 400 !important;
    height: 95px;
    border-radius: 0px;
    /*text-align: justify;*/
    white-space: normal;
    white-space: pre-wrap;
    color: #343434;
    font: 12px Roboto;
}
.title{
    font-size: 13px !important;
    color: #343434 !important;
}
</style>
<div class="ml-4 analytics_header">
        <div class="pl-3" style="padding-top:5px;"><b class="title">{{$title}}<b></div>
    </div>
<div class="container">
<!--     <div class="mt-5 analytics_header">
        <div class="pt-2 pl-3"><b>Analytics<b></div>
    </div> -->
    <div class="section">
        <div class="box no-bg-bb">
            <div class="title">
                <span class="hide" style="background-position: right top;"></span>
            </div>
            <div class="content" style="min-height: 370px; display: block; padding-top:10px;">
                <table cellspacing="0" cellpadding="0" border="0" class="mt-4">
                    <tbody>
                        @if(isset($data))
                        @foreach($data as $key=>$value)
                        @php
                            $className='';
                            if(isset($value['path']))
                            {
                                $value['file_name']=$value['path']['file_name'];
                            }
                            if(isset($value['status']) && $value['status'] ==0)
                            {
                                $className='disabled ';
                            }
                        @endphp
                        @if(($key+1)%3 == 1)
                        <tr>
                        @endif
                            <td @if(($key+1)%3 != 1) class="{{$className}} paddin_left_hundred fade-in-up-item" @else class="{{$className}} fade-in-up-item" @endif >
                                <a class="" href="{{config('app.BASE_URL')}}{{isset($value['file_name'])?$value['file_name']:null}}">
                                    <div class="heading">{{$value['page_menu_title']}}</div>
                                    <img src="{{config('app.ANGULAR_URL')}}{{$path}}{{$value['img']}}" class="landing_img">
                                    <div class="boxed">{{$value['description']}}</div>
                                </a>
                            </td>
                        @if(($key+1)%3 == 0)
                        </tr>
                        @endif
                        @endforeach()
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop
<script src="{{ URL::asset('assets/plugins/jquery/jquery-3.6.0.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/loan-advance.js') }}"></script>