{{-- resources/views/configuration/subscription-plans.blade.php --}}
@php
/**
* File : subscription-plans.blade.php
* Redesign: Left sidebar menu with animated full-page content per selection.
* Design-only update (no logic or conditions changed).
* -----------------------------------------------------------------------------
*/
@endphp

@extends('layouts.app', ['title' => ($pageTitle ?? 'Subscription Plans')])

@section('content')
@include('users.partials.header', [
'title' => __tr('Subscription Plans') . ' ' . auth()->user()->name,
'description' => '',
'class' => 'col-lg-12'
])

<style>
    /* Layout */
    .lw-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 1.25rem;
    }

    @media (max-width: 991.98px) {
        .lw-layout {
            grid-template-columns: 1fr;
        }
    }

    /* Sidebar */
    .lw-sidebar .nav-link {
        border-radius: .5rem;
        padding: .65rem .75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.95rem;
    }

    @media (max-width: 767px) {
        .lw-sidebar .nav-link {
            padding: .5rem .6rem;
            font-size: 0.85rem;
        }
    }

    .lw-sidebar .nav-link.active {
        box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, .06);
    }

    /* Animated content panes */
    .tab-content .tab-pane {
        opacity: 0;
        transform: translateX(16px);
        transition: opacity .25s ease, transform .25s ease;
    }

    .tab-content .tab-pane.active.show {
        opacity: 1;
        transform: translateX(0);
    }

    /* Minor card polish */
    .card.shadow-sm {
        box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08) !important;
        border-radius: 0.5rem;
    }

    @media (max-width: 767px) {
        .card.shadow-sm {
            border-radius: 0.3rem;
        }
    }

    /* Form elements */
    .form-row {
        margin-right: -5px;
        margin-left: -5px;
    }

    .form-row>div {
        padding: 5px;
    }

    @media (max-width: 576px) {
        .form-row>div {
            width: 100%;
        }
    }

    /* Responsive buttons */
    .btn {
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
    }

    @media (max-width: 576px) {
        .btn {
            font-size: 0.8rem;
            padding: 0.3rem 0.8rem;
        }
    }

    /* Input fields */
    .form-control {
        font-size: 0.95rem;
        padding: 0.45rem 0.8rem;
    }

    @media (max-width: 767px) {
        .form-control {
            font-size: 0.85rem;
            padding: 0.35rem 0.6rem;
        }
    }

    /* Card layout adjustments */
    .card-body {
        padding: 1.25rem;
    }

    @media (max-width: 767px) {
        .card-body {
            padding: 1rem;
        }
    }

    /* Feature grid */
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    @media (max-width: 767px) {
        .feature-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Responsive headings */
    h2 {
        font-size: 1.5rem;
    }

    @media (max-width: 767px) {
        h2 {
            font-size: 1.25rem;
        }
    }

    h5 {
        font-size: 1.1rem;
    }

    @media (max-width: 767px) {
        h5 {
            font-size: 1rem;
        }
    }

    /* Responsive spacing */
    .mb-3,
    .my-3 {
        margin-bottom: 0.75rem !important;
    }

    @media (max-width: 576px) {

        .mb-3,
        .my-3 {
            margin-bottom: 0.5rem !important;
        }
    }

    /* Scrollable content on small screens */
    @media (max-width: 767px) {
        .lw-layout {
            overflow-x: hidden;
        }

        .tab-content {
            overflow-y: auto;
            max-height: 70vh;
        }
    }
</style>

<div class="container-fluid container-fluid-padding p-4" id="lwSubscriptionPlansContainer">

    <div class="lw-layout">
        {{-- Left Sidebar Menu --}}
        <aside class="lw-sidebar">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3">
                    <h6 class="text-muted mb-3">{{ __tr('Plans Menu') }}</h6>
                    <div class="nav flex-column nav-pills gap-2" id="lwPlansMenu" role="tablist" aria-orientation="vertical">
                        {{-- Free Plan Link --}}
                        <a class="nav-link active" id="v-pills-free-tab"
                            data-toggle="pill" href="#v-pills-free" role="tab"
                            aria-controls="v-pills-free" aria-selected="true">
                            <span>{{ __tr('Free Plan') }}</span>
                            <span class="badge border">{{ __tr('Free') }}</span>
                        </a>

                        {{-- Paid Plans Links --}}
                        @if (!__isEmpty($planStructure))
                        @foreach ($planStructure as $planKey => $plan)
                        @php $planId = $plan['id']; @endphp
                        <a class="nav-link" id="v-pills-{{ $planId }}-tab"
                            data-toggle="pill" href="#v-pills-{{ $planId }}" role="tab"
                            aria-controls="v-pills-{{ $planId }}" aria-selected="false">
                            <span>{{ $plan['title'] ?? (__tr('Plan') . ' #' . $planId) }}</span>
                            <span class="badge border">{{ $planId }}</span>
                        </a>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </aside>

        {{-- Right Content Area --}}
        <section>
            <div class="tab-content" id="v-pills-tabContent">

                {{-- Free Plan Pane --}}
                <div class="tab-pane fade show active" id="v-pills-free" role="tabpanel" aria-labelledby="v-pills-free-tab">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center p-3">
                            <div class="d-flex align-items-center gap-3 flex-grow-1">
                                <div class="badge badge-pill badge-light border px-3 py-2">{{ __tr('Free') }}</div>
                                <h5 class="mb-0">{{ __tr('Free Plan Configurations') }}</h5>
                            </div>
                            <div class="col-auto">
                                <x-lw.checkbox
                                    id="selectFreePlan"
                                    name="enabled"
                                    :checked="$freePlan['enabled']"
                                    data-lw-plugin="lwSwitchery"
                                    :label="__tr('Enable this Plan')" />
                            </div>
                        </div>

                        <div class="card-body">
                            @php
                            $freeFeatures = $freePlan['features'];
                            @endphp

                            <!-- Add / Update Free Plan Form -->
                            <x-lw.form id="lwAddNewPlanForm-Free" :action="route('manage.configuration.subscription-plans.write.update')">
                                <input type="hidden" name="config_plan_id" value="free">

                                <!-- Title -->
                                <x-lw.input-field
                                    type="text"
                                    id="free_title"
                                    name="title"
                                    :label="__tr('Title')"
                                    required
                                    placeholder="{{ __tr('your plan title') }}"
                                    value="{{ strtr($freePlan['title'] ?? '', ['__title__' => '']) ?? '' }}" />

                                <div class="mt-4">
                                    <h5 class="text-danger">{{ __tr('Feature Limits') }}</h5>

                                    <div class="row mt-3 feature-grid">
                                        @if (!__isEmpty($freeFeatures))

                                        {{-- ✅ Single Card for ALL Switch (checkbox) Features --}}


                                        {{-- ✅ Separate Card for Each Input Feature --}}
                                        @foreach ($freeFeatures as $featureKey => $feature)
                                        @php
                                        $structureFeature = $freePlanStructure['features'][$featureKey];
                                        @endphp

                                        @if (!isset($structureFeature['type']) || $structureFeature['type'] != 'switch')
                                        <div class="col-sm-12 col-md-12 col-lg-12 mb-3 pr-1 pl-1">
                                            <div class="card h-100 border-0 shadow-sm">
                                                <div class="card-body py-3">

                                                    <x-lw.input-field
                                                        :appendText="$structureFeature['limit_duration_title'] ?? ''"
                                                        type="number"
                                                        id="free_{{ $featureKey }}_limit"
                                                        name="{{ $featureKey }}_limit"
                                                        :label="$structureFeature['description']"
                                                        required
                                                        min="-1"
                                                        placeholder="{{ $feature['description'] }}"
                                                        value="{{ is_numeric($feature['limit'] ?? '') ? $feature['limit'] : '' }}"
                                                        :helpText="__tr('Use -1 for unlimited')" />
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @endforeach
                                        <div class="row ml-2">
                                            <div class="h-100 w-100">
                                                <div class="w-100">

                                                    @foreach ($freeFeatures as $featureKey => $feature)
                                                    @php
                                                    $structureFeature = $freePlanStructure['features'][$featureKey];
                                                    @endphp
                                                    <div class="mb-2">

                                                        @if (isset($structureFeature['type']) && $structureFeature['type'] == 'switch')
                                                        <input type="hidden" name="{{ $featureKey }}_limit" value="0">
                                                        <x-lw.checkbox
                                                            id="free_{{ $featureKey }}_limit"
                                                            name="{{ $featureKey }}_limit"
                                                            data-lw-plugin="lwSwitchery"
                                                            :checked="$feature['limit']"
                                                            :label="__tr('Enable __itemDescription__', ['__itemDescription__' => $structureFeature['description']])"
                                                            value="1" />
                                                        <br>
                                                        @endif
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>


                                <div class="mt-4 d-flex justify-content-end float-right">
                                    <button type="submit" class="btn btn-primary">{{ __tr('Update') }}</button>
                                </div>
                            </x-lw.form>
                            <!--/ Free Plan Form -->
                        </div>
                    </div>
                </div>

                {{-- Paid Plans Panes --}}


                @if (!__isEmpty($planStructure))
                @foreach ($planStructure as $planKey => $plan)
                @php
                $savedPlan = $planDetails[$planKey];
                $planId = $plan['id'];
                $features = $plan['features'];
                @endphp

                <div class="tab-pane fade" id="v-pills-{{ $planId }}" role="tabpanel" aria-labelledby="v-pills-{{ $planId }}-tab">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center p-3">
                            <div class="d-flex align-items-center gap-3 flex-grow-1">
                                <div class="badge badge-pill badge-primary px-3 py-2">#{{ $planId }}</div>
                                <h5 class="mb-0">{{ __tr('Plan Configurations') }}</h5>
                            </div>
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <x-lw.checkbox
                                    id="select_{{ $planId }}"
                                    name="enabled"
                                    :checked="$savedPlan['enabled']"
                                    data-lw-plugin="lwSwitchery"
                                    :label="__tr('Enable this Plan')" />
                            </div>
                        </div>

                        <div class="card-body">
                            <!-- Add / Update Plan Form -->
                            <x-lw.form id="lwAddNewPlanForm-{{ $planId }}" :action="route('manage.configuration.subscription-plans.write.update')">
                                <input type="hidden" name="config_plan_id" value="{{ $planId }}">
                                <!-- Title -->
                                <x-lw.input-field
                                    type="text"
                                    id="{{ $planId }}_title"
                                    name="title"
                                    :label="__tr('Title')"
                                    required
                                    placeholder="{{ __tr('your plan title') }}"
                                    value="{{ strtr($savedPlan['title'] ?? $plan['title'] ?? '', ['__title__' => '']) ?? '' }}" />

                                <h5 class="text-danger mt-4">{{ __tr('Feature Limits') }}</h5>

                                <div class="row mt-3 feature-grid">
                                    @if (!__isEmpty($features))



                                    {{-- ✅ Separate Card for Each Input Feature --}}
                                    @foreach ($features as $featureKey => $feature)
                                    @php
                                    $structureFeature = $feature;
                                    $feature = $savedPlan['features'][$featureKey];
                                    @endphp

                                    @if (!isset($structureFeature['type']) || $structureFeature['type'] != 'switch')
                                    <div class="col-sm-12 col-md-12 col-lg-12 mb-3 pr-1 pl-1">
                                        <div class="card h-100 border-0 shadow-sm">
                                            <div class="card-body py-3">

                                                <x-lw.input-field
                                                    :appendText="$structureFeature['limit_duration_title'] ?? ''"
                                                    type="number"
                                                    id="{{ $planId }}_{{ $featureKey }}_limit"
                                                    name="{{ $featureKey }}_limit"
                                                    :label="$structureFeature['description']"
                                                    required
                                                    min="-1"
                                                    placeholder="{{ $feature['description'] }}"
                                                    value="{{ is_numeric($feature['limit'] ?? '') ? $feature['limit'] : '' }}"
                                                    :helpText="__tr('Use -1 for unlimited')" />
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @endforeach
                                    {{-- ✅ Single Card for ALL Switch (checkbox) Features --}}
                                    <div class="row ml-2">
                                        {{-- ✅ Single Card for ALL Switch (checkbox) Features --}}
                                        <div class="h-100 w-100">
                                            <div class="w-100">

                                                @foreach ($features as $featureKey => $feature)
                                                @php
                                                $structureFeature = $feature;
                                                $feature = $savedPlan['features'][$featureKey];
                                                @endphp
                                                <div class="mb-2">
                                                    @if (isset($structureFeature['type']) && $structureFeature['type'] == 'switch')
                                                    <input type="hidden" name="{{ $featureKey }}_limit" value="0">
                                                    <x-lw.checkbox
                                                        id="{{ $planId }}_{{ $featureKey }}_limit"
                                                        name="{{ $featureKey }}_limit"
                                                        data-lw-plugin="lwSwitchery"
                                                        :checked="$feature['limit']"
                                                        :label="__tr('Enable __itemDescription__', ['__itemDescription__' => $structureFeature['description']])"
                                                        value="1" />
                                                    <br>
                                                    @endif
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>


                                <h5 class="text-danger mt-4">{{ __tr('Charges') }}</h5>

                                @if (!__isEmpty($plan['charges']))
                                <div class="row mt-3 feature-grid">
                                    <div class="col-12">
                                        <div class="d-flex flex-wrap gap-2">
                                            @foreach ($plan['charges'] as $itemKey => $itemValue)
                                            @php
                                            $itemValue = $planDetails[$planKey]['charges'][$itemKey];
                                            @endphp

                                            <div class="card border-0 shadow-sm mb-3" style="min-width: 240px;">
                                                <div class="card-body p-3">
                                                    <h6 class="mb-2">{{ $itemKey }}</h6>

                                                    <x-lw.checkbox
                                                        id="select_{{ $planId }}_{{ $itemKey }}"
                                                        name="{{ $itemKey }}_enabled"
                                                        :checked="$itemValue['enabled']"
                                                        data-lw-plugin="lwSwitchery"
                                                        :label="__tr('Enable this Charge')" />

                                                    <hr class="my-2">

                                                    <x-lw.input-field
                                                        type="text"
                                                        id="{{ $planId }}_{{ $itemKey }}_plan_price_id"
                                                        name="{{ $itemKey }}_plan_price_id"
                                                        :label="__tr('Stripe Plan Price ID')"
                                                        placeholder="{{ __tr('stripe plan price id') }}"
                                                        value="{{ $itemValue['price_id'] }}" />

                                                    <x-lw.input-field
                                                        type="number"
                                                        id="{{ $planId }}_{{ $itemKey }}_charge"
                                                        name="{{ $itemKey }}_charge"
                                                        :label="__tr('Charge Amount')"
                                                        min="0"
                                                        placeholder="{{ __tr('Charge Amount') }}"
                                                        value="{{ $itemValue['charge'] }}">
                                                        <x-slot name="prependText">
                                                            {{ getCurrencySymbol() }}
                                                        </x-slot>
                                                        <x-slot name="appendText">
                                                            {{ getCurrency() }}
                                                        </x-slot>
                                                    </x-lw.input-field>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <div class="d-flex justify-content-end mt-3 float-right">
                                    <button type="submit" class="btn btn-primary">{{ __tr('Update') }}</button>
                                </div>
                            </x-lw.form>
                            <!--/ Plan Form -->
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </section>
    </div>
</div>

@push('scripts')
<script>
    (function() {
        // Ensure first tab active on load for mobile fallback
        var $first = $('#lwPlansMenu .nav-link').first();
        if ($first.length && !$('#v-pills-tabContent .tab-pane.active').length) {
            $first.tab('show');
        }

        // Optional: Scroll to top of content on tab change for smaller screens
        $('#lwPlansMenu .nav-link').on('shown.bs.tab', function() {
            if (window.innerWidth < 992) {
                const targetTop = document.querySelector('#v-pills-tabContent')?.getBoundingClientRect().top || 0;
                window.scrollTo({
                    top: window.scrollY + targetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    })();
</script>
@endpush
@endsection