@extends('layouts.app')

@section('content')

<style>
    .pricing-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
        border-radius: 15px;
    }

    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .feature-list li {
        margin-bottom: 0.8rem;
        color: #6c757d;
    }

    .popular-badge {
        position: absolute;
        top: -12px;
        right: 20px;
        border-radius: 20px;
    }

    /* .gradient-custom {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    } */

    .gradient-custom {
        background: #00ACCD;
    }
</style>

<div class="container">

    @include('layouts.subnav')

    <div class="mb-3"></div>

    <div class="bg-light">
        <div class="row text-center mb-5">
            <div class="col">
                <h2 class="display-4 fw-bold">Choose Monetization Plan</h2>
            </div>
        </div>

        <div class="row row-cols-1 row-cols-md-3 g-4">
            @foreach ($monetization as $plan)
            @if ($plan->name == 'Gold')
            <div class="col">
                <div class="card h-100 pricing-card shadow position-relative">
                    <span class="badge gradient-custom text-white popular-badge px-4 py-2">Popular</span>
                    <div class="card-body p-5">
                        <h5 class="display-6 card-title text-primary text-uppercase mb-4 fw-bold">{{ $plan->name }}</h5>
                        <h1 class="display-6 mb-4">₹{{ $plan->amount }}<small class="text-muted fw-light">/mo</small></h1>
                        <ul class="list-unstyled feature-list">
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Description:</small>
                                {{ $plan->description }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Duration:</small>
                                {{ $plan->duration }} days
                            </li>
                            @if ($plan->contentSets->isNotEmpty())
                            @foreach($plan->contentSets as $contentSet)
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Video and sound quality:</small>
                                {{ $contentSet->video_and_sound_quality }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Resolution:</small>
                                {{ str_replace('","', ', ', trim($contentSet->resolution, '[]"')) }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Supported devices:</small>
                                {{ str_replace('","', ', ', trim($contentSet->supported_devices, '[]"')) }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Download devices:</small>
                                {{ $contentSet->download_devices }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Ads:</small>
                                {{ $contentSet->no_ad }}
                            </li>
                            @endforeach
                            @endif
                        </ul>
                        <form id="payment-form-{{ $plan->id }}" action="{{ url('/payment/create') }}" method="POST">
                            @csrf
                            <input type="hidden" name="id" value="{{ $plan->id }}">
                            <input type="hidden" name="amount" value="{{ $plan->amount * 100 }}">

                            <button type="button"
                                class="btn btn-outline-primary btn-lg w-100 mt-4 pay-btn"
                                onclick="startPayment({{ $plan->id }}, {{ $plan->amount * 100 }})">
                                Choose Plan
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @else


            <div class="col">
                <div class="card h-100 pricing-card shadow-sm">
                    <div class="card-body p-5">
                        <input type="hidden" name="id" value="{{$organization->id}}">
                        <h5 class="card-title text-black text-uppercase mb-4 display-6 fw-bold">
                            {{ $plan->name }}
                        </h5>
                        <h1 class="display-6 mb-4">₹{{ $plan->amount }}<small class="text-muted fw-light">/mo</small></h1>
                        <ul class="list-unstyled feature-list">
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Description:</small>
                                {{ $plan->description }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Duration:</small>
                                {{ $plan->duration }} days
                            </li>
                            @if ($plan->contentSets->isNotEmpty())
                            @foreach($plan->contentSets as $contentSet)
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Video and sound quality:</small>
                                {{ $contentSet->video_and_sound_quality }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Resolution:</small>
                                {{ str_replace('","', ', ', trim($contentSet->resolution, '[]"')) }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Supported devices:</small>
                                {{ str_replace('","', ', ', trim($contentSet->supported_devices, '[]"')) }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Download devices:</small>
                                {{ $contentSet->download_devices }}
                            </li>
                            <li>
                                <i class="bi bi-check2 text-primary me-2"></i>
                                <small class="text-muted fw-bold">Ads:</small>
                                {{ $contentSet->no_ad }}
                            </li>
                            @endforeach
                            @endif
                        </ul>
                        <form id="payment-form-{{ $plan->id }}" action="{{ url('/payment/create') }}" method="POST">
                            @csrf
                            <input type="hidden" name="id" value="{{ $plan->id }}">
                            <input type="hidden" name="amount" value="{{ $plan->amount * 100 }}">
                            <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
                            <button type="button"
                                class="btn btn-outline-primary btn-lg w-100 mt-4 pay-btn"
                                onclick="startPayment({{ $plan->id }}, {{ $plan->amount * 100 }})">
                                Choose Plan
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            @endif
            @endforeach
            <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
            <script>
                function startPayment(planId, amount) {
                    let options = {
                        key: "{{ config('services.razorpay.key') }}",
                        amount: amount,
                        name: "{{ auth()->user()->name ?? 'Guest' }}",
                        description: "Razorpay payment",
                        prefill: {
                            name: "{{ auth()->user()->name ?? 'Guest' }}",
                            phone: "{{ auth()->user()->phone ?? '1234567890' }}"
                        },
                        theme: {
                            color: "#0F408F"
                        },
                        handler: function(res) {
                            $.ajax({
                                url: "/payment/create",
                                type: 'POST',
                                dataType: 'json',
                                headers: {
                                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                },
                                data: {
                                    plan_id: planId,
                                    amount: amount,
                                    razorpay_payment_id: res.razorpay_payment_id
                                },
                                success: function(res) {
                                    if (res.success) {
                                        window.location.reload();
                                    }
                                },
                                error: function(jqXHR, textStatus, errorThrown) {
                                    console.error('Error in success handler:', textStatus, errorThrown);
                                }
                            });
                        },
                        modal: {
                            ondismiss: function() {
                                window.location.reload();
                            }
                        }
                    };

                    const rzp = new Razorpay(options);

                    rzp.on('payment.failed', function(response) {
                        $.ajax({
                            url: "/payment/failure",
                            type: 'POST',
                            dataType: 'json',
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                            data: {
                                error: response.error,
                                reason: response.reason
                            },
                            success: function(response) {
                                if (response.success === true) {
                                    window.location.href = '/402';
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.error('Failure AJAX error:', textStatus, errorThrown);
                            }
                        });
                    });

                    rzp.open();
                }
            </script>
        </div>
        
    </div>
</div>
@endsection