@extends('portal.main.layout')

@section('title','Incident Approvals')

@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"><a class="opacity-5 text-white"
            href="{{ route('incident_approval.incidents_page') }}">NC Incidents</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') }}">
@endsection

@section('content')
<div class="row mt-4" id="incidentapproval-page" data-loadingurl="{{ route('incident_approval.actions.list') }}"
    data-statusurl="{{ route('incident_approval.actions.change_status') }}"
    data-openrootcauseurl="{{ route('incident_approval.actions.root_cause') }}" 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-approval-action">
                    <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">Action Status</th>
                            <th style="color:#000;" class="text-sm">Assigned To</th>
                            <th style="color:#000;" class="text-sm">Due Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-zindex" id="modal-details" tabindex="-1" role="dialog" aria-labelledby="modal-details"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
                <div class="card card-plain">
                    <div class="card-header pb-0 text-left">
                        <h3 class="font-weight-bolder text-success text-gradient">Action Details</h3>
                    </div>
                    <div class="card-body" style="margin-top: -30px">
                        <div id="action_details_content"></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('js/incident_approval/approval_action.js') }}" type="text/javascript"></script>
@endsection