@extends('layouts.default')


@section('styles')
    <link rel="stylesheet" href="/assets/css/pages/community/security-alerts.css" />
@stop

@section('scripts')
    <script src="/assets/js/libraries/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="/assets/js/pages/community/security-alerts.js"></script>
@stop

@section('panel-heading')
    <strong>Security Alerts</strong>
@stop

@section('panel-presentation')
@stop

@section('content')
    <div class="row m-b-1">
        <div class="col-12">
            <button class="btn btn-sm ui-priority-secondary"
                    id="subscribe-to-alerts-btn"
                    {{ Auth::user() ? '' : 'disabled' }}
            >
                @if (!Auth::user())
                    Login to
                @endif
                Subscribe to Alerts
            </button>
            <button class="btn "
                    id="add-alert-btn"
                    {{ Auth::user() ? '' : 'disabled' }}
            >
                @if (!Auth::user())
                    Login to
                @endif
                Add Alert
            </button>
        </div>
    </div>
    <div class="row m-b-1">
        <div class="col-12 alert-container">
            @foreach($alerts as $alert)
                <div class="ui-widget m-b-2 alert"
                     data-security-alert-id="{{ $alert->security_alert_id }}"
                     data-alert-type="{{ $alert->alert_type }}"
                     data-alert-level="{{ $alert->alert_level }}"
                     data-alert-title="{{ $alert->title }}"
                     data-alert-content="{{ $alert->content }}"
                     data-token="{{ csrf_token() }}"
                >
                    <div class="ui-widget-header">
                        {{ $alert->title }}
                        <span class="alert-date">{{ $alert->created_at->format("D, M d, g:i A") }}</span>
                    </div>
                    <div class="row alert-type-level">
                        <div class="col-12">
                            <div class="alert-buttons ui-state-highlight">
                                <div class="alert-level">
                                    <label class="alert-desc">
                                        Alert Level:
                                    </label>
                                    <mark
                                            style="background-color: {{ SecurityAlertLevel::getBackgroundColor($alert->alert_level) }};
                                                    color: {{ SecurityAlertLevel::getTextColor($alert->alert_level) }};"
                                    >
                                        {{ SecurityAlertLevel::getName($alert->alert_level) }}
                                    </mark>
                                </div>
                                <div class="alert-type">
                                    <label class="alert-desc">
                                        Alert Type:
                                    </label>
                                    <mark
                                            style="background-color: {{ SecurityAlertType::getBackgroundColor($alert->alert_type) }};
                                                    color: {{ SecurityAlertType::getTextColor($alert->alert_type) }}"
                                    >
                                        {{ SecurityAlertType::getName($alert->alert_type) }}
                                    </mark>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if (Auth::user() && ($alert->user_id == Auth::user()->user_id || (Auth::user()->user_role & (UserRole::Adiministrator |
                    UserRole::SuperAdmin))))
                        <div class="row alert-type-level">
                            <div class="col-12">
                                <div class="alert-buttons ui-state-highlight">
                                    <button class="remove-alert-btn btn btn-sm" type="button">
                                        Remove Alert
                                    </button>
                                    <button class="edit-alert-btn btn btn-sm" type="button">
                                        Edit Alert
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="ui-widget-content">
                        {!! $alert->content !!}
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="hidden d-none">
        <div id="add-alert-dialog" title="Add Alert">
            <form id="security-alerts-form">
                <p class="form-group">
                    <label for="title" class="form-control-label">Title</label>
                    <input id="title" type="text" name="title" class="form-control" />
                </p>
                <p class="form-group">
                    <label for="alert-type" class="form-control-label">Alert Type</label>
                    <select id="alert-type" name="alert_type" class="form-control">
                        <option value="0" selected disabled>Select Alert Type</option>
                        <option value="1">Notice</option>
                        <option value="2">Warning</option>
                        <option value="4">Danger</option>
                    </select>
                </p>
                <p class="form-group">
                    <label for="alert-level" class="form-control-label">Alert Level</label>
                    <select id="alert-level" name="alert_level" class="form-control">
                        <option value="0" selected disabled>Select Alert Level</option>
                        <option value="1">Low</option>
                        <option value="2">Guarded</option>
                        <option value="3">Elevated</option>
                        <option value="4">High</option>
                        <option value="5">Severe</option>
                    </select>
                </p>
                <p class="form-group">
                    <label for="alert-content-input" class="form-control-label">Alert Text</label>
                    <textarea id="alert-content-input" name="content" class="form-control" required></textarea>
                </p>
                {{ csrf_field() }}
                <input type="hidden" id="security-alert-id" name="security_alert_id" value="0" />
            </form>
        </div>

        <div id="alert-notifications-dlg" title="Configure Alert Notifications">
            <form id="alert-notification-form">
                <p class="form-text">
                    Receive notifications by email or text, when a new security notification has been added to this page.
                </p>
                <div class="form-group">
                    <label class="form-text">
                        Send me notifications by:
                    </label>
                    <div class="form-check">
                        <label for="email" class="form-check-label">
                            <input id="email" type="checkbox" class="form-check-input" value="{{ AlertSubscriptionTransportType::Email }}"
                                   name="transport_type_id[1]" />
                            Email
                        </label>
                    </div>
                    <div class="form-check">
                        <label for="text-message" class="form-check-label">
                            <input id="text-message" type="checkbox" class="form-check-input" value="{{ AlertSubscriptionTransportType::TextMessage
                             }}" name="transport_type_id[2]" />
                            Text Message
                        </label>
                    </div>
                </div>

                <div id="cellular-info" class="form-control collapse">
                    <legend>Cellular Info</legend>
                    <p class="form-group">
                        <label for="carrier" class="form-control-label">Carrier</label>
                        <select id="carrier" name="mobile_carrier_id" class="form-control">
                            <option value="0" selected disabled>Select a carrier</option>
                            @foreach ($mobileCarriers as $carrier)
                                <option value="{{ $carrier->mobile_carrier_id }}">{{ $carrier->name }}</option>
                            @endforeach
                        </select>
                    </p>
                    <p class="form-group">
                        <label for="phone-number" class="form-control-label">Cell Number</label>
                        <input id="phone-number" name="phone_number" class="form-control" />
                    </p>
                </div>
                {{ csrf_field() }}
            </form>
        </div>

    </div>

@stop