@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-target="#mdl_create_unit" data-toggle="modal" ><i class="fa fa-plus"></i> Create Units</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') }}">
<style>
    table tr td{
        color:#000;
        font-weight:500;
    }
</style>

@endpush

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

    <form action="" id="filter-form">
        <input type="hidden" id="page_units" name="page_unit" value="1">

        <div class="col-xs-12">
            <h5>Unit</h5>
            <input type="text" class="form-control" id="unit_search">
        </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="getTableUnits">

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_create_unit" tabindex="-1" role="dialog" aria-labelledby="mdl_create_unit" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Units</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'createUnits','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Units Type</label>
                            <input type="text" name="no_unit" required="" class="form-control clear_after_save">
                            <input type="hidden" name="id" value="">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Building</label>
                            <select class="form-control select2 clear_after_save" name="building" id="building"
                                    required="">
                                <option value="">--Select Building--</option>
                                @forelse($building as $build)
                                <option value="{{$build->id}}">{{ $build->name }}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Floor</label>
                            <select class="form-control clear_after_save" name="floor_id" id="floor"  required="">
                                <option value="">-- Select Floor --</option>
                                
                            </select>
                        </div>
                    </div>
                </div>
                <div id="form_units">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="required">No Unit</label>
                                <input type="text" name="name[]" required="" class="form-control clear_after_save input_no_unit" data-id="0">
                                <small style="color:red" id="message_unit_register_0"></small>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label class="required">Direction</label>
                                <select class="form-control select2 clear_after_save" name="direction[]" >
                                    <option value="south">South</option>
                                    <option value="north">North</option>
                                    <option value="east">East</option>
                                    <option value="west">West</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-primary btn-sm add_unit" style="margin-top:24px" type="button"><i class="fa fa-plus"></i></button>
                        </div>
                    </div> 
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Type</label>
                            <select class="form-control select2 clear_after_save" name="type_id" id="type_id" required="">
                                <option value="">-- Select Type --</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Width</label>
                            <input type="text" class="form-control clear_after_save" readonly="" id="type_width">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Electric (KVA)</label>
                            <input type="number" class="form-control clear_after_save" readonly="" id="type_electric">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="required">Description</label>
                            <textarea name="description" cols="30" rows="4" class="form-control clear_after_save"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="submit_save_unit">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_edit_unit" tabindex="-1" role="dialog" aria-labelledby="mdl_create_unit" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Units</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'editUnits','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"]) !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Units Type</label>
                            <input type="text" name="no_unit" required="" id="append_unit_type" class="form-control clear_after_save">
                            <input type="hidden" name="id" id="append_id">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Building</label>
                            <select class="form-control select2 clear_after_save" name="building" id="append_building"
                                    required="">
                                <option value="">--Select Building--</option>
                                @forelse($building as $build)
                                <option value="{{$build->id}}">{{ $build->name }}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Floor</label>
                            <select class="form-control clear_after_save" name="floor_id" id="append_floor"  required="">
                                <option value="">-- Select Floor --</option>
                                
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">No Unit</label>
                            <input type="text" name="name" required="" class="form-control clear_after_save input_no_unit" id="append_no_unit">
                            <small style="color:red" id="message_unit_register_0"></small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="required">Direction</label>
                            <select class="form-control select2 clear_after_save" name="direction" id="append_direction" >
                                <option value="south">South</option>
                                <option value="north">North</option>
                                <option value="east">East</option>
                                <option value="west">West</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Type</label>
                            <select class="form-control select2 clear_after_save" name="type_id" id="append_type_id" required="">
                                <option value="">-- Select Type --</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Width</label>
                            <input type="text" class="form-control clear_after_save" readonly="" id="type_width_edit">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Electric (KVA)</label>
                            <input type="number" class="form-control clear_after_save" readonly="" id="type_electric_edit">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="required">Description</label>
                            <textarea name="description" cols="30" rows="4" class="form-control clear_after_save" id="append_description"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="submit_save_unit">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 Units</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 Units 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_unit.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>
<!-- .row -->

@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{!! $dataTable->scripts() !!}

<script>
    $(".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 }}',
    });
    $(document).on('change', '#building_import', function () {
    var building_id = $(this).val();
    var url = '{{route('admin.floor.get_floor')}}' + '/' + building_id
            console.log(url);
    $.get(url, function(res) {
    console.log(res)
            $('#floor_import').html(res);
    });
    })

            $('#type_id').on('change', function () {
    var x = $(this).val();
    console.log(x)
            if (x != '') {
    $.get('/admin/detail_type/' + x, function (res) {
    $('#type_width').val(res.width)
            $('#type_electric').val(res.kva_electric)
    }, 'json')
    } else {
    $('#type_width').val('')
            $('#type_electric').val('')
    }
    })
            function getTableUnits() {
            var owner = $('#owner_search').val();
            var unit = $('#unit_search').val();
            var page = $('#page_units').val();
            $.get('/admin/getTableUnits/0?page=' + page + '&unit=' + unit, function (res) {
            $('#getTableUnits').html(res)
            })
            }
    getTableUnits()
    $('body').on('click', '.page_floor', function() {
    var id = $(this).attr('id');
    var id_new = id.replace('page_floor_', '');
    $('#page_units').val(id_new)
            getTableUnits()
    })
            $('#createUnits').on('submit', function (e) {
    $('#mdl_create_unit').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.buildings.store_unit')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            Swal.fire({
            icon: 'success',
                    title: 'Success',
                    text: data.message,
                    allowOutsideClick: false
            }).then((result) => {
            getTableUnits();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $('#editUnits').on('submit', function (e) {
    $('#mdl_edit_unit').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.buildings.store_unit')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            Swal.fire({
            icon: 'success',
                    title: 'Success',
                    text: data.message,
                    allowOutsideClick: false
            }).then((result) => {
            getTableUnits();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $('#apply-filters').on('click', function(){
    getTableUnits();
    })

            $('#importExcel').on('submit', function (e) {
    $('#mdl_import_excel').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('admin.units.import_excel_unit')}}',
            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) => {
            getTableUnits()
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    var failed_unit = 0;
    $('body').on('blur', '.input_no_unit', function(){
    var x = $(this).val();
    var nomor = $(this).data('id');
    $.get('/admin/check_no_unit?no_unit=' + x, function(res){
    if (res.status == 'failed') {
    failed_unit++;
    $('#message_unit_register_' + nomor).show().text('No Unit Sudah Terdaftar')
    } else {
    failed_unit--;
    $('#message_unit_register_' + nomor).hide()
    }
    if (failed_unit > 0) {
    $('#submit_save_unit').attr('disabled', true)
    } else{
    $('#submit_save_unit').attr('disabled', false)
    }
    }, 'json')
    })
            var nomor_unit = 1;
    $("body").on('click', '.add_unit', function (e) {
    e.preventDefault();
    $("#form_units").append(`<div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="required">No Unit</label>
                                <input type="text" name="name[]" required="" class="form-control clear_after_save input_no_unit" data-id="` + nomor_unit + `">
                                        <small style="color:red;display:none" id="message_unit_register_` + nomor_unit + `"></small>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label class="required">Direction</label>
                                <select class="form-control select2 clear_after_save" name="direction[]" >
                                    <option value="south">South</option>
                                    <option value="north">North</option>
                                    <option value="east">East</option>
                                    <option value="west">West</option>
                                </select>
                            </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>`);
    nomor_unit++;
    })
            $('#form_units').on('click', '.del_row', function (e) {
    e.preventDefault();
    $(this).parent().remove();
    nomor_unit--;
    failed_unit--;
    });
    $("#mdl_edit_unit").on('show.bs.modal', function(e) {
    var x = $(e.relatedTarget);
    $('#append_id').val(x.data('id'))
            $('#append_unit_type').val(x.data('name'))
            $('#append_building').val(x.data('building_id'))
            $('#append_floor').val(x.data('floor_id'))
            $('#append_no_unit').val(x.data('no_unit'))
            $('#append_direction').val(x.data('direction'))
            $('#append_type_id').val(x.data('type_id')).trigger('change')
            $('#append_description').html(x.data('description'))
            $('#edit_name_client').val(x.data('name'))
            $('#edit_city_id').val(x.data('city'))
    })
    
    $('#append_type_id').on('change', function () {
    var x = $(this).val();
    console.log(x)
            if (x != '') {
    $.get('/admin/detail_type/' + x, function (res) {
    $('#type_width_edit').val(res.width)
            $('#type_electric_edit').val(res.kva_electric)
    }, 'json')
    } else {
    $('#type_width_edit').val('')
            $('#type_electric_edit').val('')
    }
    })
</script>
@endpush