@extends('admin.layouts.admin')

@section('title', __('Privacy Policy'))

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 col-md-10 col-lg-8">
                <div class="privacy-policy-container">
                    <div class="privacy-header">
                        <h1 class="privacy-title">سياسه الخصوصية</h1>
                        <div class="back-button-container">
                            <a href="javascript:history.back()" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>
                                {{ __('Back') }}
                            </a>
                        </div>
                    </div>

                    <div class="privacy-content">
                        @if (setting('privacy_policy'))
                            <div class="content-wrapper">
                                {!! nl2br(e(setting('privacy_policy'))) !!}
                            </div>
                        @else
                            <div class="no-content">
                                <i class="fas fa-info-circle"></i>
                                <p>{{ __('Privacy policy content is not available at the moment.') }}</p>
                            </div>
                        @endif
                    </div>

                    <div class="privacy-footer">
                        <small class="text-muted">
                            {{ __('Last updated') }}: {{ now()->format('Y-m-d') }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Mobile-First Responsive Design */
        .privacy-policy-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 10px;
        }

        .privacy-header {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .privacy-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
            text-align: center;
            flex: 1;
        }

        .back-button-container {
            margin-top: 10px;
            width: 100%;
            text-align: center;
        }

        .privacy-content {
            padding: 20px;
            line-height: 1.6;
            font-size: 16px;
            color: #333;
        }

        .content-wrapper {
            max-width: none;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .no-content {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }

        .no-content i {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #ddd;
        }

        .privacy-footer {
            padding: 15px 20px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
            text-align: center;
        }

        /* Mobile Optimizations */
        @media (max-width: 768px) {
            .container-fluid {
                padding: 0;
            }

            .privacy-policy-container {
                margin: 0;
                border-radius: 0;
                min-height: 100vh;
            }

            .privacy-header {
                padding: 15px;
                flex-direction: column;
                text-align: center;
            }

            .privacy-title {
                font-size: 1.25rem;
                margin-bottom: 10px;
            }

            .back-button-container {
                margin-top: 0;
                width: auto;
            }

            .privacy-content {
                padding: 15px;
                font-size: 15px;
            }

            .privacy-footer {
                padding: 10px 15px;
            }
        }

        /* Extra small devices */
        @media (max-width: 576px) {
            .privacy-content {
                padding: 12px;
                font-size: 14px;
            }

            .privacy-title {
                font-size: 1.1rem;
            }
        }

        /* High DPI screens */
        @media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi) {
            .privacy-content {
                font-size: 16px;
            }
        }

        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .privacy-policy-container {
                background: #1a1a1a;
                color: #e0e0e0;
            }

            .privacy-content {
                color: #e0e0e0;
            }

            .privacy-footer {
                background: #2a2a2a;
                border-top-color: #444;
            }
        }

        /* Print styles */
        @media print {
            .privacy-policy-container {
                box-shadow: none;
                border: 1px solid #ddd;
            }

            .back-button-container {
                display: none;
            }

            .privacy-header {
                background: none !important;
                color: black !important;
            }
        }
    </style>
@endsection