@extends('layouts.member-app')
@push('head-script')
<style>
    .message-item {
        margin-bottom: 25px;
        margin-left: 40px;
        position: relative;
    }

    .message-item .message-inner {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 10px;
        position: relative;
    }

    .message-item .message-inner:before {
        border-right: 10px solid #ddd;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -20px;
        top: 6px;
        width: 0;
    }

    .message-item .message-inner:after {
        border-right: 10px solid #fff;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -18px;
        top: 6px;
        width: 0;
    }

    .message-item:before {
        background: #fff;
        border-radius: 2px;
        bottom: -30px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        content: "";
        height: 100%;
        left: -30px;
        position: absolute;
        width: 3px;
    }

    .message-item:after {
        background: #fff;
        border: 2px solid #ccc;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        content: "";
        height: 15px;
        left: -36px;
        position: absolute;
        top: 10px;
        width: 15px;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .message-item .message-head {
        border-bottom: 1px solid #eee;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .message-item .message-head .avatar {
        margin-right: 20px;
    }

    .message-item .message-head .user-detail {
        overflow: hidden;
    }

    .message-item .message-head .user-detail h5 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }

    .message-item .message-head .post-meta {
        float: left;
        padding: 0 15px 0 0;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    img {
        min-height: 40px;
        max-height: 40px;
    }
</style>


@endpush
@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">Floor 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


@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($unit->name) }}</span>
                                                    <br>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-7 b-l">
                                        <div class="row project-top-stats">

                                            <div class="col-md-6 m-b-20 m-t-10 text-center">
                                                <a href="#" class="btn btn-primary btn-sm" data-toggle="modal"
                                                    data-target="#mdl_edit_unit"><i class="fa fa-pencil"></i> Edit</a>
                                            </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>Detail</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu2"><i class="icon-user"></i>
                                    <span>Tenant</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu3"><i class="icon-user"></i>
                                    <span>Resident</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu1"><i class="icon-user"></i>
                                    <span>Owner</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu5"><i class="icon-book-open"></i>
                                    <span>Billing</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu6"><i class="fa fa-book"
                                        aria-hidden="true"></i> <span>Contract</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-md-4 col-xs-6 b-r"> <strong>Building</strong> <br>
                                                    <p class="text-muted" id="building_name"></p>

                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Floor</strong> <br>
                                                    <p class="text-muted" id="floor_name"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6"> <strong>Direction</strong> <br>
                                                    <p class="text-muted" id="unit_direction"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Type</strong> <br>
                                                    <p class="text-muted" id="unit_type"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 "> <strong>Width</strong> <br>
                                                    <p class="text-muted" id="unit_width"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 "> <strong>Kva Electric</strong> <br>
                                                    <p class="text-muted" id="unit_kva"></p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 col-xs-6 b-r"> <strong>Description</strong> <br>
                                                    <p class="text-muted" id="unit_description"></p>

                                                </div>

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

                                </div>

                            </section>
                        </div>
                    </div>
                    <div id="menu1" class="tab-pane fade">
                        <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-md-4 col-xs-6 b-r">
                                                    <strong>@lang('modules.employees.fullName')</strong> <br>
                                                    <p class="text-muted" id="owner_name"></p>

                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>@lang('app.email')</strong>
                                                    <br>
                                                    <p class="text-muted" id="owner_email"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6"> <strong>@lang('app.mobile')</strong>
                                                    <br>
                                                    <p class="text-muted" id="owner_mobile"></p>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Gender</strong> <br>
                                                    <p class="text-muted" id="owner_gender"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r">
                                                    <strong>@lang('app.address')</strong> <br>
                                                    <p class="text-muted" id="owner_address"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6"> <strong>Emergency Call</strong> <br>
                                                    <p class="text-muted" id="owner_emergency_call"></p>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Emergency Name</strong> <br>
                                                    <p class="text-muted" id="owner_emergency_name"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>No Police</strong> <br>
                                                    <p class="text-muted" id="owner_no_police"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Transportation Type</strong>
                                                    <br>
                                                    <p class="text-muted" id="owner_transportation_type"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>
                    <div id="menu5" class="tab-pane fade">
                        <div class="content-wrap">
                            <section id="section-line-1" class="show">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="white-box">
                                            <input type="hidden" id="page_billing" name="page_billing" value="1">
                                            <div class="table-responsive" id="table_billings">

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

                                </div>

                            </section>
                        </div>
                    </div>
                    <div id="menu2" class="tab-pane fade">
                        <div class="content-wrap">
                            <section id="section-line-1" class="show">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="white-box" id="profile_tenant">

                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>
                    <div id="menu3" class="tab-pane fade">
                        <div class="content-wrap">
                            <section id="section-line-1" class="show">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="white-box" id="profile_tenant_details">

                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                    <div id="menu6" class="tab-pane fade">
                        <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="container">
                                                <div class="qa-message-list" id="wallmessages">

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

                                </div>

                            </section>
                        </div>
                    </div>
                </div>
            </div><!-- /tabs -->
        </section>
    </div>
</div>
<div class="modal fade" id="mdl_edit_unit" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_unit"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Unit</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'EditUnit','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div id="form_floor">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Unit Name</label>
                                <input type="text" class="form-control" name="name" id="edit_unit_name">
                                <input type="hidden" name="unit_id" value="{{$unit->id}}">
                                <input type="hidden" name="floor_id" value="{{$unit->floor_id}}">
                                <input type="hidden" name="owner_id" value="{{$unit->owner_id}}">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="required">Direction</label>
                                <select class="form-control select2" name="direction" data-style="form-control"
                                    id="edit_direction">
                                    <option value="south">South</option>
                                    <option value="north">North</option>
                                    <option value="east">East</option>
                                    <option value="west">West</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>No. Unit</label>
                                <input type="text" name="no_unit" required="" class="form-control" id="edit_no_unit">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Width</label>
                                <input type="text" name="width" required="" class="form-control" id="edit_width">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Type</label>
                                <input type="text" name="type" required="" class="form-control" id="edit_type">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="required">Description</label>
                                    <textarea name="description" cols="30" rows="4" class="form-control"
                                        id="edit_description"></textarea>
                                </div>
                            </div>
                        </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 getTableBillingsUnit() {
        var page = $('#page_billing').val();
        $.get('/admin/getBillingFromUnit/' + id + '?page=' + page, function (res) {
            $('#table_billings').html(res)
        })
    }
    getTableBillingsUnit();

    function getTimelineContract() {
        $.get('/admin/getAjaxContractFromUnit/' + id + '/unit', function (res) {
            $('#wallmessages').html(res)
        })
    }
    getTimelineContract();
    function getUnit() {
        $.get('/admin/getAjaxUnit/' + id, function (res) {
            $('#building_name').text(res.building_name)
            $('#floor_name').text(res.floor_name)
            $('#unit_width').text(res.width)
            $('#unit_type').text(res.type)
            $('#unit_direction').text(res.direction)
            $('#unit_description').text(res.description)
            $('#owner_name').text(res.owner_name)
            $('#owner_email').text(res.email)
            $('#owner_mobile').text(res.phone)
            $('#owner_gender').text(res.gender)
            $('#owner_address').text(res.address)
            $('#unit_kva').text(res.kva_electric)
            $('#owner_emergency_call').text(res.emergency_call)
            $('#owner_emergency_name').text(res.emergency_name)
            $('#owner_no_police').text(res.no_police)
            $('#owner_transportation_type').text(res.transportation_type)
            $('#edit_unit_name').val(res.name)
            $('#edit_direction').val(res.direction)
            $('#edit_no_unit').val(res.no_unit)
            $('#edit_width').val(res.width)
            $('#edit_type').val(res.type)
            $('#edit_description').text(res.description)

        }, 'json')
    }
    getUnit();
    $('#EditUnit').on('submit', function (e) {
        $('#mdl_edit_unit').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{route('admin.units.ajax_edit_unit')}}',
            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');
    });

    $.get('/admin/get_current_tenant_from_unit/' + id, function (res) {
        if (typeof res.tenant.name !== 'undefined') {
            $('#profile_tenant').html(`<div class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Fullname</strong> <br>
                                                    <p class="text-muted">` + res.tenant.name + `</p>

                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Email</strong> <br>
                                                    <p class="text-muted">` + res.tenant.email + `</p>
                                                </div>
                                                <div class="col-md-4 col-xs-6"> <strong>Phone</strong> <br>
                                                    <p class="text-muted">` + res.tenant.phone + `</p>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Gender</strong> <br>
                                                    <p class="text-muted">` + res.tenant.gender + `</p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Address</strong> <br>
                                                    <p class="text-muted">` + res.tenant.address + `</p>
                                                </div>
                                                <div class="col-md-4 col-xs-6"> <strong>Emergency Call</strong> <br>
                                                    <p class="text-muted">` + res.tenant.emergency_call + `</p>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Emergency Name</strong> <br>
                                                    <p class="text-muted">` + res.tenant.emergency_name + `</p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>No Police</strong> <br>
                                                    <p class="text-muted">` + res.tenant.no_police + `</p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Transportation Type</strong> <br>
                                                    <p class="text-muted">` + res.tenant.transportation_type + `</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Start Date</strong> <br>
                                                    <p class="text-muted">` + res.tenant.start_date + `</p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Due Date</strong> <br>
                                                    <p class="text-muted">` + res.tenant.due_date + `</p>
                                                </div>

                                            </div>`)
        } else {
            $('#profile_tenant').html(`<div class="alert alert-warning text-center">Tidak ada data penyewa</div>`)
        }
        if (res.tenant_details.length > 0) {
            var html = '';
            $.each(res.tenant_details, function (index, value) {
                var status = '-';
                html += `<div class="row">
                                                        <div class="col-md-4 col-xs-6 b-r"> <strong>Name</strong> <br>
                                                            <p class="text-muted">` + value.name + `</p>

                                                        </div>
                                                        <div class="col-md-4 col-xs-6 b-r"> <strong>Gender</strong> <br>
                                                            <p class="text-muted">` + value.gender + `</p>
                                                        </div>`;
                if (value.type == 0) {
                    status = 'Penghuni';
                    html += ` <div class="col-md-4 col-xs-6"> <strong>Family Relationship</strong> <br>
                                                                <p class="text-muted">` + value.family_relationship + `</p>
                                                            </div>`;
                } else {
                    html += `<div class="col-md-4 col-xs-6"> <strong>Position</strong> <br>
                                                                <p class="text-muted">` + value.position + `</p>
                                                            </div>`;
                    status = 'Pekerja';
                }
                html += `</div>
                                                    <div class="row">
                                                        <div class="col-md-4 col-xs-6 b-r"> <strong>Religion</strong> <br>
                                                            <p class="text-muted">` + value.agama + `</p>

                                                        </div>
                                                        <div class="col-md-4 col-xs-6 b-r"> <strong>Status</strong> <br>
                                                            <p class="text-muted">` + value.status + `</p>
                                                        </div>
                                                        <div class="col-md-4 col-xs-6"> <strong>Resident As</strong> <br>
                                                            <p class="text-muted">` + status + `</p>
                                                        </div>
                                                    </div>
                                                    <hr>`;
            });
            $('#profile_tenant_details').html(html);
        } else {
            $('#profile_tenant_details').html(`<div class="alert alert-warning text-center">Tidak ada data penghuni</div>`)
        }
    }, 'json')
    //        $('ul.showClientTabs .clientProfile').addClass('tab-current');
</script>
@endpush