@extends('layout.master')

<style>
    .form-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    .form-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #007bff;
    }

    input:checked + .slider:before {
        transform: translateX(26px);
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .alert-info, .alert-secondary {
        margin-top: 1rem;
    }
    /* Custom Styling for Form Elements */
    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-control {
        border-radius: 30px;
        padding: 12px 15px;
        font-size: 1rem;
        border: 1px solid #ced4da;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
    }

    .form-control::-webkit-input-placeholder {
        font-style: italic;
        color: #9e9e9e;
    }

    /* Custom switch button styling */
    .form-switch input:checked + .slider {
        background-color: #007bff;
    }

    .slider {
        border-radius: 24px;
    }

    .slider:before {
        background-color: #fff;
    }

    /* Input Range for Thresholds */
    .input-range {
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
        height: 10px;
        background: #ddd;
        border-radius: 5px;
        outline: none;
        transition: background 0.3s ease;
    }

    .input-range:hover {
        background: #007bff;
    }

    .input-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #007bff;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .input-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #007bff;
        cursor: pointer;
    }

    .alert-container {
        background: #f8f9fa;
        border-left: 5px solid #007bff;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 8px;
    }

    .alert-container h6 {
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .alert-container p {
        margin-bottom: 0;
    }

</style>

@section('content')
<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12">
            <h1 class="display-4">Configure Alerts & Notifications</h1>
            <p class="text-muted">Customize how you receive updates and stay informed about system activities.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-4">Notification Preferences</h5>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <div>
                                <h6>Email Notifications</h6>
                                <p class="text-muted mb-0">Receive notifications directly in your inbox for important updates.</p>
                            </div>
                            <label class="form-switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <div>
                                <h6>SMS Notifications</h6>
                                <p class="text-muted mb-0">Get instant alerts on your mobile for critical events.</p>
                            </div>
                            <label class="form-switch">
                                <input type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <div>
                                <h6>Push Notifications</h6>
                                <p class="text-muted mb-0">Enable real-time notifications on your device.</p>
                            </div>
                            <label class="form-switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <hr class="my-4">
                        <h5 class="card-title mb-4">Customizable Alert Thresholds</h5>
                        <div class="form-group">
                            <label for="loadLimit">Exceeding Load Limit Alert</label>
                            <input type="number" class="form-control" id="loadLimit" placeholder="Enter Load Limit" min="0" value="1000">
                            <small class="form-text text-muted">Set the load limit threshold (in tons). Alerts will trigger if the crane approaches or exceeds this limit.</small>
                        </div>
                        <div class="form-group">
                            <label for="oilLevel">Oil/Lubricant Level Alert</label>
                            <input type="number" class="form-control" id="oilLevel" placeholder="Enter Oil Level Threshold" min="0" value="20">
                            <small class="form-text text-muted">Set the minimum oil or lubricant level (in liters). Alerts will trigger if the level falls below this threshold.</small>
                        </div>
                        <div class="form-group">
                            <label for="errorAlert">Operational Error Alert</label>
                            <select class="form-control" id="errorAlert">
                                <option value="boomRetract">Boom Retraction Malfunction</option>
                                <option value="hoistError">Hoist Malfunction</option>
                                <option value="hydraulicError">Hydraulic System Failure</option>
                            </select>
                            <small class="form-text text-muted">Choose the operational errors you want to receive alerts for.</small>
                        </div>
    
                        <!-- Custom Threshold Slider (Optional Interactive Range) -->
                        <div class="form-group">
                            <label for="thresholdSlider">Threshold Range (0 - 2000 tons)</label>
                            <input type="range" class="input-range" id="thresholdSlider" min="0" max="2000" value="1000">
                            <p class="mt-2">Set your desired threshold: <span id="sliderValue">1000</span> tons</p>
                        </div>

                    <button type="submit" class="btn btn-primary">Save Preferences</button>
                </div>
            </div>
        </div>
    </div>
  

    <div class="row mt-3">
        <div class="col-lg-12">
            <h5 class="mb-4">Why Configure Alerts?</h5>
            <div class="alert alert-info" role="alert">
                <strong>Stay Informed:</strong> Customize alerts to ensure you never miss critical updates about your system.
            </div>
            <div class="alert alert-secondary" role="alert">
                <strong>Pro Tip:</strong> Enable push notifications for real-time updates without checking your email.
            </div>
        </div>
    </div>
</div>
@endsection