@extends('layouts.member-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"> Edit units</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!!
                    Form::open(['id'=>'createFloors','class'=>'ajax-form','method'=>'PUT','enctype'=>"multipart/form-data"])
                    !!}
                    <div class="form-body">
                        <h3 class="box-title ">Data units</h3>
                        <hr>
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label class="required">Units Name</label>
                                    <input type="text" name="name" id="name" value="{{ $unit->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" data-style="form-control">
                                        <option value="">--Select Owner--</option>
                                        @forelse($owner as $own)
                                        <option value="{{$own->id}}" {{ $unit->owner_id == $own->id ? 'selected' : ''
                                            }}>{{ $own->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-5">
                                <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}}" {{ $unit->floor->building_id == $build->id ?
                                            'selected' : '' }}>{{ $build->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label class="required">Floor</label>
                                    <select class="form-control select2" name="floor" id="floor"
                                        data-style="form-control">
                                        <option value="">-- Select building first --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                @php
                                $direct = ['south','north', 'east', 'west'];
                                @endphp
                                <div class="form-group">
                                    <label class="required">Direction</label>
                                    <select class="form-control select2" name="direction" id="floor"
                                        data-style="form-control">
                                        @foreach ($direct as $drc)
                                        <option value="{{$drc}}" {{$unit->unit_detail->direction == $drc ? 'selected' :
                                            ''}}>{{$drc}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>No. Unit</label>
                                    <input type="text" name="no_unit" required=""
                                        value="{{$unit->unit_detail->no_unit}}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Width</label>
                                    <input type="text" name="width" required="" class="form-control"
                                        value="{{$unit->unit_detail->width}}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Type</label>
                                    <input type="text" name="type" required="" class="form-control"
                                        {{$unit->unit_detail->type}}>
                                </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">{{$unit->unit_detail->description}}</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('ready', function () {
            var building_id = '{{$unit->floor->building_id}}';
            var url = '{{route('admin.floor.get_floor')}}' + '/' + building_id
            console.log(url);
            $.get(url, function(res) {
                console.log(res)
                $('#floor').html(res).selectpicker('refresh');
            });
        })
        $(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');
            });
        })

        $('#createFloors').on('submit', function (e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.units.update', $unit->id)}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            setTimeout(function() {
            window.location.href = '{{route('admin.units.index')}}';
            }, 100);
            }
            },
            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"]]
            ]
    });
    
    </script>
    @endpush