@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="{{ route('weather.index') }}">Weather</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
            <!-- end breadcrumb -->

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

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Edit Weather Configuration</h4>
                    </div>
                </div>

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

                    <form action="{{ route('weather.update') }}" method="POST" novalidate>
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="region_code" class="form-label required">Region Code</label>
                                    <input type="text" class="form-control" id="region_code" name="region_code"
                                        value="{{ $weather->region_code }}" placeholder="e.g., 34.71.12.1003"
                                        pattern="[\d\.]+" maxlength="20" required>
                                    <small class="form-text text-muted">
                                        <i class="fa fa-info-circle"></i>
                                        Enter region code in format: numbers separated by dots (e.g., 34.71.12.1003)
                                    </small>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="region_name" class="form-label required">Region Name</label>
                                    <input type="text" class="form-control" id="region_name" name="region_name"
                                        value="{{ $weather->region_name }}" placeholder="e.g., Jakarta Pusat"
                                        maxlength="255" required>
                                    <small class="form-text text-muted">
                                        <i class="fa fa-info-circle"></i>
                                        Display name for this region
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Current API URL Preview -->
                        <div class="form-group">
                            <label class="form-label">Current API URL:</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-link"></i></span>
                                </div>
                                <input type="text" class="form-control bg-light" id="api-url-preview"
                                    value="https://api.bmkg.go.id/publik/prakiraan-cuaca?adm4={{ $weather->region_code }}"
                                    readonly>
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-outline-secondary" id="copy-url-btn"
                                        title="Copy URL">
                                        <i class="fa fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                            <small class="form-text text-muted">
                                This URL will update automatically as you change the region code above.
                            </small>
                        </div>

                        <!-- API Information Panel -->
                        <div class="alert alert-info">
                            <h6><i class="fa fa-cloud"></i> API Information</h6>
                            <p class="mb-2">
                                This configuration is used to fetch weather data from BMKG (Indonesian Agency for
                                Meteorology, Climatology, and Geophysics) API.
                            </p>
                            <ul class="mb-0 small">
                                <li>The region code follows Indonesian administrative code format</li>
                                <li>This is the only weather configuration - updating it will change the weather source
                                    globally</li>
                                <li>Make sure the region code is valid to ensure weather data availability</li>
                            </ul>
                        </div>

                        <div class="form-actions mt-4">
                            <button type="submit" class="btn btn-custom">
                                <i class="fa fa-save"></i> Update
                            </button>
                            <button type="button" class="btn btn-custom">
                                <i class="fa fa-play"></i> Test Before Save
                            </button>
                            <a href="{{ route('weather.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </form>

                    <!-- Test Results (Hidden by default) -->
                    <div id="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">
                                <div id="test-status" class="mb-3"></div>
                                <pre id="test-response" class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;"></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>
        .form-label.required::after {
            content: " *";
            color: #dc3545;
        }

        .form-actions {
            padding-top: 1.5rem;
            border-top: 1px solid #eee;
        }

        .form-actions .btn {
            margin-right: 0.5rem;
        }

        .input-group-text {
            background-color: #f8f9fa;
            border-color: #ced4da;
        }

        #api-url-preview {
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }

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

        #test-response {
            font-size: 0.875rem;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .test-status-success {
            color: #28a745;
        }

        .test-status-error {
            color: #dc3545;
        }

        @media (max-width: 768px) {
            .form-actions {
                text-align: center;
            }

            .form-actions .btn {
                width: 100%;
                margin-bottom: 0.5rem;
                margin-right: 0;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const regionCodeInput = document.getElementById('region_code');
            const apiUrlPreview = document.getElementById('api-url-preview');
            const copyUrlBtn = document.getElementById('copy-url-btn');
            // FIX: Select the button by finding the one that contains "Test Before Save" text
            const testBtn = document.querySelector('button[type="button"]:not(#copy-url-btn)');
            const testResults = document.getElementById('test-results');
            const testStatus = document.getElementById('test-status');
            const testResponse = document.getElementById('test-response');

            // Format region code input - only allow numbers and dots
            regionCodeInput.addEventListener('input', function() {
                this.value = this.value.replace(/[^\d\.]/g, '');
                updateApiUrlPreview();
            });

            // Update API URL preview as user types
            function updateApiUrlPreview() {
                const regionCode = regionCodeInput.value.trim();
                const baseUrl = 'https://api.bmkg.go.id/publik/prakiraan-cuaca?adm4=';
                apiUrlPreview.value = baseUrl + encodeURIComponent(regionCode);
            }

            // Copy URL to clipboard
            copyUrlBtn.addEventListener('click', function() {
                apiUrlPreview.select();
                apiUrlPreview.setSelectionRange(0, 99999); // For mobile devices

                try {
                    document.execCommand('copy');

                    // Visual feedback
                    const originalIcon = this.querySelector('i').className;
                    this.querySelector('i').className = 'fa fa-check';
                    this.classList.add('btn-success');
                    this.classList.remove('btn-outline-secondary');

                    setTimeout(() => {
                        this.querySelector('i').className = originalIcon;
                        this.classList.remove('btn-success');
                        this.classList.add('btn-outline-secondary');
                    }, 2000);

                } catch (err) {
                    console.error('Failed to copy: ', err);
                }
            });

            // Test API before saving - FIX: Check if testBtn exists before adding event listener
            if (testBtn) {
                testBtn.addEventListener('click', function() {
                    const regionCode = regionCodeInput.value.trim();

                    if (!regionCode) {
                        alert('Please enter a region code first.');
                        regionCodeInput.focus();
                        return;
                    }

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

                    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,
                            ok: response.ok,
                            data: data
                        }));
                    })
                    .then(result => {
                        showTestResults({
                            success: result.ok,
                            region_code: regionCode,
                            api_url: apiUrl,
                            http_status: result.status,
                            response: result.data,
                            timestamp: new Date().toISOString()
                        });
                    })
                    .catch(error => {
                        showTestResults({
                            success: false,
                            region_code: regionCode,
                            api_url: apiUrl,
                            error: error.message,
                            timestamp: new Date().toISOString()
                        });
                    })
                    .finally(() => {
                        // Reset button - FIX: Check if testBtn exists before resetting
                        if (testBtn) {
                            testBtn.disabled = false;
                            testBtn.innerHTML = '<i class="fa fa-play"></i> Test Before Save';
                        }
                    });
            }

            function showTestResults(result) {
                // Show status
                if (result.success) {
                    testStatus.className = 'alert alert-success test-status-success';
                    testStatus.innerHTML =
                        '<i class="fa fa-check-circle"></i> API test successful! The region code is working correctly.';
                } else {
                    testStatus.className = 'alert alert-danger test-status-error';
                    testStatus.innerHTML =
                        '<i class="fa fa-exclamation-triangle"></i> API test failed. Please check the region code.';
                }

                // Show response
                testResponse.textContent = JSON.stringify(result, null, 2);

                // Show results panel
                testResults.style.display = 'block';

                // Scroll to results
                testResults.scrollIntoView({
                    behavior: 'smooth'
                });
            }

            // Form validation
            const form = document.querySelector('form');
            form.addEventListener('submit', function(e) {
                let isValid = true;

                // Validate region code format
                const regionCode = regionCodeInput.value.trim();
                const regionCodePattern = /^[\d\.]+$/;

                if (!regionCodePattern.test(regionCode)) {
                    regionCodeInput.classList.add('is-invalid');
                    isValid = false;
                } else {
                    regionCodeInput.classList.remove('is-invalid');
                }

                // Validate required fields
                const requiredFields = this.querySelectorAll('[required]');
                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        field.classList.remove('is-invalid');
                    }
                });

                if (!isValid) {
                    e.preventDefault();

                    // Scroll to first error
                    const firstError = this.querySelector('.is-invalid');
                    if (firstError) {
                        firstError.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                        firstError.focus();
                    }
                }
            });

            // Initialize API URL preview
            updateApiUrlPreview();
        });
    </script>
@endsection