@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/clockface/css/clockface.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" />
@endsection

@section('page-content-wrapper')
    <div class="page-content-wrapper" id="main">
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
            {{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
            </h3>
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('manage::index')}}">@lang('messages.homepage')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="javascript:;">@lang('messages.neighbor_hood')</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{action('HomeServiceController@index')}}">@lang('messages.home_service')</a>
                    </li>
                </ul>
                <div class="page-toolbar">

                </div>
            </div>
            <!-- END PAGE HEADER-->
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN EXAMPLE TABLE PORTLET-->
                    <div class="portlet light bordered">
                        <div class="portlet-body">
                            <div class="table-toolbar">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="btn-group">
                                            <a id="btn_add_home_service" href="javascript:;" class="btn green">
                                             @lang('messages.add') <i class="fa fa-plus icon-black"></i></a>
                                        </div>
                                    </div>
									<div  class="col-md-6">
										<button id="btn_tag" class="btn blue pull-right"> @lang('messages.item_manage') <i class="fa fa-cog"></i></button>
									</div>
                                </div>
                            </div>
                            <table class="table table-striped table-bordered table-hover" id="table_home_service">
                            <thead>
                            <tr>
                                <th class="table-checkbox">
									<input type="checkbox" class="group-checkable" data-set="#table_home_service .checkboxes"/>
								</th>
								<th>
									 @lang('messages.service_item')
								</th>
								<th>
									 @lang('messages.reserved_time')
								</th>
								<th>
									 @lang('messages.reserver')
								</th>
								<th>
									 @lang('messages.contact_tel')
								</th>
								<th>
									 @lang('messages.people_number')
								</th>
								<th>
									 @lang('messages.status')
								</th>
								<th style="width:8%">
									 @lang('messages.action')
								</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($home_services as $home_service)
                            <tr class="odd gradeX">
                                <td>
                                    <input type="checkbox" class="checkboxes" value="{{$home_service->id}}"/>
                                </td>
                                <td>
                                    {{$home_service->service}}
                                </td>
                                <td>
                                    {{$home_service->time}}
                                </td>
                                <td>
                                    {{$home_service->name}}
                                </td>
                                <td>
                                    {{$home_service->phone}}
                                </td>
                                <td>
                                    {{$home_service->peoples}}
                                </td>
                                <td>
									@if($home_service->status == '0')
									<span class="label label-sm label-danger"> @lang('messages.not_process') </span>
									@elseif($home_service->status == '1')
									<span class="label label-sm label-warning"> @lang('messages.in_process') </span>
									@elseif($home_service->status == '3')
									<span class="label label-sm label-default"> @lang('messages.canceled') </span>
									@elseif($home_service->status == '2')									
									<span class="label label-sm label-success"> @lang('messages.process_done') </span>
									@endif
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                        @lang('messages.action') <i class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu pull-right" role="menu">
                                            <!-- <li>
                                                <a class="btn_view_home_service"  url="{{ action('HomeServiceController@show' , ['id'=>$home_service->id]) }}">
                                                <i class="fa fa-eye"></i>
                                                @lang('messages.query_deal') </a>
                                            </li> -->
                                            <li>
                                                <a id="btn_view" href="{{action('HomeServiceController@view',['id' => $home_service->id]) }}">
                                                <i class="fa fa-eye"></i>
                                                詳細資料</a>
                                            </li>
                                            <li>
                                                <a class="btn_edit_home_service" url="{{ action('HomeServiceController@edit' , ['id'=>$home_service->id]) }}">
                                                <i class="fa fa-pencil"></i>
                                                @lang('messages.edit') </a>
                                            </li>
                                            <li class="divider">
                                            </li>
                                            <li>
                                                <a class="btn_delete_home_service" uid="{{$home_service->id}}" href="javascript:;">
                                                <i class="fa fa-trash-o"></i>
                                                @lang('messages.del') </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- END EXAMPLE TABLE PORTLET-->
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>

    <div class="modal" id="modal_add_home_service" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <form id="form_add_home_service" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">@lang('messages.create_home_service_reservation')</h4>
                </div>
                <div class="modal-body form">
                    <!-- BEGIN FORM-->
                        <div class="form-body">
                            <div id="form_add_home_service_error" class="alert alert-danger display-hide">
                                <button class="close" data-close="alert"></button>
                                @lang('messages.col_invalid')
                            </div>
                            <div id="form_add_home_service_success" class="alert alert-success display-hide">
                                <button class="close" data-close="alert"></button>
                                @lang('messages.add_success')
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.service_item')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <select name="service" class="form-control select2me" data-placeholder="@lang('messages.select_service_item')">
                                        @foreach($service_items as $one)
                                        <option value="{{$one}}">{{$one}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.reserver')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <select name="user_id" class="form-control select2me" data-placeholder="@lang('messages.select_agent_reserver')">
                                        <option value=""></option>
                                        @foreach($users as $user)
                                        <option value="{{$user->id}}" uname="{{$user->name}}" uphone="{{$user->mobile}}">{{$user->name}}({{$user->username}})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.name')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <input name="name" type="text" class="form-control" placeholder="@lang('messages.keyin_name')">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.tel2')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <input name="phone" type="text" class="form-control" placeholder="@lang('messages.keyin_tel')">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.people_number')</label>
                                <div class="col-md-8">
                                    <input name="peoples" type="text" class="form-control" placeholder="@lang('messages.enter_people_number')">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.reserved_time')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <div class="input-group date form_datetime">
                                        <input name="time" type="text" size="16" readonly class="form-control">
                                        <span class="input-group-btn">
                                        <button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.other_desc')</label>
                                <div class="col-md-8">
                                    <textarea name="info" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            
                            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="status" value="0" />
                        </div>
                    <!-- END FORM-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
                    <button type="submit" class="btn blue">@lang('messages.add')</button>
                </div>
            </div>
            </form>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal" id="modal_edit_home_service"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <form id="form_edit_home_service" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">@lang('messages.edit_community_reservation')</h4>
                </div>
                <div class="modal-body form">
                    <!-- BEGIN FORM-->
                        <div class="form-body">
                            <div id="form_edit_home_service_error" class="alert alert-danger display-hide">
                                <button class="close" data-close="alert"></button>
                                @lang('messages.col_invalid')
                            </div>
                            <div id="form_edit_home_service_success" class="alert alert-success display-hide">
                                <button class="close" data-close="alert"></button>
                                @lang('messages.add_success')
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.service_item')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <select name="service" class="form-control select2me" data-placeholder="@lang('messages.select_service_item')">
                                        @foreach($service_items as $one)
                                        <option value="{{$one}}">{{$one}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.reserver')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <select name="user_id" class="form-control select2me" data-placeholder="@lang('messages.select_agent_reserver')">
                                        <option value=""></option>
                                        @foreach($users as $user)
                                        <option value="{{$user->id}}" uname="{{$user->name}}" uphone="{{$user->mobile}}">{{$user->name}}({{$user->username}})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.name')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <input name="name" type="text" class="form-control" placeholder="@lang('messages.keyin_name')">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.tel2')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <input name="phone" type="text" class="form-control" placeholder="@lang('messages.keyin_tel')">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.people_number')</label>
                                <div class="col-md-8">
                                    <input name="peoples" type="text" class="form-control" placeholder="@lang('messages.enter_people_number')">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.reserved_time')<span class="required" aria-required="true"> * </span></label>
                                <div class="col-md-8">
                                    <div class="input-group date form_datetime">
                                        <input name="time" type="text" size="16" readonly class="form-control">
                                        <span class="input-group-btn">
                                        <button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.other_desc')</label>
                                <div class="col-md-8">
                                    <textarea name="info" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <input type="hidden" name="status" value="0" />
                            <input type="hidden" name="id" />
                            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                        </div>
                    <!-- END FORM-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
                    <button type="submit" class="btn blue">@lang('messages.save')</button>
                </div>
            </div>
            </form>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal" id="modal_view_home_service" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="portlet box grey-gallery">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-ticker"></i>@lang('messages.home_service_reserve')
                    </div>
                    <div class="actions">
                        {{--
                        <a id="btn_unhandle_home_service" class="btn btn-default btn-sm" style="display:none;">
                        <i class="fa fa-remove"></i> @lang('messages.cancel_deal') </a>
                        --}}
                        <a id="btn_handle_home_service" class="btn btn-default btn-sm">
                        <i class="fa fa-check"></i> @lang('messages.submit_deal') </a>
                    </div>
                </div>
                <div class="portlet-body" id="div_view_home_service">
                    <div class="scroller" style="height:70%" data-rail-visible="1" data-rail-color="grey" data-handle-color="#a1b2bd">
                        <input type="hidden" id="uid">
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.service_item'):</span>
                            </div>
                            <div class="col-md-8 name view_input" name="service">
                                
                            </div>
                        </div>
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.service_item'):</span>
                            </div>
                            <div class="col-md-8 name view_input" name="user_id">
                                
                            </div>
                        </div>
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.name'):</span>
                            </div>
                            <div class="col-md-8 name view_input" name="name">
                                
                            </div>
                        </div>
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.contact_tel'):</span>
                            </div>
                            <div class="col-md-8 name view_input" name="phone">
                                
                            </div>
                        </div>
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.people_number'):</span>
                            </div>
                            <div class="col-md-8 name view_input" name="peoples">
                                
                            </div>
                        </div>
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.reserved_time'):</span>
                            </div>
                            <div class="col-md-8 name view_input" name="time">
                                
                            </div>
                        </div>
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.other_desc'):</span>
                            </div>
                            <div class="col-md-8 name view_input" name="info">
                                
                            </div>
                        </div>
                        <div class="row static-info">
                            <div class="col-md-3 value">
                                <span class="pull-right">@lang('messages.deal_desc'):</span>
                            </div>
                            <div class="col-md-8">
                                <div id="input_handle"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
    <div class="modal" id="modal_home_service_items"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">@lang('messages.service_item')</h4>
                </div>
                <div class="modal-body">
                    <!-- BEGIN FORM-->
                    <form id="form_home_service_items" class="form-horizontal">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">@lang('messages.service_item')</label>
                                <div class="col-md-9">
                                <input name="tags" class="tagsinput" type="text" value="{{$service_items_str}}" data-role="tagsinput"> 
                                </div>
                            </div>
                            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9">
                                    <button id="btn_home_service_items_submit" type="button" class="btn green">
                                        <i class="fa fa-check"></i> @lang('messages.save')</button>
                                    <button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- END FORM-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
        
    <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/clockface/js/clockface.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}"></script>


<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>
@endsection

@section('js_page_level')
<script>
$(document).ready(function(){
    $('.tagsinput').tagsinput();
    $(".form_datetime").datetimepicker({autoclose:true});
    $('#table_home_service').dataTable({
        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        "language": {
		    "aria": {
		        "sortAscending": ": activate to sort column ascending",
		        "sortDescending": ": activate to sort column descending"
		    },
		    "emptyTable": "@lang('messages.datatable_no_data')",
		    "info": "@lang('messages.display_from') _START_ @lang('messages.display_to') _END_ @lang('messages.then_total') _TOTAL_ @lang('messages.records')",
		    "infoEmpty": "@lang('messages.no_match')",
		    "infoFiltered": "(@lang('messages.from') _MAX_ @lang('messages.records_filter'))",
		    "lengthMenu": "@lang('messages.show') _MENU_ @lang('messages.records')",
		    "search": "@lang('messages.quick_filter'):",
		    "zeroRecords": "@lang('messages.no_data')",
		    "paginate": {
		        "previous":"@lang('messages.last_page')",
		        "next": "@lang('messages.next_page')",
		        "last": "@lang('messages.lastest')",
		        "first": "@lang('messages.most_previous')"
		    }
		},

        "lengthMenu": [
            [10, 20, 50, -1],
            [10, 20, 50, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 10,            
        "pagingType": "bootstrap_full_number",
        "columnDefs": [{  // set default column settings
            'orderable': false,
            'targets': [0]
        }, {
            "searchable": false,
            "targets": [0]
        }]
    });

    $(document).on('click','#btn_add_home_service',function(){
        $('#modal_add_home_service').modal('show');
    });

    $(document).on('click','#btn_tag',function(){
        $('#modal_home_service_items').modal('show');
    });
    
    $('#form_add_home_service').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
        rules:{
            service:{
                required:true,
            },
            user_id:{
                required:true,
            },
            name:{
                required:true,
            },
            phone:{
                required:true,
            },
            time:{
                required:true,
            }
        },
        messages:{
            service:{
				required:'@lang('messages.at_least_one_service_item')',
			},
			user_id:{
				required:'@lang('messages.at_least_one_reserver')',
			},
			name:{
				required:'@lang('messages.enter_reserver_name')',
			},
			phone:{
				required:'@lang('messages.enter_reserver_tel')',
			},
			time:{
				required:'@lang('messages.select_service_time')',
			}
        },

        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('#form_add_home_service_success').hide();
            $('#form_add_home_service_error').show();
            $('.modal').scrollTop($('#form_add_home_service_error'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
            //確認表單正確，Ajax送出
            $.ajax({
				type: 'POST',
				dataType: 'json',
				url: "{{ action('HomeServiceController@store') }}",
				data: $('#form_add_home_service').serialize(),
				success: function(sendback){
					$('#modal_add_home_service').modal('hide');
					window.location.reload();
				},
				error   : function ( data ){
		            toastr['error']('@lang('messages.save_fail_and_retry')');
		        }
			});
        }
    });

    $(document).on('click','.btn_edit_home_service',function(){
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: $(this).attr('url'),
            success: function(sendback){
                $.each(sendback, function (key, data) {
                    $( "#form_edit_home_service input[name='"+key+"']").attr('value',data);
                    if(key == 'user_id' || key == 'service'){
                        $( "#form_edit_home_service select[name='"+key+"']").select2('val', data);
                    }
                });

                $('#modal_edit_home_service').modal('show');
            },
            error:function(sendback){
                toastr['error']('@lang('messages.sys_error_f5_try')');
            }
        });
    });

    // $(document).on('click','.btn_view_home_service',function(){
    //     $.ajax({
    //         type: 'GET',
    //         dataType: 'json',
    //         url: $(this).attr('url'),
    //         success: function(sendback){
    //             $.each(sendback, function (key, data) {
    //                 $( "#div_view_home_service .view_input[name='"+key+"']").html(data);
    //                 if(key == 'id'){
    //                     $('#uid').val(data);
    //                 }
    //                 if(key == 'handle' && data != ''){
    //                     $('#input_handle').html(data);
    //                 }
    //                 if(key == 'status'){
    //                     if(data == 1){
    //                         $('#btn_unhandle_home_service').show();
    //                     }
    //                     else{
    //                         $('#btn_unhandle_home_service').hide();
    //                     }
    //                 }
    //             });

    //             $('#modal_view_home_service').modal('show');
    //         },
    //         error:function(sendback){
    //             toastr['error']('@lang('messages.sys_error_f5_try')');
    //         }
    //     });
    // });

    $('#form_edit_home_service').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
        rules:{
            service:{
                required:true,
            },
            user_id:{
                required:true,
            },
            name:{
                required:true,
            },
            phone:{
                required:true,
            },
            time:{
                required:true,
            }
        },
        messages:{
			service:{
				required:'@lang('messages.at_least_one_service_item')',
			},
			user_id:{
				required:'@lang('messages.at_least_one_reserver')',
			},
			name:{
				required:'@lang('messages.enter_reserver_name')',
			},
			phone:{
				required:'@lang('messages.enter_reserver_tel')',
			},
			time:{
				required:'@lang('messages.select_service_time')',
			}
        },

        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('#form_edit_home_service_success').hide();
            $('#form_edit_home_service_error').show();
            $('.modal').scrollTop($('#form_edit_home_service_error'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
            //確認表單正確，Ajax送出
            $.ajax({
                type: 'PUT',
                dataType: 'json',
                url: "{{ action('HomeServiceController@update', ['home_service' => '']) }}/" + $('#form_edit_home_service').find('[name="id"]').val(),
                data: $('#form_edit_home_service').serialize(),
                success: function(sendback){
                    $('#modal_edit_home_service').modal('hide');
                    window.location.reload();
                },
                error   : function ( data ){
                    toastr['error']('@lang('messages.sys_writein_fail_f5_try')');
                }
            });
        }
    });

    $(document).on('click','.btn_delete_home_service',function(){
        var id = $(this).attr('uid');
        bootbox.confirm("@lang('messages.sure_del_item')?", function(result) {
            if(result == true){
                $.ajax({
                    type : 'DELETE',
                    dataType : 'json',
                    url  : "{{ action('HomeServiceController@destroy',['id'=>'']) }}/"+id,
                    data : {
                        _token   : $('#_token').val(),
                        id       : id
                    },
                    success : function(sendback){
                        window.location.reload();
                    },
                    error : function(sendback){
                        toastr['error']('@lang('messages.del_fail')');
                    }
                })
            }
        }); 
    });

    $('#form_add_home_service select[name="user_id"]').change(function(){
        var name = $('option:selected', this).attr('uname');
        var phone = $('option:selected', this).attr('uphone');
        $('#form_add_home_service input[name="name"]').val(name);
        $('#form_add_home_service input[name="phone"]').val(phone);
    });

    $('#form_edit_home_service select[name="user_id"]').change(function(){
        var name = $('option:selected', this).attr('uname');
        var phone = $('option:selected', this).attr('uphone');
        $('#form_edit_home_service input[name="name"]').val(name);
        $('#form_edit_home_service input[name="phone"]').val(phone);
    });

    $(document).on('click' , '#btn_handle_home_service' , function(){
        $.ajax({
            type: 'POST',
            dataType: 'text',
            url: "{{action('ConsoleController@handleHomeService')}}",
            data:{
                _token : $('#_token').val(),
                id : $('#uid').val(),
                handle : $('#input_handle').val()
            },
            success: function(sendback){
                window.location.reload();
            },
            error:function(sendback){
                toastr['error']('@lang('messages.sys_error_f5_try')');
            }
        });
    });

    $(document).on('click' , '#btn_unhandle_home_service' , function(){
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: "",
            data:{
                _token : $('#_token').val(),
                id : $('#uid').val(),
                handle : $('#input_handle').val()
            },
            success: function(sendback){
                window.location.reload();
            },
            error:function(sendback){
                toastr['error']('@lang('messages.sys_error_f5_try')');
            }
        });
    });
    
    $(document).on('click','#btn_home_service_items_submit',function(){
        $.ajax({
            type : 'POST',
            dataType: 'json',
            url  : '{{action('HomeServiceController@updateItems')}}',
            data : $('#form_home_service_items').serialize(),
            success : function(sendback){
                toastr['success']('@lang('messages.update_success')');
                window.location.reload();
            },
            error : function(sendback){
				toastr['error']('@lang('messages.sys_error_f5_try')');
            }
        })
    });
});

</script>
@endsection