@extends('web.layouts.app')
@section('after_styles')
    <style>
        .rectangle {
            overflow: visible;
            width: 400px;
            height: 250px;
            left: 210px;
            top: 222px;
            text-align: center;
            background: #fff;
        }
        .rectangle .inner{
            padding: 20px 0px;
        }
        .headText{
            text-align: center;
            left: 342px;
            top: 272px;
            overflow: visible;
            white-space: nowrap;
            font-family: Source Sans Pro;
            font-style: normal;
            font-weight: bold;
            font-size: 26px;
            color: rgba(43,153,150,1);
        }
        .Union_1 {
            overflow: visible;
            width: 14px;
            height: 10px;
            transform: rotate(-45deg);
            transform-origin: center;
            left: 0px;
            top: 0px;
        }

        .inner{
            position: relative;
            transition: 0.5s;
            background-color: #f8f8f8;
            box-shadow: 4px 7px 8px 2px #f2f2f2;
            margin: 0px 20px;
        }

        .inner:hover{
            transition: 0.5s;
            background-color: #f8f8f8;
            box-shadow: 4px 7px 8px 2px #f2f2f2;
            margin: 0px 20px;
            margin-top: -5px;
        }

        .inner button{
            background: transparent;
            border: 1px solid rgba(43,153,150,1);
            border-radius: 20px;
            padding: 5px 15px
        }
        button .smb{
            display: block;
        }

        button:hover .smb{
            display: none;
        }

        button .mmb{
            display: none;
        }

        button:hover .mmb{
            display: block;
        }

        .inner button:hover{
            background: rgba(43,153,150,1);
            border: 1px solid rgba(43,153,150,1);
            border-radius: 20px;
            padding: 5px 15px;
            color: #fff;
        }

    </style>
@endsection
@section('content')
    <div class="tpl-block-list tpl-component-slider" id="nc-block-379f70cfb1d929103a499f6c117c4222">

        <div class="container wrapper" style="overflow-x:hidden!important;padding-top: 100px !important;padding-bottom: 50px !important;">
            <div class="row" style="padding-top: 0; display: inline-flex">
                @foreach($subscriptions as $subscription)
                    <div class="rectangle">
                        <div class="inner">
                            <h3 class="headText">{{$subscription->title}}</h3>
                            <p style="font-size: 16px;">{{$subscription->duration}} gün - {{$subscription->price}} TMT</p>
                                @if($subscription->description != null)
                                <table style="width: 100%; font-size: 18px">
                                    @foreach (json_decode($subscription->description) as $item)
                                        <tr style="background: #fff; border-bottom: 2px solid #f8f8f8">
                                            <td style="padding: 5px">{{$item->desc}}</td>
                                        </tr>
                                    @endforeach
                                </table>
                                @endif
                            <div style="padding-top: 20px;">
                                <form method="post" action="/video/subscribe">
                                    @csrf
                                    <input type="hidden" name="subscription_type" value="{{$subscription->id}}">
                                    <button type="submit">
                                        <svg class="Union_1" viewBox="0 0 14 10">
                                            <path class="smb" fill="rgba(43,153,150,1)" id="Union_1" d="M 0.9999000430107117 9.999899864196777 C 0.4473000168800354 9.999899864196777 0 9.552599906921387 0 9 L 0 0.9999000430107117 C 0 0.4473000168800354 0.4473000168800354 0 0.9999000430107117 0 C 1.552500009536743 0 1.999800086021423 0.4473000168800354 1.999800086021423 0.9999000430107117 L 1.999800086021423 8.000100135803223 L 12.99960041046143 8.000100135803223 C 13.55220031738281 8.000100135803223 14.00040054321289 8.447400093078613 14.00040054321289 9 C 14.00040054321289 9.552599906921387 13.55220031738281 9.999899864196777 12.99960041046143 9.999899864196777 L 0.9999000430107117 9.999899864196777 Z">
                                            </path>
                                            <path class="mmb" fill="#fff" id="Union_1" d="M 0.9999000430107117 9.999899864196777 C 0.4473000168800354 9.999899864196777 0 9.552599906921387 0 9 L 0 0.9999000430107117 C 0 0.4473000168800354 0.4473000168800354 0 0.9999000430107117 0 C 1.552500009536743 0 1.999800086021423 0.4473000168800354 1.999800086021423 0.9999000430107117 L 1.999800086021423 8.000100135803223 L 12.99960041046143 8.000100135803223 C 13.55220031738281 8.000100135803223 14.00040054321289 8.447400093078613 14.00040054321289 9 C 14.00040054321289 9.552599906921387 13.55220031738281 9.999899864196777 12.99960041046143 9.999899864196777 L 0.9999000430107117 9.999899864196777 Z">
                                            </path>
                                        </svg>  Satyn al
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
@endsection