@extends('layouts.saas')

@section('title', 'প্যাকেজ তালিকা')

@section('content')
<div class="container-fluid px-0">

    <!-- হেডার ও অ্যাকশন বাটন -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
        <div>
            <h4 class="fw-bold mb-1 text-dark">
                <i class="fa-solid fa-cubes text-primary me-2"></i>সাবস্ক্রিপশন প্যাকেজসমূহ
            </h4>
            <p class="text-muted small mb-0">স্কুলগুলোর জন্য তৈরি করা সকল সাবস্ক্রিপশন প্ল্যান একনজরে ম্যানেজ করুন</p>
        </div>
        <div>
            <a href="{{ route('superadmin.packages.create') }}" class="btn btn-primary rounded-3 px-3 shadow-sm">
                <i class="fa-solid fa-plus-circle me-1"></i> নতুন প্যাকেজ তৈরি করুন
            </a>
        </div>
    </div>


    <!-- প্যাকেজ কার্ড গ্রিড -->
    @if($packages->count() > 0)
        <div class="row g-4">
            @foreach($packages as $package)
                <div class="col-xl-4 col-md-6">
                    <div class="card h-100 border-0 shadow-sm rounded-4 position-relative overflow-hidden transition-all hover-shadow">
                        
                        <!-- স্ট্যাটাস ব্যাজ (টপ রাইট) -->
                        <div class="position-absolute top-0 end-0 m-3">
                            @if($package->is_active)
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">
                                    <i class="fa-solid fa-circle me-1 small"></i> সক্রিয়
                                </span>
                            @else
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1">
                                    <i class="fa-solid fa-circle me-1 small"></i> নিষ্ক্রিয়
                                </span>
                            @endif
                        </div>

                        <div class="card-body p-4 d-flex flex-column">
                            <!-- প্যাকেজ নাম ও স্ল্যাগ -->
                            <div class="mb-3 me-5">
                                <h4 class="fw-bold text-dark mb-1">{{ $package->name }}</h4>
                                <span class="badge bg-light text-muted border font-monospace">{{ $package->slug }}</span>
                            </div>

                            <!-- মূল্য (Monthly & Yearly) -->
                            <div class="bg-light p-3 rounded-3 mb-4 border">
                                <div class="row text-center g-0">
                                    <div class="col-6 border-end">
                                        <div class="text-muted small">মাসিক ফি</div>
                                        <div class="fw-bold text-primary fs-5">৳ {{ number_format($package->price_monthly, 0) }}</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="text-muted small">বার্ষিক ফি</div>
                                        <div class="fw-bold text-success fs-5">৳ {{ number_format($package->price_yearly, 0) }}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- লিমিট ও ফিচার সামারি -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-secondary mb-3 small text-uppercase">সীমা ও সিস্টেম সুবিধা</h6>
                                
                                <ul class="list-unstyled mb-0 small">
                                    <li class="mb-2 d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fa-solid fa-user-graduate me-2 text-primary"></i>সর্বোচ্চ শিক্ষার্থী:</span>
                                        <strong class="text-dark">{{ number_format($package->student_limit) }} জন</strong>
                                    </li>
                                    <li class="mb-2 d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fa-solid fa-user-tie me-2 text-info"></i>সর্বোচ্চ স্টাফ/শিক্ষক:</span>
                                        <strong class="text-dark">{{ number_format($package->staff_limit) }} জন</strong>
                                    </li>
                                    <li class="mb-2 d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fa-solid fa-globe me-2 text-secondary"></i>কাস্টম ডোমেন:</span>
                                        @if($package->custom_domain_allowed)
                                            <span class="text-success fw-bold"><i class="fa-solid fa-check"></i> হ্যাঁ</span>
                                        @else
                                            <span class="text-danger fw-bold"><i class="fa-solid fa-xmark"></i> না</span>
                                        @endif
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fa-solid fa-comment-sms me-2 text-warning"></i>SMS নোটিফিকেশন:</span>
                                        @if($package->sms_feature_allowed)
                                            <span class="text-success fw-bold"><i class="fa-solid fa-check"></i> হ্যাঁ</span>
                                        @else
                                            <span class="text-danger fw-bold"><i class="fa-solid fa-xmark"></i> না</span>
                                        @endif
                                    </li>
                                </ul>
                            </div>

                            <!-- অতিরিক্ত ফিচার লিস্ট (সর্বোচ্চ ৩টি দেখানো হচ্ছে) -->
                            @if(!empty($package->features) && is_array($package->features))
                                <div class="border-top pt-3 mb-4 mt-auto">
                                    <h6 class="fw-bold text-secondary mb-2 small text-uppercase">ফিচারসমূহ</h6>
                                    <ul class="list-unstyled mb-0 small">
                                        @foreach(array_slice($package->features, 0, 3) as $feature)
                                            <li class="mb-1 text-truncate">
                                                <i class="fa-solid fa-circle-check text-success me-2"></i>{{ $feature }}
                                            </li>
                                        @endforeach
                                        @if(count($package->features) > 3)
                                            <li class="text-muted small ms-4">
                                                + আরও {{ count($package->features) - 3 }} টি ফিচার রয়েছে...
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            @endif

                            <!-- অ্যাকশন বাটনসমূহ -->
                            <div class="border-top pt-3 d-flex justify-content-between align-items-center gap-2 mt-auto">
                                <a href="{{ route('superadmin.packages.show', $package->id) }}" class="btn btn-sm btn-outline-primary rounded-3 flex-grow-1">
                                    <i class="fa-solid fa-eye me-1"></i> বিস্তারিত
                                </a>
                                <a href="{{ route('superadmin.packages.edit', $package->id) }}" class="btn btn-sm btn-outline-secondary rounded-3">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>
                                <form action="{{ route('superadmin.packages.destroy', $package->id) }}" method="POST" class="d-inline delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-3" title="মুছে ফেলুন">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <!-- কোনো প্যাকেজ না থাকলে খালি অবস্থা -->
        <div class="card border-0 shadow-sm rounded-4 p-5 text-center">
            <div class="py-4">
                <i class="fa-solid fa-box-open text-muted display-4 mb-3"></i>
                <h5 class="fw-bold text-dark mb-1">কোনো প্যাকেজ পাওয়া যায়নি</h5>
                <p class="text-muted small mb-4">এখনো কোনো সাবস্ক্রিপশন প্ল্যান তৈরি করা হয়নি। নতুন প্ল্যান যোগ করতে নিচের বাটনে ক্লিক করুন।</p>
                <a href="{{ route('superadmin.packages.create') }}" class="btn btn-primary rounded-3 px-4">
                    <i class="fa-solid fa-plus-circle me-1"></i> নতুন প্যাকেজ তৈরি করুন
                </a>
            </div>
        </div>
    @endif

</div>
@endsection

@push('styles')
<style>
    .hover-shadow:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s ease;
    }
</style>
@endpush

@push('scripts')
<script>
     $(document).on('submit', '.delete-form', function(e) {
                e.preventDefault();
                let form = this;

                Swal.fire({
                    title: 'আপনি কি নিশ্চিত?',
                    text: "এই ডাটাটি স্থায়ীভাবে মুছে যাবে!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'হ্যাঁ, মুছে ফেলুন!',
                    cancelButtonText: 'বাতিল'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
</script>
@endpush