@extends('frontend.layouts.master')

@section('title','Polo stationery || Kits')

@section('main-content')
<style>
    /* ================= SUBSCRIPTION CARDS ================= */
    .subscription-section {
        background: #f4f7fa;
        padding: 60px 0;
    }

    .subscription-card {
        background: #fff;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transition: 0.3s ease;
        position: relative;
        height: 100%;
    }

    .subscription-card:hover {
        transform: translateY(-8px);
    }

    .subscription-card h3 {
        font-weight: 600;
        margin-bottom: 10px;
    }

    .subscription-card .price {
        font-size: 26px;
        font-weight: bold;
        margin: 15px 0;
    }

    .subscription-card ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
    }

    .subscription-card ul li {
        padding: 8px 0;
        font-size: 14px;
        border-bottom: 1px solid #f1f1f1;
    }

    .subscription-card ul li:last-child {
        border-bottom: none;
    }

    .btn-kit {
        display: inline-block;
        padding: 10px 25px;
        border-radius: 25px;
        font-weight: 500;
        background: #007bff;
        color: #fff;
        text-decoration: none;
    }

    .btn-kit:hover {
        background: #0056b3;
    }

    /* ================= VIEW ICON ================= */
    .view-icon {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 35px;
        height: 35px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        color: #333;
    }

    .modal-dialog {
        max-width: 550px !important;
        margin: auto;
    }

    .modal-dialog-centered {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    /* Modal box */
    .modern-modal {
        width: 550px;
        height: 500px;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);

    }

    /* Header stays fixed */
    .modern-header {
        background: linear-gradient(135deg, #1e90ff, #00bcd4);
        padding: 14px 16px;
        color: #fff;
        text-align: center;
        flex-shrink: 0;
    }

    /* Scroll only inside body */
    .modal-body {
        height: calc(500px - 60px);
        overflow-y: auto;
        padding: 12px 14px;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .modal-body::-webkit-scrollbar {
        display: none;
    }


    body.modal-open {
        overflow: hidden !important;
        padding-right: 0 !important;
    }


    .modal {
        padding-right: 0 !important;

    }

    .modern-close {
        position: absolute;
        right: 12px;
        top: 8px;
        background: rgba(255, 255, 255, 0.25);
        border: none;
        color: #fff;
        font-size: 20px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .modern-close:hover {
        background-color: red;
    }

    .product-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .product-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

    .product-qty {
        background: #eaf3ff;
        color: #007bff;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* ===== PLAN FEATURES (LIKE IMAGE) ===== */
    .plan-features {
        text-align: left;
        margin: 15px 0 25px;
    }

    .plan-feature {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
    }

    .plan-feature .check {
        color: #28a745;
        font-weight: bold;
        font-size: 15px;
        line-height: 1;
    }

    .plan-feature .text {
        line-height: 1.4;
    }

    .btns-kit {
        display: inline-block;
        padding: 10px 25px;
        /* border-radius: 25px; */
        font-weight: 500;
        background: #007bff;

        text-decoration: none;
        width: 100%;
        font-size: large;
        color: white;

    }
</style>






<section class="subscription-section">
    <div class="container">

        <div class="row text-center mb-5">
            <div class="col-lg-12">
                <h2>Choose Your Office Supply Kit</h2>
                <p>Select ready-made kits or create your own customized kit.</p>
            </div>
        </div>

        <div class="row">

            @foreach($subscriptions as $subscription)

            <div class="col-lg-3 col-md-6 mb-4">
                <div class="subscription-card">

                    <h3>{{ $subscription->package_name }}</h3>

                    <a href="#" class="view-icon"
                        data-toggle="modal"
                        data-target="#modal{{ $subscription->id }}">
                        <i class="fa fa-eye"></i>
                    </a>

                    <div class="price">₹{{ $subscription->price }}</div>

                    @php
                    $items = explode("\n", $subscription->package_description);
                    @endphp

                    <ul>
                        @foreach($items as $item)
                        @if(trim($item) != '')
                        <li>{{ trim($item) }}</li>
                        @endif
                        @endforeach
                    </ul>

                    <button type="button"
                        class="btn-kit"
                        data-toggle="modal"
                        data-target="#modal{{ $subscription->id }}">
                        View Details
                    </button>


                </div>
            </div>

            <!-- MODAL -->
            <div class="modal fade" id="modal{{ $subscription->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content modern-modal" style="border-radius: 25px;">

                        <div class="modern-header position-relative">
                            <h5>{{ $subscription->package_name }} – What You Get</h5>
                            <button type="button" class="modern-close" data-dismiss="modal">
                                &times;
                            </button>
                        </div>

                        <div class="modal-body">

                            @foreach($subscription->products->groupBy('category') as $categoryName => $products)

                            <h6 class="bg-light p-2 font-weight-bold mb-2">
                                {{ $categoryName }}
                            </h6>

                            <ul class="list-group mb-4">
                                @foreach($products as $product)
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <div class="product-row">
                                        <span class="product-name">{{ $product->product_name }}</span>
                                        <span class="product-qty">Qty {{ $product->quantity }}</span>
                                    </div>

                                    <!-- <span class="font-weight-bold text-primary">
                                                    ₹{{ $product->price }}
                                                </span> -->
                                </li>
                                @endforeach
                            </ul>

                            @endforeach

                        </div>
                        <div class="text-center mt-3">
                            @auth
                            <form action="{{ route('cart.add.subscription') }}" method="POST">
                                @csrf
                                <input type="hidden" name="subscription_id" value="{{ $subscription->id }}">
                                <button type="submit" class="btns-kit">
                                    Order Now
                                </button>
                            </form>

                            @else
                            <a href="{{ route('login.form') }}?redirect=checkout" class="btns-kit">
                                Login to Order
                            </a>
                            @endauth
                        </div>

                    </div>

                </div>

            </div>
            <!-- END MODAL -->
            @endforeach

        </div>


</section>
@endsection