@extends('admin.layout')

@section('content')
<style>
    .followup-form {
        max-width: 100%;
        margin: 0 auto;
        background-color: #f8f9fa;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .followup-form h2 {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: #343a40;
        text-align: center;
    }

    .followup-form label {
        font-weight: 600;
    }

    .followup-form button {
        width: 20%;
        font-weight: bold;
        
    }
</style>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4" role="alert" style="z-index: 9999; min-width: 300px;">
    <strong>Success!</strong> {{ 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 position-fixed top-0 end-0 m-4" role="alert" style="z-index: 9999; min-width: 300px;">
    <strong>Error!</strong> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<div class="d-flex justify-content-end mb-3">
    <a href="{{ route('admin.newsletter_history') }}" class="btn btn-primary">View History</a>
</div>




<form method="POST" action="{{ route('admin.newsletter_post') }}" class="followup-form mt-5" novalidate>
    @csrf

    <h2>Newsletter</h2>

    <div class="mb-3">
        <label for="follow_date" class="form-label">Date</label>
        <input
            type="date"
            class="form-control @error('date') is-invalid @enderror"
            id="follow_date"
            name="date"
            value="{{ old('date') }}"
            required
            style="width:150px;"
        >
        <div class="invalid-feedback d-none" id="date-error-js"></div>
    </div>

    <div class="mb-3">
        <label for="note" class="form-label">Message</label>
        <textarea class="form-control" id="note" name="message" rows="4" placeholder="Enter your message">{{ old('message') }}</textarea>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>


<!-- Script for CKEditor -->
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>


<script>
    let ckeditorInstance;

    ClassicEditor
        .create(document.querySelector('#note'))
        .then(editor => {
            ckeditorInstance = editor;
        })
        .catch(error => {
            console.error(error);
        });

    
    document.querySelector('.followup-form').addEventListener('submit', function (e) {
        const messageContent = ckeditorInstance.getData().trim();

        if (messageContent === '') {
            e.preventDefault(); 
            alert("Please enter a message.");
        }
    });
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {
    const dateInput = document.getElementById('follow_date');
    const dateErrorDiv = document.getElementById('date-error-js');
    const form = document.getElementById('newsletter-form');

    let dateIsValid = false;

    dateInput.addEventListener('change', function () {
        const selectedDate = this.value;
        if (!selectedDate) {
            clearValidation();
            dateIsValid = false;
            return;
        }

        fetch('{{ route("newsletter_checkDate") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ date: selectedDate })
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not OK');
            return response.json();
        })
       
        .then(data => {
         if (data.exists) {
        dateInput.value = data.next_available;
        alert(data.message); // optional: show popup
        clearValidation(); // ❗ remove red border & message
        dateIsValid = true;
        } else {
        clearValidation();
        dateIsValid = true;
        }
       })

        .catch(err => {
            console.error('Fetch error:', err);
            clearValidation();
            dateIsValid = false;
        });
    });

    function showValidationError(message) {
        dateInput.classList.add('is-invalid');
        dateErrorDiv.textContent = message;
        dateErrorDiv.style.display = 'block';
    }

    function clearValidation() {
        dateInput.classList.remove('is-invalid');
        dateErrorDiv.textContent = '';
        dateErrorDiv.style.display = 'none';
    }

    form.addEventListener('submit', function (e) {
        if (!dateIsValid) {
            e.preventDefault();
            alert('Please select a valid date.');
            dateInput.focus();
        }
    });
});
</script>
@endsection