@extends('root')
@section('title', 'Pengaturan Platform WABA')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Pengaturan Platform WABA',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Pengaturan Platform'
    ])

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="ti ti-check me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="ti ti-x me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{ route('admin.waba-platform-settings.update') }}" method="POST" id="settingsForm">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-lg-3">
                <!-- Navigation Tabs -->
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="ti ti-settings me-2"></i>Menu Pengaturan</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="nav flex-column nav-pills" id="settings-tab" role="tablist">
                            @foreach($groups as $groupKey => $groupInfo)
                                <button class="nav-link {{ $loop->first ? 'active' : '' }} d-flex align-items-center text-start rounded-0 py-3 px-4"
                                        id="{{ $groupKey }}-tab"
                                        data-bs-toggle="pill"
                                        data-bs-target="#{{ $groupKey }}-pane"
                                        type="button"
                                        role="tab">
                                    <i class="{{ $groupInfo['icon'] }} fs-5 me-3"></i>
                                    <div>
                                        <div class="fw-semibold">{{ $groupInfo['title'] }}</div>
                                        <small class="text-muted">{{ $groupInfo['description'] }}</small>
                                    </div>
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card shadow-sm mt-3">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="ti ti-bolt me-2"></i>Aksi Cepat</h6>
                    </div>
                    <div class="card-body">
                        <button type="button" class="btn btn-outline-secondary btn-sm w-100 mb-2" id="btnClearCache">
                            <i class="ti ti-refresh me-1"></i> Bersihkan Cache
                        </button>
                        <a href="https://developers.facebook.com/apps" target="_blank" class="btn btn-outline-primary btn-sm w-100">
                            <i class="ti ti-external-link me-1"></i> Meta Developers
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-9">
                <div class="tab-content" id="settings-tabContent">
                    @foreach($groups as $groupKey => $groupInfo)
                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                             id="{{ $groupKey }}-pane"
                             role="tabpanel"
                             tabindex="0">
                            
                            @if($groupKey === 'oauth')
                                @include('pages.admin.waba-platform-settings._oauth-settings', ['settings' => $settings, 'groupKey' => $groupKey])
                            @elseif($groupKey === 'billing')
                                @include('pages.admin.waba-platform-settings._billing-settings', ['settings' => $settings, 'groupKey' => $groupKey])
                            @elseif($groupKey === 'rate_limit')
                                @include('pages.admin.waba-platform-settings._rate-limit-settings', ['settings' => $settings, 'groupKey' => $groupKey])
                            @else
                                <div class="card shadow-sm">
                                    <div class="card-header bg-primary text-white">
                                        <div class="d-flex align-items-center">
                                            <i class="{{ $groupInfo['icon'] }} fs-4 me-2"></i>
                                            <div>
                                                <h5 class="card-title mb-0">{{ $groupInfo['title'] }}</h5>
                                                <small class="opacity-75">{{ $groupInfo['description'] }}</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        @if(isset($settings[$groupKey]))
                                            @foreach($settings[$groupKey] as $setting)
                                                @include('pages.admin.waba-platform-settings._setting-field', ['groupKey' => $groupKey, 'setting' => $setting])
                                            @endforeach
                                        @else
                                            <div class="alert alert-warning mb-0">
                                                <i class="ti ti-alert-triangle me-2"></i>
                                                Belum ada pengaturan. Jalankan migration atau seeder.
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <!-- Action Buttons -->
                <div class="card shadow-sm mt-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">
                                    <i class="ti ti-info-circle me-1"></i>
                                    Pengaturan akan langsung aktif setelah disimpan.
                                </small>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="ti ti-device-floppy me-1"></i> Simpan Pengaturan
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Toggle switch label update
    $('.form-check-input').on('change', function() {
        var label = $(this).siblings('.form-check-label');
        label.text($(this).is(':checked') ? 'Aktif' : 'Nonaktif');
    });

    // Clear cache button
    $('#btnClearCache').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Membersihkan...');

        $.ajax({
            url: '{{ route("admin.waba-platform-settings.clear-cache") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                toastr.success('Cache berhasil dibersihkan!');
            },
            error: function() {
                toastr.error('Gagal membersihkan cache');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-refresh me-1"></i> Bersihkan Cache');
            }
        });
    });

    // Form submission
    $('#settingsForm').on('submit', function(e) {
        var btn = $(this).find('button[type="submit"]');
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Menyimpan...');
    });

    // Toggle password visibility
    $(document).on('click', '.btn-toggle-password', function() {
        var targetId = $(this).data('target');
        var input = $('#' + targetId);
        var icon = $(this).find('i');
        
        if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            icon.removeClass('ti-eye').addClass('ti-eye-off');
        } else {
            input.attr('type', 'password');
            icon.removeClass('ti-eye-off').addClass('ti-eye');
        }
    });

    // Copy to clipboard
    $(document).on('click', '.btn-copy', function() {
        var text = $(this).data('copy');
        navigator.clipboard.writeText(text).then(function() {
            toastr.success('Berhasil disalin!');
        });
    });

    // Validate Global Token
    $('#btnValidateGlobalToken').on('click', function() {
        var btn = $(this);
        var originalHtml = btn.html();
        var token = $('#oauth_global_access_token').val();
        var resultDiv = $('#tokenValidationResult');
        
        if (!token) {
            toastr.error('Token tidak boleh kosong!');
            return;
        }
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Validating...');
        resultDiv.removeClass('d-none').html('<div class="alert alert-info"><i class="ti ti-loader ti-spin me-1"></i> Memvalidasi token...</div>');
        
        $.ajax({
            url: '{{ route("admin.waba-platform-settings.api.update") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                action: 'validate_global_token',
                token: token
            },
            success: function(response) {
                if (response.is_valid) {
                    resultDiv.html(`
                        <div class="alert alert-success">
                            <h6 class="alert-heading"><i class="ti ti-check me-2"></i>Token Valid!</h6>
                            <ul class="mb-0 small">
                                <li><strong>App ID:</strong> ${response.app_id || 'N/A'}</li>
                                <li><strong>Expires:</strong> ${response.expires_at || 'Never'}</li>
                                <li><strong>Scopes:</strong> ${(response.scopes || []).join(', ') || 'N/A'}</li>
                            </ul>
                        </div>
                    `);
                    toastr.success('Token valid!');
                } else {
                    resultDiv.html(`
                        <div class="alert alert-danger">
                            <h6 class="alert-heading"><i class="ti ti-x me-2"></i>Token Tidak Valid</h6>
                            <p class="mb-0 small">${response.error || 'Token tidak dapat divalidasi'}</p>
                        </div>
                    `);
                    toastr.error('Token tidak valid!');
                }
            },
            error: function(xhr) {
                var errorMsg = xhr.responseJSON?.message || xhr.responseJSON?.error || 'Gagal memvalidasi token';
                resultDiv.html(`
                    <div class="alert alert-danger">
                        <h6 class="alert-heading"><i class="ti ti-x me-2"></i>Error</h6>
                        <p class="mb-0 small">${errorMsg}</p>
                    </div>
                `);
                toastr.error(errorMsg);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });
});
</script>
@endpush

@push('styles')
<style>
.nav-pills .nav-link {
    border-bottom: 1px solid #e9ecef;
    color: #495057;
    transition: all 0.2s;
}
.nav-pills .nav-link:last-child {
    border-bottom: none;
}
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #4a6cf7 100%);
    color: #fff;
}
.nav-pills .nav-link.active small {
    color: rgba(255,255,255,0.8) !important;
}
.nav-pills .nav-link:hover:not(.active) {
    background-color: #f8f9fa;
    transform: translateX(5px);
}

/* Setup Progress */
.setup-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}
.setup-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50px;
    right: 50px;
    height: 3px;
    background: #e9ecef;
    z-index: 0;
}
.setup-step {
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
}
.setup-step .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-weight: bold;
    transition: all 0.3s;
}
.setup-step.completed .step-icon {
    background: #28a745;
    color: white;
}
.setup-step.active .step-icon {
    background: var(--bs-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
}
.setup-step.pending .step-icon {
    background: #e9ecef;
    color: #6c757d;
}
.setup-step .step-label {
    font-size: 0.85rem;
    color: #6c757d;
}
.setup-step.completed .step-label,
.setup-step.active .step-label {
    color: #212529;
    font-weight: 500;
}

/* Config Section */
.config-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.config-section-header {
    background: #f8f9fa;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.config-section-header h6 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.config-section-body {
    padding: 1.25rem;
}
.config-section.success {
    border-color: #28a745;
}
.config-section.success .config-section-header {
    background: #d4edda;
}
.config-section.warning {
    border-color: #ffc107;
}
.config-section.warning .config-section-header {
    background: #fff3cd;
}

/* Input with copy button */
.input-with-copy {
    position: relative;
}
.input-with-copy .btn-copy {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Highlight box */
.highlight-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--bs-primary);
}
</style>
@endpush