@extends(getTemplate() . '.panel.layouts.panel_layout')

@push('styles_top')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
<style>
    .seat-slider-container {
        padding: 20px 10px;
    }
    #seat-slider {
        height: 6px;
        margin: 30px 0;
    }
    .noUi-handle {
        height: 18px !important;
        width: 18px !important;
        border-radius: 50% !important;
        right: -9px !important;
        top: -7px !important;
    }
    .noUi-handle:before, .noUi-handle:after {
        display: none;
    }
    .slider-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    .current-value-label {
        text-align: center;
        margin: 10px 0;
        font-size: 1.2rem;
        font-weight: 500;
    }
    .change-indicator {
        font-size: 0.9rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        margin-left: 0.5rem;
    }
    .change-increase {
        background-color: #d1e7dd;
        color: #0f5132;
    }
    .change-decrease {
        background-color: #fff3cd;
        color: #856404;
    }
</style>
@endpush

@section('content')
<section class="py-5">
    <div class="row justify-content-start">
        <div class="col-12 col-md-8 col-lg-10">
            <div class="subscription-details bg-light p-4 rounded-3 shadow-sm">
                <div class="package-info border-bottom pb-4">
                    <h3 class="fs-4 mb-4">{{ $subscription->registrationPackage->title }}</h3>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted">Status:</span>
                        <span class="badge bg-{{ $subscription->subscription_status === 'active' ? 'success' : 'warning' }} px-3 py-2">
                            {{ ucfirst($subscription->subscription_status) }}
                        </span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted">Current Period End:</span>
                        <span class="fw-medium">{{ $subscription->current_period_end }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Current Seats:</span>
                        <span class="fw-medium">{{ $subscription->seats }}</span>
                    </div>
                </div>

                @if($user->isOrganization())
                    <div class="usage-stats border-top pt-4">
                        <h4 class="fs-5 mb-4">Usage Statistics</h4>
                        
                        <!-- Seat Management -->
                        <div class="seat-management mb-4">
                            <h5 class="fs-6 mb-3">Manage Seats</h5>
                            <div class="seat-slider-container">
                                <div id="seat-slider"></div>
                                <div class="slider-labels">
                                    <span>1</span>
                                    <span>{{ max($subscription->seats * 2, 100) }}</span>
                                </div>
                                <div class="current-value-label">
                                    Current seats: <span id="current-seat-value">{{ $subscription->seats }}</span>
                                    <span id="change-indicator"></span>
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-primary w-100" onclick="updateSeats()">
                                        Update Seats
                                    </button>
                                </div>
                                <small class="text-muted d-block mt-2">
                                    <i class="fas fa-info-circle"></i> 
                                    Increasing seats will be billed immediately. Decreasing seats will take effect at the start of your next billing cycle.
                                </small>
                                @if($subscription->pending_seat_count)
                                    <div class="alert alert-info mt-3">
                                        <i class="fas fa-clock me-2"></i>
                                        You have a pending decrease to {{ $subscription->pending_seat_count }} seats, 
                                        which will take effect on {{ $subscription->seat_change_scheduled_for->format('M j, Y') }}.
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="stats-item mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted">Instructors</span>
                                <span class="fw-medium">
                                    {{ $user->getOrganizationTeachers()->count() }} / {{ $subscription->registrationPackage->instructors_count }}
                                </span>
                            </div>
                            {{-- <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-primary" role="progressbar"
                                    style="width: {{ ($user->getOrganizationTeachers()->count() / $subscription->registrationPackage->instructors_count) * 100 }}%">
                                </div>
                            </div> --}}
                        </div>

                        <div class="stats-item">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted">Students</span>
                                <span class="fw-medium">
                                    {{ $user->getOrganizationStudents()->count() }} / {{ $subscription->seats }}
                                </span>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-primary" role="progressbar"
                                    style="width: {{ ($user->getOrganizationStudents()->count() / $subscription->seats) * 100 }}%">
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <div class="subscription-actions py-4">
                @if($subscription->cancel_at_period_end)
                    <div class="alert alert-warning" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Your subscription will cancel on {{ dateTimeFormat($subscription->current_period_end, 'j M Y') }}
                    </div>
                    <form action="{{ route('panel.subscription.resume') }}" method="post">
                        @csrf
                        <button type="submit" class="btn btn-success w-100">
                            Resume Subscription
                        </button>
                    </form>
                @else
                    <form action="{{ route('panel.subscription.cancel') }}" method="post">
                        @csrf
                        <button type="submit" class="btn btn-outline-danger w-100">
                            Cancel Subscription
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts_bottom')
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<script>
// Initialize slider
const currentSeats = {{ $subscription->seats }};
const slider = document.getElementById('seat-slider');
const currentValueSpan = document.getElementById('current-seat-value');
const changeIndicator = document.getElementById('change-indicator');

noUiSlider.create(slider, {
    start: [currentSeats],
    connect: true,
    step: 1,
    range: {
        'min': 1,
        'max': Math.max(currentSeats * 2, 100)
    },
    format: {
        to: function(value) {
            return Math.round(value);
        },
        from: function(value) {
            return Math.round(value);
        }
    }
});

// Update the display when slider changes
slider.noUiSlider.on('update', function(values, handle) {
    const newValue = parseInt(values[handle]);
    currentValueSpan.textContent = newValue;
    
    // Update change indicator
    if (newValue > currentSeats) {
        changeIndicator.textContent = `(+${newValue - currentSeats})`;
        changeIndicator.className = 'change-indicator change-increase';
    } else if (newValue < currentSeats) {
        changeIndicator.textContent = `(-${currentSeats - newValue})`;
        changeIndicator.className = 'change-indicator change-decrease';
    } else {
        changeIndicator.textContent = '';
        changeIndicator.className = 'change-indicator';
    }
});

async function calculatePricing(newSeatCount, currentSeats) {
    try {
        const response = await fetch('{{ route("panel.subscription.calculate-price") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                current_seats: currentSeats,
                new_seat_count: newSeatCount
            })
        });
        return await response.json();
    } catch (error) {
        throw new Error('Failed to calculate pricing');
    }
}

async function updateSeats() {
    const newSeatCount = parseInt(slider.noUiSlider.get());
    
    if (newSeatCount === currentSeats) {
        Swal.fire({
            title: 'No Change',
            text: 'Please select a different number of seats to update.',
            icon: 'info'
        });
        return;
    }

    try {
        // Get pricing details first (only for increases)
        let pricing = null;
        if (newSeatCount > currentSeats) {
            pricing = await calculatePricing(newSeatCount, currentSeats);
        }

        // Show appropriate confirmation dialog
        const result = await Swal.fire({
            title: 'Confirm Seat Update',
            html: newSeatCount > currentSeats ? `
                <div class="text-left">
                    <p class="mb-3">You are increasing from ${currentSeats} to ${newSeatCount} seats.</p>
                    
                    <div class="pricing-details border-top pt-3 mb-3">
                        <h5 class="font-weight-bold mb-3">Immediate Charges:</h5>
                        
                        <div class="d-flex justify-content-between mb-2">
                            <span>Credit for unused time:</span>
                            <span class="text-success">-${pricing.price_breakdown.credit_for_unused}</span>
                        </div>
                        
                        <div class="d-flex justify-content-between mb-2">
                            <span>Charge for new seats:</span>
                            <span>${pricing.price_breakdown.charge_for_new}</span>
                        </div>
                        
                        <div class="d-flex justify-content-between mb-2 border-top pt-2">
                            <span class="font-weight-bold">Total immediate charge:</span>
                            <span class="font-weight-bold">${pricing.price_breakdown.immediate_total}</span>
                        </div>
                    </div>

                    <div class="next-bill-details mt-4">
                        <h5 class="font-weight-bold mb-2">Next Billing Cycle:</h5>
                        <p>Your next bill on ${pricing.next_bill.date} will be ${pricing.next_bill.amount}</p>
                    </div>
                </div>
            ` : `
                <div class="text-left">
                    <p class="mb-3">You are decreasing from ${currentSeats} to ${newSeatCount} seats.</p>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle mr-2"></i>
                        Your seat reduction will take effect at the start of your next billing cycle. 
                        Until then, you will maintain access to your current number of seats.
                    </div>

                    <p class="mt-3">Current billing period ends: {{ $subscription->current_period_end->format('M j, Y') }}</p>
                </div>
            `,
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'Confirm Update',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            reverseButtons: true
        });

        if (result.isConfirmed) {
            // Process the update
            const response = await fetch('{{ route("panel.subscription.update-seats") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    new_seat_count: newSeatCount
                })
            });

            const updateResult = await response.json();

            if (updateResult.error) {
                throw new Error(updateResult.error);
            }

            // Show appropriate success message
            if (updateResult.is_reduction) {
                await Swal.fire({
                    title: 'Seat Reduction Scheduled',
                    html: `
                        <div class="text-left">
                            <p>Your seat reduction has been scheduled.</p>
                            <p class="mt-2">Your seat count will change from ${currentSeats} to ${newSeatCount} on ${updateResult.effective_date}.</p>
                            <p class="mt-2">Until then, you will maintain access to your current number of seats.</p>
                        </div>
                    `,
                    icon: 'success'
                });
            } else {
                await Swal.fire({
                    title: 'Success!',
                    html: `
                        <div class="text-left">
                            <p>Your seat count has been updated successfully.</p>
                            <p class="mt-2">An invoice for ${updateResult.invoice.amount} has been generated.</p>
                            <div class="mt-3">
                                <a href="${updateResult.invoice.url}" target="_blank" class="btn btn-sm btn-primary">
                                    View Invoice
                                </a>
                                <a href="${updateResult.invoice.pdf}" target="_blank" class="btn btn-sm btn-secondary ml-2">
                                    Download PDF
                                </a>
                            </div>
                        </div>
                    `,
                    icon: 'success'
                });
            }

            location.reload();
        }
    } catch (error) {
        Swal.fire({
            title: 'Error',
            text: error.message || 'Failed to update seats',
            icon: 'error'
        });
    }
}
</script>
@endpush