@extends('layouts.master')

@php
    // dumper($plans);
    $colors = ['text-secondary', 'text-primary', 'text-danger', 'text-success'];
    $colorsBtn = ['btn-secondary', 'btn-primary', 'btn-danger', 'btn-success'];
@endphp
@section('css')
<style>

/* Add these styles to your CSS file */
.panel.price {
    position: relative;
}

.inactive-plan {
    opacity: 0.8;
}

.inactive-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.5);
    z-index: 1;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.closed-tag {
    background-color: #ff4444;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    transform: rotate(-15deg);
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 2;
}

.btn.disabled {
    pointer-events: none;
    opacity: 0.6;
}
</style>

@endsection

@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">

            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{ __('common.plans') }}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('common.tables') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('common.plans') }}</li>
                        </ol>
                    </div>

                </div>

                <div class="row row-sm">
                     <!-- ROW-2 OPEN -->
                     <div class="row">
                        @foreach ($plans as $index => $plan)
                            @php
                                $color = $colors[$index % count($colors)];
                                $colorBtn = $colorsBtn[$index % count($colorsBtn)];
                            @endphp

                            {{-- <div class="col-sm-6 col-xl-3 col-md-6 col-lg-6">
                                
                                <div class="panel price panel-color">
                                    
                                    <div class="ps-5 d-flex">
                                        <div>
                                            <h3 class="pb-0 {{$color}}">{{ $plan->plan_name ?? '' }}</h3>
                                            <p>Per Company</p>
                                        </div>
                                        <div class="panel-body">

                                            <p class=""><strong>{{ '$'.$plan->price ?? ''}} </strong> <br>/ {{$plan->duration}} days</p>
                                        </div>
                                    </div>
                                    @php
                                        $lines = explode("\n", $plan->description);
                                        $formatted = '';
                                            foreach ($lines as $line) {
                                                if (trim($line) != '') { // skip empty lines
                                                    $formatted .= '<li class="list-group-item border-0"><i class="mdi mdi-checkbox-marked-circle-outline '.$color.' p-2 fs-16"></i><strong>' . htmlspecialchars($line) . '</strong></li></p>';
                                                }
                                            }
                                    @endphp
                                    
                                    <ul class="list-group list-group-flush pb-5">
                                        {!! $formatted!!}
                                    </ul>

                                    <div class="panel-footer text-center px-5 border-0 pb-5 br-7">
                                        <a class="btn btn-block {{$colorBtn}}" href="javascript:void(0)"><i class="fa fa-edit"> Edit</i></a>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="col-sm-6 col-xl-3 col-md-6 col-lg-6">
                                <div class="panel price panel-color @if($plan->status == 0) inactive-plan @endif ">
                                    <!-- Add the overlay div at the beginning of the panel -->
                                    @if($plan->status == 0)
                                        <div class="inactive-overlay">
                                            <span class="closed-tag"><a style="color:white;" href="{{ route('plans.edit', $plan->id) }}">{{ __('common.inactive') }}</a></span>
                                        </div>
                                    @endif
                                    
                                    <div class="ps-5 d-flex">
                                        <div>
                                            <h3 class="pb-0 {{$color}}">{{ $plan->plan_name ?? '' }}</h3>
                                            <p>{{ __('common.per') }} {{ __('common.company') }}</p>
                                        </div>
                                        <div class="panel-body">
                                            <p class=""><strong>{{ '$'.$plan->price ?? ''}} </strong> <br>/ {{$plan->duration}} {{ __('common.days') }}</p>
                                        </div>
                                    </div>
                                    @php
                                        $lines = explode("\n", $plan->description);
                                        $formatted = '';
                                            foreach ($lines as $line) {
                                                if (trim($line) != '') { // skip empty lines
                                                    $formatted .= '<li class="list-group-item border-0"><i class="mdi mdi-checkbox-marked-circle-outline '.$color.' p-2 fs-16"></i><strong>' . htmlspecialchars($line) . '</strong></li></p>';
                                                }
                                            }
                                    @endphp
                                    
                                    <ul class="list-group list-group-flush pb-5">
                                        {!! $formatted!!}
                                    </ul>
                            
                                    <div class="panel-footer text-center px-5 border-0 pb-5 br-7">
                                        <a class="btn btn-block {{$colorBtn}} @if($plan->is_inactive) disabled @endif" href="{{ route('plans.edit', $plan->id) }}">
                                            <i class="fa fa-edit"> {{ __('common.edit') }}</i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                        @endforeach
                        

                        {{-- <div class="col-md-6 col-xl-4 col-sm-6">
                            <div class="card">
                                <div class="product-grid6">
                                    <div class="product-image6 p-5">
                                        <ul class="icons">
                                            <li>
                                                <a href="shop-description.html" class="btn btn-primary"> <i class="fe fe-eye">  </i> </a>
                                            </li>
                                            <li><a href="add-product.html" class="btn btn-success"><i  class="fe fe-edit"></i></a></li>
                                            <li><a href="javascript:void(0)" class="btn btn-danger"><i class="fe fe-x"></i></a></li>
                                        </ul>
                                       
                                    </div>
                                    <div class="panel price panel-color">
                                        <div class="ps-5 d-flex">
                                            <div>
                                                <h3 class="pb-0 text-secondary">Team</h3>
                                                <p>per agent per month</p>
                                            </div>
                                            <div class="panel-body ms-auto">
                                                <p class="lead py-0"><strong>$25 </strong>/ month</p>
                                            </div>
                                        </div>
                                        <ul class="list-group list-group-flush pb-5">
                                            <li class="list-group-item border-0"><i class="mdi mdi-checkbox-marked-circle-outline text-secondary p-2 fs-16"></i><strong> 3 Free</strong> Domain Name</li>
                                            <li class="list-group-item border-0"><i class="mdi mdi-checkbox-marked-circle-outline text-secondary p-2 fs-16"></i><strong>4 </strong> One-Click Apps</li>
                                            <li class="list-group-item border-0"><i class="mdi mdi-checkbox-marked-circle-outline text-secondary p-2 fs-16"></i><strong> 2 </strong> Databases</li>
                                            <li class="list-group-item border-0"><i class="mdi mdi-checkbox-marked-circle-outline text-secondary p-2 fs-16"></i><strong> Money </strong> BackGuarantee</li>
                                            <li class="list-group-item border-bottom-0"><i class="mdi mdi-checkbox-marked-circle-outline text-secondary p-2 fs-16"></i><strong> 24/7</strong> support</li>
                                        </ul>
                                        <div class="panel-footer text-center px-5 border-0 pb-5 br-7">
                                            <a class="btn btn-block btn-secondary" href="javascript:void(0)">Purchase Now!</a>
                                        </div>
                                    </div>
                                    <div class="card-footer text-center">
                                        <a href="cart.html" class="btn btn-primary mb-1"><i class="fe fe-shopping-cart mx-2"></i>Add to cart</a>
                                        <a href="wishlist.html" class="btn btn-outline-primary mb-1"><i class="fe fe-heart mx-2 wishlist-icon"></i>Add to wishlist</a>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                     
                    </div>
                    <!-- ROW-2 CLOSED -->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('bottom_script')
<script>

// Instead of redirecting directly, use this approach:
async function initiateRevolutPayment(planId) {
    try {
        const response = await fetch('/create-revolut-order', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ plan_id: planId })
        });

        const data = await response.json();

        if (data.success && data.checkout_url) {
            // Redirect to intermediate page that handles the redirect
            window.location.href = `/revolut-checkout?checkout_url=${encodeURIComponent(data.checkout_url)}&order_id=${data.order_id}&order_ref=${data.order_ref}`;
        } else {
            alert('Payment initialization failed: ' + (data.error || 'Unknown error'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Payment initialization failed');
    }
}
</script>
@endsection