@extends('layouts.app', ['title' => 'Laravel API Tester'])

@section('content')
<div class="topbar">
    <div>
        <h2 style="margin: 0;">Laravel API Tester</h2>
        <div class="small">أداة داخلية لإرسال الطلبات وحفظ السجل داخل Laravel.</div>
    </div>

    <form method="POST" action="{{ route('logout') }}" class="inline">
        @csrf
        <button type="submit" class="w-auto btn-secondary">تسجيل خروج</button>
    </form>
</div>

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

@if($errors->any())
    <div class="alert alert-danger">
        @foreach($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
    </div>
@endif

<div class="card">
<form method="POST" action="{{ route('api.tester.send') }}" class="inline">
                @csrf

        <div style="margin-bottom: 14px;">
            <label>الرابط URL</label>
            <input type="text" name="url" value="{{ old('url') }}" placeholder="https://api.example.com/v1/test">
            <div class="small">يسمح فقط بـ http و https، مع حظر localhost والشبكات الخاصة.</div>
        </div>

        <div class="row" style="margin-bottom: 14px;">
            <div class="col">
                <label>الطريقة Method</label>
                <select name="method">
                    @foreach(['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] as $method)
                        <option value="{{ $method }}" {{ old('method', 'GET') === $method ? 'selected' : '' }}>
                            {{ $method }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col">
                <label>نوع الـ Body</label>
                <select name="body_type">
                    <option value="none" {{ old('body_type', 'json') === 'none' ? 'selected' : '' }}>None</option>
                    <option value="json" {{ old('body_type', 'json') === 'json' ? 'selected' : '' }}>JSON</option>
                    <option value="form" {{ old('body_type') === 'form' ? 'selected' : '' }}>Form (key=value)</option>
                    <option value="raw" {{ old('body_type') === 'raw' ? 'selected' : '' }}>Raw</option>
                </select>
            </div>

            <div class="col">
                <label>Timeout</label>
                <input type="number" name="timeout" value="{{ old('timeout', 30) }}">
            </div>
        </div>

        <div style="margin-bottom: 14px;">
            <label>Headers</label>
            <textarea name="headers" placeholder="Authorization: Bearer your-token
Accept: application/json
X-Api-Key: 123456">{{ old('headers') }}</textarea>
            <div class="small">كل Header في سطر مستقل بصيغة Key: Value</div>
        </div>

        <div style="margin-bottom: 14px;">
            <label>Body</label>
            <textarea name="body" placeholder='{"name":"Mohammed","email":"test@example.com"}'>{{ old('body') }}</textarea>
            <div class="small">في حالة Form اكتب كل سطر بهذا الشكل: key=value</div>
        </div>

        <div class="actions">
            <button type="submit" class="w-auto">إرسال الطلب</button>
        </div>
    </form>
</div>

@if(isset($result))
    <div class="card">
        <h3 style="margin-top: 0;">النتيجة</h3>

        <p>
            الحالة:
            <span class="{{ ($result['ok'] ?? false) ? 'badge-ok' : 'badge-bad' }}">
                {{ $result['status'] ?? '-' }}
            </span>
            <span class="small">| المدة: {{ $result['duration_ms'] ?? '-' }} ms</span>
        </p>

        <h4>Response Headers</h4>
        <div class="code-box">{{ json_encode($result['headers'] ?? [], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</div>

        <h4 style="margin-top: 18px;">Response Body</h4>
        <div class="code-box">{{ $result['body'] ?? '' }}</div>
    </div>
@endif

<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
        <h3 style="margin:0;">السجل</h3>
        <div class="small">آخر {{ isset($history) ? $history->count() : 0 }} عملية في هذه الصفحة</div>
    </div>

    <div style="overflow:auto; margin-top: 12px;">
        <table>
            <thead>
                <tr>
                    <th class="nowrap">الوقت</th>
                    <th>Method</th>
                    <th>URL</th>
                    <th>Status</th>
                    <th>المدة</th>
                    <th>إعادة تعبئة</th>
                </tr>
            </thead>
            <tbody>
@forelse(($history ?? collect()) as $item)
    <tr>
        <td class="nowrap">{{ $item->created_at }}</td>
        <td class="nowrap">{{ $item->method }}</td>
        <td class="mono">{{ $item->url }}</td>
        <td class="nowrap">{{ $item->response_status ?? 'ERROR' }}</td>
        <td class="nowrap">{{ $item->duration_ms ?? '-' }} ms</td>
        <td class="nowrap">
            <form method="POST" action="{{ route('api.tester.replay', ['log' => $item->id]) }}" class="inline">
                @csrf
                <button type="submit" class="w-auto btn-secondary">تحميل</button>
            </form>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="6">لا يوجد سجل بعد.</td>
    </tr>
@endforelse
</tbody>
        </table>
    </div>

    @if(isset($history) && method_exists($history, 'links'))
        <div class="pagination">{{ $history->links() }}</div>
    @endif
</div>
@endsection