@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-success btn-sm" data-toggle="modal" data-target="#mdl_import_excel">Import Excell</a>
        <a href="#" class="btn btn-outline btn-primary btn-sm" data-toggle="modal" data-target="#mdl_create_tenant">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">
        <div class="col-xs-12">
            <h5>@lang('app.selectDateRange')</h5>
            <div class="input-daterange input-group" id="date-range">
                <input type="text" class="form-control" autocomplete="off" id="start-date"
                       placeholder="@lang('app.startDate')" value="" />
                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                <input type="text" class="form-control" id="end-date" autocomplete="off"
                       placeholder="@lang('app.endDate')" value="" />
            </div>
        </div>
        <input type="hidden" id="page_tenant" name="page_tenant" value="1">
        <div class="col-xs-12">
            <div class="form-group">
                <h5>Search Tenant</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">

            </div>
        </div>
    </div>
</div>
<!-- .row -->
<div class="modal fade" id="mdl_create_tenant" tabindex="-1" role="dialog" aria-labelledby="mdl_create_tenant" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Tenant</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'createTenant','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control clear_after_save" name="name" required>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Gender</label>
                            <select name="gender" class="form-control">
                                <option value="Laki-Laki">Laki-Laki</option>
                                <option value="Perempuan">Perempuan</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="number" class="form-control clear_after_save" name="phone" required>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control clear_after_save" name="email" required="">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Address</label>
                            <textarea name="address" class="form-control clear_after_save" rows="9"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <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-lg-6">
                        <div class="form-group">
                            <label>Emergency Call</label>
                            <input type="number" class="form-control clear_after_save" name="emergency_call">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Emergency Name</label>
                            <input type="text" class="form-control clear_after_save" name="emergency_name">
                        </div>
                    </div>
                </div>
                <div id="form_transportation">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Transportation Type</label>
                                <input type="text" class="form-control clear_after_save" name="transportation_type[]">
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label>Nopol</label>
                                <input type="text" class="form-control clear_after_save" name="no_police[]">
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <button class="btn btn-primary btn-sm add_transportation" style="margin-top:24px" type="button"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_replace_bast" tabindex="-1" role="dialog" aria-labelledby="mdl_replace_bast" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Replace Tenant</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'replaceTenant','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6">
                        <label>Old Tenant</label>
                        <input type="text" class="form-control" disabled="" id="name_old_tenant">
                    </div>
                    <div class="col-lg-6">
                        <label>New Tenant</label>
                        <select class="form-control select2" name="client" id="">
                                                    </select>
                    </div>
                    <div class="col-lg-12">
                        <label>Unit</label>
                        <input type="text" class="form-control" disabled="" id="name_unit">
                    </div>
                </div>
                <input type="hidden" name="old_tenant" id="old_tenant">
                <input type="hidden" name="unit_id" id="contract_unit_id">
                <div id="billing_invoice">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_import_excel" tabindex="-1" role="dialog" aria-labelledby="mdl_import_excel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Import Tenant</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'importExcel','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="alert alert-warning">
                    <h4>Perhatian</h4>
                    <p>
                        Kami telah menyiapkan file template Microsoft Excel untuk upload Tenant via Excel.
                        Pastikan Anda telah mendownload file template dan mengisi sesuai ketentuan yang ada di file tersebut.
                        Ketidak sesuaian input akan menyebabkan data tidak dapat diproses.
                    </p>  
                    <a href="/sample_export/sample_export_tenant.xlsx" class="btn btn-default btn-xs">Download template</a>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <label>File</label>
                        <input type="file" class="form-control" id="file_import" name="uploaded_file">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

@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>
    function getTableTenant() {
    var page = $('#page_tenant').val();
    var start_date = $('#start-date').val();
    var end_date = $('#end-date').val();
    var search = $('#search').val();
    var unit_id = $('#unit_id').val();
    $.get('/admin/clients/ajaxGetTenant?page=' + page + '&start_date=' + start_date + '&end_date=' + end_date + '&search=' + search + '&unit_id=' + unit_id, function (res) {
    $('#table_tenant').html(res)
    })
    }
    getTableTenant()
            $(".select2").select2({
    formatNoMatches: function () {
    return "{{ __('messages.noRecordFound') }}";
    }
    });
    jQuery('#date-range').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart:'{{ $global->week_start }}',
    });
    $('.toggle-filter').click(function () {
    $('#ticket-filters').toggle('slide');
    })

            $('#apply-filters').click(function () {
    getTableTenant()
    });
    $('#reset-filters').click(function () {
    $('#filter-form')[0].reset();
    $('.select2').val('all');
    $('#filter-form').find('select').select2();
    $.easyBlockUI('#buildings-table');
    window.LaravelDataTables["buildings-table"].draw();
    $.easyUnblockUI('#buildings-table');
    })
            $('body').on('click', '.page_tenant', function() {
    var id = $(this).attr('id');
    var id_new = id.replace('page_billing_', '');
    $('#page_tenant').val(id_new)
            getTableBillings()
    })
            jQuery('#due_date').datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart:'1',
            format: 'dd-mm-yyyy',
    });
    $('#createTenant').on('submit', function (e) {
    $('#mdl_create_tenant').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.clients.store_tenant')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            $('.clear_after_save').val('')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: data.message,
                            allowOutsideClick: false
                    }).then((result) => {
            getTableTenant()
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    function get_billing_unit(id){
    $.get('/admin/clients/ajaxGetBillingUser/' + id, function(res){
    $('#billing_invoice').html(res)

    })
    }

    $("#mdl_replace_bast").on('show.bs.modal', function(e) {
    var x = $(e.relatedTarget);
    var id = x.data('id');
    $('#old_tenant').val(id)
            get_billing_unit(id)
            $('#name_old_tenant').val(x.data('name'))
            $('#contract_unit_id').val(x.data('unit_id'))
            $('#name_unit').val(x.data('name_unit'))
    })



            $('body').on('click', '#btn_ganti_tenant', function(){
    $('#form_replace_tenant').show()
    })

            function generate_invoice_user(id){
            window.location.href = '/admin/invoice_unit/' + id + '/tenant';
            }

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

            $('#replaceTenant').on('submit', function (e) {
    $('#mdl_replace_bast').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.contracts.ajax_store')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            Swal.fire({
            icon: 'success',
                    title: 'Success',
                    text: 'Tenant Successfull Replace',
                    allowOutsideClick: false
            }).then((result) => {
            getTableTenant();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $("body").on('click', '.add_transportation', function (e) {
    e.preventDefault();
    $("#form_transportation").append(`<div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Transportation Type</label>
                                <input type="text" class="form-control clear_after_save" name="transportation_type[]">
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label>Nopol</label>
                                <input type="text" class="form-control clear_after_save" name="no_police[]">
                            </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>`);
    })

            $('#form_transportation').on('click', '.del_row', function (e) {
    e.preventDefault();
    $(this).parent().remove();
    });
    
    $('#importExcel').on('submit', function (e) {
    $('#mdl_import_excel').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.clients.import_excel')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            $('.clear_after_save').val('')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: data.message,
                            allowOutsideClick: false
                    }).then((result) => {
            getTableTenant()
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });

</script>
@endpush