@extends('layouts.app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.units.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">@lang('app.addNew')</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/summernote/dist/summernote.css') }}">
<style>
    .salutation .form-control {
        padding: 2px 2px;
    }

    .select-category button {
        background-color: white !important;
        font-size: 13px;
        color: #565656;
        border: 1px solid #e4e7ea !important;
    }

    .select-category button:hover {
        color: #565656;
        opacity: 1;
    }

    .bootstrap-select .dropdown-toggle:focus {
        outline: none !important;
    }
</style>

@endpush

@section('content')

<div class="row">
    <div class="col-xs-12">

        <div class="panel panel-inverse">
            <div class="panel-heading"> Create units</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!!
                    Form::open(['id'=>'createUnits','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
                    !!}
                    <div class="form-body">
                        <h3 class="box-title ">Data units</h3>
                        <hr>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Units Name</label>
                                    <input type="text" name="name" id="name" required="" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Owner</label>
                                    <select class="form-control select2" name="owner" id="search_owner"
                                            data-style="form-control">
                                        <option value="">--Select Owner--</option>
                                        @forelse($owner as $own)
                                        <option value="{{$own->id}}">{{ $own->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>No. Unit</label>
                                    <input type="text" name="no_unit" required="" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Building</label>
                                    <select class="form-control select2" name="building" id="building"
                                            data-style="form-control">
                                        <option value="">--Select Building--</option>
                                        @forelse($building as $build)
                                        <option value="{{$build->id}}">{{ $build->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Floor</label>
                                    <select class="form-control select2" name="floor_id" id="floor"
                                            data-style="form-control">
                                        <option value="">-- Select building first --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Direction</label>
                                    <select class="form-control select2" name="direction" data-style="form-control">
                                        <option value="south">South</option>
                                        <option value="north">North</option>
                                        <option value="east">East</option>
                                        <option value="west">West</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Type</label>
                                    <select class="form-control select2" name="type_id" id="type_id" required="">
                                        <option value="">-- Select Type --</option>
                                                                            </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>Width</label>
                                    <input type="text" class="form-control" readonly="" id="type_width">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>Electric (KVA)</label>
                                    <input type="number" class="form-control" readonly="" id="type_electric">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="required">Description</label>
                                    <textarea name="description" cols="30" rows="4" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" id="save-form" class="btn btn-success"> <i class="fa fa-check"></i>
                                @lang('app.save')</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

    @push('footer-script')
    <script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/summernote/dist/summernote.min.js') }}"></script>

    <script>
        var APP_URL = {!! json_encode(url('/')) !!}
        $(document).on('change', '#building', function () {
        var building_id = $(this).val();
        var url = '{{route('admin.floor.get_floor')}}' + '/' + building_id
                console.log(url);
        $.get(url, function(res) {
        console.log(res)
                $('#floor').html(res).selectpicker('refresh');
        });
        })

        $('#createUnits').on('submit', function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: '{{route('admin.buildings.store_unit')}}',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status == 'success') {
                        window.location.href = '/admin/units'
                    }
                },
                error: function (data) {

                }
            }, 'json');
        });
        $('.summernote').summernote({
        height: 200, // set editor height
                minHeight: null, // set minimum height of editor
                maxHeight: null, // set maximum height of editor
                focus: false,
                toolbar: [
                        // [groupName, [list of button]]
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough']],
                ['fontsize', ['fontsize']],
                ['para', ['ul', 'ol', 'paragraph']],
                ["view", ["fullscreen"]]
                ]
        });
        
        $('#type_id').on('change', function () {
            var x = $(this).val();
            console.log(x)
            if (x != '') {
                $.get('/admin/detail_type/' + x, function (res) {
                    $('#type_width').val(res.width)
                    $('#type_electric').val(res.kva_electric)
                }, 'json')
            } else {
                $('#type_width').val('')
                $('#type_electric').val('')
            }
        })

    </script>
    @endpush