@extends('layouts.app')
@push('head-script')
<style>
    .clientProjects.active{
        border-bottom:2px solid #9D3293;
    }
    .tabs-style-line nav a{
        box-shadow: none !important;
    }
    .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="clientProjects 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>Tenant Resident</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu4"><i class="icon-user"></i> <span>Owner 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 class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Last Login</strong> <br>
                                                    <p class="text-muted" id="owner_last_login"></p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Agree TNC</strong> <br>
                                                    <p class="text-muted" id="owner_agree_tnc"></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="menu4" 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_owner_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>

<div class="modal fade" id="mdl_add_resident" tabindex="-1" role="dialog" aria-labelledby="mdl_add_resident" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Resident</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'CreateResident','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="hidden" name="tenant_id" id="tenant_owner_id">
                            <input type="hidden" id="is_owner_resident">
                            <input type="text" class="form-control" name="name" required="">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="number" class="form-control" name="phone" required="">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" name="email" id="input_email_resident" required="">
                            <small style="color:red" id="message_email_double"></small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Jenis Kelamin</label>
                            <select name="jenis_kelamin" class="form-control">
                                <option value="male">Laki Laki</option>
                                <option value="female">Perempuan</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Hubungan Keluarga</label>
                            <input type="text" class="form-control" name="hubungan_keluarga" required="">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Agama</label>
                            <select name="agama_keluarga" class="form-control" required="">
                                <option value="">-- Pilih Agama --</option>
                                <option value="Islam">Islam</option>
                                <option value="Kristen">Kristen</option>
                                <option value="Khatolik">Khatolik</option>
                                <option value="Hindu">Hindu</option>
                                <option value="Buddha">Buddha</option>
                                <option value="Khonghucu">Khonghucu</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Type Resident</label>
                            <select name="type_resident" class="form-control" id="type_resident" required="">
                                <option value="">-- Type Resident --</option>
                                <option value="0">Penghuni</option>
                                <option value="1">Pekerja</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6" id="position_resident" style="display:none">
                        <div class="form-group">
                            <label>Position</label>
                            <input type="text" class="form-control" name="position" id="position_input">
                        </div>
                    </div>
                    <div class="col-md-6" id="status_resident" style="display:none">
                        <div class="form-group">
                            <label>Status</label>
                            <input type="text" class="form-control" name="status" id="status_input">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label>Photo</label>
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                    <img src="http://via.placeholder.com/200x150.png?text=Photo"
                                         alt=""/>
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new"> @lang('app.selectImage') </span>
                                        <span class="fileinput-exists"> @lang('app.change') </span>
                                        <input type="file" id="att_ksk" name="attachment"> </span>
                                    <a href="javascript:;" class="btn btn-danger fileinput-exists"
                                       data-dismiss="fileinput"> @lang('app.remove') </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1" name="allow_login" value="Y" onclick="myFunctionLoginDetails()">
                            <label class="form-check-label" for="exampleCheck1">Allow Login Apps</label>
                        </div>
                    </div>
                    <div class="col-md-6" id="form_send_login_details" style="display:none">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck2" name="send_email" value="Y">
                            <label class="form-check-label" for="exampleCheck2">Send Login Details Via Email</label>
                        </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" id="btn_submit_resident">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<div class="modal fade" id="mdl_edit_resident" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_resident" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Resident</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'EditResident','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="hidden" name="id" id="edit_resident_id">
                            <input type="text" class="form-control" name="name" required="" id="edit_name_resident">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="number" class="form-control" name="phone" required="" id="edit_phone_resident">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" name="email" id="edit_email_resident" required="">
                            <small style="color:red" id="message_email_double_edit"></small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Jenis Kelamin</label>
                            <select name="jenis_kelamin" class="form-control" id="edit_jenis_kelamin">
                                <option value="male">Laki Laki</option>
                                <option value="female">Perempuan</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Hubungan Keluarga</label>
                            <input type="text" class="form-control" name="hubungan_keluarga" required="" id="edit_hubungan_keluarga">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Agama</label>
                            <select name="agama_keluarga" class="form-control" required="" id="edit_agama">
                                <option value="">-- Pilih Agama --</option>
                                <option value="Islam">Islam</option>
                                <option value="Kristen">Kristen</option>
                                <option value="Khatolik">Khatolik</option>
                                <option value="Hindu">Hindu</option>
                                <option value="Buddha">Buddha</option>
                                <option value="Khonghucu">Khonghucu</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Type Resident</label>
                            <select name="type_resident" class="form-control" id="type_resident_edit" required="">
                                <option value="">-- Type Resident --</option>
                                <option value="0">Penghuni</option>
                                <option value="1">Pekerja</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6" id="position_resident_edit" style="display:none">
                        <div class="form-group">
                            <label>Position</label>
                            <input type="text" class="form-control" name="position" id="position_input_edit">
                        </div>
                    </div>
                    <div class="col-md-6" id="status_resident_edit" style="display:none">
                        <div class="form-group">
                            <label>Status</label>
                            <input type="text" class="form-control" name="status" id="status_input_edit">
                        </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" id="btn_submit_resident">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- .row -->

@endsection

@push('footer-script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
                                var id = '';
                                var owner_user_id = '';
                                var tenant_user_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) {
                                        var agree_tnc = 'NEW';
                                        if (res.agree_tnc == 'N') {
                                            agree_tnc = 'NEW';
                                        } else if (res.agree_tnc == 'A') {
                                            agree_tnc = 'Yes,' + res.agree_tnc_date + ',' + res.agree_tnc_ip;
                                        } else {
                                            agree_tnc = 'Not Agree,' + res.agree_tnc_date + ',' + res.agree_tnc_ip;
                                        }
                                        $('#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)
                                        $("#owner_last_login").text(res.last_login)
                                        $('#owner_agree_tnc').text(agree_tnc)

                                    }, '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') {
                                        var agree_tnc = 'NEW';
                                        if (res.tenant.agree_tnc == 'N') {
                                            agree_tnc = 'NEW';
                                        } else if (res.tenant.agree_tnc == 'A') {
                                            agree_tnc = 'Yes,' + res.tenant.agree_tnc_date + ',' + res.tenant.agree_tnc_ip;
                                        } else {
                                            agree_tnc = 'Not Approve,' + res.tenant.agree_tnc_date + ',' + res.tenant.agree_tnc_ip;
                                        }
                                        $('#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 class="col-md-4 col-xs-6 b-r"> <strong>Last Login</strong> <br>
                                                    <p class="text-muted">` + res.tenant.last_login + `</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 col-xs-6 b-r"> <strong>Agree TNC</strong> <br>
                                                    <p class="text-muted">` + agree_tnc + `</p>
                                                </div>
                                            </div>`)
                                    } else {
                                        $('#profile_tenant').html(`<div class="alert alert-warning text-center">Tidak ada data penyewa</div>`)
                                    }
                                }, 'json')

                                $("#mdl_add_resident").on('show.bs.modal', function (e) {
                                    var x = $(e.relatedTarget);
                                    var type = x.data('type');
                                    $('#tenant_owner_id').val(x.data('tenant_id'))
                                    $('#is_owner_resident').val(type)
                                    console.log(type)
                                })

                                $('#CreateResident').on('submit', function (e) {
                                    var is_owner = $('#is_owner_resident').val();
                                    $('#mdl_add_resident').modal('hide');
                                    e.preventDefault();
                                    $.blockUI({message: '<h4><img src="/img/loader.gif" /> Proses Create Resident...</h4>'});
                                    var formData = new FormData(this);
                                    $.ajax({
                                        type: 'POST',
                                        url: '/admin/workorders/add_resident?is_owner=' + is_owner,
                                        data: formData,
                                        cache: false,
                                        contentType: false,
                                        processData: false,
                                        success: function (data) {
                                            $(document).ajaxStop($.unblockUI);
                                            if (data.status == 'success') {
                                                Swal.fire({
                                                    icon: 'success',
                                                    title: 'Success',
                                                    text: data.message,
                                                    allowOutsideClick: false
                                                }).then((result) => {
                                                    getResidentOwner();
                                                    getResidentTenant();
                                                })
                                            }
                                        },
                                        error: function (data) {

                                        }
                                    }, 'json');
                                });


                                function getResidentOwner() {
                                    $.get('/admin/clients/get_ajax_residents/' + owner_user_id + '/' + 1, function (res) {
                                        $('#profile_owner_details').html(res);
                                    })
                                }
                                getResidentOwner();
                                function getResidentTenant() {
                                    $.get('/admin/clients/get_ajax_residents/' + tenant_user_id + '/' + 0, function (res) {
                                        $('#profile_tenant_details').html(res);
                                    })
                                }
                                getResidentTenant();
                                function myFunctionLoginDetails() {
                                    var checkBox = $("#exampleCheck1");
                                    if (checkBox.is(":checked") == true) {
                                        $('#form_send_login_details').show()
                                        $('#exampleCheck2').attr('required', true)
                                    } else {
                                        $('#form_send_login_details').hide()
                                        $('#exampleCheck2').attr('required', false)
                                    }
                                }
                                $('#type_resident_edit').on('change', function () {
                                    var type = $(this).val();
                                    if (type != '') {
                                        if (type == 0) {
                                            $('#position_resident_edit').hide();
                                            $('#position_input_edit').val('')
                                            $('#status_resident_edit').show();
                                        } else if (type == 1) {
                                            $('#position_resident_edit').show();
                                            $('#status_input_edit').val('')
                                            $('#status_resident_edit').hide();
                                        }
                                    } else {
                                        $('#position_resident_edit').hide();
                                        $('#status_resident_edit').hide();
                                        $('#status_input_edit').val('')
                                        $('#position_input_edit').val('')
                                    }

                                })


                                $('#type_resident').on('change', function () {
                                    var type = $(this).val();
                                    if (type != '') {
                                        if (type == 0) {
                                            $('#position_resident').hide();
                                            $('#position_input').val('')
                                            $('#status_resident').show();
                                        } else if (type == 1) {
                                            $('#position_resident').show();
                                            $('#status_input').val('')
                                            $('#status_resident').hide();
                                        }
                                    } else {
                                        $('#position_resident').hide();
                                        $('#status_resident').hide();
                                        $('#status_input').val('')
                                        $('#position_input').val('')
                                    }

                                })
                                $('#input_email_resident').on('blur', function () {
                                    var email = $(this).val();
                                    $.get('/admin/workorders/check_email_user?email=' + email, function (res) {
                                        if (res.status == 'failed') {
                                            $('#btn_submit_resident').attr('disabled', true)
                                            $('#message_email_double').show().text('Email sudah terdaftar');
                                        } else {
                                            $('#btn_submit_resident').attr('disabled', false)
                                            $('#message_email_double').hide();
                                        }
                                    }, 'json')
                                })

                                $("#mdl_edit_resident").on('show.bs.modal', function (e) {
                                    var x = $(e.relatedTarget);
                                    var user_id = x.data('user_id');
                                    $.get('/admin/clients/get_detail_resident/' + user_id, function (res) {
                                        $('#edit_resident_id').val(user_id)
                                        $('#edit_name_resident').val(res.name);
                                        $('#edit_phone_resident').val(res.mobile);
                                        $('#edit_email_resident').val(res.email);
                                        $('#edit_jenis_kelamin').val(res.gender);
                                        $('#edit_hubungan_keluarga').val(res.family_relationship);
                                        $('#edit_agama').val(res.agama);
                                        $('#type_resident_edit').val(res.type);
                                        if (res.type == '1') {
                                            $('#position_resident_edit').show();
                                            $('#position_input_edit').attr('required', true)
                                            $('#status_resident_edit').hide()
                                            $('#status_input_edit').attr('required', false)
                                            $('#position_input_edit').val(res.status)
                                        } else {
                                            $('#status_resident_edit').show()
                                            $('#status_input_edit').attr('required', true)
                                            $('#position_resident_edit').hide();
                                            $('#position_input_edit').attr('required', false)
                                            $('#position_input_edit').val('')
                                            $('#status_input_edit').val(res.status)
                                        }
                                    }, 'json')
                                })
                                $('#EditResident').on('submit', function (e) {
                                    $('#mdl_edit_resident').modal('hide');
                                    e.preventDefault();
                                    $.blockUI({message: '<h4><img src="/img/loader.gif" /> Proses Create Resident...</h4>'});
                                    var formData = new FormData(this);
                                    $.ajax({
                                        type: 'POST',
                                        url: '/admin/workorders/edit_resident',
                                        data: formData,
                                        cache: false,
                                        contentType: false,
                                        processData: false,
                                        success: function (data) {
                                            $(document).ajaxStop($.unblockUI);
                                            if (data.status == 'success') {
                                                Swal.fire({
                                                    icon: 'success',
                                                    title: 'Success',
                                                    text: data.message,
                                                    allowOutsideClick: false
                                                }).then((result) => {
                                                    getResidentOwner();
                                                    getResidentTenant();
                                                })
                                            }
                                        },
                                        error: function (data) {

                                        }
                                    }, 'json');
                                });

                                function resend_login_detail(id) {
                                    Swal.fire({
                                        title: 'Apakah anda yakin mau mengirim ulang login details?',
                                        showDenyButton: false,
                                        showCancelButton: true,
                                        confirmButtonText: 'Send',
                                    }).then((result) => {

                                        if (result.isConfirmed) {
                                            $.get('/admin/workorders/resend_login_detail_resident/' + id, function (res) {
                                                if (res.status == 'success') {
                                                    Swal.fire(res.message, '', 'success')
                                                    getResidentOwner();
                                                    getResidentTenant();
                                                } else {
                                                    Swal.fire(res.message, '', 'error')
                                                }
                                            }, 'json')

                                        }
                                    })
                                }

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