@extends('portal.main.layout')

@section('title','Approval | Final Actions')

@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('approval.audits_page') }}">NC Audits</a></li>
        <li class="breadcrumb-item text-sm text-white"><a class="opacity-5 text-white" href="{{ route('approval.actions').'?audit='.Request::get('audit') }}">Actions</a></li>
        <li class="breadcrumb-item text-sm text-white"><a class="opacity-5 text-white" href="{{ route('approval.actions.five_whys').'?action='.Request::get('action').'&audit='.Request::get('audit') }}">Root Cause Analysis</a></li>
        <li class="breadcrumb-item text-sm text-white"><a class="opacity-5 text-white" href="{{ route('approval.actions.caps').'?action='.Request::get('action').'&root_cause='.Request::get('root_cause').'&audit='.Request::get('audit') }}">Corrective 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') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

    <style>
        .custom-dropdown {
            position: relative;
            display: inline-block;
        }

        .custom-dropdown-button {
            padding: 10px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: 1px solid #007bff;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
        }

        .custom-dropdown-menu {
            display: none;
            position: absolute;
            background-color: #ffffff;
            min-width: 300px;
            border: 1px solid #ddd;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            z-index: 1000;
            margin-top: 5px;
            max-width: 100vw; /* Ensure dropdown doesn’t exceed viewport width */
            overflow: hidden; /* Hide content that overflows the container */
        }

        .scrollable-table {
            overflow-x: auto; /* Enable horizontal scrolling */
        }

        .custom-dropdown-menu table {
            width: 100%;
            border-collapse: collapse;
            min-width: 600px; /* Minimum width to ensure horizontal scrolling when content is too wide */
        }

        .custom-dropdown-menu th, .custom-dropdown-menu td {
            border: 1px solid black; /* Black gridline for table */
            padding: 8px;
            color: black; /* Black text color */
        }

        .custom-dropdown-menu th {
            background-color: #f2f2f2; /* Light grey background for header */
        }

        .custom-dropdown-menu tr:nth-child(even) {
            background-color: #f9f9f9; /* Slightly different background for even rows */
        }

        .custom-dropdown-menu tr:hover {
            background-color: #ddd; /* Highlight background color on hover */
        }

        .color-box {
            display: inline-block;
            width: 30px;
            height: 20px;
            border-radius: 4px;
            margin-right: 5px;
        }

        .color-label {
            vertical-align: middle;
            color: black; /* Black text color for labels */
        }
    </style>
@endsection

@section('content')

    <div class="row mt-4" id="approvalfaps-page"
         data-loadingurl="{{ route('approval.actions.faps_list') }}"
         data-docsurl="{{ route('approval.list_docs') }}"
         data-submiturl="{{ route('approval.actions.store_fap_action') }}"
         data-openapprovalactionurl="{{ route('approval.actions') }}"
         data-downloadrcaformurl="{{ route('approval.actions.rca-form') }}"
         data-downloadauditsurl="{{ route('audit.download') }}"
         data-downloadauditreportsurl="{{ route('audit.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="cap_id" value="{{ Request::get('cap') }}">
                    <input type="hidden" id="why_id" value="{{ Request::get('root_cause') }}">
                    <input type="hidden" id="action_id" value="{{ Request::get('action') }}">
                    <table class="table table-flush" id="dt-fap">
                        <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-lg" 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">Final Action Plan</h3>
                        </div>
                        <div class="card-body" style="margin-top: -30px">
                            <div>

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

                                            <div class="form-group">
                                                <div id="fap_text"></div>
                                            </div>

                                            <div class="form-group mt-3" id="riskclassview"></div>

                                            <div class="col-12 col-md-12 ms-auto mt-3">
                                                <p><strong>Supporting Documents</strong></p>
                                                <div>
                                                    <table id="dt-supportingdocs" class="align-items-center mb-0 border" style="width: 100%">
                                                        <thead class="border-bottom">
                                                        <tr>
                                                            <th style="width:45%;padding: 7px" class="border-end">Description</th>
                                                            <th style="width:45%;padding: 7px" class="border-end">Document Type</th>
                                                            <th style="width:10%;padding: 7px"></th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </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>
                                </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="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
    <script src="{{ asset('js/approval/approval_final_action.js') }}" type="text/javascript"></script>

@endsection