@extends('layouts.admin')

@section('title', 'داکیومنتیشن API')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.min.css">
<style>
    .swagger-ui {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .swagger-ui .topbar {
        background-color: #1c1f35;
        padding: 10px 20px;
        display: none;
    }
    
    .swagger-ui .info .title {
        color: #1c1f35;
        margin-bottom: 10px;
    }
    
    .swagger-ui .scheme-container {
        background: #fafafa;
        padding: 20px;
        border-radius: 4px;
    }
    
    .swagger-ui .btn {
        background-color: #00897b;
    }
    
    .swagger-ui .btn:hover {
        background-color: #00695c;
    }
    
    .swagger-ui .opblock {
        border: 1px solid #f0f0f0;
        margin: 0 0 15px 0;
        border-radius: 4px;
    }
    
    .swagger-ui .opblock.opblock-get {
        border-left: 4px solid #61affe;
    }
    
    .swagger-ui .opblock.opblock-post {
        border-left: 4px solid #49cc90;
    }
    
    .swagger-ui .opblock.opblock-put {
        border-left: 4px solid #fca130;
    }
    
    .swagger-ui .opblock.opblock-delete {
        border-left: 4px solid #f93e3e;
    }

    .swagger-ui .topbar .topbar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .swagger-ui .topbar-inner .topbar-title {
        color: white;
        margin: 0;
    }

    .api-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .api-header h1 {
        margin: 0;
        font-size: 28px;
    }

    .api-header p {
        margin: 5px 0 0 0;
        opacity: 0.9;
    }
    
    .api-container {
        background: white;
        border-radius: 4px;
        padding: 20px;
        min-height: 600px;
    }
</style>
@endsection

@section('content')
<style>
    .api-container {
        background: white;
        border-radius: 4px;
        overflow: hidden;
    }
    
    #swagger-ui {
        padding: 0;
    }
    
    .swagger-ui .topbar {
        display: none;
    }
</style>

<div class="api-header">
    <h1><i class="material-icons" style="vertical-align: middle; margin-left: 10px;">api</i> داکیومنتیشن API</h1>
    <p>تمام وب سرویس‌های پروژه هوشی و نحوه استفاده از آن‌ها</p>
</div>

<div class="api-container">
    <div id="swagger-ui" style="min-height: 600px;"></div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        try {
            const ui = SwaggerUIBundle({
                url: "{{ route('admin.api.swagger') }}",
                dom_id: '#swagger-ui',
                presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                ],
                layout: "StandaloneLayout",
                deepLinking: true,
                defaultModelsExpandDepth: 1,
                defaultModelExpandDepth: 1,
                supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'],
                onComplete: function() {
                    console.log('Swagger UI loaded successfully');
                },
                onFailure: function(error) {
                    console.error('Swagger UI failed:', error);
                }
            });
            window.ui = ui;
        } catch (error) {
            console.error('Error initializing Swagger UI:', error);
            document.getElementById('swagger-ui').innerHTML = '<p style="color: red;">خطا در بارگذاری داکیومنتیشن</p>';
        }
    });
</script>
@endsection