@extends('admin.layouts.app')

@section('title', 'Robots.txt')

@section('content')

<style>
    /* ============================================
       ROBOTS.TXT - CUSTOM STYLES
    ============================================ */

    .robots-wrapper {
        padding: 0 4px;
    }

    .status-badge-file {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .status-badge-file.exists {
        background: #F0FDF4;
        color: #16A34A;
    }

    .status-badge-file.not-exists {
        background: #FEF2F2;
        color: #DC2626;
    }

    .code-editor {
        font-family: 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.8;
        background: #0D1117;
        color: #E6EDF3;
        padding: 16px 20px;
        border-radius: 10px;
        min-height: 300px;
        width: 100%;
        border: 1px solid #1C2128;
        resize: vertical;
        outline: none;
        transition: all 0.3s ease;
    }

    .code-editor:focus {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .code-editor::placeholder {
        color: #6B7280;
        font-family: 'Courier New', monospace;
    }

    .code-editor.is-invalid {
        border-color: #DC2626;
    }

    .code-editor.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
    }

    .tip-card {
        background: #FFFFFF;
        border-radius: 14px;
        border: 1px solid #E8E8E8;
        overflow: hidden;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02);
        transition: all 0.3s ease;
    }

    .tip-card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
    }

    .tip-card .tip-header {
        padding: 14px 20px;
        background: #FAFBFC;
        border-bottom: 1px solid #E8E8E8;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tip-card .tip-header h6 {
        font-size: 14px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .tip-card .tip-header i {
        font-size: 16px;
        color: #F59E0B;
    }

    .tip-card .tip-body {
        padding: 16px 20px;
    }

    .tip-card .tip-body .directive-item {
        padding: 8px 12px;
        border-bottom: 1px solid #F0F0F0;
        font-size: 13px;
        color: #4A5568;
    }

    .tip-card .tip-body .directive-item:last-child {
        border-bottom: none;
    }

    .tip-card .tip-body .directive-item code {
        background: #F8F9FA;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: #C1121F;
    }

    .tip-card .tip-body .directive-item .directive-desc {
        display: block;
        font-size: 12px;
        color: #6B7280;
        margin-top: 2px;
        padding-left: 4px;
    }

    .action-grid-robots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 16px;
    }

    .btn-success-robots {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: #22C55E;
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
        text-decoration: none;
        width: 100%;
        justify-content: center;
    }

    .btn-success-robots:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(34, 197, 94, 0.35);
        color: #FFFFFF;
    }

    .btn-info-robots {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: #3B82F6;
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
        text-decoration: none;
        width: 100%;
        justify-content: center;
    }

    .btn-info-robots:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(59, 130, 246, 0.35);
        color: #FFFFFF;
    }

    .btn-warning-robots {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: #F59E0B;
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
        text-decoration: none;
        width: 100%;
        justify-content: center;
    }

    .btn-warning-robots:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(245, 158, 11, 0.35);
        color: #FFFFFF;
    }

    .file-location-box {
        background: #F8F9FA;
        border-radius: 8px;
        padding: 8px 14px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #1A1A2E;
        border: 1px solid #E8E8E8;
        word-break: break-all;
    }

    /* Alert */
    .alert-custom {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        animation: slideDown 0.4s ease;
    }

    .alert-custom .alert-close {
        margin-left: auto;
        background: none;
        border: none;
        color: inherit;
        opacity: 0.5;
        cursor: pointer;
        font-size: 18px;
        padding: 4px;
        transition: all 0.3s ease;
    }

    .alert-custom .alert-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

    .alert-success-custom {
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        color: #16A34A;
    }

    .alert-error-custom {
        background: #FEF2F2;
        border: 1px solid #FECACA;
        color: #DC2626;
    }

    .alert-info-custom {
        background: #EFF6FF;
        border: 1px solid #BFDBFE;
        color: #3B82F6;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 992px) {
        .action-grid-robots {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .action-grid-robots {
            grid-template-columns: 1fr;
        }

        .code-editor {
            font-size: 13px;
            padding: 12px 16px;
            min-height: 200px;
        }

        .tip-card .tip-body {
            padding: 12px 16px;
        }

        .btn-success-robots,
        .btn-info-robots,
        .btn-warning-robots {
            font-size: 13px;
            padding: 8px 16px;
        }
    }

    @media (max-width: 576px) {
        .code-editor {
            font-size: 12px;
            padding: 10px 12px;
            min-height: 150px;
        }

        .tip-card .tip-body .directive-item {
            font-size: 12px;
            padding: 6px 10px;
        }
    }
</style>

<!-- ============================================
   ROBOTS.TXT - REDSPIDER THEME
============================================ -->

<div class="robots-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
            </li>
            <li class="active">Robots.txt</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Robots.txt</h1>
            <p>
                <i class="bi bi-robot"></i> Manage your website's robots.txt file
            </p>
        </div>
        <span class="status-badge-file {{ $fileExists ? 'exists' : 'not-exists' }}">
            <i class="bi bi-{{ $fileExists ? 'check-circle' : 'x-circle' }}"></i>
            {{ $fileExists ? 'File Exists' : 'File Not Found' }}
        </span>
    </div>

    <!-- ===== ALERTS ===== -->
    @if (session('success'))
    <div class="alert-custom alert-success-custom">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ session('success') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    @if (session('error'))
    <div class="alert-custom alert-error-custom">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span>{{ session('error') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    <div class="row">
        <!-- ===== LEFT COLUMN ===== -->
        <div class="col-lg-8">

            <!-- Editor Card -->
            <div class="form-card">

                <div class="form-card-header" style="margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #E8E8E8;">
                    <h4 style="font-size: 16px; font-weight: 600; color: #1A1A2E; margin: 0; display: flex; align-items: center; gap: 8px;">
                        <i class="bi bi-robot" style="color: #C1121F;"></i>
                        Edit Robots.txt
                    </h4>
                </div>

                <!-- Info Alert -->
                <div class="alert-custom alert-info-custom" style="margin-bottom: 20px;">
                    <i class="bi bi-info-circle"></i>
                    <span>
                        <strong>What is robots.txt?</strong>
                        The robots.txt file tells search engine crawlers which pages to crawl and which to avoid.
                        This helps manage server load and prevents indexing of sensitive areas.
                    </span>
                </div>

                <form action="{{ route('admin.robots.update') }}" method="POST">
                    @csrf

                    <div class="form-group-custom" style="margin-bottom: 0;">
                        <label style="font-size: 13px; font-weight: 600; color: #1A1A2E; margin-bottom: 6px;">Robots.txt Content</label>
                        <textarea name="content"
                                  id="content"
                                  rows="20"
                                  class="code-editor @error('content') is-invalid @enderror"
                                  placeholder="Enter robots.txt content here...">{{ old('content', $content) }}</textarea>
                        @error('content')
                        <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Action Buttons -->
                    <div class="action-grid-robots">
                        <button type="submit" class="btn-success-robots">
                            <i class="bi bi-save"></i> Save Changes
                        </button>
                        <a href="{{ route('admin.robots.view') }}" target="_blank" class="btn-info-robots">
                            <i class="bi bi-eye"></i> View File
                        </a>
                        <form action="{{ route('admin.robots.reset') }}" method="POST" style="display: inline; width: 100%;"
                              onsubmit="return confirm('Are you sure you want to reset robots.txt to default? All custom changes will be lost.');">
                            @csrf
                            <button type="submit" class="btn-warning-robots">
                                <i class="bi bi-arrow-counterclockwise"></i> Reset to Default
                            </button>
                        </form>
                    </div>

                </form>
            </div>
        </div>

        <!-- ===== RIGHT COLUMN ===== -->
        <div class="col-lg-4">

            <!-- Tips Card -->
            <div class="tip-card">

                <div class="tip-header">
                    <i class="bi bi-lightbulb"></i>
                    <h6>Common Directives</h6>
                </div>

                <div class="tip-body">
                    <div class="directive-item">
                        <code>User-agent: *</code>
                        <span class="directive-desc">Applies to all crawlers</span>
                    </div>
                    <div class="directive-item">
                        <code>Allow: /</code>
                        <span class="directive-desc">Allow crawling of entire site</span>
                    </div>
                    <div class="directive-item">
                        <code>Disallow: /admin/</code>
                        <span class="directive-desc">Block admin directory</span>
                    </div>
                    <div class="directive-item">
                        <code>Crawl-delay: 1</code>
                        <span class="directive-desc">Delay between crawls (seconds)</span>
                    </div>
                    <div class="directive-item">
                        <code>Sitemap: {{ url('sitemap.xml') }}</code>
                        <span class="directive-desc">Link to your sitemap</span>
                    </div>
                </div>

                <hr style="margin: 0; border-color: #E8E8E8;">

                <div style="padding: 14px 20px;">
                    <h5 style="font-size: 13px; font-weight: 600; color: #1A1A2E; margin-bottom: 8px;">
                        <i class="bi bi-folder" style="color: #C1121F;"></i> File Location
                    </h5>
                    <div class="file-location-box">
                        {{ public_path('robots.txt') }}
                    </div>

                    <div style="margin-top: 12px;">
                        <h5 style="font-size: 13px; font-weight: 600; color: #1A1A2E; margin-bottom: 4px;">
                            <i class="bi bi-info-circle" style="color: #C1121F;"></i> Current Status
                        </h5>
                        <p style="margin: 0; font-size: 13px;">
                            @if($fileExists)
                            <span style="color: #22C55E;"><i class="bi bi-check-circle"></i> File exists</span>
                            @else
                            <span style="color: #DC2626;"><i class="bi bi-exclamation-circle"></i> File not found</span>
                            @endif
                        </p>
                        <span class="form-hint" style="font-size: 12px; color: #6B7280; margin-top: 4px;">
                            <i class="bi bi-info-circle"></i>
                            If file doesn't exist, clicking "Save Changes" will create it.
                        </span>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // AUTO-EXPAND TEXTAREA
        // ============================================
        const textarea = document.getElementById('content');
        if (textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';

            textarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = this.scrollHeight + 'px';
            });
        }

        // ============================================
        // CONFIRM RESET
        // ============================================
        document.querySelectorAll('.btn-warning-robots').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                const form = this.closest('form');
                if (form) {
                    if (!confirm('Are you sure you want to reset robots.txt to default? All custom changes will be lost.')) {
                        e.preventDefault();
                    }
                }
            });
        });

        console.log('✅ Robots.txt loaded successfully!');
    });
</script>

@endsection