@extends('layouts.master')
@section('data-sidebar')
<div id="product-cl-sec">
    <a href="#" id="pl-close" class="close-btn-pl"></a>
    <div class="pro-header-text"><span class="main_heading">New</span> <span>Questionnaire</span></div>

    <div class="loader-sell360" id="dataSidebarLoader" style="display: none; height:80vh">
  <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
    <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
    <span class="txt"><span></span> LOADING...</span> </div>
   </div>

    <div class="pc-cartlist">
        <div class="overflow-plist">
            <div class="plist-content">
                <div class="_left-filter pt-0">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <form style="display: flex;" id="saveQuestionnaireForm">
                                    @csrf
                                    <input type="text" id="operation" name="operation" hidden> 
                                    <input type="text" id="questionnaire_id" name="questionnaire_id" hidden> 
                                    <div id="floating-label" class="card p-20 top_border mb-3" style="width: 100%">
                                        <h2 class="_head03">Questionnaire <span>Details</span></h2>
                                        <div class="form-wrap p-0"> 
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label class="font12 mb-5">Select Group</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect" name="select_group"
                                                            placeholder="select Group">
                                                            <option disabled value='0' selected>Select Group*</option>
                                                            @foreach ($groups as $data)
                                                                <option value="{{$data->id}}">{{$data->group_name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 pt-10">
                                                    <label class="font12 mb-5">Select Employee</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect" name="select_individual"
                                                            placeholder="select Employee">
                                                            <option disabled value='0' selected>Select Employee</option>
                                                            @foreach ($employees as $data)
                                                                <option value="{{$data->employee_id}}">{{$data->employee_first_name . ' ' .$data->employee_last_name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 pt-10">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Question*</label>
                                                        <input type="text" id="" name="question" class="form-control required" placeholder="">
                                                    </div>
                                                </div> 
                                            </div> 
                                            <div class="row multiple_answers_div">
                                                <div class="col-md-12 pt-10">
                                                    <div class="form-group phone-SL div_parent"> 
                                                        <div class="col p-0"> 
                                                            <input class="form-control multiple_answer" type="text" placeholder="Multiple Choice Answer"> 
                                                        </div>
                                                        <button type="button" style="padding:8px; line-height:1; height:36px" class="btn btn-primary add_more_answer"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="_cl-bottom">
        <button type="button" class="btn btn-primary mr-2" id="saveQuestionnaire">Save</button>
        <button id="pl-close" type="button" class="btn btn-cancel mr-2" id="cancelQuestionnaire">Cancel</button>
    </div>
</div>
@endsection
@section('content')


<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Manage <span>Questionnaire</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Manage Questionnaire</span></a></li>
            <li><span>Active</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="header">
                <a class="btn add_button openDataSidebarForAddingQuestionnaire"><i class="fa fa-plus"></i> New Questionnaire</a>
                <h2>Questionnaire List</h2>
            </div>      

        <div class="loader-sell360" id="tblLoader">
        <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
            <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
            <span class="txt"><span></span> LOADING...</span> </div>
        </div>

            <div class="body body_questionnaire" >
            </div>
        </div>
    </div>
</div>
@endsection