@extends('layouts.member-app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-6 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-6 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">Unit Detail</li>
        </ol>
    </div>
    <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12 text-right">

        <a href="#" class="btn btn-outline btn-success btn-sm">@lang('modules.lead.edit')
            <i class="fa fa-edit" aria-hidden="true"></i></a>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection


@push('head-script')
<style>
    .custome_hover {
        width: 100%;
        text-decoration: underline;
        display: block;
    }

    .custome_hover:hover {
        background-color: yellowgreen;
    }
</style>

@endpush

@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="white-box">

            <div class="row m-t-20">
                <div class="col-xs-12">
                    <div class="panel">
                        <div class="panel-wrapper collapse in">
                            <div class="panel-body b-all border-radius">
                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="row">
                                            <div class="col-xs-3" style="text-align: center;">
                                                <i class="fa fa-building-o" aria-hidden="true"
                                                    style="font-size: 25px;"></i>
                                                {{-- <img src="#" width="75" height="75" class="img-circle" alt=""> --}}
                                            </div>
                                            <div class="col-xs-9">
                                                <p>
                                                    <span class="font-medium text-info font-semi-bold">{{
                                                        ucwords($building->name) }}</span>
                                                    <br>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

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

        <section>
            <div class="sttabs tabs-style-line">
                <div class="white-box">
                    <nav>
                        <ul class="showClientTabs">
                            <li class="clientProfile active"><a href="#home" data-toggle="tab"><i class="icon-user"></i>
                                    <span>Floor</span></a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="tab-content">
                    <div id="home" class="tab-pane fade in active">
                        <div class="content-wrap">
                            <section id="section-line-1" class="show">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="white-box">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <input type="hidden" id="page_floors" name="page_floors"
                                                            value="1">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <a href="#" class="btn btn-primary btn-sm"
                                                        data-target="#mdl_create_floor" data-toggle="modal"
                                                        style="float:right"><i class="fa fa-plus"></i> Create Floor</a>
                                                </div>
                                            </div>

                                            <div class="table-responsive" id="getTableFloor">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div><!-- /tabs -->
        </section>
    </div>


</div>
<div class="modal fade" id="mdl_create_floor" tabindex="-1" role="dialog" aria-labelledby="mdl_create_floor"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Floor</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'createFloor','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div id="form_floor">
                    <div class="row">
                        <div class="col-lg-11">
                            <div class="form-group">
                                <label>Floor</label>
                                <input type="text" class="form-control input_name_floor" name="name[]">
                                <input type="hidden" name="building_id" value="{{$building->id}}">
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <button class="btn btn-primary btn-sm add_floor" style="margin-top:24px" type="button"><i
                                    class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- .row -->

@endsection

@push('footer-script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    var id = '';
    function getTableFloors() {
        var page = $('#page_floors').val();
        $.get('/admin/getTableFloors/' + id + '?page=' + page, function (res) {
            $('#getTableFloor').html(res)
        })
    }
    getTableFloors()
    $("body").on('click', '.add_floor', function (e) {
        e.preventDefault();
        $("#form_floor").append(`<div class="row">
                        <div class="col-lg-11">
                            <div class="form-group">
                                <label>Floor</label>
                                <input type="text" class="form-control input_name_floor" name="name[]">
                            </div>
                        </div>
                        <button class="btn del_row btn btn-danger btn-sm" type="button" style="margin-top:24px;margin-left: 8px;"><i class="fa fa-trash"></i></button>
                    </div>`);
    })
    $('#form_floor').on('click', '.del_row', function (e) {
        e.preventDefault();
        $(this).parent().remove();
    });
    $('#createFloor').on('submit', function (e) {
        $('#mdl_create_floor').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{route('admin.buildings.store_floor')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.status == 'success') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: data.message,
                        allowOutsideClick: false
                    }).then((result) => {
                        getTableFloors();
                        $('#form_floor').parent().remove()
                        $('.input_name_floor').val('')
                    })
                }
            },
            error: function (data) {

            }
        }, 'json');
    });
    //        $('ul.showClientTabs .clientProfile').addClass('tab-current');
</script>
@endpush