@extends('portal.main.layout')

@section('title','Incidents')

@section('breadcrumb')
<ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
    <li class="breadcrumb-item text-sm text-white">
        <a class="text-white" href="{{ route('dashboard.index') }}">
            <i class="fas fa-home"></i>
        </a>
    </li>
    <li class="breadcrumb-item text-sm text-white active" aria-current="page">@yield('title')</li>
</ol>
@endsection

@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/js/datatable/datatables.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('searchselect/select2.css') }}">
@endsection

@section('content')

<div class="row mt-4" id="incident-page" data-loadingurl="{{ route('incident.list') }}"
    data-deleteurl="{{ route('incident.delete') }}"
    data-openincidentactionsurl="{{ route('incident_action.incidents_page') }}" data-token="{{ csrf_token() }}">
    <div class="col-12">
        <div class="card">
            <div class="table-responsive mt-3" style="min-height: 40vh">
                <table class="table table-flush" id="dt-incident">
                    <thead class="thead-light">
                        <tr>
                            <th style="color:#000;width: 5px" class="text-sm">No</th>
                            <th style="color:#000;" class="text-sm">Incident No.</th>
                            <th style="color:#000;" class="text-sm">Type</th>
                            <th style="color:#000;" class="text-sm">Station</th>
                            <th style="color:#000;" class="text-sm">Reported By</th>
                            <th style="color:#000;" class="text-sm">Department</th>
                            <th style="color:#000;" class="text-sm">Status</th>
                            <th style="color:#000;" class="text-sm">Reported On</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Assign Action Modal -->
<div class="modal fade" id="modal-assign-action" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content text-left">
            <div class="modal-header pt-3 pb-2 border-bottom">
                <h5 class="modal-title" id="assign_action_title">Assign Action</h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="aa_incident_id">
                <div class="form-group mb-3">
                    <label>Assign To</label>
                    <select class="select2 form-control" style="width: 100%" id="aa_assigned_to">
                        <option value="">Select Staff</option>
                        @foreach($users as $user)
                        <option value="{{ $user->email }}">{{ $user->name }} - {{ $user->department_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label>Priority</label>
                            <select class="form-control" id="aa_priority">
                                <option value="">Select Priority</option>
                                <option value="Level 1">Level 1 &mdash; High (7 days)</option>
                                <option value="Level 2">Level 2 &mdash; Medium (14 days)</option>
                                <option value="Level 3">Level 3 &mdash; Low (30 days)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label>Status</label>
                            <select class="form-control" id="aa_status">
                                <option value="">Select Status</option>
                                <option value="To Do">To Do</option>
                                <option value="In-progress">In-progress</option>
                                <option value="Complete">Complete</option>
                                <option value="Can't Do">Can't Do</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group mb-3">
                    <label>Due Date <small class="text-muted">(auto-set by priority, or override below)</small></label>
                    <input type="date" class="form-control" id="aa_due_date">
                </div>
                <div class="form-group mb-3">
                    <label>Action Description</label>
                    <textarea class="form-control" id="aa_description" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer pt-3 pb-3 border-top">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn bg-gradient-primary mb-0" id="btn-save-action">Assign Action</button>
            </div>
        </div>
    </div>
</div>

<!-- Finding / Remarks Modal -->
<div class="modal fade" id="modal-finding" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content text-left">
            <div class="modal-header pt-3 pb-2 border-bottom">
                <h5 class="modal-title">Auditor Finding / Remarks</h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="f_incident_id">
                <div class="form-group mb-3">
                    <label>Findings / Remarks</label>
                    <textarea class="form-control" id="f_auditor_remarks" rows="5"></textarea>
                </div>
            </div>
            <div class="modal-footer pt-3 pb-3 border-top">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn bg-gradient-primary mb-0" id="btn-save-finding">Save Finding</button>
            </div>
        </div>
    </div>
</div>

<!-- View Details Modal -->
<div class="modal fade" id="modal-view-details" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content text-left">
            <div class="modal-header pt-3 pb-2 border-bottom">
                <h5 class="modal-title">Incident Details</h5>
                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4" id="view-details-content" style="max-height: 70vh; overflow-y: auto;">
                <!-- dynamic -->
            </div>
            <div class="modal-footer pt-3 pb-3 border-top">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('assets/js/datatable/datatables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/datatable/datatable-basic.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/plugins/sweetalert2.all.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/plugins/sweet-alerts.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('searchselect/select2.full.js') }}" type="text/javascript"></script>
<script src="{{ asset('searchselect/form-select2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/core/incident.js') }}"></script>
@endsection