@extends('layouts.base')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
@endsection

@section('content')
    <div style="padding-top: 200px;" class="section">
        <div style="max-width: 800px;" class="container">
            <div class="section-title text-center mb-12 aos-init aos-animate" data-aos="fade-up">
                <h2 class="title">{{ __('platform.title') }}</h2>
                <p class="sub-title">{{ __('platform.select') }}</p>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <ol class="wizard numeric">
                        <li class="active">
                            <span>1</span>
                            <p style="margin-left: -12px;">{{ __('platform.wizard.step-one') }}</p>
                        </li>
                        <li>
                            <span>2</span>
                            <p style="margin-left: -10px;">{{ __('platform.wizard.step-two') }}</p>
                        </li>
                        <li>
                            <span>3</span>
                            <p style="margin-left: -6px;">{{ __('platform.wizard.step-three') }}</p>
                        </li>
                        <li>
                            <span>4</span>
                            <p style="margin-left: -9px;">{{ __('platform.wizard.step-four') }}</p>
                        </li>
                        <li>
                            <span>5</span>
                            <p style="margin-left: -8px;">{{ __('platform.wizard.step-five') }}</p>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="section section-padding-t90-b100 platforms">
        <div class="container">
            <div class="row row-cols-lg-4 row-cols-md-2 row-cols-sm-2 row-cols-1 mb-n6 platforms-row">








                @foreach(\App\Models\Platform::all()->toArray() as $item)
                    @php
                        $color = json_decode($item['color'],true);
                    @endphp
                    <div class="col-6 mb-3 aos-init aos-animate" data-aos="fade-up" data-type="platform" data-id="{{ $item['id'] }}">
                        <div style="background-color: #003087;" class="icon-box text-center" data-vivus-hover="">
                            <div class="icon">
                                @if($item['logo_type'] == 'image')
                                    <img src="/storage/platform/{{ $item['logo'] }}" width="{{ $item['width'] }}" height="{{ $item['height'] }}">
                                @else
                                    {!! $item['logo'] !!}
                                @endif
                            </div>
                            <div class="content">
                                <h3 class="title">{{ $item['title'] }}</h3>
                            </div>
                        </div>
                    </div>
                @endforeach










            </div>
        </div>
    </div>

    <div style="padding-top: 50px;" class="section section-padding-bottom-150">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <img src="{{ asset('assets/images/trustpilot-mini.png') }}" alt="...">
                </div>
            </div>
        </div>
    </div>

    <div class="section section-padding-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    @include('widgets.subscription')

                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/chat.js') }}"></script>
@endsection

@section('script')
    <script>

    </script>
@endsection