@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Create Notification Rule</h1>
            <p class="text-muted mb-0">Configure automated alert notifications</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('dect.alerts.management') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Management
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">Rule Configuration</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('dect.alerts.store-rule') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Rule Name</label>
                                    <input type="text" class="form-control" id="name" name="name" required placeholder="High Call Volume Alert">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="alert_type" class="form-label">Alert Type</label>
                                    <select class="form-select" id="alert_type" name="alert_type" required>
                                        <option value="critical">Critical</option>
                                        <option value="warning" selected>Warning</option>
                                        <option value="info">Info</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3" placeholder="Describe when this alert should be triggered..."></textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="trigger_condition" class="form-label">Trigger Condition</label>
                                    <select class="form-select" id="trigger_condition" name="trigger_condition" required>
                                        <option value="high_call_volume">High Call Volume</option>
                                        <option value="low_battery">Low Battery Level</option>
                                        <option value="poor_signal">Poor Signal Strength</option>
                                        <option value="high_utilization">High System Utilization</option>
                                        <option value="missed_calls">High Missed Calls</option>
                                        <option value="call_quality">Poor Call Quality</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="threshold_value" class="form-label">Threshold Value</label>
                                    <input type="number" class="form-control" id="threshold_value" name="threshold_value" required min="0" max="100" step="0.1" placeholder="5.0">
                                    <small class="text-muted">Value depends on trigger condition</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Notification Channels</label>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="email" name="notification_channels[]" value="email" checked>
                                        <label class="form-check-label" for="email">Email</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="sms" name="notification_channels[]" value="sms">
                                        <label class="form-check-label" for="sms">SMS</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="webhook" name="notification_channels[]" value="webhook">
                                        <label class="form-check-label" for="webhook">Webhook</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="push" name="notification_channels[]" value="push">
                                        <label class="form-check-label" for="push">Push</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="escalation_enabled" name="escalation_enabled">
                                        <label class="form-check-label" for="escalation_enabled">Enable Escalation</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="escalation_delay_minutes" class="form-label">Escalation Delay (minutes)</label>
                                    <input type="number" class="form-control" id="escalation_delay_minutes" name="escalation_delay_minutes" value="30" min="1" max="1440">
                                </div>
                            </div>
                        </div>
                        
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Threshold Guide:</strong><br>
                            • High Call Volume: Number of active calls<br>
                            • Low Battery: Battery level percentage<br>
                            • Poor Signal: Signal strength percentage<br>
                            • High Utilization: System utilization percentage<br>
                            • Missed Calls: Number of missed calls today<br>
                            • Call Quality: Average quality score (0-5)
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Create Rule
                            </button>
                            <a href="{{ route('dect.alerts.management') }}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection