@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">{{ $title }}</h2>
            </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">
                @if(isset($servers['all']))
                    @foreach($servers['all'] as $item)
                        <div class="col-6 mb-3 aos-init aos-animate" data-aos="fade-up" data-type="platform" data-id="view/{{ $slug }}/{{ $general_settings['general']['default_platform'] }}?server={{ $item['slug'] }}">
                            <div style="background: linear-gradient(-180deg, red 0%, #f76a6a 100%);" class="icon-box text-center" data-vivus-hover>
                                <div class="content">
                                    <h3 class="title">{{ $item['title'] }}</h3>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    @foreach($platformList as $item)
                        @php
                            $color = json_decode($item['color'],true);
                        @endphp
                        <!-- data-type="platform" data-id="view/{{ $slug }}/{{ $item['id'] }}" -->
                            <div class="col-6 mb-3 aos-init aos-animate" data-aos="fade-up">
                                <div style="background: linear-gradient(-180deg, {{ $color['end'] }} 0%, {{ $color['start'] }} 100%);" 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>
                                        @if(isset($servers['sub'][$item['id']]))
                                            <br>
                                            <select data-type="serverSelect" data-redirect-url="/platforms/view/{{ $slug }}/{{ $general_settings['general']['default_platform'] }}?server=">
                                                <option value="select">Server Seçiniz...</option>
                                                @foreach($servers['sub'][$item['id']] as $item)
                                                    <option value="{{ $item['slug'] }}">{{ $item['title'] }}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                @endif
            </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>
        $(document).ready(function(){
            $('[data-type="serverSelect"]').on('change', function(){
                if($(this).val() != 'select')
                {
                    window.location.href = $(this).data('redirect-url') + $(this).val();
                }
            });
        });
    </script>
@endsection