@extends('layouts.portal')

@section('title', $service->name)

@section('content')
<div class="row g-3">
    <div class="col-lg-5">
        <div class="card service-form-card">
            <div class="card-header bg-primary text-white d-flex align-items-center">
                <h5 class="m-0"><i class="fas {{ $service->icon ?? 'fa-cog' }}"></i> {{ $service->name }}</h5>
                <a href="{{ route('user.dashboard') }}" class="ms-auto text-white"><i class="fas fa-arrow-left"></i></a>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('user.services.submit', $service) }}">
                    @csrf

                    @if($service->category === 'SIM & Mobile Services' || $service->api_handler === 'sim_details')
                        <div class="mb-3">
                            <label class="form-label fw-bold">Mobile Number *</label>
                            <input type="text" name="mobile" maxlength="10" class="form-control form-control-lg"
                                   placeholder="10 digit mobile number" pattern="[0-9]{10}"
                                   value="{{ old('mobile') }}" required autofocus>
                            <small class="text-muted">Sirf 10 digit mobile number enter kare (without 91)</small>
                        </div>
                    @elseif($service->category === 'Voter Services')
                        <div class="mb-3">
                            <label class="form-label fw-bold">Voter EPIC Number *</label>
                            <input type="text" name="epic_number" class="form-control" placeholder="ABC1234567" required>
                            <small class="text-muted">Voter Card par likha EPIC Number</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Mobile Number *</label>
                            <input type="text" name="mobile" maxlength="10" class="form-control" placeholder="10 digit mobile number" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">State *</label>
                            <select name="state" class="form-select" required>
                                <option value="">-- Select State --</option>
                                <option>Uttar Pradesh</option>
                                <option>Bihar</option>
                                <option>Delhi</option>
                                <option>West Bengal</option>
                                <option>Maharashtra</option>
                                <option>Madhya Pradesh</option>
                            </select>
                        </div>
                    @elseif($service->category === 'Vehicle / RC / DL')
                        <div class="mb-3">
                            <label class="form-label fw-bold"># Vehicle Number *</label>
                            <input type="text" name="vehicle_number" class="form-control" placeholder="MH12DE1433" required>
                            <small class="text-muted">State + RTO + Series + Number</small>
                        </div>
                    @elseif($service->category === 'Aadhaar Services')
                        <div class="mb-3">
                            <label class="form-label fw-bold">Aadhaar Number *</label>
                            <input type="text" name="aadhaar_number" maxlength="12" class="form-control" placeholder="12 digit Aadhaar" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Mobile (Optional)</label>
                            <input type="text" name="mobile" maxlength="10" class="form-control">
                        </div>
                    @else
                        <div class="mb-3">
                            <label class="form-label fw-bold">Reference / ID Number *</label>
                            <input type="text" name="reference" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Mobile</label>
                            <input type="text" name="mobile" maxlength="10" class="form-control">
                        </div>
                    @endif

                    <div class="row g-2 my-3">
                        <div class="col-6">
                            <div class="balance-box">
                                <small>Balance</small>
                                <h5>₹{{ number_format(auth()->user()->balance, 2) }}</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="charge-box">
                                <small>Charge</small>
                                <h5>₹{{ number_format($charge, 2) }}</h5>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success btn-lg w-100">
                        <i class="fas fa-paper-plane"></i> Submit Request
                    </button>
                </form>
            </div>
        </div>

        @if($service->description)
            <div class="card mt-3">
                <div class="card-body">
                    <h6><i class="fas fa-info-circle text-primary"></i> Service Information</h6>
                    <ul class="small mb-0">
                        <li>Processing Time: 1-5 Minute</li>
                        <li>Charge: ₹{{ number_format($charge, 2) }}</li>
                        <li>Commission: ₹{{ number_format($commission, 2) }}</li>
                        <li>{{ $service->description }}</li>
                    </ul>
                </div>
            </div>
        @endif
    </div>

    <div class="col-lg-7">

        {{-- API Result Display (Sim Details & other API services) --}}
        @if(session('api_result'))
            @php $result = session('api_result'); @endphp

            @if($result['success'] && !empty($result['data']))
                <div class="card border-success mb-3">
                    <div class="card-header bg-success text-white d-flex align-items-center">
                        <i class="fas fa-check-circle me-2"></i>
                        <strong>Result Found!</strong>
                        @if(session('request_no'))
                            <span class="ms-auto badge bg-white text-success">Req: {{ session('request_no') }}</span>
                        @endif
                    </div>
                    <div class="card-body">
                        @if(session('charged_amount') > 0)
                            <div class="alert alert-info py-2 mb-3">
                                <i class="fas fa-rupee-sign"></i>
                                <strong>₹{{ number_format(session('charged_amount'), 2) }}</strong> wallet se deduct hua hai.
                            </div>
                        @endif
                        <div class="row g-2">
                            @foreach((array)$result['data'] as $key => $val)
                                @if(!empty($val))
                                <div class="col-md-6">
                                    <div class="p-2 border rounded bg-light">
                                        <small class="text-muted d-block text-uppercase">{{ str_replace('_', ' ', $key) }}</small>
                                        <strong>{{ is_array($val) ? implode(', ', $val) : $val }}</strong>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>

            @elseif(!$result['success'] && ($result['status_code'] ?? 0) == 200)
                <div class="alert alert-warning d-flex align-items-center mb-3">
                    <i class="fas fa-exclamation-triangle me-2 fa-lg"></i>
                    <div>
                        <strong>Koi Data Nahi Mila</strong><br>
                        <small>Is number ke liye koi information available nahi hai. Charge deduct nahi hua.</small>
                    </div>
                </div>

            @else
                <div class="alert alert-danger d-flex align-items-center mb-3">
                    <i class="fas fa-times-circle me-2 fa-lg"></i>
                    <div>
                        <strong>Error</strong><br>
                        <small>{{ $result['message'] ?? 'Kuch galat ho gaya. Dobara try kare.' }}</small>
                    </div>
                </div>
            @endif
        @endif

        {{-- Validation / other errors --}}
        @if($errors->any())
            <div class="alert alert-danger mb-3">
                @foreach($errors->all() as $e)
                    <div><i class="fas fa-exclamation-circle"></i> {{ $e }}</div>
                @endforeach
            </div>
        @endif

        <div class="card">
            <div class="card-header bg-dark text-white d-flex justify-content-between">
                <h5 class="m-0"><i class="fas fa-history"></i> My Requests</h5>
                <button class="btn btn-sm btn-light" onclick="location.reload()"><i class="fas fa-refresh"></i> Refresh</button>
            </div>
            <div class="card-body p-0">
                @if($myRequests->isEmpty())
                    <p class="text-center text-muted p-4">Iss service ke liye koi request nahi hai.</p>
                @else
                    <div class="list-group list-group-flush">
                        @foreach($myRequests as $r)
                            <div class="list-group-item">
                                <div class="row align-items-center">
                                    <div class="col-md-3">
                                        <small class="text-muted">Request No</small>
                                        <div class="fw-bold">{{ $r->request_no }}</div>
                                    </div>
                                    <div class="col-md-3">
                                        <small class="text-muted">Mobile / Ref</small>
                                        <div>{{ $r->input_data['mobile'] ?? $r->input_data['epic_number'] ?? $r->input_data['vehicle_number'] ?? '-' }}</div>
                                    </div>
                                    <div class="col-md-2">
                                        <small class="text-muted">Amount</small>
                                        <div>₹{{ number_format($r->charge, 2) }}</div>
                                    </div>
                                    <div class="col-md-2">
                                        <span class="badge bg-{{ $r->status_color }} p-2 w-100">{{ ucfirst($r->status) }}</span>
                                    </div>
                                    <div class="col-md-2 text-end">
                                        @if($r->status === 'success' && $r->result_file)
                                            <a href="{{ asset('storage/' . $r->result_file) }}" target="_blank" class="btn btn-sm btn-success">Done</a>
                                        @elseif($r->status === 'refunded')
                                            <span class="badge bg-warning">Refunded</span>
                                        @endif
                                    </div>
                                </div>
                                @if($r->reject_reason)
                                    <div class="alert alert-danger mt-2 mb-0 small">{{ $r->reject_reason }}</div>
                                @endif
                                <div class="mt-2 small text-muted">
                                    <i class="far fa-clock"></i> {{ $r->created_at->format('d M Y, h:i A') }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection