@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">Weather</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Weather </h1>
            <!-- end page-header -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('weather.edit') }}" class="btn btn-sm btn-custom">
                            <i class="fa fa-edit"></i> Edit Configuration
                        </a>
                    </div>
                </div>

                <div class="panel-body">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fa fa-exclamation-triangle"></i> {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-md-8">
                            <div class="weather-info-card">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <i class="fa fa-cloud text-primary"></i>
                                            {{ $weather->region_name }}
                                        </h5>

                                        <div class="weather-details">
                                            <div class="detail-item">
                                                <label class="detail-label">Region Code:</label>
                                                <span class="detail-value">
                                                    <code>{{ $weather->region_code }}</code>
                                                </span>
                                            </div>

                                            <div class="detail-item">
                                                <label class="detail-label">Region Name:</label>
                                                <span class="detail-value">{{ $weather->region_name }}</span>
                                            </div>

                                            <div class="detail-item">
                                                <label class="detail-label">API URL:</label>
                                                <span class="detail-value">
                                                    <small class="text-muted">
                                                        <code>https://api.bmkg.go.id/publik/prakiraan-cuaca?adm4={{ $weather->region_code }}</code>
                                                    </small>
                                                </span>
                                            </div>

                                            <div class="detail-item">
                                                <label class="detail-label">Last Updated:</label>
                                                <span class="detail-value">
                                                    {{ $weather->updated_at ? $weather->updated_at->format('M d, Y H:i:s') : 'Never' }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="weather-status-card">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <div class="weather-icon mb-3">
                                            <i class="fa fa-cloud-sun fa-3x text-warning"></i>
                                        </div>
                                        <h6 class="card-title">Status</h6>
                                        <p class="text-success">
                                            <i class="fa fa-check-circle"></i>
                                            Configuration Active
                                        </p>
                                        <button type="button" class="btn btn-custom test-api-btn"
                                            data-region-code="{{ $weather->region_code }}">
                                            <i class="fa fa-play"></i> Test API
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- API Test Results (Hidden by default) -->
                    <div id="api-test-results" class="mt-4" style="display: none;">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="fa fa-cog"></i> API Test Results
                                </h6>
                            </div>
                            <div class="card-body">
                                <pre id="api-response" class="bg-light p-3 rounded"></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <style>
        .weather-info-card .card {
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
        }

        .weather-details {
            margin-top: 1rem;
        }

        .detail-item {
            display: flex;
            margin-bottom: 0.75rem;
            align-items: flex-start;
        }

        .detail-label {
            font-weight: 600;
            min-width: 120px;
            color: #495057;
            margin-bottom: 0;
        }

        .detail-value {
            flex: 1;
            margin-left: 1rem;
        }

        .detail-value code {
            background-color: #f8f9fa;
            color: #e83e8c;
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-size: 0.875em;
        }

        .weather-status-card .card {
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
        }

        .weather-icon {
            opacity: 0.8;
        }

        .alert {
            border: 0;
            border-radius: 0.5rem;
        }

        #api-response {
            max-height: 400px;
            overflow-y: auto;
            font-size: 0.875rem;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        @media (max-width: 768px) {
            .detail-item {
                flex-direction: column;
            }

            .detail-label {
                min-width: auto;
                margin-bottom: 0.25rem;
            }

            .detail-value {
                margin-left: 0;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                setTimeout(function() {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }, 3000);
            });

            const testApiBtn = document.querySelector('.test-api-btn');
            const apiResults = document.getElementById('api-test-results');
            const apiResponse = document.getElementById('api-response');

            if (testApiBtn) {
                testApiBtn.addEventListener('click', function() {
                    const regionCode = this.getAttribute('data-region-code');

                    // Show loading state
                    this.disabled = true;
                    this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Testing...';

                    // Test the API
                    testWeatherApi(regionCode);
                });
            }

            function testWeatherApi(regionCode) {
                const apiUrl = `https://api.bmkg.go.id/publik/prakiraan-cuaca?adm4=${regionCode}`;

                fetch(apiUrl)
                    .then(response => {
                        return response.json().then(data => ({
                            status: response.status,
                            data: data
                        }));
                    })
                    .then(result => {
                        showApiResults({
                            success: true,
                            region_code: regionCode,
                            api_url: apiUrl,
                            http_status: result.status,
                            response: result.data,
                            timestamp: new Date().toISOString()
                        });
                    })
                    .catch(error => {
                        showApiResults({
                            success: false,
                            region_code: regionCode,
                            api_url: apiUrl,
                            error: error.message,
                            timestamp: new Date().toISOString()
                        });
                    })
                    .finally(() => {
                        // Reset button
                        testApiBtn.disabled = false;
                        testApiBtn.innerHTML = '<i class="fa fa-play"></i> Test API';
                    });
            }

            function showApiResults(result) {
                apiResponse.textContent = JSON.stringify(result, null, 2);
                apiResults.style.display = 'block';

                // Scroll to results
                apiResults.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    </script>
@endsection