@extends('layouts.app')

@section('content')
    <!-- Bootstrap Links -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --primary-dark: #3f37c9;
            --secondary: #ff6b6b;
            --text-light: #f8f9fa;
            --text-dark: #212529;
            --border-radius: 8px;
        }

        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .monitor-container {
            height: calc(100vh - 1rem);
            padding: 0.5rem;
            background-color: #f8f9fa;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .custom-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.1);
            padding: 1rem;
            /* max-width: 1000px; */
            margin: 0 auto;
            border-top: 3px solid var(--primary);
            height: 100%;
            /* max-height: calc(100vh - 1rem); */
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--primary) #f1f1f1;
        }

        .custom-card::-webkit-scrollbar {
            width: 5px;
        }

        .custom-card::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .custom-card::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 5px;
        }

        .card-header-custom {
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding-bottom: 0.75rem;
        }

        .header-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            margin-right: 1rem;
        }

        .header-text {
            flex: 1;
        }

        .form-title {
            color: var(--primary);
            font-weight: 700;
            margin-bottom: 0;
            font-size: 1.3rem;
        }

        .form-subtitle {
            color: #6c757d;
            font-size: 0.8rem;
            margin: 0;
        }

        .form-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.3rem;
            font-size: 0.8rem;
        }

        .form-control,
        .form-select {
            border-radius: 6px;
            padding: 0.5rem 1rem;
            border: 1px solid #e9ecef;
            transition: all 0.3s ease;
            background-color: #f8f9fa;
            font-size: 0.85rem;
            height: auto;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
            background-color: white;
        }

        .monitoring-option {
            border: 1px solid #e9ecef;
            border-radius: var(--border-radius);
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
            cursor: pointer;
            background-color: #f8f9fa;
            height: 100%;
        }

        .monitoring-option:hover {
            border-color: var(--primary-light);
            background-color: rgba(67, 97, 238, 0.05);
        }

        .monitoring-option.active {
            border-color: var(--primary);
            background-color: rgba(67, 97, 238, 0.1);
        }

        .monitoring-option .form-check-label {
            display: flex;
            align-items: center;
            font-size: 0.8rem;
        }

        .monitoring-option i {
            font-size: 1rem;
            margin-right: 0.5rem;
            color: var(--primary);
        }

        .monitoring-option.active i {
            color: var(--primary-dark);
        }

        .submit-btn {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border: none;
            padding: 0.5rem 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            border-radius: var(--border-radius);
            color: white;
            box-shadow: 0 3px 8px rgba(67, 97, 238, 0.2);
            font-size: 0.85rem;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(67, 97, 238, 0.3);
        }

        .input-group {
            position: relative;
        }

        .input-icon {
            position: absolute;
            right: 0.75rem;
            top: 55%;
            transform: translateY(-50%);
            color: #6c757d;
            z-index: 10;
            font-size: 0.8rem;
        }

        .form-control {
            padding-right: 2rem;
        }

        .form-check-label {
            font-weight: 500;
            font-size: 0.85rem;
        }

        .form-check-input {
            margin-top: 0.15rem;
        }

        .form-switch .form-check-input {
            height: 1rem;
            width: 2rem;
        }

        .form-switch .form-check-input:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .alert {
            border-radius: var(--border-radius);
            border-left: 3px solid;
            padding: 0.5rem 1rem;
            margin-bottom: 0.75rem;
        }

        .alert-success {
            border-left-color: #28a745;
        }

        .alert-danger {
            border-left-color: #dc3545;
        }

        .section-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--primary-dark);
        }

        .form-section {
            margin-bottom: 0.75rem;
        }

        .monitoring-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }

        .option-name {
            font-weight: 500;
        }

        /* Compact spacing adjustments */
        .mb-2 {
            margin-bottom: 0.5rem !important;
        }

        .mb-3 {
            margin-bottom: 0.75rem !important;
        }

        .mb-4 {
            margin-bottom: 1rem !important;
        }

        .g-2 {
            --bs-gutter-x: 0.5rem;
            --bs-gutter-y: 0.5rem;
        }

        /* Error indicator for form fields */
        .is-invalid {
            border-color: #dc3545 !important;
        }

        .invalid-feedback {
            display: block;
            color: #dc3545;
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }
    </style>

    <div class="monitor-container">
        <div class="container-fluid">
            <div class="custom-card">
                <div class="card-header-custom">
                    <div class="header-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="header-text">
                        <h2 class="form-title">Add New Monitor</h2>
                        <p class="form-subtitle">Create a new monitoring configuration</p>
                    </div>
                </div>

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

                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
                        <i class="fas fa-exclamation-circle me-1"></i>
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

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

                <form action="{{ route('monitors.store') }}" method="POST" id="monitorForm" novalidate>
                    @csrf

                    <div class="row g-2">
                        <div class="col-md-6 form-section">
                            <label for="name" class="form-label">Monitor Name</label>
                            <div class="input-group mb-2">
                                <input type="text" name="name" id="name"
                                    class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}"
                                    required>
                                <i class="fas fa-tag input-icon"></i>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6 form-section">
                            <label for="monitoring_frequency" class="form-label">Monitoring Frequency</label>
                            <div class="input-group mb-2">
                                <select name="monitoring_frequency" id="monitoring_frequency"
                                    class="form-select @error('monitoring_frequency') is-invalid @enderror" required>
                                    <option value="5" {{ old('monitoring_frequency') == '5' ? 'selected' : '' }}>Every 5
                                        minutes</option>
                                    <option value="10" {{ old('monitoring_frequency') == '10' ? 'selected' : '' }}>Every 10
                                        minutes</option>
                                    <option value="30" {{ old('monitoring_frequency') == '30' ? 'selected' : '' }}>Every 30
                                        minutes</option>
                                    <option value="60" {{ old('monitoring_frequency') == '60' ? 'selected' : '' }}>Every 1
                                        hour</option>
                                </select>
                                <i class="fas fa-clock input-icon"></i>
                                @error('monitoring_frequency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-md-6 form-section url-field">
                            <label for="url" class="form-label">Website URL</label>
                            <div class="input-group mb-2">
                                <input type="url" name="url" id="url"
                                    class="form-control @error('url') is-invalid @enderror"
                                    placeholder="https://example.com" value="{{ old('url') }}">
                                <i class="fas fa-link input-icon"></i>
                                @error('url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6 form-section domain-field" style="display: none;">
                            <label for="domain_to_monitor" class="form-label">Domain Name</label>
                            <div class="input-group mb-2">
                                <input type="text" name="domain_to_monitor" id="domain_to_monitor"
                                    class="form-control @error('domain_to_monitor') is-invalid @enderror"
                                    placeholder="example.com" value="{{ old('domain_to_monitor') }}">
                                <i class="fas fa-globe input-icon"></i>
                                @error('domain_to_monitor')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="section-title">What would you like to monitor?</div>
                        <div class="monitoring-grid">
                            <div
                                class="monitoring-option {{ old('monitoring_type') == 'full_page' || !old('monitoring_type') ? 'active' : '' }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="monitoring_type" id="full_page"
                                        value="full_page" {{ old('monitoring_type', 'full_page') == 'full_page' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="full_page">
                                        <i class="fas fa-globe"></i>
                                        <span class="option-name">Full Website</span>
                                    </label>
                                </div>
                            </div>
                            <div class="monitoring-option {{ old('monitoring_type') == 'keyword' ? 'active' : '' }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="monitoring_type"
                                        id="keyword_monitoring" value="keyword" {{ old('monitoring_type') == 'keyword' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="keyword_monitoring">
                                        <i class="fas fa-key"></i>
                                        <span class="option-name">Keywords</span>
                                    </label>
                                </div>
                            </div>
                            <div class="monitoring-option {{ old('monitoring_type') == 'element' ? 'active' : '' }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="monitoring_type"
                                        id="element_monitoring" value="element" {{ old('monitoring_type') == 'element' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="element_monitoring">
                                        <i class="fas fa-code"></i>
                                        <span class="option-name">Element</span>
                                    </label>
                                </div>
                            </div>
                            <div class="monitoring-option {{ old('monitoring_type') == 'ssl' ? 'active' : '' }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="monitoring_type" id="ssl_monitoring"
                                        value="ssl" {{ old('monitoring_type') == 'ssl' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="ssl_monitoring">
                                        <i class="fas fa-lock"></i>
                                        <span class="option-name">SSL Certificate</span>
                                    </label>
                                </div>
                            </div>
                            <div class="monitoring-option {{ old('monitoring_type') == 'server' ? 'active' : '' }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="monitoring_type"
                                        id="server_monitoring" value="server" {{ old('monitoring_type') == 'server' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="server_monitoring">
                                        <i class="fas fa-server"></i>
                                        <span class="option-name">Server Status</span>
                                    </label>
                                </div>
                            </div>
                            <div class="monitoring-option {{ old('monitoring_type') == 'email_health' ? 'active' : '' }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="monitoring_type" id="email_health"
                                        value="email_health" {{ old('monitoring_type') == 'email_health' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="email_health">
                                        <i class="fas fa-envelope"></i>
                                        <span class="option-name">Email Health</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        @error('monitoring_type')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-section keywords-section {{ old('monitoring_type') == 'keyword' ? '' : 'd-none' }}"
                        id="keywords_section">
                        <label for="keywords" class="form-label">Keywords (comma-separated)</label>
                        <div class="input-group mb-2">
                            <input type="text" name="keywords" id="keywords"
                                class="form-control @error('keywords') is-invalid @enderror"
                                placeholder="word1, word2, phrase, etc" value="{{ old('keywords') }}">
                            <i class="fas fa-search input-icon"></i>
                            @error('keywords')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="form-section xpath-section {{ old('monitoring_type') == 'element' ? '' : 'd-none' }}"
                        id="xpath_section">
                        <label for="xpath" class="form-label">Element Selector</label>
                        <div class="input-group mb-2">
                            <input type="text" name="xpath" id="xpath"
                                class="form-control @error('xpath') is-invalid @enderror"
                                placeholder="div.container, #header, .price" value="{{ old('xpath') }}">
                            <i class="fas fa-crosshairs input-icon"></i>
                            @error('xpath')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="form-check form-switch">
                            <div class="d-flex align-items-center">
                                <input class="form-check-input me-2" type="checkbox" name="check_broken_links"
                                    id="check_broken_links" value="1" {{ old('check_broken_links') ? 'checked' : '' }}>
                                <label class="form-check-label" for="check_broken_links">
                                    <i class="fas fa-unlink me-1 text-primary"></i>Enable Broken Link Checking
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-3">
                        <button type="submit" class="btn submit-btn" id="submitButton">
                            <i class="fas fa-plus-circle me-1"></i>Create Monitor
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
(function(window, document, $) {
    var $j = jQuery.noConflict();

    document.addEventListener('DOMContentLoaded', function () {
        try {
            if (window.monitorFormInitialized) return;
            window.monitorFormInitialized = true;

            if (
                !$j('.monitoring-option').length ||
                !$j("input[name='monitoring_type']").length ||
                !$j('#keywords_section').length ||
                !$j('#xpath_section').length ||
                !$j('.url-field').length ||
                !$j('.domain-field').length ||
                !$j('#url').length ||
                !$j('#domain_to_monitor').length ||
                !$j('#monitorForm').length
            ) {
                console.error("Missing required DOM elements for monitor form management.");
                return;
            }

            initializeForm();

            function initializeForm() {
                try {
                    safeToggleSections();
                    safeUpdateActiveState();
                } catch (e) {
                    console.error("Error initializing form:", e);
                }
            }

            function safeUpdateActiveState() {
                try {
                    $j('.monitoring-option').removeClass('active');
                    $j('input[name="monitoring_type"]:checked').closest('.monitoring-option').addClass('active');
                } catch (e) {
                    console.error("Error updating active state:", e);
                }
            }

            function safeToggleSections() {
                try {
                    const selectedValue = $j('input[name="monitoring_type"]:checked').val();

                    // Reset validation styles
                    $j('#url').removeClass('is-invalid');
                    $j('#domain_to_monitor').removeClass('is-invalid');

                    // Reset all fields
                    $j('#keywords_section').addClass('d-none');
                    $j('#xpath_section').addClass('d-none');
                    $j('.url-field').show();
                    $j('.domain-field').hide();

                    // Show/hide appropriate fields based on monitoring type
                    if (selectedValue === 'keyword') {
                        $j('#keywords_section').removeClass('d-none');
                        $j('#url').attr('required', 'required');
                        $j('#domain_to_monitor').removeAttr('required');
                    } else if (selectedValue === 'element') {
                        $j('#xpath_section').removeClass('d-none');
                        $j('#url').attr('required', 'required');
                        $j('#domain_to_monitor').removeAttr('required');
                    } else if (selectedValue === 'email_health') {
                        $j('.url-field').hide();
                        $j('.domain-field').show();
                        $j('#url').removeAttr('required');
                        $j('#domain_to_monitor').attr('required', 'required');
                        // Clear URL value when switching to email health
                        $j('#url').val('');
                    } else {
                        // For full_page, server, ssl
                        $j('#url').attr('required', 'required');
                        $j('#domain_to_monitor').removeAttr('required');
                        // Clear domain value when not needed
                        $j('#domain_to_monitor').val('');
                    }

                    safeUpdateActiveState();
                } catch (e) {
                    console.error("Error toggling sections:", e);
                }
            }

            // Event Listeners
            $j('.monitoring-option').on('click', function () {
                try {
                    const input = $j(this).find('input[type="radio"]');
                    input.prop('checked', true);
                    safeUpdateActiveState();
                    safeToggleSections();
                } catch (e) {
                    console.error("Error handling monitoring option click:", e);
                }
            });

            $j("input[name='monitoring_type']").on('change', function () {
                try {
                    safeToggleSections();
                } catch (e) {
                    console.error("Error handling monitoring input change:", e);
                }
            });

            $j('.form-control, .form-select').on('focus', function () {
                try {
                    $j(this).parent().find('.input-icon').addClass('text-primary');
                } catch (e) {
                    console.error("Error handling input focus:", e);
                }
            }).on('blur', function () {
                try {
                    $j(this).parent().find('.input-icon').removeClass('text-primary');
                } catch (e) {
                    console.error("Error handling input blur:", e);
                }
            });

            $j('#monitorForm').on('submit', function (e) {
                try {
                    let isValid = true;
                    const selectedType = $j('input[name="monitoring_type"]:checked').val();

                    // Clear previous validation errors
                    $j('.is-invalid').removeClass('is-invalid');

                    // Validate required fields
                    if (!$j('#name').val()) {
                        $j('#name').addClass('is-invalid');
                        isValid = false;
                    }

                    // URL validation for all types except email_health
                    if (selectedType !== 'email_health') {
                        if (!$j('#url').val()) {
                            $j('#url').addClass('is-invalid');
                            isValid = false;
                        } else {
                            // Basic URL validation
                            try {
                                new URL($j('#url').val());
                            } catch (_) {
                                $j('#url').addClass('is-invalid');
                                isValid = false;
                            }
                        }

                        // Type-specific validation
                        if (selectedType === 'keyword' && !$j('#keywords').val()) {
                            $j('#keywords').addClass('is-invalid');
                            isValid = false;
                        }

                        if (selectedType === 'element' && !$j('#xpath').val()) {
                            $j('#xpath').addClass('is-invalid');
                            isValid = false;
                        }
                    } else {
                        // Validate domain for email_health
                        if (!$j('#domain_to_monitor').val()) {
                            $j('#domain_to_monitor').addClass('is-invalid');
                            isValid = false;
                        } else {
                            // Basic domain validation
                            const domainRegex = /^(?!https?:\/\/)([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/i;
                            if (!domainRegex.test($j('#domain_to_monitor').val())) {
                                $j('#domain_to_monitor').addClass('is-invalid');
                                isValid = false;
                            }
                        }
                    }

                    if (!isValid) {
                        e.preventDefault();
                        // Show validation message
                        $j('html, body').animate({
                            scrollTop: $j('.is-invalid:first').offset().top - 100
                        }, 200);
                    }
                } catch (e) {
                    console.error("Error handling form submission:", e);
                }
            });

            $j('#submitButton').on('click', function () {
                try {
                    console.log('Form submitted with monitoring type:', $j('input[name="monitoring_type"]:checked').val());
                    console.log('URL value:', $j('#url').val());
                    console.log('Domain value:', $j('#domain_to_monitor').val());
                } catch (e) {
                    console.error("Error handling submit button click:", e);
                }
            });

            // Initial load with fallback retry
            setTimeout(function () {
                try {
                    if ($j('.monitoring-option').length > 0) {
                        initializeForm();
                    } else {
                        console.warn("No .monitoring-option elements found yet, retrying...");
                        setTimeout(() => initializeForm(), 500);
                    }
                } catch (e) {
                    console.error("Error during initial form load:", e);
                }
            }, 100);

        } catch (e) {
            console.error("Top-level monitor form script error:", e);
        }
    });

})(window, document, jQuery);
    </script>
@endsection