@extends('layouts.app')

@section('page-title')
<div class="row bg-title">

    <!-- .page title -->
    <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}

        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
        <a href="#" class="btn btn-outline btn-primary btn-sm" data-toggle="modal" data-target="#mdl_add_resident">Add Tenant <i
                class="fa fa-plus" aria-hidden="true"></i></a>
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">


@endpush

@section('filter-section')
<div class="row" id="ticket-filters">

    <form action="" id="filter-form">
        <input type="hidden" id="page_tenant" name="page_tenant" value="1">
        <div class="col-xs-12">
            <div class="form-group">
                <h5>Search Resident</h5>
                <input type="text" class="form-control" id="search">
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <h5>Unit</h5>
                <select class="form-control select2" id="unit_id" data-style="form-control">
                    <option value="">All Unit</option>
                    @forelse($units as $unit)
                    <option value="{{$unit->id}}">{{ $unit->name }}</option>
                    @empty
                    @endforelse
                </select>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group p-t-10">
                <button type="button" id="apply-filters" class="btn btn-success col-md-6"><i class="fa fa-check"></i>
                    @lang('app.apply')</button>
                <button type="button" id="reset-filters" class="btn btn-inverse col-md-5 col-md-offset-1"><i
                        class="fa fa-refresh"></i> @lang('app.reset')</button>
            </div>
        </div>
    </form>
</div>
@endsection


@section('content')

<div class="row">

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


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

            </div>
        </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-12">
                        <div class="form-group">
                            <label>Tenant</label>
                            <select class="form-control select2" data-style="form-control" name="tenant_id" required="">
                                <option value="">Pilih Tenant</option>
                    @forelse($tenant as $t)
                    <option value="{{$t->id}}">{{ $t->name }}</option>
                    @empty
                    @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Nama</label>
                            <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="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(".select2").select2({
        formatNoMatches: function () {
        return "{{ __('messages.noRecordFound') }}";
        }
    });
    function getResidentTenant() {
        var unit_id = $('#unit_id').val();
        var search = $('#search').val();
        var page = $('#page_tenant').val();
        $.get('/admin/clients/get_ajax_resident_tenant?page='+page+'&search='+search+'&unit_id='+unit_id, function (res) {
            $('#table_tenant_resident').html(res);
        })
    }
    getResidentTenant();
    
    $('#apply-filters').click(function () {
        getResidentTenant()
    });
    
    $('#end_date').datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart: '1',
            format: 'dd-mm-yyyy',
    });
    $("#start_date").datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart:'1',
            format: 'dd-mm-yyyy',
    })
    
    $('#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('')
        }

    })
    $('#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('')
        }

    })
    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)
        }
    }
    
    $('#CreateResident').on('submit', function (e) {
        $('#mdl_add_resident').modal('hide');
        e.preventDefault();
        $.blockUI({message: '<h4><img src="/img/loader.gif" /> Proses Create Tenant Resident...</h4>'});
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '/admin/workorders/add_resident?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) => {
                        getResidentTenant();
                    })
                }
            },
            error: function (data) {

            }
        }, '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) => {
                        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')
                        getResidentTenant();
                    } else {
                        Swal.fire(res.message, '', 'error')
                    }
                }, 'json')

            }
        })
    }
    
    $('#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')
                                })

</script>
@endpush