@extends('admin.layouts.app')

@section('title', 'Gift Rank')

@section('panel')
<div class="container-fluid px-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm border-0 rounded-4">

                {{-- Card Header --}}
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="mb-0 fw-bold text-primary">
                            <i class="fas fa-gift me-2"></i> উপহার হিসেবে র‍্যাঙ্ক দিন
                        </h4>
                        <small class="text-muted">
                            কোনো টার্গেট পূরণ ছাড়াই একজন ইউজারকে লিডারশিপ র‍্যাঙ্ক দিন
                        </small>
                    </div>
                    <a href="{{ route('admin.rank.achievements') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-list me-1"></i> সব অ্যাচিভমেন্ট
                    </a>
                </div>

                {{-- Card Body --}}
                <div class="card-body">

                    {{-- ✅ Success Message --}}
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show rounded-3 d-flex align-items-center gap-3" role="alert">
                            <i class="fas fa-check-circle fa-2x text-success"></i>
                            <div>
                                <strong class="d-block">সফল!</strong>
                                {{ session('success') }}
                            </div>
                            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    {{-- ❌ Error Message --}}
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show rounded-3 d-flex align-items-center gap-3" role="alert">
                            <i class="fas fa-exclamation-circle fa-2x text-danger"></i>
                            <div>
                                <strong class="d-block">ত্রুটি!</strong>
                                {{ session('error') }}
                            </div>
                            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    {{-- ⚠️ Validation Errors --}}
                    @if($errors->any())
                        <div class="alert alert-warning alert-dismissible fade show rounded-3" role="alert">
                            <div class="d-flex align-items-start gap-2">
                                <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                                <div>
                                    <strong class="d-block">দয়া করে নিচের সমস্যাগুলো সমাধান করুন:</strong>
                                    <ul class="mb-0 ps-3">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    {{-- Form --}}
                    <form action="{{ route('admin.rank.gift') }}" method="POST" id="giftRankForm">
                        @csrf

                        {{-- User Selection --}}
                        <div class="mb-3">
                            <label for="user_id" class="form-label fw-semibold">
                                <i class="fas fa-user me-1 text-primary"></i> ইউজার নির্বাচন করুন
                                <span class="text-danger">*</span>
                            </label>
                            <select name="user_id" id="user_id" 
                                class="form-select form-select-lg @error('user_id') is-invalid @enderror" 
                                required>
                                <option value="">-- ইউজার বেছে নিন --</option>
                                @foreach($users as $u)
                                    <option value="{{ $u->id }}" {{ old('user_id') == $u->id ? 'selected' : '' }}>
                                        {{ $u->name }} ({{ $u->email }}) 
                                        — র‍্যাঙ্ক: {{ $u->current_rank_name }}
                                        @if($u->id == auth()->id())
                                            (আপনি)
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">যাকে র‍্যাঙ্ক দিতে চান, সেই ইউজারটি বেছে নিন।</small>
                        </div>

                        {{-- Rank Level --}}
                        <div class="mb-3">
                            <label for="rank_level" class="form-label fw-semibold">
                                <i class="fas fa-trophy me-1 text-warning"></i> র‍্যাঙ্ক লেভেল
                                <span class="text-danger">*</span>
                            </label>
                            <select name="rank_level" id="rank_level" 
                                class="form-select form-select-lg @error('rank_level') is-invalid @enderror" 
                                required>
                                <option value="">-- বেছে নিন --</option>
                                @foreach($ranks as $level => $rank)
                                    <option value="{{ $level }}" {{ old('rank_level') == $level ? 'selected' : '' }}>
                                        {{ $rank['icon'] ?? '🏆' }} {{ $rank['name'] }} 
                                        (বোনাস: ৳{{ number_format($rank['bonus'], 2) }})
                                        @if(isset($rank['description']))
                                            — {{ $rank['description'] }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('rank_level')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">কোন র‍্যাঙ্ক দিতে চান, তা নির্বাচন করুন।</small>
                        </div>

                        {{-- Bonus Toggle --}}
                        <div class="mb-4 p-3 bg-light rounded-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="with_bonus" id="with_bonus" 
                                    value="1" {{ old('with_bonus', true) ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold fs-5" for="with_bonus">
                                    <i class="fas fa-coins me-1 text-success"></i> বোনাস প্রদান করবেন?
                                </label>
                                <small class="d-block text-muted mt-1">
                                    <i class="fas fa-info-circle me-1"></i>
                                    টিক দিলে ইউজার এই র‍্যাঙ্কের বোনাস পাবে, না দিলে শুধু কৃতিত্ব পাবে।
                                </small>
                            </div>
                        </div>

                        {{-- Selected Rank Preview (dynamic) --}}
                        <div id="rankPreview" class="mb-3 d-none">
                            <div class="alert alert-info rounded-3">
                                <div class="d-flex align-items-center gap-3">
                                    <span id="previewIcon" style="font-size:32px;">🏆</span>
                                    <div>
                                        <strong id="previewName" class="d-block">র‍্যাঙ্কের নাম</strong>
                                        <small id="previewBonus" class="text-muted">বোনাস: ৳০</small>
                                        <small id="previewDesc" class="d-block text-muted">বিবরণ</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Action Buttons --}}
                        <div class="d-flex gap-3 flex-wrap mt-4">
                            <button type="submit" class="btn btn-primary px-5 py-2 fw-bold" id="submitBtn">
                                <i class="fas fa-gift me-2"></i> উপহার দিন
                            </button>
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary px-4 py-2">
                                <i class="fas fa-times me-1"></i> বাতিল
                            </a>
                            <button type="reset" class="btn btn-outline-danger px-4 py-2">
                                <i class="fas fa-undo me-1"></i> রিসেট
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const rankSelect = document.getElementById('rank_level');
        const previewDiv = document.getElementById('rankPreview');
        const previewIcon = document.getElementById('previewIcon');
        const previewName = document.getElementById('previewName');
        const previewBonus = document.getElementById('previewBonus');
        const previewDesc = document.getElementById('previewDesc');

        // র‍্যাঙ্ক পরিবর্তন করলে প্রিভিউ আপডেট
        rankSelect.addEventListener('change', function() {
            const selected = this.options[this.selectedIndex];
            if (!selected || !selected.value) {
                previewDiv.classList.add('d-none');
                return;
            }

            // ফর্ম selected option থেকে ডেটা বের করা
            const text = selected.textContent;
            const parts = text.split('(');
            const name = parts[0]?.trim() || 'Unknown';
            
            // আইকন বের করা (প্রথম অংশে থাকবে)
            const iconMatch = text.match(/^([^\s]+)\s/);
            const icon = iconMatch ? iconMatch[1] : '🏆';
            
            // বোনাস বের করা
            const bonusMatch = text.match(/বোনাস:\s*৳([\d,]+(?:\.\d{2})?)/);
            const bonus = bonusMatch ? parseFloat(bonusMatch[1].replace(/,/g, '')) : 0;

            // বিবরণ বের করা
            const descMatch = text.match(/—\s*(.+?)(?:\s*\(|$)/);
            const desc = descMatch ? descMatch[1].trim() : '';

            // প্রিভিউ আপডেট
            previewIcon.textContent = icon;
            previewName.textContent = name;
            previewBonus.textContent = bonus > 0 ? `বোনাস: ৳${bonus.toFixed(2)}` : 'বোনাস: নেই';
            previewDesc.textContent = desc || 'কোনো বিবরণ নেই';
            
            previewDiv.classList.remove('d-none');
        });

        // ফর্ম সাবমিটে ডাবল সাবমিট বন্ধ
        const form = document.getElementById('giftRankForm');
        const submitBtn = document.getElementById('submitBtn');

        form.addEventListener('submit', function(e) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> প্রক্রিয়াকরণ...';
        });

        // রিসেট বাটন
        document.querySelector('[type="reset"]')?.addEventListener('click', function() {
            setTimeout(() => {
                previewDiv.classList.add('d-none');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-gift me-2"></i> উপহার দিন';
            }, 100);
        });
    });
</script>
@endpush

@endsection