{{-- manual --}}
@extends('user.layouts.app')
@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/common-request-balance.css') }}">
    <style>
        .required-asterisk {
            color: #dc3545;
            font-weight: bold;
            margin-left: 5px;
        }

        .form-row {
            margin-bottom: 1rem;
        }

        .form-row .input-group {
            flex: 1;
        }

        .form-row .input-group:not(:last-child) {
            margin-right: 1rem;
        }

        .form-row .input-group select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-row .input-group select:focus {
            outline: none;
            border-color: #007bff;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-hand-coins width="24" height="24" />
            <div class="page-header--title">
                <h1>طلب رصيد</h1>
                <span class="page-header--splitter ">|</span>
                <p>{{ $method->name }}</p>
                <small>| تلقائي</small>
            </div>
        </div>

        <div class="form-container max-w-md mx-auto">
            @if (session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="form-header">
                @if ($method->rotating_title)
                    <div class="rotating-title-banner"
                        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 8px; margin-bottom: 15px; text-align: center; font-weight: bold; font-size: 16px; box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);">
                        <x-lucide-megaphone class="me-2" width="20" height="20" />
                        {{ $method->rotating_title }}
                    </div>
                @endif
                {!! $method->note !!}
            </div>

            <form method="POST" action="{{ route('charge.store') }}">
                @csrf
                <input type="hidden" name="method_id" value="{{ $method->id }}">
                <input type="hidden" name="simple_auto" value="1">

                <div class="form-row">
                    <div class="input-group prefix">
                        <label for="amount">القيمة ({{ $method->min ?? 0 }} - {{ $method->max ?? '∞' }})</label>
                        <div class="input-wrapper">
                            <span class="input-prefix">{{ Auth()->user()->currency->name ?? '$' }}</span>
                            <input id="amount" name="amount" type="number" step="0.01" required
                                min="{{ $method->min ?? 0 }}"
                                @if (!is_null($method->max)) max="{{ $method->max }}" @endif placeholder="0.00">
                        </div>
                        <small class="text-muted d-block mt-1">أدخل المبلغ المطلوب ضمن الحدود المسموحة.</small>
                    </div>
                </div>

                <button type="submit" class="submit-btn">
                    <span>إرسال</span>
                </button>
            </form>
        </div>
    </div>
@endsection