@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row align-items-center">
                        <div class="col-sm-6 ps-0">
                            <h3>
                                <i class="fas fa-exchange-alt mr-2" style="color:#c9a96e"></i>
                                Change Subscription Plan
                            </h3>
                            <p class="text-muted mb-0" style="font-size:13px">
                                {{ $tenant->name }}
                            </p>
                        </div>
                        <div class="col-sm-6 pe-0 text-right">
                            <ol class="bc">
                                <li><a href="/platform/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li><a href="{{ route('platform.tenants.index') }}" class="bc-link">Tenants</a></li>
                                <li class="bc-sep">›</li>
                                <li><a href="{{ route('platform.tenants.show', $tenant->id) }}" class="bc-link">{{ $tenant->name }}</a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Change Plan</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            @foreach(['success','error'] as $t)
                @if(session($t))
                <div class="container-fluid">
                    <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show">
                        <i class="fas fa-{{ $t==='error'?'exclamation-circle':'check-circle' }} mr-2"></i>{{ session($t) }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
                @endif
            @endforeach

            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-lg-7">

                        {{-- Current plan summary --}}
                        <div class="card mb-3" style="border-radius:12px;border:none;box-shadow:0 2px 12px rgba(0,0,0,0.08);overflow:hidden;">
                            <div style="background:linear-gradient(135deg,#1a2535,#2a3a50);padding:20px 24px;">
                                <div class="d-flex align-items-center" style="gap:14px">
                                    <div style="width:48px;height:48px;border-radius:12px;background:rgba(201,169,110,0.15);
                                                display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <i class="fas fa-building" style="color:#c9a96e;font-size:18px;"></i>
                                    </div>
                                    <div>
                                        <div style="color:#fff;font-weight:700;font-size:16px;">{{ $tenant->name }}</div>
                                        <div style="color:rgba(255,255,255,0.5);font-size:12px;">{{ $tenant->email }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body" style="padding:20px 24px;">
                                <div class="row">
                                    <div class="col-6">
                                        <div style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;">Current Plan</div>
                                        <span style="background:#f0fdf4;color:#16a34a;padding:4px 12px;border-radius:20px;
                                                     font-size:13px;font-weight:600;border:1px solid #bbf7d0;">
                                            {{ optional($tenant->plan)->name ?? 'No Plan' }}
                                        </span>
                                    </div>
                                    <div class="col-6">
                                        <div style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;">Billing Cycle</div>
                                        <span style="color:#1e293b;font-weight:600;font-size:14px;">
                                            <i class="fas fa-calendar-alt mr-1" style="color:#c9a96e;"></i>
                                            {{ ucfirst($tenant->billing_cycle ?? 'N/A') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Change plan form --}}
                        <div class="card" style="border-radius:12px;border:none;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
                            <div class="card-header" style="background:#f8f9fa;border-bottom:2px solid #e9ecef;">
                                <h6 class="mb-0"><i class="fas fa-cog mr-2" style="color:#c9a96e"></i>New Plan Selection</h6>
                            </div>
                            <div class="card-body" style="padding:24px;">

                                <div class="alert" style="background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);color:#1d4ed8;font-size:12px;border-radius:8px;">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Changing the plan starts a fresh billing cycle from today. The tenant will be notified by email.
                                </div>

                                <form action="{{ route('platform.tenants.change-plan', $tenant->id) }}" method="POST">
                                    @csrf

                                    <div class="form-group">
                                        <label style="font-size:13px;font-weight:600;color:#2d3748;">New Plan</label>
                                        <select name="plan_id" class="form-control" required style="border-radius:8px;">
                                            @foreach($plans as $plan)
                                                <option value="{{ $plan->id }}" {{ $tenant->plan_id == $plan->id ? 'selected' : '' }}>
                                                    {{ $plan->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group mt-3">
                                        <label style="font-size:13px;font-weight:600;color:#2d3748;">Billing Cycle</label>
                                        <select name="billing_cycle" class="form-control" required style="border-radius:8px;">
                                            <option value="monthly" {{ $tenant->billing_cycle == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                            <option value="quarterly" {{ $tenant->billing_cycle == 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                            <option value="yearly" {{ $tenant->billing_cycle == 'yearly' ? 'selected' : '' }}>Yearly</option>
                                        </select>
                                    </div>

                                    <div class="d-flex mt-4" style="gap:10px;">
                                        <button class="btn" style="flex:1;background:linear-gradient(135deg,#c9a96e,#a07840);
                                                       color:#fff;border:none;border-radius:8px;padding:11px;font-weight:700;">
                                            <i class="fas fa-check mr-1"></i> Update Plan
                                        </button>
                                        <a href="{{ route('platform.tenants.show', $tenant->id) }}" class="btn btn-outline-secondary"
                                           style="border-radius:8px;padding:11px 22px;">
                                            Cancel
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

@include('Partials.footer')