@extends('layout.master')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

<style>
.card-header {
    font-weight: bold;
    font-size: 1.1rem;
}
.modal-header {
    border-bottom: 2px solid #ddd;
}
.modal-content {
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}
.modal-footer button {
    border-radius: 20px;
}
</style>

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Critical Failures</a></li>
      <li class="breadcrumb-item active" aria-current="page">Admin Panel</li>
    </ol>
</nav>

<div class="container my-3">
    <div class="card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Manage Notifications</span>
            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addNotificationModal">
                <i class="bi bi-plus-circle"></i> Add New Notification
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="dataTableExample" class="table table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Crane ID</th>
                            <th>Failure Type</th>
                            <th>Severity</th>
                            <th>Escalation Time</th>
                            <th>Notify Groups</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($notifications as $index => $notification)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>
                                {{ $notification->crane ? $notification->crane->company_name . $notification->crane->serial_no : 'N/A' }}  </td>                            
                            <td>{{ $notification->failure_type }}</td>
                            <td>
                                <span class="badge bg-{{ $notification->severity_level == 'P1' ? 'danger' : ($notification->severity_level == 'P2' ? 'warning' : ($notification->severity_level == 'P3' ? 'success' : 'secondary')) }}">
                                    {{ ucfirst($notification->severity_level) }}
                                </span>
                            </td>                            
                            <td>{{ $notification->escalation_time }} mins</td>
                            <td>{{ implode(', ', $notification->notify_groups) }}</td>
                            <td>
                                <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editNotificationModal" onclick="editNotification('{{ $notification->id }}')">
                                    <i class="bi bi-pencil-square"></i> Edit
                                </button>
                                <button class="btn btn-danger btn-sm delete-button" onclick="deleteNotification('{{ $notification->id }}')">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>                
            </div>
        </div>        
    </div>
</div>

<!-- Add Notification Modal -->
<div class="modal fade" id="addNotificationModal" tabindex="-1" aria-labelledby="addNotificationLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addNotificationLabel">Add New Notification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addNotificationForm">
                    <div class="form-group mb-3">
                        <label for="addCraneId">Crane</label>
                        <select class="form-control" id="addCraneId" required>
                            <option value="" disabled selected>Select Crane</option>
                            @foreach($cranes as $crane)
                                <option value="{{ $crane->id }}">{{ $crane->company_name }}{{ $crane->serial_no }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="addFailureType">Critical Failure Type</label>
                        <input type="text" class="form-control" id="addFailureType" placeholder="e.g., Hydraulic Failure" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="addSeverityLevel">Severity Level</label>
                        <select class="form-control" id="addSeverityLevel" required>
                            <option value="" disabled selected>Select Severity Level</option>
                            <option value="P1">P1 </option>
                            <option value="P2">P2</option>
                            <option value="P3">P3</option>
                            <option value="out of services">Out Of Services</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="addNotifyGroups">Notify Groups</label>
                        <select class="form-control" id="addNotifyGroups" multiple required>
                            <option value="Workforce">Workforce</option>
                            <option value="Technicians">Technicians</option>
                            <option value="SafetyOfficers">Safety Officers</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="addEscalationTime">Escalation Time (Minutes)</label>
                        <input type="number" class="form-control" id="addEscalationTime" min="0" value="10" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Notification Modal -->
<div class="modal fade" id="editNotificationModal" tabindex="-1" aria-labelledby="editNotificationLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editNotificationLabel">Edit Notification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editNotificationForm">
                    <input type="hidden" id="editNotificationId">
                    
                    <div class="form-group mb-3">
                        <label for="editCraneId">Crane</label>
                        <select class="form-control" id="editCraneId" required>
                            <option value="" disabled selected>Select Crane</option>
                            @foreach($cranes as $crane)
                            <option value="{{ $crane->id }}">{{ $crane->company_name }}{{ $crane->serial_no }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label for="editFailureType">Critical Failure Type</label>
                        <input type="text" class="form-control" id="editFailureType" required>
                    </div>
                    <div class="form-group mb-3">
                        <label for="editSeverityLevel">Severity Level</label>
                        <select class="form-control" id="editSeverityLevel" required>
                            <option value="" disabled selected>Select Severity Level</option>
                            <option value="P1">P1 </option>
                            <option value="P2">P2</option>
                            <option value="P3">P3</option>
                            <option value="out of services">Out Of Services</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="editNotifyGroups">Notify Groups</label>
                        <select class="form-control" id="editNotifyGroups" multiple required>
                            <option value="Workforce">Workforce</option>
                            <option value="Technicians">Technician</option>
                            <option value="SafetyOfficers">Safety Officer</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="editEscalationTime">Escalation Time (Minutes)</label>
                        <input type="number" class="form-control" id="editEscalationTime" min="0" value="10" required>
                    </div>
                    <button type="submit" class="btn btn-warning w-100">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script>
// Add Notification
$('#addNotificationForm').on('submit', function(e) {
    e.preventDefault();
    let data = {
        crane_id: $('#addCraneId').val(),
        failure_type: $('#addFailureType').val(),
        severity_level: $('#addSeverityLevel').val(),
        notify_groups: $('#addNotifyGroups').val(),
        escalation_time: $('#addEscalationTime').val(),
        _token: '{{ csrf_token() }}'
    };

    $.post("{{ route('critical-failures.store') }}", data, function(response) {
        if (response.success) {
            Swal.fire('Success', 'Notification added successfully!', 'success');
            $('#addNotificationModal').modal('hide');
            location.reload();
        } else {
            Swal.fire('Error', 'Failed to add notification.', 'error');
        }
    }).fail(function() {
        Swal.fire('Error', 'Something went wrong.', 'error');
    });
});

// Edit Notification
function editNotification(id) {
    $.get(`/critical-failures/${id}/edit`, function(notification) {
        console.log(notification); // Log the response to ensure data is correct
        $('#editNotificationId').val(notification.id);
        $('#editCraneId').val(notification.crane_id);  // Setting crane_id dropdown
        $('#editFailureType').val(notification.failure_type);
        $('#editSeverityLevel').val(notification.severity_level);
        $('#editNotifyGroups').val(notification.notify_groups);
        $('#editEscalationTime').val(notification.escalation_time);
        $('#editNotificationModal').modal('show');
    });
}

// Submit Edited Notification
$('#editNotificationForm').on('submit', function(e) {
    e.preventDefault();
    let id = $('#editNotificationId').val();
    let data = {
        crane_id: $('#editCraneId').val(),
        failure_type: $('#editFailureType').val(),
        severity_level: $('#editSeverityLevel').val(),
        notify_groups: $('#editNotifyGroups').val(),
        escalation_time: $('#editEscalationTime').val(),
        _method: 'PUT',
        _token: '{{ csrf_token() }}'
    };

    $.post(`/critical-failures/${id}`, data, function(response) {
        if (response.success) {
            Swal.fire('Updated', 'Notification updated successfully!', 'success');
            $('#editNotificationModal').modal('hide');
            location.reload();
        } else {
            Swal.fire('Error', 'Failed to update notification.', 'error');
        }
    }).fail(function() {
        Swal.fire('Error', 'Something went wrong.', 'error');
    });
});

// Delete Notification
function deleteNotification(id) {
    Swal.fire({
        title: 'Are you sure?',
        text: 'You won\'t be able to revert this!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/critical-failures/${id}`,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    if (response.success) {
                        Swal.fire('Deleted!', 'The notification has been deleted.', 'success');
                        location.reload();
                    } else {
                        Swal.fire('Error', 'Failed to delete notification.', 'error');
                    }
                }
            });
        }
    });
}

</script>
@endpush