@extends('business_owner.layouts.master')
@section('title', __('backend.boost_event'))
@section('content')

    <link href="{{ asset('assets/dashboard/css/select2.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
    <style type="text/css">
        .select2-container {
            width: 100% !important;
        }

        .form-control:disabled,
        .form-control[readonly] {
            background-color: #ffffff;
            opacity: 1;
        }

        .table tbody>tr>td,
        .table thead>tr>th {

            border-left: 1px solid #dfdfdf !important;
            word-wrap: break-word;

        }

        .table tbody>tr>td {
            word-wrap: break-word;
        }

        .table_design {
            padding: 0 !important;
        }

        .table_design th {
            width: 200px !important;
        }
        .page-wrapper {
                width: 100%;
                max-width: 1100px;
            }

            /* Breadcrumb */
            .breadcrumb {
                font-size: 13px;
                color: #999;
                margin-bottom: 8px;
            }

            .breadcrumb a {
                color: #999;
                text-decoration: none;
            }

            .breadcrumb a:hover {
                color: #333;
            }

            h3.page-title {
                font-family: 'DM Sans', sans-serif;
                font-size: 22px;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 4px;
            }

            .header-block {
                margin-bottom: 32px;
            }

            /* Grid */
            .pricing-wrapper {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }

            @media (max-width: 800px) {
                .pricing-wrapper {
                    grid-template-columns: 1fr;
                }
            }

            /* Card base */
            .pricing-card {
                background: #fff;
                border-radius: 26px;
                padding: 28px 26px 26px;
                border: 1.5px solid #ede8e4;
                display: flex;
                flex-direction: column;
                transition: transform 0.28s ease, box-shadow 0.28s ease;
                position: relative;
                overflow: hidden;
            }

            .pricing-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
            }

            /* Dark card */
            .pricing-card.dark {
                background: #140e0e;
                border: none;
                color: #fff;
            }

            /* Subtle grain texture on dark card */
            .pricing-card.dark::before {
                content: '';
                position: absolute;
                inset: 0;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
                background-size: 180px;
                opacity: 0.18;
                pointer-events: none;
                border-radius: 26px;
            }

            /* Tier label */
            .tier {
                font-size: 10.5px;
                text-transform: uppercase;
                letter-spacing: 1.6px;
                color: #b07a56;
                font-weight: 700;
                margin-bottom: 14px;
            }

            .dark .tier {
                color: #c9916a;
            }

            /* Title */
            .card-title {
                font-family: 'Playfair Display', Georgia, serif;
                font-size: 36px;
                font-weight: 400;
                line-height: 1.08;
                color: #1a1007;
                margin-bottom: 10px;
            }

            .dark .card-title {
                color: #fff;
            }

            /* Price */
            .price {
                font-size: 54px;
                font-weight: 800;
                line-height: 1;
                letter-spacing: -2px;
                color: #1a1007;
                margin-bottom: 28px;
            }

            .dark .price {
                color: #fff;
            }

            .price .period {
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0;
                color: #aaa;
                margin-left: 2px;
            }

            .dark .price .period {
                color: #888;
            }

            /* Features */
            .features {
                list-style: none;
                flex: 1;
                margin-bottom: 32px;
            }

            .features li {
                position: relative;
                padding-left: 18px;
                margin-bottom: 13px;
                font-size: 14px;
                color: #6a6058;
                line-height: 1.45;
            }

            .dark .features li {
                color: #c8bfb8;
            }

            .features li::before {
                content: '•';
                position: absolute;
                left: 0;
                top: 0;
                color: #b07a56;
                font-size: 20px;
                line-height: 1;
            }

            /* Buttons */
            .card-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: 100%;
                height: 54px;
                border-radius: 100px;
                border: none;
                cursor: pointer;
                font-family: 'DM Sans', sans-serif;
                font-size: 12.5px;
                font-weight: 700;
                letter-spacing: 1.2px;
                text-transform: uppercase;
                transition: background 0.22s ease, transform 0.16s ease;
                outline: none;
            }

            .card-btn:active {
                transform: scale(0.98);
            }

            .btn-dark {
                background: #140e0e;
                color: #fff;
            }

            .btn-dark:hover {
                background: #000;
            }

            .btn-light {
                background: #fff;
                color: #140e0e;
            }

            .btn-light:hover {
                background: #f2ede9;
            }

            /* Arrow icon */
            .arrow {
                font-style: normal;
                font-size: 15px;
                opacity: 0.75;
            }
    </style>

    <div class="padding list-school">
        <div class="box">
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3>{{ __('backend.boost_event') }}
                    </h3>
                    <small>
                        <a href="{{ route('businessOwnerHome') }}">{{ __('backend.dashboard') }}</a> / <a
                            href="{{ route('business_owner.event') }}">{{ __('backend.event') }}</a> /
                        {{ __('backend.boost_event') }}
                    </small>
                </div>
            </div>


            <div class="page-wrapper">


            <div class="pricing-wrapper">

                @foreach($plans as $key => $plan)
            
                    <div class="pricing-card {{ $key == 1 ? 'dark' : '' }}">
                        
                        <div class="tier">
                            {{ $plan->name }}
                        </div>
            
                        <h2 class="card-title">
                            {{ $plan->name }}
                        </h2>
            
                        <div class="price">
                            ${{ number_format($plan->price_amount, 2) }}
                            <span class="period">
                                / {{ $plan->duration_days }} days
                            </span>
                        </div>
            
                        <ul class="features">
                            @if(!empty($plan->features))
                                @foreach($plan->features as $feature)
                                    <li>{{ $feature }}</li>
                                @endforeach
                            @else
                                <li>No features available</li>
                            @endif
                        </ul>
            
                        <form method="POST" action="{{ route('event.boost.checkout') }}" target="_blank">
                            @csrf
                            <input type="hidden" name="event_id" value="{{ $event->id }}">
                            <input type="hidden" name="plan_id" value="{{ $plan->id }}">
            
                            <button type="submit" class="card-btn {{ $key == 1 ? 'btn-light' : 'btn-dark' }}">
                                Select Plan <span class="arrow">↗</span>
                            </button>
                        </form>
            
                    </div>
            
                @endforeach
            
            </div>
        </div>

        </div>
    @endsection
    @push('after-scripts')
        <script src="{{ asset('assets/dashboard/js/jquery.min.js') }} "></script>
        <script src="{{ asset('assets/dashboard/js/jquery.validate.min.js') }} "></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
    @endpush