@extends('layouts.app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.clients.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">@lang('app.addNew')</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/summernote/dist/summernote.css') }}">
<style>
    .salutation .form-control {
        padding: 2px 2px;
    }
    .select-category button{
        background-color: white !important;
        font-size: 13px;
        color: #565656;
        border: 1px solid #e4e7ea !important;
    }
    .select-category button:hover{
        color: #565656;
        opacity: 1;
    }  
    .bootstrap-select .dropdown-toggle:focus{
        outline: none !important;
    }
</style>

@endpush

@section('content')

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

        <div class="panel panel-inverse">
            <div class="panel-heading"> Edit Client {{$client->name}}</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!! Form::open(['id'=>'updateClient','class'=>'ajax-form','method'=>'POST']) !!}
                    <input type="hidden" name="id" value="{{ $client->id }}">
                    <input type="hidden" name="tenant_id" value="{{ $client->tenant_id }}">
                    <input type="hidden" name="owner_id" value="{{ $client->owner_id }}">
                    <div class="form-body">
                        <h3 class="box-title ">Data Pemilik</h3>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Nama Pemilik</label>
                                    <input type="text" name="name" id="name" required="" class="form-control" value="{{ $client->owner_name }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label style="display:block">@lang('app.mobile')</label>
                                    <input type="tel" name="owner_phone" id="owner_mobile" class="form-control" autocomplete="nope" value="{{ $client->phone }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Email</label>
                                    <input type="email" name="email" id="email"  class="form-control" required="" value="{{ $client->owner_email }}">
                                    <span class="help-block">@lang('modules.client.emailNote')</span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Alamat</label>
                                    <textarea name="owner_address"  id="owner_address"  rows="3"  class="form-control" required="">{{ $client->owner_address }}</textarea>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-3 ">      
                                <div class="form-group">
                                    <label>Emergency Call</label>
                                    <input type="tel" name="owner_emergency_call" id="emergency_call" class="form-control" autocomplete="nope" value="{{ $client->emergency_call }}">
                                </div>
                            </div>
                            <div class="col-md-3 ">      
                                <label class="required">Nama</label>
                                <div class="form-group">
                                    <input type="text" name="owner_emergency_name" class="form-control" value="{{ $client->emergency_name }}">
                                </div>
                            </div>
                            <div class="col-md-3">      
                                <label>Nopol Kendaraan</label>
                                <div class="form-group">
                                    <input type="text" name="owner_nopol" class="form-control" value="{{ $client->no_police }}">
                                </div>
                            </div>
                            <div class="col-md-3 ">      
                                <label>Jenis Kendaraan</label>
                                <div class="form-group">
                                    <input type="text" name="owner_transportation_type" class="form-control" value="{{ $client->transportation_type }}">
                                </div>
                            </div>
                        </div>
                        <div class="row" id="data_penyewa">
                            <input type="hidden" name="data_penyewa" value="0" id="input_data_penyewa">
                            <h3 class="box-title m-t-20">Data Penyewa</h3>
                            <hr>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Nama Penyewa</label>
                                    <input type="text" name="tenant_name" id="tenant_name"  value="{{ $client->tenant_name }}"   class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label style="display:block">@lang('app.mobile')</label>
                                    <input type="tel" name="tenant_phone" id="tenant_phone" class="form-control" autocomplete="nope" value="{{ $client->tenant_phone }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Email</label>
                                    <input type="email" name="tenant_email" id="tenant_email" value="{{ $client->tenant_email }}"  class="form-control">
                                    <span class="help-block">@lang('modules.client.emailNote')</span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">@lang('app.address')</label>
                                    <textarea name="tenant_address"  id="tenant_address"  rows="3"  class="form-control">{{ $client->tenant_address }}</textarea>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-3 ">      
                                <div class="form-group">
                                    <label>Emergency Call</label>
                                    <input type="tel" name="tenant_emergency_call" id="emergency_call" value="{{ $client->tenant_emergency_call }}" class="form-control" autocomplete="nope">
                                </div>
                            </div>
                            <div class="col-md-3 ">      
                                <label>Nama</label>
                                <div class="form-group">
                                    <input type="text" name="tenant_emergency_name" class="form-control" value="{{ $client->tenant_emergency_name }}">
                                </div>
                            </div>
                            <div class="col-md-3">      
                                <label>Nopol Kendaraan</label>
                                <div class="form-group">
                                    <input type="text" name="tenant_nopol" class="form-control" id="tenant_nopol" value="{{ $client->tenant_no_police }}">
                                </div>
                            </div>
                            <div class="col-md-3 ">      
                                <label>Jenis Kendaraan</label>
                                <div class="form-group">
                                    <input type="text" name="tenant_transportation_type" class="form-control" id="tenant_transportation" value="{{ $client->tenant_transportation_type }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Start Date</label>
                                    <input type="text" autocomplete="off"  name="start_date" id="start_date" class="form-control" value="{{ $client->start_date }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Due Date</label>
                                    <input type="text" autocomplete="off"  name="due_date" id="due_date" class="form-control" value="{{ $client->due_date }}">
                                </div>
                            </div>
                        </div>
                        <!--/row-->
                        <!--/row-->
                        <div id="form_penghuni_unit">
                            <h3 class="box-title m-t-20">Data Penghuni Unit Apartment</h3>
                            <hr>
                                                            <div class="row">
                                    <div class="col-md-1">
                                        <div class="form-group">
                                            <label>No</label>
                                            <input type="number" class="form-control" name="no[]" value="1" readonly="">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Nama</label>
                                            <input type="text" class="form-control" name="nama[]">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <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-2">
                                        <div class="form-group">
                                            <label>Hubungan Keluarga</label>
                                            <input type="text" class="form-control" name="hubungan_keluarga[]">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Agama</label>
                                            <select name="agama_pekerja[]" 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-2">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <input type="text" class="form-control" name="status[]">
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <button class="btn btn-primary btn-sm add_package" style="margin-top:24px"><i class="fa fa-plus"></i></button>
                                    </div>
                                </div>
                                                    </div>

                        <!--/row-->
                        <!--/row-->
                        <!--/<row-->
                        <div id="form_data_pekerja_unit">
                            <h3 class="box-title m-t-20">Data Pekerja</h3>
                            <hr>
                                                    </div>
                        <div class="row" style="margin-bottom: 20px;">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div style="margin-bottom: 10px;">
                                        <label class="control-label">@lang('modules.client.sendCredentials')</label>
                                        <a class="mytooltip" href="javascript:void(0)"> <i class="fa fa-info-circle"></i><span class="tooltip-content5"><span class="tooltip-text3"><span class="tooltip-inner2">@lang('modules.client.sendCredentialsMessage')</span></span></span></a>
                                    </div>
                                    <div class="radio radio-inline col-md-4">
                                        <input type="radio" name="sendMail" id="sendMail1"
                                               value="yes">
                                        <label for="sendMail1" class="">
                                            @lang('app.yes') </label>
                                    </div>
                                    <div class="radio radio-inline col-md-4">
                                        <input type="radio" name="sendMail"
                                               id="sendMail2" checked value="no">
                                        <label for="sendMail2" class="">
                                            @lang('app.no') </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="m-b-10">
                                        <label class="control-label">@lang('modules.emailSettings.emailNotifications')</label>
                                    </div>
                                    <div class="radio radio-inline">
                                        <input type="radio" checked name="email_notifications" id="email_notifications1" value="1">
                                        <label for="email_notifications1" class="">
                                            @lang('app.enable') </label>

                                    </div>
                                    <div class="radio radio-inline ">
                                        <input type="radio" name="email_notifications"
                                               id="email_notifications2" value="0">
                                        <label for="email_notifications2" class="">
                                            @lang('app.disable') </label>
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="address">@lang('modules.accountSettings.changeLanguage')</label>
                                    <select name="locale" id="locale" class="form-control select2">
                                        <option @if($global->locale == "en") selected @endif value="en">English
                                    </option>
                                    @foreach($languageSettings as $language)
                                    <option value="{{ $language->language_code }}" >{{ $language->language_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" id="save-form" class="btn btn-success"> <i class="fa fa-check"></i> @lang('app.save')</button>

                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
</div>    <!-- .row -->
<div class="modal fade bs-modal-md in" id="ticketModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" id="modal-data-application">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">@lang('app.addNew') Unit</h4>
            </div>
            <div class="modal-body">
                <div class="portlet-body">

                    {!! Form::open(['id'=>'addUnit','class'=>'ajax-form','method'=>'POST', 'enctype'=>'multipart/form-data'])
                    !!}
                    <div class="form-body">
                        <div class="row">
                            <div class="col-xs-12 ">
                                <div class="form-group">
                                    <label>Unit Name</label>
                                    <input type="text" name="name" id="category_name" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" id="save-group" class="btn btn-success"> <i class="fa fa-check"></i>
                            @lang('app.save')</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
{{--Ajax Modal--}}
<div class="modal fade bs-modal-md in" id="clientCategoryModal" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-md" id="modal-data-application">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
            </div>
            <div class="modal-body">
                Loading...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="button" class="btn blue">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
{{--Ajax Modal Ends--}}
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/summernote/dist/summernote.min.js') }}"></script>

<script>
    $('body').on('click', '.btn_add_data_penyewa', function(){
    $('#data_penyewa').show(500)
            $('#icon_data_penyewa').removeClass('fa-plus')
            $('#icon_data_penyewa').addClass('fa-minus')
            $(this).addClass('btn_minus_data_penyewa')
            $(this).removeClass('btn_add_data_penyewa')
            $('#input_data_penyewa').val('1')
            $('#tenant_name').attr('required', true)
            $('#tenant_email').attr('required', true)
            $('#tenant_phone').attr('required', true)
            $('#tenant_phone_code').attr('required', true)
            $('#tenant_password').attr('required', true)
            $('#tenant_salutation').attr('required', true)
    })
            $('body').on('click', '.btn_minus_data_penyewa', function(){
    $('#input_data_penyewa').val('0')
            $('#data_penyewa').hide(500)
            $('#icon_data_penyewa').addClass('fa-plus')
            $('#icon_data_penyewa').removeClass('fa-minus')
            $(this).addClass('btn_add_data_penyewa')
            $(this).removeClass('btn_minus_data_penyewa')
            $('#tenant_name').attr('required', false)
            $('#tenant_email').attr('required', false)
            $('#tenant_phone').attr('required', false)
            $('#tenant_phone_code').attr('required', false)
            $('#tenant_password').attr('required', false)
            $('#tenant_salutation').attr('required', false)
    })
            $('#sub_category_id').html("");
    $('#category_id').change(function (e) {
    var cat_id = $(this).val();
    getCategory(cat_id);
    });
    function getCategory(cat_id){
    var url = "{{route('admin.clients.getSubcategory')}}";
    var token = "{{ csrf_token() }}";
    $.easyAjax({
    url: url,
            type: "POST",
            data: {'_token': token, cat_id: cat_id},
            success: function (data) {
            var options = [];
            var rData = [];
            rData = data.subcategory;
            $.each(rData, function(index, value) {
            var selectData = '';
            selectData = '<option value="' + value.id + '">' + value.category_name + '</option>';
            options.push(selectData);
            });
            $('#sub_category_id').html(options);
            $('#sub_category_id').selectpicker('refresh');
            }
    })
    }
    $(".select2").select2({
    formatNoMatches: function () {
    return "{{ __('messages.noRecordFound') }}";
    }
    });
    $(".date-picker").datepicker({
    todayHighlight: true,
            autoclose: true,
            weekStart:'{{ $global->week_start }}',
            format: '{{ $global->date_picker_format }}',
    });
    $('#updateClient').on('submit', function (e) {

    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.clients.update', [$client->id])}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            setTimeout(function() {
            window.location.href = '{{route('admin.clients.index')}}';
            }, 1500);
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
//$('#save-form').click(function () {
//        $.easyAjax({
//            url: '{{route('admin.clients.update', [$clientDetail->id])}}',
//            container: '#updateClient',
//            type: "POST",
//            redirect: true,
//            data: $('#updateClient').serialize()
//        })
//    });
    $('.summernote').summernote({
    height: 200, // set editor height
            minHeight: null, // set minimum height of editor
            maxHeight: null, // set maximum height of editor
            focus: false,
            toolbar: [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough']],
            ['fontsize', ['fontsize']],
            ['para', ['ul', 'ol', 'paragraph']],
            ["view", ["fullscreen"]]
            ]
    });
    $('#addClientCategory').click(function () {
    var url = '{{ route('admin.clientCategory.create')}}';
    $('#modelHeading').html('...');
    $.ajaxModal('#clientCategoryModal', url);
    })
            $('#addClientSubCategory').click(function () {
    var url = '{{ route('admin.clientSubCategory.create')}}';
    $('#modelHeading').html('...');
    $.ajaxModal('#clientCategoryModal', url);
    })
            $('#random_password').change(function () {
    var randPassword = $(this).is(":checked");
    if (randPassword){
    $('#password').val('{{ str_random(8) }}');
    $('#password').attr('readonly', 'readonly');
    }
    else{
    $('#password').val('');
    $('#password').removeAttr('readonly');
    }
    });
    var no = '2';
    $(".add_package").click(function (e) {
    e.preventDefault();
    $("#form_penghuni_unit").append(`<div class="row"><div class="col-md-1">
                                <div class="form-group">
                                    <label>No</label>
                                    <input type="number" class="form-control" name="no[]" value="` + no + `" readonly>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Nama</label>
                                    <input type="text" class="form-control" name="nama[]">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <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-2">
                                <div class="form-group">
                                    <label>Hubungan Keluarga</label>
                                    <input type="text" class="form-control" name="hubungan_keluarga[]">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <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-2">
                                <div class="form-group">
                                    <label>Status</label>
                                    <input type="text" class="form-control" name="status[]">
                                </div>
                            </div>
                            <button class="btn del_row btn btn-danger btn-sm" type="button" style="margin-top:24px;margin-left: 8px;"><i class="fa fa-trash"></i></button>                
                            </div>`);
    no++;
    });
    $('#form_penghuni_unit').on('click', '.del_row', function (e) {
    e.preventDefault();
    $(this).parent().remove();
    no--;
    });
    var noo = '2';
    $(".add_pekerja").click(function (e) {
    e.preventDefault();
    $("#form_data_pekerja_unit").append(`<div class="row"><div class="col-md-1">
                                <div class="form-group">
                                    <label>No</label>
                                    <input type="number" class="form-control" name="no_pekerja[]" value="` + noo + `" readonly>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Nama</label>
                                    <input type="text" class="form-control" name="nama_pekerja[]">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Jenis Kelamin</label>
                                    <select name="jenis_kelamin_pekerja[]" class="form-control">
                                        <option value="male">Laki Laki</option>
                                        <option value="female">Perempuan</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Jabatan</label>
                                    <input type="text" class="form-control" name="jabatan_pekerja[]">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Agama</label>
                                    <select name="agama_pekerja[]" 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-2">
                                <div class="form-group">
                                    <label>Status</label>
                                    <input type="text" class="form-control" name="status_pekerja[]">
                                </div>
                            </div>
                            <button class="btn del_row_pekerja btn btn-danger btn-sm" type="button" style="margin-top:24px;margin-left: 8px;"><i class="fa fa-trash"></i></button>                
                            </div>`);
    noo++;
    });
    $('#form_data_pekerja_unit').on('click', '.del_row_pekerja', function (e) {
    e.preventDefault();
    $(this).parent().remove();
    noo--;
    });
    function setValueInForm(id, data){
    $('#' + id).html(data);
    $('#' + id).selectpicker('refresh');
    }
    $('#addUnit').submit(function (e) {
    e.preventDefault();
    var dataForm = new FormData(this);
    console.log(dataForm)
            $.ajax({
            url: '{{route('admin.clients.CreateUnit')}}',
                    type: "POST",
                    data: dataForm,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                    if (response.status == 'success'){
                    setValueInForm('unit_id', response.optionData);
                    $.unblockUI();
                    $('#ticketModal').modal('hide');
                    }
                    }
            })
    });
</script>
@endpush