@extends('layouts.app')
@section('title', 'App Settings')

@section('content')
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0">
                    <i class="fa-solid fa-shield-halved me-2 text-primary"></i>Privacy Policy
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.app.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="field" value="privacy_policy">
                    <div class="mb-3">
                        <textarea name="value" id="privacy_policy" class="form-control rich-editor" rows="6">{{ $settings['privacy_policy'] ?? '' }}</textarea>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fa-solid fa-save me-2"></i>Save
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0">
                    <i class="fa-solid fa-file-contract me-2 text-primary"></i>Terms & Conditions
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.app.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="field" value="terms_conditions">
                    <div class="mb-3">
                        <textarea name="value" id="terms_conditions" class="form-control rich-editor" rows="6">{{ $settings['terms_conditions'] ?? '' }}</textarea>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fa-solid fa-save me-2"></i>Save
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0">
                    <i class="fa-solid fa-circle-info me-2 text-primary"></i>About Us
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.app.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="field" value="about_us">
                    <div class="mb-3">
                        <textarea name="value" id="about_us" class="form-control rich-editor" rows="6">{{ $settings['about_us'] ?? '' }}</textarea>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fa-solid fa-save me-2"></i>Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0">
                    <i class="fa-solid fa-link me-2 text-primary"></i>App URLs
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('settings.app.update') }}" method="POST" class="mb-3">
                    @csrf
                    <input type="hidden" name="field" value="more_app_url">
                    <label class="form-label small text-muted">More Apps URL</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white"><i class="fa-solid fa-apps text-muted"></i></span>
                        <input type="url" name="value" class="form-control form-control-sm" 
                               value="{{ $settings['more_app_url'] ?? '' }}" placeholder="https://...">
                        <button type="submit" class="btn btn-outline-primary btn-sm">
                            <i class="fa-solid fa-save"></i>
                        </button>
                    </div>
                </form>

                <form action="{{ route('settings.app.update') }}" method="POST" class="mb-3">
                    @csrf
                    <input type="hidden" name="field" value="share_app_url">
                    <label class="form-label small text-muted">Share App URL</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white"><i class="fa-solid fa-share text-muted"></i></span>
                        <input type="url" name="value" class="form-control form-control-sm" 
                               value="{{ $settings['share_app_url'] ?? '' }}" placeholder="https://...">
                        <button type="submit" class="btn btn-outline-primary btn-sm">
                            <i class="fa-solid fa-save"></i>
                        </button>
                    </div>
                </form>

                <form action="{{ route('settings.app.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="field" value="rate_app_url">
                    <label class="form-label small text-muted">Rate App URL</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white"><i class="fa-solid fa-star text-muted"></i></span>
                        <input type="url" name="value" class="form-control form-control-sm" 
                               value="{{ $settings['rate_app_url'] ?? '' }}" placeholder="https://...">
                        <button type="submit" class="btn btn-outline-primary btn-sm">
                            <i class="fa-solid fa-save"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0">
                    <i class="fa-solid fa-circle-question me-2 text-primary"></i>Quick Help
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h6 class="text-muted small mb-2">
                        <i class="fa-solid fa-shield-halved me-2 text-info"></i>Privacy Policy
                    </h6>
                    <p class="small text-muted mb-0">
                        Write your privacy policy to inform users about data collection, storage, and usage practices.
                    </p>
                </div>
                <hr>
                <div class="mb-3">
                    <h6 class="text-muted small mb-2">
                        <i class="fa-solid fa-file-contract me-2 text-warning"></i>Terms & Conditions
                    </h6>
                    <p class="small text-muted mb-0">
                        Define the rules and guidelines that users must agree to when using your app.
                    </p>
                </div>
                <hr>
                <div class="mb-3">
                    <h6 class="text-muted small mb-2">
                        <i class="fa-solid fa-circle-info me-2 text-success"></i>About Us
                    </h6>
                    <p class="small text-muted mb-0">
                        Tell users about your company, mission, and what makes your VPN service unique.
                    </p>
                </div>
                <hr>
                <div>
                    <h6 class="text-muted small mb-2">
                        <i class="fa-solid fa-link me-2 text-primary"></i>App URLs
                    </h6>
                    <p class="small text-muted mb-0">
                        Configure external links for more apps, sharing functionality, and app store ratings.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<style>
.card {
    border-radius: 12px;
}
.note-editor {
    border-radius: 8px;
}
.input-group-text {
    border-color: #dee2e6;
}
</style>
@endpush

@push('script')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
$(document).ready(function() {
    $('.rich-editor').summernote({
        height: 200,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['codeview']]
        ]
    });
});
</script>
@endpush