@extends('layouts.member-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('member.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('member.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"> @lang('modules.client.createTitle')</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                    {!!
                    Form::open(['id'=>'createClient','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
                    !!}
                    @if(isset($leadDetail->id))
                    <input type="hidden" name="lead" value="{{ $leadDetail->id }}">
                    @endif
                    <div class="form-body">
                        <h3 class="box-title ">Data Pemilik</h3>
                        <hr>
                        <div class="row">
                            <div class="col-md-1">
                                <div class="form-group salutation" style="margin-top: 23px">
                                    <select name="owner_salutation" id="salutation" class="form-control">
                                        <option value="">--</option>
                                        <option value="mr">@lang('app.mr')</option>
                                        <option value="mrs">@lang('app.mrs')</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="required">Nama Pemilik</label>
                                    <input type="text" name="name" id="name" required="" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">No Unit <a class="btn btn-xs btn-info btn-outline"
                                            href="#" id="add-unit" data-toggle="modal" data-target="#ticketModal"><i
                                                class="fa fa-plus"></i> Add +</a></label>
                                    <select class="form-control selectpicker" name="unit_id" id="unit_id"
                                        data-style="form-control" required="">

                                        @forelse($units as $unit)
                                        <option value="{{ $unit->id }}">{{ ucwords($unit->name) }}</option>
                                        @empty
                                        <option value="">No Units</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="display:block">@lang('app.mobile')</label>
                                    <select class="select2 phone_country_code form-control" name="owner_phone_code"
                                        required="">
                                        <option value="">--</option>
                                        @foreach ($countries as $item)
                                        <option value="{{ $item->phonecode }}">+{{ $item->phonecode.' ('.$item->iso.')'
                                            }}</option>
                                        @endforeach
                                    </select>
                                    <input type="tel" name="owner_phone" id="owner_mobile" class="mobile"
                                        autocomplete="nope">
                                </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="">
                                    <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="">{{ $leadDetail->address ?? '' }}</textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>@lang('modules.employees.employeePassword')</label>
                                    <input type="password" style="display: none">
                                    <input type="password" name="owner_password" id="password" class="form-control"
                                        autocomplete="nope">
                                    <span class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    <span class="help-block"> @lang('modules.employees.passwordNote') </span>
                                    <div class="checkbox checkbox-info">
                                        <input id="random_password" name="random_password" value="true" type="checkbox">
                                        <label
                                            for="random_password">@lang('modules.client.generateRandomPassword')</label>
                                    </div>
                                </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">
                                </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">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label>Nopol Kendaraan</label>
                                <div class="form-group">
                                    <input type="text" name="owner_nopol" class="form-control">
                                </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">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="button" class="btn btn-primary btn-sm btn_add_data_penyewa"><i
                                        class="fa fa-plus" id="icon_data_penyewa"></i> Data Penyewa</button>
                            </div>
                        </div>
                        <div class="row" id="data_penyewa" style="display:none">
                            <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-1">
                                <div class="form-group salutation" style="margin-top: 23px">
                                    <select name="tenant_salutation" id="tenant_salutation" class="form-control">
                                        <option value="">--</option>
                                        <option value="mr">@lang('app.mr')</option>
                                        <option value="mrs">@lang('app.mrs')</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label>Nama Penyewa</label>
                                    <input type="text" name="tenant_name" id="tenant_name"
                                        value="{{ $leadDetail->client_name ?? '' }}" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label style="display:block">@lang('app.mobile')</label>
                                    <select class="select2 phone_country_code form-control" name="phone_code"
                                        id="tenant_phone_code">
                                        <option value="">--</option>
                                        @foreach ($countries as $item)
                                        <option value="{{ $item->phonecode }}">+{{ $item->phonecode.' ('.$item->iso.')'
                                            }}</option>
                                        @endforeach
                                    </select>
                                    <input type="tel" name="tenant_phone" id="tenant_phone" class="mobile"
                                        autocomplete="nope" value="{{ $leadDetail->mobile ?? '' }}">
                                </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="{{ $leadDetail->client_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"></textarea>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>@lang('modules.employees.employeePassword')</label>
                                    <input type="password" style="display: none">
                                    <input type="password" name="tenant_password" id="tenant_password"
                                        class="form-control" autocomplete="nope">
                                    <span class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    <span class="help-block"> @lang('modules.employees.passwordNote') </span>
                                    <div class="checkbox checkbox-info">
                                        <input id="random_password" name="random_password" value="true" type="checkbox">
                                        <label
                                            for="random_password">@lang('modules.client.generateRandomPassword')</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 ">
                                <div class="form-group">
                                    <label>Emergency Call</label>
                                    <input type="tel" name="tenant_emergency_call" id="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">
                                </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">
                                </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">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Start Date</label>
                                    <input type="text" autocomplete="off" name="start_date" id="start_date"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Due Date</label>
                                    <input type="text" autocomplete="off" name="due_date" id="due_date"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label>@lang('modules.profile.profilePicture')</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="https://via.placeholder.com/200x150.png?text={{ str_replace(' ', '+', __('modules.profile.uploadPicture')) }}"
                                                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="image" name="image"> </span>
                                            <a href="javascript:;" class="btn btn-danger fileinput-exists"
                                                data-dismiss="fileinput"> @lang('app.remove') </a>
                                        </div>
                                    </div>
                                </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_keluarga[]" class="form-control">
                                            <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 class="row">
                                <div class="col-md-1">
                                    <div class="form-group">
                                        <label>No</label>
                                        <input type="number" class="form-control" name="no_pekerja[]" 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_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">
                                            <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>
                                <div class="col-md-1">
                                    <button class="btn btn-primary btn-sm add_pekerja" style="margin-top:24px"><i
                                            class="fa fa-plus"></i></button>
                                </div>
                            </div>
                        </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 src="//cdn.jsdelivr.net/npm/sweetalert2@11"></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("");
    var categories = @json($categories);
    $('#category_id').change(function (e) {
    var cat_id = $(this).val();
    getCategory(cat_id);
    });
    function getCategory(cat_id){
    var url = "{{route('member.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 }}',
    });
    $('#createClient').on('submit', function (e) {

    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('member.clients.store')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            Swal.fire({
            icon: 'success',
                    title: 'Success',
                    text: 'Client added successfully',
                    allowOutsideClick: false
            }).then((result) => {
            window.location.href = '{{route('member.clients.index')}}';
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
//    $('#save-form').click(function () {
//    console.log($('#createClient').serialize())
//            $.easyAjax({
//            url: '{{route('member.clients.store')}}',
//                    container: '#createClient',
//                    type: "POST",
//                    redirect: true,
//                    data: $('#createClient').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('member.clientCategory.create')}}';
    $('#modelHeading').html('...');
    $.ajaxModal('#clientCategoryModal', url);
    })
            $('#addClientSubCategory').click(function () {
    var url = '{{ route('member.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[]" required>
                                </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[]" required>
                                </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[]" required>
                                </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[]" required>
                                </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[]" required>
                                </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('member.clients.CreateUnit')}}',
                    // container: '#addCategories',
                    type: "POST",
                    data: dataForm,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                    if (response.status == 'success'){
                    setValueInForm('unit_id', response.optionData);
                    $.unblockUI();
                    $('#ticketModal').modal('hide');
                    }
                    }
            })
    });
    $("#start_date, #due_date, .date-picker").datepicker({
    todayHighlight: true,
            autoclose: true,
            weekStart:'{{ $global->week_start }}',
            format: '{{ $global->date_picker_format }}',
    });
</script>
@endpush