@extends('app')
@section('extra-css')
    <style>
        .tt-input {
            text-align: center;
        }

        #search_container .tt-menu {
            max-height: 200px;
            overflow-y: auto;
            font-size: 14px;
        }

        .tt-suggestion {
            background-color: #3c8dbc;
            color: #ffffff;
            min-width: 200px;
        }

        .tt-suggestion:hover {
            background-color: #1b5f86;
            color: #ffffff;
        }

        .typeahead, .tt-suggestion .tt-selectable {
            height: 40px;
            font-size: 24px;
            line-height: 30px;
            border: 1px solid #ccc;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            outline: none;
        }

    </style>
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Add Service Package
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">HR</a></li>
            <li class="active">Add Service Group</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <!-- SELECT2 EXAMPLE -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">
                    @can('diagnostic-service-package-view')
                        <a href="{{route('view-diagnostic-service-package')}}" class="btn btn-info btn-md">
                            <i class="fa fa-shopping-cart"></i>&nbsp;
                            View Service Package
                        </a>
                    @endcan

                    @can('sale-service-create')
                        <a href="{{route('diagnostic.sale-diagnotic-test')}}" class="btn btn-info btn-md">
                            <i class="fa fa-shopping-cart"></i>&nbsp;
                            Add Sale
                        </a>
                    @endcan

                </h3>

            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        @can('diagnostic-service-package-create')
                        <form action="{{route('save-servicePackage.post')}}" id="myForm"
                              method="post" accept-charset="utf-8">
                            <!-- SmartWizard html -->

                            {{csrf_field()}}

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="diagnostic_test_name" class="col-md-4">Servie Category</label>
                                        <div class="col-md-8">
                                            {!! Form::select('service_category_id',
                                                      $service_categories
                                                      ,null, ['class'=> 'form-control','placeholder'=>
                                                      'Please Select Category', 'id'=>'sc']) !!}
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="diagnostic_test_name" class="col-md-4">Service Report
                                            Category</label>
                                        <div class="col-md-8">
                                            {!! Form::select('service_sub_category_id',
                                                      []
                                                      ,null, ['class'=> 'form-control','placeholder'=>
                                                      'Please Select Sub Category', 'id'=>'ssc']) !!}
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">

                                    <div class="form-group">
                                        <label for="service_package_name" class="col-md-2">Service Package Name</label>
                                        <div class="col-md-10">
                                            {{Form::text("service_package_name",
                                               '',
                                               [
                                                  "class" => "form-control",
                                                  "placeholder" => "Service Package Name",
                                               ])
                                               }}

                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>

                                </div>

                            <hr>

                            <div class="col-md-1">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="service_type" value="service"
                                               checked>
                                        Service
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-1">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="service_type" value="group">
                                        Group
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-10">
                                <div class="form-group text-center">
                                    <div id="search_container">
                                        <input class="form-control typeahead text-center" id="search" name="q"
                                               type="text"
                                               placeholder="Search Service">
                                    </div>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>

                            <div class="col-md-12" style="margin-top: 10px;">
                                <div class="box box-success">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Service</h3>
                                        <!-- /.box-tools -->
                                    </div>
                                    <!-- /.box-header -->
                                    <div class="box-body">
                                        <div id="service_content"></div>
                                    </div>
                                    <!-- /.box-body -->
                                </div>
                                <!-- /.box -->
                            </div>

                            <div class="row">
                                <div id="service_total">
                                    <div class="col-md-12">
                                        <div class="table-responsive pull-right">
                                            <table class="table">
                                                <tbody>
                                                <tr>
                                                    <th>Total:</th>
                                                </tr>
                                                <tr>
                                                    <td id="stotal">0.00</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-info pull-right">Submut</button>
                                </div>
                            </div>

                            <hr>
                        </form>
                        @endcan
                    </div>
                </div>
            </div>
            <div class="box-footer">

            </div>
        </div>
    </section>
@endsection
@section('script')
    <script src="{{URL::to('assets/plugins/typeahead.bundle.js')}}"></script>

    <script>
        var service_type = $("input[name='service_type']:checked").val();
        var baseUrl = '