@extends('layouts.app')

@section('page_title', 'Add Notification')

@section('content')
<div class="card-header border-0 bg-transparent py-2">
    <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add Notification</h5>
</div>
   
       
        <div class="row justify-content-center">
             
                    <div class="card-body px-3 pb-4">
                        <form id="addNotificationForm">
                            <div class="row">
                                <div class="col-12 mb-4">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control w-100" id="subject" placeholder="Enter notification subject" required>
                                </div>
                                <div class="col-12 mb-4">
                                    <label for="content" class="form-label">Content</label>
                                    <textarea class="form-control w-100" id="content" rows="3" placeholder="Enter notification content" required></textarea>
                                </div>
                                <div class="col-12 mb-4">
                                    <label for="isScheduled" class="form-label">Is Scheduled</label>
                                    <select class="form-select w-100" id="isScheduled" required>
                                        <option value="" disabled selected>Select option</option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end mt-4">
                                <button type="button" class="btn btn-outline-secondary me-2 px-4" style="margin-right:5px">Cancel</button>
                                <button type="submit" class="btn btn-primary px-4">Add Notification</button>
                            </div>
                        </form>
                    </div>
               
           
        </div>
  

    <style>
        .card {
            border-radius: 10px;
            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            border: 1px solid #dee2e6;
        }
        .card-header {
            background-color: transparent;
        }
        .form-label {
            font-weight: 500;
            font-size: 0.95rem;
            color: #343a40;
        }
        .form-control,
        .form-select {
            font-size: 0.9rem;
            border-radius: 5px;
            border: 1px solid #ced4da;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .form-control:focus,
        .form-select:focus {
            border-color: #E74610;
            box-shadow: 0 0 0 0.2rem rgba(231, 70, 16, 0.25);
        }
        textarea.form-control {
            resize: vertical;
            min-height: 60px;
        }
        .btn-primary {
            background-color: #E74610;
            border-color: #E74610;
            font-size: 0.9rem;
            transition: background-color 0.2s;
        }
        .btn-primary:hover {
            background-color: #c63d0e;
            border-color: #c63d0e;
        }
        .btn-outline-secondary {
            font-size: 0.9rem;
            border-color: #6c757d;
            transition: background-color 0.2s;
        }
        .btn-outline-secondary:hover {
            background-color: #f8f9fa;
            border-color: #6c757d;
        }
        .container {
            max-width: 1400px;
        }
    </style>

    <script>
        document.getElementById('addNotificationForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const subject = document.getElementById('subject').value;
            const content = document.getElementById('content').value;
            const isScheduled = document.getElementById('isScheduled').value;

            if (!subject || !content || !isScheduled) {
                alert('Please fill out all fields.');
                return;
            }

            // Simulate adding notification (frontend-only)
            const newNotification = {
                id: Date.now(),
                subject: subject,
                content: content,
                isScheduled: isScheduled === 'Yes' ? 'Scheduled' : 'Not Scheduled',
                schedule: isScheduled === 'Yes' ? new Date().toISOString().slice(0, 16).replace('T', ' ') : '',
                expiration: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16).replace('T', ' ')
            };

            // Store in sessionStorage
            let notifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
            notifications.push(newNotification);
            sessionStorage.setItem('notifications', JSON.stringify(notifications));

            alert('Notification added successfully!');
            window.location.href = '/notification';
        });

        // Cancel button click handler
        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
            window.location.href = '/notification';
        });
    </script>
@endsection