@extends('portal.main.layout')

@section('title','Approval | Root Cause Analysis')

@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('occurrence_approval.occurrences_page') }}">NC Occurrences</a></li>
        <li class="breadcrumb-item text-sm text-white"><a class="opacity-5 text-white" href="{{ route('occurrence_approval.actions').'?occurrence='.Request::get('occurrence') }}">Actions</a></li>
        <li class="breadcrumb-item text-sm text-white active" id="titleinbreadcrub" 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="approvaloccurrencefivewhys-page"
         data-loadingurl="{{ route('occurrence_approval.actions.five_whys_list') }}"
         data-submiturl="{{ route('occurrence_approval.actions.store_action') }}"
         data-openapprovalactionurl="{{ route('occurrence_approval.actions') }}"
         data-openapprovalcapsurl="{{ route('occurrence_approval.actions.caps') }}"
         data-downloadrcaformurl="{{ route('occurrence_approval.actions.rca-form') }}"
         data-downloadauditsurl="{{ route('occurrence.download') }}"
         data-downloadauditreportsurl="{{ route('occurrence.download-report') }}"
         data-token="{{ csrf_token() }}">

        <div class="col-12">
            <div class="card">

                <div class="table-responsive mt-3" style="min-height: 40vh;">
                    <input type="hidden" id="action_id" value="{{ Request::get('action') }}">
                    <table class="table table-flush" id="dt-fivewhy">
                        <thead class="thead-light">
                        <tr>
                            <th style="color:#000;width: 5px" class="text-sm">No</th>
                            <th style="color:#000;" class="text-sm">Created On</th>
                            <th style="color:#000;" class="text-sm">Created By</th>
                            <th style="color:#000;" class="text-sm">Status</th>
                            <th style="color:#000;" class="text-sm">Actioned By</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade modal-zindex" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" 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" id="addeditmodaltitle">Action Details</h3>
                        </div>
                        <div class="card-body" style="margin-top: -30px">
                            <div>

                                <div style="min-height: 40vh">

                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-12 col-md-8 ms-auto mt-2">

                                                <div>
                                                    <table class="align-items-center mb-1 border" style="width: 100%">
                                                        <thead class="border-bottom">
                                                        <tr>
                                                            <th style="width:10px;padding: 7px" class="border-end">No</th>
                                                            <th style="width:90%;padding: 7px">Why's</th>
                                                            <th style="width:10%;padding: 7px"></th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="fivewhystable">

                                                        </tbody>
                                                    </table>
                                                </div>

                                                <div class="form-group">
                                                    <h5>Root Cause</h5>
                                                    <div id="rootcause"></div>
                                                </div>

                                                <div class="form-group">
                                                    <h5>Action</h5>
                                                </div>

                                                <div class="form-group">
                                                    <div class="mt-3">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="action_options" id="approve_action" value="APPROVED">
                                                            <label class="custom-control-label" for="approve_action"> Approve</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="action_options" id="decline_action" value="DECLINED">
                                                            <label class="custom-control-label" for="decline_action"> Decline</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <h5>Comment(s)</h5>
                                                </div>

                                                <div class="form-group">
                                                    <textarea oninput="auto_height(this)" placeholder="Type your reason here..." class="form-control auto_height" rows="3" id="reason"></textarea>
                                                </div>

                                                <div class="row" id="submitbtnview">

                                                </div>

                                            </div>
                                            <div class="col-12 col-md-4 border ms-auto mt-2">
                                                <div class="row text-start">
                                                    <div class="col-12 col-md-12 ms-auto mt-0">

                                                        <div id="action_detail"></div>

                                                        <hr class="horizontal dark mt-0 mb-0">

                                                        <div class="col-12">
                                                            <div class="row text-center">
                                                                <div class="col-12 col-md-12 ms-auto mt-1">
                                                                    <h6>Question Details</h6>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <hr class="horizontal dark mt-0 mb-0">

                                                        <div id="message_desc"></div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </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/occurrenceapproval/approval_five_whys.js') }}" type="text/javascript"></script>

@endsection