@extends('portal.main.layout')

@section('title','New Safety Template')

@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('safety.index') }}">Safety Templates</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('searchselect/select2.css') }}">

@endsection

@section('content')

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

    <div class="row mt-4" id="safety_template-create-page" data-safety_templatesinserturl="{{ route('safety.store') }}"
         data-responsetypesurl="{{ route('safety.response-types') }}"
         data-editurl="{{ route('safety.edit') }}"
         data-safety_templatesindexurl="{{ route('safety.index') }}"
         data-token="{{ csrf_token() }}">
        <div class="col-12">
            <div class="card" style="padding: 10px">

                <div class="card-header">
                    <div class="row">

                        <div class="col-12">
                            <h6 class="mb-0" id="titleincard">@yield('title')</h6>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-10 m-auto">
                    <input type="hidden" id="edit_safetytemplate_id" value="{{ Request::get('template') }}">
                    <input type="hidden" id="safetytemplate_id">
                    <div class="row mt-3">
                        <div class="col-12 col-sm-2">
                            <div class="avatar avatar-xxl position-relative">
                                <img id="safetytemplate_logo" src="{{ asset('assets/img/noimage.jpg') }}" class="border-radius-md" alt="team-2">
                                <a href="javascript:;" onclick="openFileOption()" class="btn btn-sm btn-icon-only bg-gradient-light position-absolute bottom-0 end-0 mb-n2 me-n2">
                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip" data-bs-placement="top" title="" aria-hidden="true" data-bs-original-title="Edit Image" aria-label="Edit Image"></i><span class="sr-only">Edit Image</span>
                                    <input type="file" onchange="readURL(this);" id="upload" style="display:none">
                                </a>
                            </div>
                        </div>

                        <div class="col-12 col-sm-10 mt-4 mt-sm-0 text-start">
                            <div class="row text-start">
                                <div class="col-12 col-md-6 ms-auto mt-3">
                                    <h6>TEMPLATE TITLE</h6>
                                    <input id="title" 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="addsectiondiv">
                                    <h6>SECTION</h6>
                                    <table class="table align-items-center mb-0 border">
                                        <tbody>
                                        <tr>
                                            <td style="width:95%"><textarea oninput="auto_height(this)" placeholder="Section..." class="form-control auto_height" rows="1" id="sectiontobeadded"></textarea></td>
                                            <td style="width:5%">
                                                <button onclick="addUpdateSection()" id="addsectionbtn" 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 displaystatus" id="addquestiondiv">
                                    <h6>QUESTIONS</h6>
                                    <table class="table align-items-center mb-0 border">
                                        <thead>
                                        <tr>
                                            <th colspan="4" style="width:100%;padding: 7px;vertical-align: middle" id="currentsectiondisplay">SECTION</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td style="width:65%" id="questiontobeadded"></td>
                                            <td style="width:25%"><div id="currentselection"></div></td>
                                            <td style="width:5%">
                                                <div class="dropdown">
                                                    <button class="btn bg-gradient-primary px-3 in-active-btn dropdown-toggle mb-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">

                                                    </button>
                                                    <input type="hidden" id="selectedoptionsid">
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="option_container">

                                                    </ul>
                                                </div>
                                            </td>
                                            <td style="width:5%">
                                                <button onclick="addQuestion()" id="addquestionbtn" style="float: right" class="btn btn-sm btn-icon-only bg-gradient-primary">
                                                    <i class="fa fa-plus"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <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">Questions</th>
                                            <th style="width:25%;padding: 7px" class="border-end">Type of Responses</th>
                                            <th style="width:5%;padding: 7px"></th>
                                        </tr>
                                        </thead>
                                        <tbody id="questionstable">

                                        </tbody>
                                    </table>
                                    <table class="table align-items-center mb-0 border">
                                        <tbody>
                                        <tr>
                                            <td style="width:70%;padding: 7px"></td>
                                            <td style="width:30%;padding: 7px">
                                                <button style="float: right;margin-left: 5px;" onclick="cancelSection()" class="btn bg-gradient-primary px-3 status-btn mb-0">Cancel</button>
                                                <button style="float: right;" onclick="addAll()" id="addallbtn" class="btn bg-gradient-primary px-3 in-active-btn mb-0">Add To Preview</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="col-12 col-md-12 ms-auto mt-3">
                                    <h6>PREVIEW</h6>
                                    <div id="displayquestiondiv"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="button-row d-flex mt-4" style="margin-bottom: 10px">
                        <button onclick="saveTemplate()" class="btn bg-gradient-dark ms-auto mb-0" type="button">Save</button>
                    </div>
                </div>

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

@endsection

@section('scripts')

    <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('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('assets/js/ckeditor/ckeditor.js') }}" type="text/javascript"></script>--}}
    <script src="{{ asset('js/core/create_safety_template.js') }}"></script>

@endsection