@extends('layouts.member-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">
        @if ($user->cans('add_unit'))
        <a href="#" class="btn btn-outline btn-success btn-sm" data-target="#mdl_create_unit" data-toggle="modal"><i
                class="fa fa-plus"></i> Create Units</a>
        @endif
        <ol class="breadcrumb">
            <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

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


@endpush

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

    <form action="" id="filter-form">
        <input type="hidden" id="page_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 class="required">Units Name</label>
                            <input type="text" name="name" id="name" required="" class="form-control clear_after_save">
                        </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 building first --</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>No. Unit</label>
                            <input type="text" name="no_unit" required="" class="form-control clear_after_save">
                        </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">
                                <option value="south">South</option>
                                <option value="north">North</option>
                                <option value="east">East</option>
                                <option value="west">West</option>
                            </select>
                        </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">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', function () {
    var building_id = $(this).val();
    var url = '{{route('member.floor.get_floor')}}' + '/' + building_id
            console.log(url);
    $.get(url, function(res) {
    console.log(res)
            $('#floor').html(res);
    });
    })
            $('#type_id').on('change', function () {
    var x = $(this).val();
    console.log(x)
            if (x != '') {
    $.get('/member/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('/member/getTableUnits/0?page=' + page + '&unit=' + unit, function (res) {
            $('#getTableUnits').html(res)
            })
            }
    getTableUnits()
    $('#createUnits').on('submit', function (e) {
        $('#mdl_create_unit').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{route('member.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();
    })
</script>
@endpush