@extends('layouts.app')

@section('title', 'buyer | '.config('app.name'))
@section('style')
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ url('plugins/fontawesome-free/css/all.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ url('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ url('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ url('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ url('dist/css/adminlte.css') }}">
    <style>
        .form-group > .select2-container {
            width: 100% !important;
        }

        @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }



        .card-basic,
        .card-premium,
        .card-standard {
            margin: 0 2rem 1rem 0;
            padding: 0 0 0.5rem 0;
            width: 15rem;
            background: #fff;
            color: #444;
            text-align: center;
            border-radius: 1rem;
            box-shadow: 0.5rem 0.5rem 1rem rgba(51, 51, 51, 0.2);
            overflow: hidden;
            transition: all 0.1ms ease-in-out;
        }
        .card-basic:hover,
        .card-premium:hover,
        .card-standard:hover {
            transform: scale(1.02);
        }

        .card-header {
            height: 5rem;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 1rem 0;
            color: #fff;
            clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%);
        }

        .header-basic,
        .btn-basic {
            background: linear-gradient(135deg, rgb(0, 119, 238), #06c766);
        }

        .header-standard,
        .btn-standard {
            background: linear-gradient(135deg, #b202c9, #cf087c);
        }

        .header-premium,
        .btn-premium {
            background: linear-gradient(135deg, #eea300, #ee5700);
        }

        .card-body {
            padding: 0.5rem 0;
        }
        .card-body h2 {
            font-size: 2rem;
            font-weight: 700;
        }

        .card-element-container {
            color: #444;
            list-style: none;
        }

        .btn {
            margin: 0.5rem 0;
            padding: 0.7rem 1rem;
            outline: none;
            border-radius: 1rem;
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: all 0.1ms ease-in-out;
        }

        .btn:hover {
            transform: scale(0.95);
        }

        .btn:active {
            transform: scale(1);
        }

        .card-element-hidden {
            display: none;
        }

    </style>
@endsection
@section('content')


    <div class="content articles">

        <div class="row justify-content-center pt-5" >
            @if(!empty($subscription))
                @foreach($subscription as $key => $sub)
                    <div class="card {{ $key === 0 ? 'card-basic' : ($key === 1 ? 'card-standard' : 'card-premium') }}">
                        <div class="card-header {{ $key === 0 ? 'header-basic' : ($key === 1 ? 'header-standard' : 'header-premium') }}">
                            <h1>{{ $sub->name }}</h1>
                        </div>
                        <div class="card-body">
                            @if($sub->name == 'Agent')
                                <p><h2>$ {{ $sub->price }} / Monthly</h2></p>
                            @elseif($sub->name == 'Team')
                                <p><h2>$ {{ $sub->price }} / HAlF YEARLY</h2></p>
                            @elseif($sub->name == 'Brokerage')
                                <p><h2>$ {{ $sub->price }} / YEARLY</h2></p>
                            @endif
                            <div class="card-element-hidden-basic">
                                <ul class="card-element-container">
                                    <li class="card-element">Single agent</li>
                                    <li class="card-element">1 Offers create</li>
                                    <li class="card-element">1 Buyers register</li>
                                </ul>
                                @if(!empty($permission))
                                    @if($permission->status == 1)
                                        @if($sub->id == $permission->plan_id)
                                            <p style="color: red;">
                                                @if($permission->type == 'trial')
                                                    trial
                                                @elseif($permission->type == 'package')
                                                    package
                                                @endif
                                                expire
                                                {{ $permission->end_date }}
                                            </p>
                                            <a href="{{ route('cancel.subscription', $permission->stripe_tx_id) }}" class="btn btn-basic">cancel subscription</a>
                                        @endif
                                    @endif
                                @else
                                    <a href="{{ route('subscription.detail',$sub->id) }}" class="btn btn-basic">Buy now</a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    @endsection

    @section('script')

        <!-- DataTables  & Plugins -->
            <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
            <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
            <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
            <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
            <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
            <script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
            <script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
            <script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
            <script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
            <script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
            <script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
            <script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>

            <script>
                $(function () {

                    $("#buyerTable").DataTable({
                        "bSort": false, "responsive": true, "lengthChange": false, "autoWidth": false,
                        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
                    }).buttons().container().appendTo('#buyerTable_wrappers .col-md-6:eq(0)');
                });

            </script>
@endsection