@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">WiFi প্যাকেজ কিনুন</h4>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        @foreach($packages as $package)
                            <div class="col-md-6">
                                <div class="card h-100 package-card {{ $package->active ? '' : 'disabled' }}">
                                    <div class="card-body text-center">
                                        <h5 class="card-title">{{ $package->name }}</h5>
                                        <p class="card-text mb-2">
                                            <strong class="fs-4">৳{{ number_format($package->price, 2) }}</strong>
                                        </p>
                                        <p class="card-text text-muted">{{ $package->duration_text }}</p>
                                        <p class="card-text small">{{ $package->description }}</p>
                                        @if($package->active)
                                            <button type="button" 
                                                class="btn btn-primary select-package" 
                                                data-package-id="{{ $package->id }}"
                                                data-package-name="{{ $package->name }}"
                                                data-package-price="{{ $package->price }}"
                                                data-package-duration="{{ $package->duration_text }}">
                                                এই প্যাকেজটি কিনুন
                                            </button>
                                        @else
                                            <button type="button" class="btn btn-secondary" disabled>
                                                বর্তমানে উপলব্ধ নয়
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Payment Form Modal -->
                    <div class="modal fade" id="paymentModal" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header bg-primary text-white">
                                    <h5 class="modal-title">পেমেন্ট করুন</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="selected-package-info mb-4">
                                        <h6>নির্বাচিত প্যাকেজ:</h6>
                                        <p class="mb-1"><strong id="selectedPackageName"></strong></p>
                                        <p class="mb-1">মেয়াদ: <span id="selectedPackageDuration"></span></p>
                                        <p class="mb-0">মূল্য: ৳<span id="selectedPackagePrice"></span></p>
                                    </div>

                                    <div class="payment-instructions mb-4">
                                        <h6>পেমেন্ট নির্দেশনা:</h6>
                                        <ol class="small">
                                            <li>bKash অ্যাপ ওপেন করুন</li>
                                            <li>"Send Money" অপশন সিলেক্ট করুন</li>
                                            <li>প্রাপক নম্বর: <strong>{{ config('services.bkash.merchant_number') }}</strong></li>
                                            <li>টাকার পরিমাণ: ৳<span id="modalPackagePrice"></span></li>
                                            <li>রেফারেন্স: "wifi"</li>
                                            <li>PIN দিয়ে পেমেন্ট কনফার্ম করুন</li>
                                        </ol>
                                    </div>

                                    <form id="paymentForm" action="{{ route('transactions.store') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="package_id" id="packageId">
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Sender Number <span class="text-danger">*</span></label>
                                            <input type="text" 
                                                class="form-control @error('sender_number') is-invalid @enderror" 
                                                name="sender_number" 
                                                placeholder="01XXXXXXXXX"
                                                required>
                                            @error('sender_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Transaction ID (TrxID) <span class="text-danger">*</span></label>
                                            <input type="text" 
                                                class="form-control @error('transaction_id') is-invalid @enderror" 
                                                name="transaction_id" 
                                                placeholder="8N7A6D5E"
                                                required>
                                            @error('transaction_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Payment Screenshot</label>
                                            <input type="file" 
                                                class="form-control @error('screenshot') is-invalid @enderror" 
                                                name="screenshot"
                                                accept="image/*">
                                            @error('screenshot')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">bKash পেমেন্ট স্ক্রিনশট আপলোড করুন (ঐচ্ছিক)</div>
                                        </div>

                                        <div class="d-grid">
                                            <button type="submit" class="btn btn-primary">পেমেন্ট সাবমিট করুন</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.package-card {
    transition: transform 0.2s;
    cursor: pointer;
}
.package-card:hover {
    transform: translateY(-5px);
}
.package-card.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const paymentModal = new bootstrap.Modal(document.getElementById('paymentModal'));

    document.querySelectorAll('.select-package').forEach(button => {
        button.addEventListener('click', function() {
            const packageId = this.dataset.packageId;
            const packageName = this.dataset.packageName;
            const packagePrice = this.dataset.packagePrice;
            const packageDuration = this.dataset.packageDuration;

            document.getElementById('packageId').value = packageId;
            document.getElementById('selectedPackageName').textContent = packageName;
            document.getElementById('selectedPackageDuration').textContent = packageDuration;
            document.getElementById('selectedPackagePrice').textContent = packagePrice;
            document.getElementById('modalPackagePrice').textContent = packagePrice;

            paymentModal.show();
        });
    });
});
</script>
@endpush
@endsection