@extends('app')

@section('extra-css')
    <style type="text/css">
        .select2-container--default .select2-selection--single,
        .select2-selection .select2-selection--single {
            width: 380px;
        }
    </style>
@endsection

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Add Cabin & Ward Service
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Indoor</a></li>
            <li class="active">Add Cabin & Ward Service</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
        <!-- Custom Tabs -->
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#add-ward" data-toggle="tab">Add Ward</a></li>
                <li><a href="#add-cabin" data-toggle="tab">Add Cabin</a></li>
                <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="add-ward">
                    <div class="box box-default">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-12">
                                    @can('ward-cabin-create')
                                    <form action="{{route('save-ward.post')}}" id="myForm"
                                          method="post" accept-charset="utf-8">
                                        <!-- SmartWizard html -->

                                        {{csrf_field()}}

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

                                        <div class="form-group">
                                            <label for="diagnostic_test_name" class="col-md-2">Floor Wise Ward</label>
                                            <div class="col-md-10">
                                                {!! Form::select('service_sub_category_id',
                                                          []
                                                          ,null, ['class'=> 'form-control','placeholder'=>
                                                          'Please Select Ward', 'id'=>'sscw']) !!}
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="form-group" id="firstrow">

                                            <div class="row">
                                                <!-- /.box-header -->
                                                <div class="box-body">

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Seat Name</label>
                                                            <input type="text" class="form-control" name="seat_name"
                                                                   placeholder="Service Name">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Seat Number</label>
                                                            <input type="text" class="form-control" name="seat_number"
                                                                   placeholder="Seat Number">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="exampleInputEmail1">Service Cost</label>
                                                            <input type="text" class="form-control" name="seat_price"
                                                                   placeholder="Service Cost">
                                                        </div>

                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="exampleInputEmail1">Service Sale Cost</label>
                                                            <input type="text" class="form-control"
                                                                   name="seat_sale_price"
                                                                   placeholder="Service Sale Cost">
                                                        </div>

                                                    </div>
                                                </div>
                                                <!-- /.box-body -->
                                            </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>
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="add-cabin">
                    <div class="box box-default">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-12">
                                    @can('ward-cabin-create')
                                    <form action="{{route('save-cabin.post')}}" id="myForm"
                                          method="post" accept-charset="utf-8">
                                        <!-- SmartWizard html -->

                                        {{csrf_field()}}

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

                                        <div class="form-group">
                                            <label for="diagnostic_test_name" class="col-md-2">Seat Count</label>
                                            <div class="col-md-10">
                                                <select name="seat_count">
                                                    <option value="1">One Seat</option>
                                                    <option value="2">Two Seat</option>
                                                    <option value="3">Three Seat</option>
                                                </select>
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>

                                        <div class="form-group" id="firstrow">

                                            <div class="row">
                                                <!-- /.box-header -->
                                                <div class="box-body">

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Cabin Name</label>
                                                            <input type="text" class="form-control" name="cabin_name"
                                                                   placeholder="Service Name">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Seat Code</label>
                                                            <input type="text" class="form-control" name="cabin_code"
                                                                   placeholder="Seat Number">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="exampleInputEmail1">Service Cost</label>
                                                            <input type="text" class="form-control" name="cabin_price"
                                                                   placeholder="Service Cost">
                                                        </div>

                                                    </div>

                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="exampleInputEmail1">Service Sale Cost</label>
                                                            <input type="text" class="form-control"
                                                                   name="cabin_sale_price"
                                                                   placeholder="Service Sale Cost">
                                                        </div>

                                                    </div>
                                                </div>
                                                <!-- /.box-body -->
                                            </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>
                </div>
                <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
        <!-- SELECT2 EXAMPLE -->
            </div>
        </div>
    </section>
@endsection

@section('extra-js')

@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function(){
            //ward query
            $('#scw').change(function () { //any select change on the dropdown with id  trigger this code
                $("#sscw > option").remove(); //first of all clear select items
                var scw_id = $('#scw').val(); // here we are taking  id of the selected one.
                $.ajax({
                    type: "GET",
                    data: {id: scw_id},
                    url: "{{url('diagnostic/get-diagnostic-sscw')}}", //here we are calling our user controller and  method with the id
                    success: function (categories) //we're calling the response json array 'categories'
                    {
                        $.each(categories, function (id, category) //here we're doing a foeach loop round each cat with id as the key and cat as the value
                        {
                            var opt = $('<option />'); // here we're creating a new select option with for each cat
                            opt.val(id);
                            opt.text(category);
                            $('#sscw').append(opt); //here we will append these new select options to a dropdown with the id 'categories'
                        });
                    }
                });
            });
            /*
            $('#scc').change(function () { //any select change on the dropdown with id  trigger this code
                $("#sscc > option").remove(); //first of all clear select items
                var scc_id = $('#scc').val(); // here we are taking  id of the selected one.
                $.ajax({
                    type: "GET",
                    data: {id: scc_id},
                    url: "{{url('diagnostic/get-diagnostic-sscc')}}", //here we are calling our user controller and  method with the id
                    success: function (categories) //we're calling the response json array 'categories'
                    {
                        $.each(categories, function (id, category) //here we're doing a foeach loop round each cat with id as the key and cat as the value
                        {
                            var opt = $('<option />'); // here we're creating a new select option with for each cat
                            opt.val(id);
                            opt.text(category);
                            $('#sscc').append(opt); //here we will append these new select options to a dropdown with the id 'categories'
                        });
                    }
                });
            });
            */
        });
    </script>
@endsection