@extends('main')
@section('css')
    <link rel="stylesheet" href="{{url('public/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}">
    <link rel="stylesheet" href="{{url('public/assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css')}}">
<style>
    /*body {*/
    /*    font-family: arial;*/
    /*}*/
    .hide {
        display: none;
    }
</style>
@endsection
@section('content')
    <div id="main-content">
        <div class="container-fluid">
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12">
                    <div class="card">
                        <div class="header">
                        </div>
                        <div class="body">
                            <ul class="nav nav-tabs-new2">
                                <li class="nav-item"><a class="nav-link active show" data-toggle="tab" href="#existing-data">Existing Data</a></li>
                                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#appraisal-head">Create New Head</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane show active" id="existing-data">
                                    <section>

                                        <div class="body">
                                            <div class="table-responsive">
                                                <table id="appraisalHead" class="table table-bordered center-aligned-table table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th class="text-center">Head Name</th>
                                                        <th class="text-center">Head Type</th>
                                                        <th class="text-center">Description</th>
                                                        <th class="text-center">Group Name</th>
                                                        <th class="text-center">Action</th>

                                                    </tr>
                                                    </thead>
                                                </table>
                                            </div>
                                        </div>

                                    </section>
                                </div>
                                <div class="tab-pane" id="appraisal-head">
                                    <section>
                                        <div class="body">
                                            <form method="post" action="{{route('appraisalHead.insert')}}" enctype="multipart/form-data">
                                                {{csrf_field()}}
                                                <div class="demo-masked-input">
{{--                                                    <input type="radio" id="male" name="entryType" onclick="show1();">Group Entry--}}
{{--                                                    <input type="radio"  onclick="show2();">Head Entry--}}
                                                    <input type="radio" name="entryType"  onclick="show1();" />
                                                    Group Entry
                                                    <input type="radio" name="test"   onclick="show2();" />
                                                    Head Entry
                                                    <div class="row clearfix">
                                                        <div class="col-lg-6 col-md-6">
                                                            <b>Title</b>
                                                            <div class="input-group mb-3">
                                                                <input type="text" name="headName" class="form-control date">
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-6 col-md-6">
                                                            <b>DESCRIPTION</b>
                                                            <div class="input-group mb-3">
                                                                <textarea name="headDesc" rows="2" cols="50"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row clearfix hide" id="div1">
                                                        <div class="col-lg-6 col-md-6">
                                                            <b>Group</b>
                                                            <div class="input-group mb-3">
                                                                <select  name="fk_Appraisalheads" class="form-control">
                                                                    <option value="">Select</option>
                                                                    @foreach($appraisalGroup as $appraisalGroup)
                                                                        <option value="{{$appraisalGroup->id}}" >{{$appraisalGroup->headName}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6" >
                                                            <b>Head Type</b>
                                                            <div class="input-group mb-3">
                                                                <select id="status" name="headType" class="form-control">
                                                                    <option value="">Select</option>
                                                                    <option value="NM" >Numbering</option>
                                                                    <option value="DS" >Descriptive</option>
                                                                    <option value="TF">T/F</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <br>
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </form>
                                        </div>
                                    </section>
                                    <script>
                                        function show1(){
                                            document.getElementById('div1').style.display ='none';
                                        }
                                        function show2(){
                                            document.getElementById('div1').style.display = 'block';
                                        }
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
{{--                <div class="col-lg-12 col-md-12 col-sm-12">--}}
{{--                    <div class="card">--}}
{{--                        <div class="header">--}}
{{--                                                        <h2>Basic Example - Horizontal Layout</h2>--}}
{{--                            <ul class="header-dropdown">--}}
{{--                                <li class="dropdown">--}}
{{--                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>--}}
{{--                                    <ul class="dropdown-menu dropdown-menu-right animated bounceIn">--}}
{{--                                        <li><a href="javascript:void(0);">Action</a></li>--}}
{{--                                        <li><a href="javascript:void(0);">Another Action</a></li>--}}
{{--                                        <li><a href="javascript:void(0);">Something else</a></li>--}}
{{--                                    </ul>--}}
{{--                                </li>--}}
{{--                            </ul>--}}
{{--                        </div>--}}
{{--                        <div class="body">--}}
{{--                            <div id="wizard_horizontal">--}}
{{--                                <h2>Existing Data</h2>--}}
{{--                                <section>--}}

{{--                                                            <div class="body">--}}
{{--                                                                <div class="table-responsive">--}}
{{--                                                                    <table id="appraisalHead" class="table table-bordered center-aligned-table">--}}
{{--                                                                        <thead>--}}
{{--                                                                        <tr>--}}
{{--                                                                            <th class="text-center">Head Name</th>--}}
{{--                                                                            <th class="text-center">Head Type</th>--}}
{{--                                                                            <th class="text-center">Description</th>--}}
{{--                                                                            <th class="text-center">Group Name</th>--}}
{{--                                                                            <th class="text-center">Action</th>--}}

{{--                                                                        </tr>--}}
{{--                                                                        </thead>--}}
{{--                                                                    </table>--}}
{{--                                                                </div>--}}
{{--                                                            </div>--}}

{{--                                </section>--}}
{{--                                <h2>Create New Head</h2>--}}
{{--                                <section>--}}
{{--                                    <div class="body">--}}
{{--                                        <form method="post" action="{{route('appraisalHead.insert')}}" enctype="multipart/form-data">--}}
{{--                                            {{csrf_field()}}--}}
{{--                                            <div class="demo-masked-input">--}}
{{--                                                <input type="radio" id="male" name="entryType" onclick="show1();">Group Entry--}}
{{--                                                <input type="radio"  onclick="show2();">Head Entry--}}
{{--                                                <input type="radio" name="entryType"  onclick="show1();" />--}}
{{--                                                Group Entry--}}
{{--                                                <input type="radio" name="test"   onclick="show2();" />--}}
{{--                                                Head Entry--}}
{{--                                                <div class="row clearfix">--}}
{{--                                                    <div class="col-lg-6 col-md-6">--}}
{{--                                                        <b>Title</b>--}}
{{--                                                        <div class="input-group mb-3">--}}
{{--                                                            <input type="text" name="headName" class="form-control date">--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}

{{--                                                    <div class="col-lg-6 col-md-6">--}}
{{--                                                        <b>DESCRIPTION</b>--}}
{{--                                                        <div class="input-group mb-3">--}}
{{--                                                            <textarea name="headDesc" rows="2" cols="50"></textarea>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                                <div class="row clearfix hide" id="div1">--}}
{{--                                                    <div class="col-lg-6 col-md-6">--}}
{{--                                                        <b>Group</b>--}}
{{--                                                        <div class="input-group mb-3">--}}
{{--                                                            <select  name="fk_Appraisalheads" class="form-control">--}}
{{--                                                                <option value="">Select</option>--}}
{{--                                                                @foreach($appraisalGroup as $appraisalGroup)--}}
{{--                                                                    <option value="{{$appraisalGroup->id}}" >{{$appraisalGroup->headName}}</option>--}}
{{--                                                                @endforeach--}}
{{--                                                            </select>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="col-lg-6 col-md-6" >--}}
{{--                                                        <b>Head Type</b>--}}
{{--                                                        <div class="input-group mb-3">--}}
{{--                                                            <select id="status" name="headType" class="form-control">--}}
{{--                                                                <option value="">Select</option>--}}
{{--                                                                <option value="NM" >Numbering</option>--}}
{{--                                                                <option value="DS" >Descriptive</option>--}}
{{--                                                                <option value="TF">T/F</option>--}}
{{--                                                            </select>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                            <br>--}}
{{--                                            <button type="submit" class="btn btn-primary">Submit</button>--}}
{{--                                        </form>--}}
{{--                                    </div>--}}
{{--                                </section>--}}
{{--                                <script>--}}
{{--                                    function show1(){--}}
{{--                                        document.getElementById('div1').style.display ='none';--}}
{{--                                    }--}}
{{--                                    function show2(){--}}
{{--                                        document.getElementById('div1').style.display = 'block';--}}
{{--                                    }--}}
{{--                                </script>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{url('public/assets/vendor/jquery-validation/jquery.validate.js')}}"></script>
    <script src="{{url('public/assets/vendor/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->
    <script src="{{url('public/assets/js/pages/forms/form-wizard.js')}}"></script>
    <script src="{{url('public/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{url('public/assets/js/pages/tables/jquery-datatable.js')}}"></script>
    <script src="{{url('public/assets/bundles/datatablescripts.bundle.js')}}"></script>
    <script>


        $(document).ready( function () {
            $('#appraisalHead').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url('appraisalhead-list') }}",
                columns: [
                    { data: 'headName' ,name:'headName'},
                    { data: 'headType' ,name:'headType'},
                    { data: 'headDesc' ,name:'headDesc'},
                    { data: 'groupName' , name: 'groupName' },
                    { "data": function(data){

                            return '<a class="btn btn-sm btn-outline-success" title="edit" data-panel-id="' + data.id + '" onclick="editAppraisalHead(this)"><i class="icon-pencil"></i></a>'
                                ;},
                        "orderable": false, "searchable":false, "name":"selected_rows" },


                    // { title: 'Action', data: 'action', orderable: false, searchable:false },
                ]
            });
        });


        function editAppraisalHead(x) {
            btn = $(x).data('panel-id');
            // alert(btn);
            var url = '{{route("appraisalHead.edit", ":id") }}';
            var newUrl=url.replace(':id', btn);
            window.location.href = newUrl;

        }


    </script>
@endsection