000

@extends('layouts.app')

@section('content')
<div class="D py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">

<button class="btn shadow-sm" style="background-color: #667E06; color: white;" data-bs-toggle="modal" data-bs-target="#notificationModal">
            <i class="fas fa-plus-circle me-2"></i> Create Notification
        </button>
    </div>

<div class="modal fade" id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" style="min-height: 90vh;">
            <div class="modal-content border-0 shadow">
                <div class="modal-header text-white p-4" style="background: linear-gradient(135deg, #667E06, #4d5e05);">
                    <h5 class="modal-title fs-4" id="notificationModalLabel">
                        <span class="me-2"><i class="fas fa-bell"></i></span>
                        <span class="blink-text">Create Notification</span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

<form method="POST" action="{{ route('notifications.store') }}" class="needs-validation" novalidate>
                    @csrf
                    <div class="modal-body p-4" style="min-height: 60vh; max-height: 70vh; overflow-y: auto;">
                        <div class="row mb-4">
                            <div class="col-md-4 mb-3 mb-md-0">
                                <label class="form-label fw-bold btn-add">
                                    <i class="fas fa-user me-2"></i>User Name
                                </label>
                                <select name="user_id" id="userSelect" class="form-select shadow-sm" required>
                                    <option value="">Select User</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}"
                                                data-block="{{ $user->block_name }}"
                                                data-plot="{{ $user->plot_name }}"
                                                data-role="{{ $user->role }}">
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a user</div>
                            </div>

<div class="col-md-4 mb-3 mb-md-0">
                                <label class="form-label fw-bold text-secondary">
                                    <i class="fas fa-building me-2"></i>Block
                                </label>
                                <select name="block" id="blockSelect" class="form-select shadow-sm" required>
                                    <option value="">Select Block</option>
                                    @foreach($blocks as $block)
                                        <option value="{{ $block }}">{{ $block }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a block</div>
                            </div>

<div class="col-md-4">
                                <label class="form-label fw-bold text-secondary">
                                    <i class="fas fa-map-marker-alt me-2"></i>Plot
                                </label>
                                <select name="plot" id="plotSelect" class="form-select shadow-sm" required>
                                    <option value="">Select Plot</option>
                                </select>
                                <div class="invalid-feedback">Please select a plot</div>
                            </div>
                        </div>

<div class="row mb-4">
                            <div class="col-md-4 mb-3 mb-md-0">
                                <label class="form-label fw-bold text-secondary">
                                    <i class="fas fa-flag me-2"></i>Priority
                                </label>
                                <select name="priority" class="form-select shadow-sm" required>
                                    <option value="">Select Priority</option>
                                    <option value="Low" class="text-success">Low</option>
                                    <option value="Medium" style="color: #667E06;">Medium</option>
                                    <option value="High" class="text-warning">High</option>
                                    <option value="Critical" class="text-danger">Critical</option>
                                </select>
                                <div class="invalid-feedback">Please select a priority level</div>
                            </div>

<div class="col-md-4 mb-3 mb-md-0">
                                <label class="form-label fw-bold text-secondary">
                                    <i class="fas fa-tag me-2"></i>Notification Type
                                </label>
                                <select name="notification_type" class="form-select shadow-sm" required>
                                    <option value="">Select Type</option>
                                    <option value="Maintenance">Maintenance</option>
                                    <option value="Inspection">Inspection</option>
                                    <option value="Alert">Alert</option>
                                </select>
                                <div class="invalid-feedback">Please select a notification type</div>
                            </div>

<div class="mb-3">
                            <label class="form-label fw-bold text-secondary">
                                <i class="fas fa-comment-alt me-2"></i>Notification Message
                            </label>
                            <textarea name="notification" class="form-control shadow-sm" rows="6"
                                      placeholder="Enter notification details..." required></textarea>
                            <div class="invalid-feedback">Please enter a notification message</div>
                        </div>
                    </div>

<div class="modal-footer bg-light p-3 position-sticky bottom-0">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-2"></i>Cancel
                        </button>
                        <button type="submit" class="btn text-white shadow-sm" style="background-color: #667E06;">
                            <i class="fas fa-check me-2"></i>Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

<form method="GET" action="{{ route('notifications.create') }}" class="row g-3 mb-4">
            <div class="col-md-3">
                <label class="form-label fw-bold">Start Date</label>
                <input type="date" name="start_date" class="form-control shadow-sm" value="{{ request('start_date') }}">
            </div>

<div class="col-md-3 align-self-end">
                <button type="submit" class="btn text-white shadow-sm" style="background-color: #667E06;">
                    <i class="fas fa-filter me-2"></i>Filter
                </button>
            </div>
        </form>

<div class="table-responsive shadow-sm">
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Sr No.</th>
                        <th>Notification</th>
                        <th>Notification Type</th>
                        <th>User Name</th>
                        <th>Block</th>
                        <th>Plot</th>
                        <th>Date/Time</th>
                
                    </tr>
                </thead>
                <tbody>
                @forelse($currentTasks as $index => $task)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $task->message }}</td>
                    <td>{{ $task->notification_type }}</td>
                    <td>{{ $task->name }}</td>
                    <td>{{ $task->block }}</td>
                    <td>{{ $task->plot }}</td>
                    <td>{{ \Carbon\Carbon::parse($task->created_at)->format('d-m-Y h:i A') }}</td> {{-- Adjust field if different --}}
                   
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted">No current tasks available</td>
                </tr>
                @endforelse
                </tbody>

</table>
            <div class="mt-4 d-flex justify-content-center">
                {{ $currentTasks->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

@keyframes blinker {
        50% { opacity: 0.5; }
    }

.task-card, .day-card .card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

.task-card:hover, .day-card .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }

.notification-item {
        transition: background-color 0.2s ease;
    }

.notification-item:hover {
        background-color: rgba(102, 126, 6, 0.05);
    }

.form-select, .form-control {
        border-radius: 0.5rem;
        border: 1px solid #e0e0e0;
        padding: 0.6rem 1rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

.form-select:focus, .form-control:focus {
        border-color: #667E06;
        box-shadow: 0 0 0 0.25rem rgba(102, 126, 6, 0.15);
    }

@media (max-width: 768px) {
        .week-grid {
            flex-direction: row;
            overflow-x: auto;
            padding-bottom: 1rem;
        }

.day-card {
            min-width: 120px;
        }
    }

.current-day-card {
        animation: blinker 1s linear infinite alternate;
    }

.current-day-user {
        animation: blinker 1.2s ease-in-out infinite alternate;
        font-weight: bold;
        color: #007bff; /* Example blinking color */
    }
</style>

const userSelect = document.getElementById('userSelect');
    const blockSelect = document.getElementById('blockSelect');
    const plotSelect = document.getElementById('plotSelect');
    const roleDisplay = document.getElementById('roleDisplay');
    const roleInput = document.getElementById('roleInput');

userSelect.addEventListener('change', function () {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            blockSelect.value = selectedOption.dataset.block;
            plotSelect.innerHTML = `<option value="${selectedOption.dataset.plot}">${selectedOption.dataset.plot}</option>`;
            roleDisplay.value = selectedOption.dataset.role;
            roleInput.value = selectedOption.dataset.role;
        } else {
            blockSelect.value = '';
            plotSelect.innerHTML = '<option value="">Select Plot</option>';
            roleDisplay.value = '';
            roleInput.value = '';
        }
    });

blockSelect.addEventListener('change', function () {
        const block = this.value;
        const selectedUser = userSelect.options[userSelect.selectedIndex];
        if (selectedUser.value) return;

if (block) {
            fetch(`/notifications/get-plots/${block}`)
                .then(response => response.json())
                .then(plots => {
                    plotSelect.innerHTML = '<option value="">Select Plot</option>';
                    plots.forEach(plot => {
                        plotSelect.innerHTML += `<option value="${plot}">${plot}</option>`;
                    });
                });
        } else {
            plotSelect.innerHTML = '<option value="">Select Plot</option>';
        }
    });

const notificationItems = document.querySelectorAll('.notification-item');
    notificationItems.forEach((item, index) => {
        item.style.animationDelay = `${index * 0.1}s`;
    });
});
</script>
@endsection