@extends('user.layout')

@section('title','মোবাইল রিচার্জ')

@section('content')
<style>
:root{
    --theme: #0284c7;            /* সুন্দর আকাশী/ব্লু Primary */
    --theme-hover: #0369a1;      /* Hover State Blue */
    --theme-light: #f0f9ff;      /* Light Sky Blue Background */
    --theme-border: #bae6fd;     /* Active Border Sky Blue */
    --accent: #38bdf8;
    --danger: #ef4444;
    --success: #10b981;
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
}

/* Layout extra blank/scroll fix for this page */
html,
body{
    background: var(--bg)!important;
}

.app-body{
    flex:0 0 auto!important;
    min-height:0!important;
    padding-top:calc(var(--header-h) + 12px)!important;
    padding-bottom:calc(var(--footer-h) + 12px)!important;
    background: var(--bg)!important;
    overflow-x:hidden!important;
}

.recharge-page{
    background: var(--bg);
    min-height:auto;
    padding:8px 16px 0;
    color:var(--text);
    overflow-x:hidden;
}

.recharge-container{
    width:100%;
    display:flex;
    justify-content:center;
    padding:0;
}

.recharge-card{
    width:100%;
    max-width:400px;
    background:var(--card-bg);
    border:1px solid var(--line);
    border-radius:24px;
    padding:20px 16px;
    box-shadow:0 12px 32px -8px rgba(15, 23, 42, 0.08);
    position:relative;
    overflow:hidden;
    margin:0 auto;
}

.recharge-title{
    text-align:center;
    margin-bottom:14px;
}

.recharge-title h2{
    margin:0;
    font-size:22px;
    font-weight:800;
    color:var(--text);
    line-height:1.25;
}

.recharge-title p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}

.history-wrap{
    text-align:center;
    margin-bottom:16px;
}

.history-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:var(--theme)!important;
    background:var(--theme-light);
    padding:8px 16px;
    border-radius:20px;
    font-size:13px;
    font-weight:700;
    text-decoration:none!important;
    transition: all .2s ease;
}

.history-link:hover,
.history-link:focus{
    background:var(--theme-border);
    color:var(--theme-hover)!important;
}

.api-off{
    border:1px solid #fecaca;
    background:#fff1f2;
    color:#991b1b;
    border-radius:14px;
    padding:12px;
    font-size:13px;
    font-weight:700;
    margin-bottom:14px;
    text-align:center;
}

.alert{
    border-radius:14px;
    font-size:13px;
    font-weight:700;
    margin-bottom:14px;
    padding:12px;
}

.recharge-form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.form-group{
    margin:0;
}

.form-label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:#334155;
    margin-bottom:6px;
}

.recharge-input{
    width:100%;
    height:48px;
    border:1.5px solid var(--line);
    border-radius:14px;
    padding:0 14px;
    background:#fff;
    color:var(--text);
    outline:0;
    font-size:15px;
    font-weight:700;
    transition: all .2s ease;
    box-shadow:0 1px 2px rgba(0,0,0,.02);
}

.recharge-input:focus{
    border-color:var(--theme);
    box-shadow:0 0 0 4px rgba(2, 132, 199, 0.15);
}

.input-help{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
    margin-top:6px;
}

/* Horizontal scroll list for operators */
.operator-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 2px 10px;
    margin:0 -2px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.operator-grid::-webkit-scrollbar{
    height:0;
}

.operator-grid{
    scrollbar-width:none;
}

.operator-option,
.type-option{
    border:1.5px solid var(--line);
    border-radius:16px;
    background:#fff;
    cursor:pointer;
    text-align:center;
    transition:all .2s ease;
    user-select:none;
    position:relative;
}

.operator-option{
    flex:0 0 105px;
    width:105px;
    padding:10px 6px;
    scroll-snap-align:start;
}

.operator-option input,
.type-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:1px;
    height:1px;
}

/* চারকোণা লোগো কন্টেইনার */
.operator-logo-wrap{
    width:48px;
    height:48px;
    border-radius:12px; /* চারকোণা কিন্তু সুন্দর স্মুথ কর্নার */
    margin:0 auto 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #f8fafc;
    border: 1px solid var(--line);
    overflow: hidden;
}

.operator-logo-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    padding: 2px;
}

.operator-logo-fallback{
    font-size:13px;
    font-weight:800;
    color:var(--theme);
    text-transform:uppercase;
}

/* বক্সের নিচে নাম */
.operator-name{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#334155;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.operator-option.active,
.type-option.active{
    border-color:var(--theme);
    background:var(--theme-light);
    box-shadow:0 0 0 2px var(--theme-border);
}

.operator-option.active .operator-name,
.type-option.active span{
    color:var(--theme-hover);
}

.type-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.type-option{
    padding:13px 10px;
    font-size:15px;
    font-weight:800;
    color:#475569;
}

.hold-submit{
    position:relative;
    width:100%;
    height:52px;
    border:0;
    border-radius:16px;
    overflow:hidden;
    background:#94a3b8;
    color:#fff;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(2, 132, 199, 0.2);
    user-select:none;
    touch-action:none;
    margin-top:4px;
}

.hold-submit:not(:disabled){
    background: linear-gradient(135deg, var(--theme), #38bdf8);
}

.hold-submit:disabled{
    background:#cbd5e1;
    cursor:not-allowed;
    box-shadow:none;
}

.hold-progress{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    background:var(--success);
    z-index:1;
}

.hold-submit span{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.success-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.6);
    backdrop-filter: blur(4px);
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.success-popup{
    width:100%;
    max-width:390px;
    background:#fff;
    border-radius:24px;
    padding:22px 20px;
    text-align:center;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    animation:popIn .25s ease;
}

@keyframes popIn{
    from{transform:scale(.9);opacity:0}
    to{transform:scale(1);opacity:1}
}

.success-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ecfdf5;
    color:var(--success);
    font-size:36px;
}

.success-title{
    font-size:19px;
    font-weight:800;
    color:var(--text);
}

.success-info{
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:16px;
    padding:10px 14px;
    margin:14px 0;
}

.success-info div{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px dashed #e2e8f0;
    font-size:13px;
}

.success-info div:last-child{
    border-bottom:none;
}

.success-info span{
    color:var(--muted);
    font-weight:700;
}

.success-info strong{
    color:var(--text);
    text-align:right;
}

.success-close-btn{
    width:100%;
    height:46px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,var(--theme), var(--theme-hover));
    color:#fff;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
}

.success-history-link{
    width:100%;
    height:44px;
    margin-top:10px;
    border-radius:14px;
    background:var(--theme-light);
    color:var(--theme)!important;
    border:1px solid var(--theme-border);
    font-size:13px;
    font-weight:800;
    text-decoration:none!important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

@media(max-width:420px){
    .recharge-page{
        padding:4px 12px 0;
    }

    .recharge-card{
        padding:16px 14px;
        border-radius:20px;
    }

    .operator-option{
        flex:0 0 98px;
        width:98px;
    }

    .operator-logo-wrap{
        width:44px;
        height:44px;
    }
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

@php
    $submittedRecharge = session('recharge_success');
    $oldOperator = old('operator');
    $oldType = old('type', 'prepaid');

    /* প্রদত্ত ইমেজ পাথগুলোর ডায়নামিক ম্যাপিং */
    $operatorImageMap = [
        'GP' => 'https://careerlink.shop/images/operators/gp.png',
        'RB' => 'https://careerlink.shop/images/operators/robi.png',
        'AT' => 'https://careerlink.shop/images/operators/al.png',
        'BL' => 'https://careerlink.shop/images/operators/bl.png',
        'RY' => 'https://careerlink.shop/images/operators/ryze.jpeg',
        'BK' => 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyHewE3QJdV9GLeKpY6ruwaxUXBlB4DNujgCFIZ8CY8qnBD-eX2tU-6dg&s=10',
        'SK' => 'https://careerlink.shop/images/operators/st.png',
        'TT' => 'https://careerlink.shop/images/operators/tt.png',
    ];

    $operatorShortName = [
        'GP' => 'GP',
        'RB' => 'Robi',
        'AT' => 'Airtel',
        'BL' => 'BL',
        'TT' => 'Teletalk',
        'SK' => 'Skitto',
        'BK' => 'bKash',
        'RY' => 'Ryze',
    ];
@endphp

@if($submittedRecharge)
    <div class="success-popup-overlay" id="successPopup">
        <div class="success-popup">
            <div class="success-icon">
                <i class="fa-solid fa-circle-check"></i>
            </div>

            <div class="success-title">রিচার্জ রিকোয়েস্ট সফল হয়েছে</div>

            <div class="success-info">
                <div>
                    <span>পরিমাণ</span>
                    <strong>৳{{ number_format((float)($submittedRecharge['amount'] ?? 0), 2) }}</strong>
                </div>

                <div>
                    <span>মোবাইল</span>
                    <strong>{{ $submittedRecharge['mobile_number'] ?? '-' }}</strong>
                </div>

                <div>
                    <span>অপারেটর</span>
                    <strong>{{ $submittedRecharge['operator'] ?? '-' }}</strong>
                </div>

                <div>
                    <span>টাইপ</span>
                    <strong>{{ ucfirst($submittedRecharge['type'] ?? '-') }}</strong>
                </div>

                <div>
                    <span>ট্রানজেকশন ID</span>
                    <strong>{{ $submittedRecharge['trx_id'] ?? '-' }}</strong>
                </div>

                <div>
                    <span>স্ট্যাটাস</span>
                    <strong>{{ $submittedRecharge['status'] ?? 'Processing' }}</strong>
                </div>

                <div>
                    <span> সময়</span>
                    <strong>{{ $submittedRecharge['datetime'] ?? '-' }}</strong>
                </div>
            </div>

            <button type="button" class="success-close-btn" onclick="closeSuccessPopup()">
                ঠিক আছে
            </button>

            <a href="{{ route('user.mobile-recharge.history') }}" class="success-history-link">
                <i class="fa-solid fa-clock-rotate-left"></i>
                রিচার্জ হিস্ট্রি দেখুন
            </a>
        </div>
    </div>
@endif

<div class="recharge-page">
    <div class="recharge-container">
        <div class="recharge-card">

            <div class="recharge-title">
                <h2>📱 মোবাইল রিচার্জ</h2>
                <p>নিরাপদ ও সহজ রিচার্জ যেকোনো অপারেটরে</p>
            </div>

            <div class="history-wrap">
                <a href="{{ route('user.mobile-recharge.history') }}" class="history-link">
                    <i class="fa-solid fa-clock-rotate-left"></i>
                    রিচার্জ হিস্ট্রি দেখুন
                </a>
            </div>

            @if(!$setting->is_enabled)
                <div class="api-off">
                    মোবাইল রিচার্জ সার্ভিস এখন বন্ধ আছে।
                </div>
            @endif

            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <form method="POST" action="{{ route('user.mobile-recharge.store') }}" class="recharge-form" id="rechargeForm">
                @csrf

                <div class="form-group">
                    <label class="form-label">মোবাইল নম্বর</label>

                    <input
                        type="text"
                        name="mobile_number"
                        id="mobileNumberInput"
                        value="{{ old('mobile_number') }}"
                        class="recharge-input"
                        placeholder="01XXXXXXXXX / 096XXXXXXXX"
                        inputmode="numeric"
                        maxlength="11"
                        required
                    >

                    @error('mobile_number')
                        <small class="text-danger font-weight-bold d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">অপারেটর সিলেক্ট করুন</label>

                    <div class="operator-grid" id="operatorGrid">
                        @foreach($operators as $code => $name)
                            @php
                                $activeOperator = $oldOperator === $code;
                                $shortName = $operatorShortName[$code] ?? $code;
                                $logoUrl = $operatorImageMap[$code] ?? "https://careerlink.shop/images/operators/".strtolower($code).".png";
                            @endphp

                            <label class="operator-option {{ $activeOperator ? 'active' : '' }}" data-value="{{ $code }}">
                                <input
                                    type="radio"
                                    name="operator"
                                    value="{{ $code }}"
                                    @checked($activeOperator)
                                    required
                                >

                                <div class="operator-logo-wrap">
                                    <img 
                                        src="{{ $logoUrl }}" 
                                        alt="{{ $name }}" 
                                        class="operator-logo-img"
                                        onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                                    >
                                    <span class="operator-logo-fallback" style="display:none;">{{ $shortName }}</span>
                                </div>

                                <span class="operator-name">{{ $name }}</span>
                            </label>
                        @endforeach
                    </div>

                    @error('operator')
                        <small class="text-danger font-weight-bold d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">সিম টাইপ</label>

                    <div class="type-grid" id="typeGrid">
                        <label class="type-option {{ $oldType === 'prepaid' ? 'active' : '' }}" data-value="prepaid">
                            <input
                                type="radio"
                                name="type"
                                value="prepaid"
                                @checked($oldType === 'prepaid')
                                required
                            >
                            <span>Prepaid</span>
                        </label>

                        <label class="type-option {{ $oldType === 'postpaid' ? 'active' : '' }}" data-value="postpaid">
                            <input
                                type="radio"
                                name="type"
                                value="postpaid"
                                @checked($oldType === 'postpaid')
                                required
                            >
                            <span>Postpaid</span>
                        </label>
                    </div>

                    @error('type')
                        <small class="text-danger font-weight-bold d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">পরিমাণ (৳)</label>

                    <input
                        type="number"
                        step="1"
                        name="amount"
                        id="amountInput"
                        value="{{ old('amount') }}"
                        class="recharge-input"
                        placeholder="0.00"
                        min="{{ (float) $setting->min_amount }}"
                        max="{{ (float) $setting->max_amount }}"
                        required
                    >

                    <small class="input-help">
                        সর্বনিম্ন ৳{{ number_format($setting->min_amount,0) }} · সর্বোচ্চ ৳{{ number_format($setting->max_amount,0) }}
                    </small>

                    @error('amount')
                        <small class="text-danger font-weight-bold d-block mt-1">{{ $message }}</small>
                    @enderror
                </div>

                <button type="button" class="hold-submit" id="holdButton" @disabled(!$setting->is_enabled)>
                    <div class="hold-progress" id="holdProgress"></div>

                    <span id="holdText">
                        <i class="fa-solid fa-hand-pointer"></i>
                        রিচার্জ করতে চেপে ধরে রাখুন
                    </span>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
function closeSuccessPopup(){
    const popup = document.getElementById('successPopup');

    if(popup){
        popup.style.display = 'none';
    }
}

document.addEventListener('DOMContentLoaded', function(){
    const mobileInput = document.getElementById('mobileNumberInput');
    const rechargeForm = document.getElementById('rechargeForm');
    const holdButton = document.getElementById('holdButton');
    const holdProgress = document.getElementById('holdProgress');
    const holdText = document.getElementById('holdText');

    const prefixMap = [
        { prefix: '017', operator: 'GP' },
        { prefix: '013', operator: 'GP' },
        { prefix: '018', operator: 'RB' },
        { prefix: '016', operator: 'AT' },
        { prefix: '019', operator: 'BL' },
        { prefix: '014', operator: 'BL' },
        { prefix: '015', operator: 'TT' },
        { prefix: '096', operator: 'BT' }
    ];

    let holdTimer = null;
    let isHolding = false;
    let isSubmitting = false;

    function normalizeNumber(value){
        value = String(value || '').replace(/[^0-9]/g, '');

        if(value.startsWith('880')){
            value = '0' + value.substring(3);
        }

        return value;
    }

    function selectOperator(code, shouldScroll){
        const target = document.querySelector('.operator-option[data-value="' + code + '"]');

        if(!target) return;

        document.querySelectorAll('.operator-option').forEach(function(item){
            item.classList.remove('active');

            const input = item.querySelector('input[type="radio"]');
            if(input) input.checked = false;
        });

        target.classList.add('active');

        const targetInput = target.querySelector('input[type="radio"]');
        if(targetInput) targetInput.checked = true;

        if(shouldScroll && target.scrollIntoView){
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest',
                inline: 'center'
            });
        }
    }

    function autoSelectOperator(){
        if(!mobileInput) return;

        const number = normalizeNumber(mobileInput.value);
        let detectedOperator = '';

        for(const item of prefixMap){
            if(number.startsWith(item.prefix)){
                detectedOperator = item.operator;
                break;
            }
        }

        if(detectedOperator){
            selectOperator(detectedOperator, true);
        }
    }

    if(mobileInput){
        mobileInput.addEventListener('input', function(){
            this.value = normalizeNumber(this.value).substring(0, 11);
            autoSelectOperator();
        });

        autoSelectOperator();
    }

    document.querySelectorAll('.operator-option').forEach(function(option){
        option.addEventListener('click', function(){
            const code = this.getAttribute('data-value');
            selectOperator(code, true);
        });
    });

    document.querySelectorAll('.type-option').forEach(function(option){
        option.addEventListener('click', function(){
            document.querySelectorAll('.type-option').forEach(function(item){
                item.classList.remove('active');

                const input = item.querySelector('input[type="radio"]');
                if(input) input.checked = false;
            });

            this.classList.add('active');

            const input = this.querySelector('input[type="radio"]');
            if(input) input.checked = true;
        });
    });

    function resetHold(){
        isHolding = false;

        if(holdTimer){
            clearTimeout(holdTimer);
            holdTimer = null;
        }

        if(holdProgress){
            holdProgress.style.transition = 'width .25s ease-out';
            holdProgress.style.width = '0%';
        }

        if(holdText && !isSubmitting){
            holdText.innerHTML = '<i class="fa-solid fa-hand-pointer"></i> রিচার্জ করতে চেপে ধরে রাখুন';
        }
    }

    function startHold(){
        if(isSubmitting || !rechargeForm || !holdButton || holdButton.disabled) return;

        if(!rechargeForm.reportValidity()){
            return;
        }

        isHolding = true;

        if(holdProgress){
            holdProgress.style.transition = 'width 2.5s linear';
            holdProgress.style.width = '100%';
        }

        if(holdText){
            holdText.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> ধরে রাখুন...';
        }

        holdTimer = setTimeout(function(){
            if(!isHolding) return;

            isSubmitting = true;

            if(holdButton){
                holdButton.disabled = true;
            }

            if(holdText){
                holdText.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing...';
            }

            rechargeForm.submit();
        }, 2500);
    }

    if(holdButton){
        holdButton.addEventListener('pointerdown', function(e){
            e.preventDefault();
            startHold();
        });

        ['pointerup','pointerleave','pointercancel'].forEach(function(evt){
            holdButton.addEventListener(evt, function(){
                if(!isSubmitting){
                    resetHold();
                }
            });
        });
    }
});
</script>
@endsection