@extends('admin-non-nav')

@section('styles')
    <link href="/assets/css/fileinput.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css"/>

@endsection

@section('content')
    <div class="portlet light bordered" id="form_wizard_1">
        <div class="portlet-title">
            <div class="caption">
                <i class=" icon-layers font-red"></i>
                <span class="caption-subject font-red bold uppercase">Khởi tạo dữ liệu
                                                <span class="step-title"> Bước 1/2 </span>
                                            </span>
            </div>
        </div>
        <div class="portlet-body form">
            <form class="form-horizontal" action="{{ url('admin/dashboard/create-room-type') }}" id="submit_form" method="POST" novalidate="novalidate" enctype="multipart/form-data">
                {!! csrf_field() !!}
                <div class="form-wizard">
                    <div class="form-body">
                        <ul class="nav nav-pills nav-justified steps">
                            <li class="active">
                                <a href="#tab1" data-toggle="tab" class="step" aria-expanded="true">
                                    <span class="number"> 1 </span>
                                    <span class="desc">
                                                                    <i class="fa fa-check"></i> Tạo loại phòng </span>
                                </a>
                            </li>
                            <li>
                                <a href="#tab2" data-toggle="tab" class="step">
                                    <span class="number"> 2 </span>
                                    <span class="desc">
                                                                    <i class="fa fa-check"></i> Tạo nhà trọ, phòng </span>
                                </a>
                            </li>
                        </ul>
                        <div id="bar" class="progress progress-striped" role="progressbar">
                            <div class="progress-bar progress-bar-success" style="width: 25%;"></div>
                        </div>
                        <div class="tab-content">

                            <div class="tab-pane active" id="tab1">
                                <h3 class="block">Cung cấp thông tin loại phòng</h3>

                                <div class="row">
                                    <div class="col-md-10 col-md-offset-2">
                                        <form>
                                            <div class="form-body">
                                                <div class="form-group mt-repeater">
                                                    <div data-repeater-list="group-c">
                                                        <div data-repeater-item="" class="mt-repeater-item">
                                                            <div class="row mt-repeater-row">
                                                                <div class="col-md-3">
                                                                    <label class="control-label">Tên loại phòng
                                                                        trọ</label>
                                                                    <input type="text" placeholder="Điền tên loại phòng"
                                                                           class="form-control"
                                                                           name="room_name" data-pattern-name="name">
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <label class="control-label">Diện tích</label>
                                                                    <input type="number" placeholder="3"
                                                                           class="form-control"
                                                                           name="room_size"></div>

                                                                <div class="col-md-2">
                                                                    <label class="control-label">Giá</label>
                                                                    <input type="number" placeholder="0"
                                                                           class="form-control"
                                                                           name="room_price"></div>
                                                                <div class="col-md-1">
                                                                    <a href="javascript:;" data-repeater-delete=""
                                                                       class="btn btn-danger mt-repeater-delete">
                                                                        <i class="fa fa-close"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-repeater-row">
                                                                <div class="col-md-12">
                                                                    <label class="control-label">Danh sách ảnh</label>
                                                                    <input type="file" class="room-images form-control"
                                                                           multiple name="images"
                                                                           rel="post_status_images">
                                                                </div>
                                                            </div>
                                                            <div class="row mt-repeater-row">
                                                                <div class="col-md-12">
                                                                    <label class="control-label">Tiện ích phòng</label>
                                                                    <div class="mt-checkbox-inline">

                                                                        @php $features = \App\Models\Amenity::publish()->amenity()->get()->chunk(4); @endphp
                                                                        @foreach($features as $feature)
                                                                        <div class="row">

                                                                                @foreach($feature as $item)
                                                                                <div class="col-md-3">
                                                                                    <label class="mt-checkbox">
                                                                                        <input type="checkbox" name="features" value="{{ $item->id }}"><i class="fa {{$item->icon}}"></i> {{ $item->name }}
                                                                                        <span></span>
                                                                                    </label>
                                                                                </div>
                                                                                @endforeach

                                                                        </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="row mt-repeater-row">
                                                                <div class="col-md-9">
                                                                    <label class="control-label">Miêu tả</label>
                                                                    <textarea placeholder="Điền miêu tả" rows="5" class="form-control ckeditor"
                                                                              name="desc"></textarea>
                                                            </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <a href="javascript:;" data-repeater-create=""
                                                       class="btn btn-info mt-repeater-add">
                                                        <i class="fa fa-plus"></i>Thêm loại phòng nữa</a>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>


                            </div>
                            <div class="tab-pane" id="tab2">
                                {{--<h3 class="block">Provide your profile details</h3>--}}

                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <a href="javascript:;" class="btn default button-previous disabled">
                                    <i class="fa fa-angle-left"></i> Back </a>
                                <button type="submit" href="javascript:;" class="btn btn-outline green"> Tiếp tục
                                    <i class="fa fa-angle-right"></i>
                                </button>
                                <a href="javascript:;" class="btn green button-submit"> Submit
                                    <i class="fa fa-check"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script src="/assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>

<script src="/assets/pages/scripts/form-wizard.min.js" type="text/javascript"></script>

<script src="/assets/global/plugins/jquery-repeater/jquery.repeater.js" type="text/javascript"></script>
<script src="/assets/js/fileinput.min.js"></script>
<script src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<script src="/assets/pages/scripts/form-repeater.min.js" type="text/javascript"></script>


<script>
    $(document).ready(function () {

        $(".room-images").fileinput({
            'showUpload': false, 'previewFileType': 'any',
            'showCaption': false
        });

    });

</script>
@endpush