@extends('frontend.main.layout')

@section('title','Start Occurrence Audit')

@section('styles')

    <link rel="stylesheet" type="text/css" href="{{ asset('searchselect/select2.css') }}">

@endsection

@section('content')

    <style>
        .auto_height {
            width: 100%;
        }
    </style>

    <div class="container-fluid py-4" id="occurrence-create-page" data-initurl="{{ route('occurrence-site.init') }}"
         data-storemaindetailsurl="{{ route('occurrence-site.store.maindetails') }}"
         data-storedetailsurl="{{ route('occurrence-site.store.details') }}"
         data-storeanswerssurl="{{ route('occurrence-site.store.answers') }}"
         data-openoccurrencesurl="{{ route('occurrence.index') }}"
         data-token="{{ csrf_token() }}">

        <div class="col-12 col-lg-7 m-auto">

            <form class="multisteps-form__form">

                <div class="row mt-5">
                    <div class="col-12 col-lg-12 mx-auto my-5">
                        <div class="multisteps-form__progress">
                            <button class="multisteps-form__progress-btn js-active" type="button" title="Details">
                                <span>Audit Details</span>
                            </button>
                            <button class="multisteps-form__progress-btn" type="button" title="Individuals">
                                <span>Location & Individuals</span>
                            </button>
                            <button class="multisteps-form__progress-btn" type="button" title="Questions">
                                <span>Questions</span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card multisteps-form__panel p-3 border-radius-xl bg-white js-active" data-animation="FadeIn">
                    <div class="row text-center">
                        <div class="col-10 mx-auto">
                            <h4>Audit Details</h4>
                        </div>
                    </div>
                    <div class="multisteps-form__content">
                        <input type="hidden" id="safety_template_id" value="{{ Request::get('template') }}">
                        <input type="hidden" id="occurrence" value="{{ Request::get('occurrence') }}">
                        <input type="hidden" id="init_option" value="{{ Request::get('init_option') }}">
                        <input type="hidden" id="occurrence_id">
                        <div class="row mt-3">
                            <div class="col-12 col-sm-12 mt-4 mt-sm-0 text-start">
                                <div class="row text-start">

                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-12 mt-4 mt-sm-0 text-start">
                                            <div class="row text-start">
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>DEPARTMENT</h6>
                                                    <div style="margin-top: 14px!important;">
                                                        <select class="select2 form-control" style="width: 100%" id="title">

                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>AUDIT NUMBER</h6>
                                                    <input id="audit_number" class="form-control" type="text" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>REVISION</h6>
                                                    <input id="revision" class="form-control" type="text" value="0" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>ISSUE</h6>
                                                    <input id="issue" class="form-control" type="text" value="0" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>CONTROL NUMBER</h6>
                                                    <input id="control_number" value="" class="form-control" type="text" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>LEAD AUDITOR</h6>
                                                    <input type="hidden" id="lead_auditor">
                                                    <input disabled id="lead_auditor_text" class="form-control" type="text" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-12 ms-auto mt-3" id="addauditorsdiv">
                                                    <h6>AUDITORS</h6>
                                                    <table class="table align-items-center mb-0 border">
                                                        <tbody>
                                                        <tr>
                                                            <td style="width:15%">
                                                                <button class="btn bg-gradient-primary px-3 in-active-btn mb-0"
                                                                        onclick="changetoselectortype('auditorswitch',event)" id="auditorswitch">Type</button>
                                                            </td>
                                                            <td style="width:50%">
                                                                <input id="auditor" class="form-control displaystatus" type="text" placeholder="" />
                                                                <div id="auditor_select_wrapper">
                                                                    <select class="select2 form-control" style="width: 100%;" id="auditor_select">

                                                                    </select>
                                                                </div>
                                                            </td>
                                                            <td style="width:35%">
                                                                <button onclick="addAuditor(event)" id="addauditorbtn" style="float: right" class="btn btn-sm btn-icon-only bg-gradient-primary">
                                                                    <i class="fa fa-plus"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>

                                                <div class="col-12 col-md-12 ms-auto mt-3">
                                                    <div class="{{--table-responsive--}}">
                                                        <table class="align-items-center mb-0 border" style="width: 100%">
                                                            <thead class="border-bottom">
                                                            <tr>
                                                                <th style="width:90%;padding: 7px" class="border-end">Name</th>
                                                                <th style="width:10%;padding: 7px"></th>
                                                            </tr>
                                                            </thead>
                                                            <tbody id="auditorstable">

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-12 ms-auto mt-3">
                                                    <h6>AUDIT OBJECTIVE</h6>
                                                    <textarea oninput="auto_height(this)" placeholder="" class="form-control auto_height" rows="3" id="audit_objective"></textarea>
                                                </div>
                                                <div class="col-12 col-md-12 ms-auto mt-3">
                                                    <h6>AUDIT SCOPE</h6>
                                                    <textarea oninput="auto_height(this)" placeholder="" class="form-control auto_height" rows="3" id="audit_scope"></textarea>
                                                </div>
                                                <div class="col-12 col-md-12 ms-auto mt-3">
                                                    <h6>REFERENCE MATERIAL</h6>
                                                    <textarea oninput="auto_height(this)" placeholder="" class="form-control auto_height" rows="3" id="reference_material"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="button-row d-flex mt-4">
                            <button onclick="saveMainDetails()" class="btn bg-gradient-dark ms-auto mb-0 js-btn-next" type="button" title="Next">Next</button>
                        </div>
                    </div>
                </div>

                <div class="card multisteps-form__panel p-3 border-radius-xl bg-white" data-animation="FadeIn">
                    <div class="row text-center">
                        <div class="col-10 mx-auto">
                            <h4>Location & Individuals</h4>
                        </div>
                    </div>
                    <div class="multisteps-form__content">
                        <div class="row mt-3">
                            <div class="col-12 col-sm-12 mt-4 mt-sm-0 text-start">
                                <div class="row text-start">

                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-12 mt-4 mt-sm-0 text-start">
                                            <div class="row text-start">
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>START DATE</h6>
                                                    <input id="audit_date_start" class="form-control" type="date" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>END DATE</h6>
                                                    <input id="audit_date_end" class="form-control" type="date" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3">
                                                    <h6>LOCATION</h6>
                                                    <input type="text" id="location" class="form-control" placeholder="" />
                                                    <input type="hidden" id="LatitudeLongitude">
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3 displaystatus">
                                                    <h6>PREPARED BY</h6>
                                                    <input type="hidden" id="prepared_by">
                                                    <input disabled id="prepared_by_text" class="form-control" type="text" placeholder="" />
                                                </div>
                                                <div class="col-12 col-md-6 ms-auto mt-3"></div>
                                                <div class="col-12 col-md-12 ms-auto mt-3" id="addindividualdiv">
                                                    <h6>INDIVIDUALS</h6>
                                                    <table class="table align-items-center mb-0 border">
                                                        <tbody>
                                                        <tr class="border-bottom">
                                                            <td style="width:65%">
                                                                <input class="form-control" type="text" id="name" placeholder="name">
                                                            </td>
                                                            <td style="width:30%">
                                                                <input class="form-control" type="text" id="position" placeholder="position">
                                                            </td>
                                                            <td style="width:5%">
                                                                <a href="javascript:;" onclick="addInterviewedIndividual()" id="addindividualbtn" style="float: right" class="btn btn-sm btn-icon-only bg-gradient-primary">
                                                                    <i class="fa fa-plus"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>

                                                <div class="col-12 col-md-12 ms-auto mt-3">
                                                    <div class="{{--table-responsive--}}">
                                                        <table class="align-items-center mb-0 border" style="width: 100%">
                                                            <thead class="border-bottom">
                                                            <tr>
                                                                <th style="width:70%;padding: 7px" class="border-end">Individuals Interviewed</th>
                                                                <th style="width:25%;padding: 7px" class="border-end">Title (Position Held)</th>
                                                                <th style="width:5%;padding: 7px"></th>
                                                            </tr>
                                                            </thead>
                                                            <tbody id="individualtable">

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

                                </div>
                            </div>
                        </div>
                        <div class="button-row d-flex mt-4">
                            <button onclick="focusscolltodiv('backbtn')" class="btn bg-gradient-light mb-0 js-btn-prev" type="button" title="Prev">Prev</button>
                            <button onclick="saveAuditDetails()" class="btn bg-gradient-dark ms-auto mb-0 js-btn-next" type="button" title="Next">Next</button>
                        </div>
                    </div>
                </div>

                <div class="card multisteps-form__panel p-3 border-radius-xl bg-white" data-animation="FadeIn">
                    <div class="row text-center">
                        <div class="col-10 mx-auto">
                            <h4>Questions</h4>
                        </div>
                    </div>
                    <div class="multisteps-form__content">

                        <div class="row mt-3" id="questionview">

                        </div>

                        <div class="col-12 col-md-12 ms-auto mt-3">
                            <h6>Audit Summary</h6>
                            <textarea oninput="auto_height(this)" placeholder="" class="form-control auto_height" rows="3" id="findings"></textarea>
                        </div>

                        <div class="row">
                            <div class="button-row d-flex mt-4 col-12">
                                <button onclick="focusscolltodiv('backbtn')" class="btn bg-gradient-light mb-0 js-btn-prev" type="button" title="Prev">Prev</button>
                                <div class="ms-auto mb-0">
                                    {{--<button onclick="saveAuditAnswers('draft')" class="btn bg-gradient-dark ms-auto mb-0" type="button" title="Save Draft">Save Draft</button>--}}
                                    <button onclick="saveAuditAnswers('complete')" class="btn btn-danger ms-auto mb-0" type="button" title="Complete">Complete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </form>

        </div>

    </div>

    <div id="action_modal"></div>

@endsection

@section('scripts')

    <script src="{{ asset('assets/js/plugins/multistep-form.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/choices.min.js') }}"></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/startoccurrenceudit.js') }}"></script>

@endsection