@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="#" data-toggle="modal" data-target="#mdl_create_building"
            class="btn btn-outline btn-success btn-sm">Add New Building <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>Select Date Created</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_building" name="page_building" value="1">
        <div class="col-xs-12">
            <div class="form-group">
                <h5>Building</h5>
                <select class="form-control select2" name="building" id="building" data-style="form-control">
                    <option value="">@lang('modules.client.all')</option>
                    @forelse($building as $bld)
                    <option value="{{$bld->id}}">{{ $bld->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_buildings">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_create_building" tabindex="-1" role="dialog" aria-labelledby="mdl_create_floor"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Building</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!!
            Form::open(['id'=>'createBuilding','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div id="form_floor">
                    <div class="row">
                        <div class="col-lg-11">
                            <div class="form-group">
                                <label>Building</label>
                                <input type="text" class="form-control input_name_floor" name="name[]">
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <button class="btn btn-primary btn-sm add_floor" 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_edit_building" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_building"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Building</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!!
            Form::open(['id'=>'editBuilding','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Building</label>
                            <input type="text" class="form-control" name="name" id="edit_building_name">
                            <input type="hidden" class="form-control" name="id" id="edit_building_id">
                        </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>
    function getTableBuildings() {
    var page = $('#page_building').val();
    var start_date = $('#start-date').val();
    var end_date = $('#end-date').val();
    var building = $('#building').val();
    $.get('/admin/getTableBuilding?page=' + page + '&start_date=' + start_date + '&end_date=' + end_date + '&building=' + building, function (res) {
    $('#table_buildings').html(res)
    })
    }
    getTableBuildings()
            $(".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 () {
    $('#clients-table').on('preXhr.dt', function (e, settings, data) {
    var startDate = $('#start-date').val();
    if (startDate == '') {
    startDate = null;
    }

    var endDate = $('#end-date').val();
    if (endDate == '') {
    endDate = null;
    }
    // var category_id = $('#category_id').val();
    // var sub_category_id = $('#sub_category_id').val();
    // var project_id = $('#project_id').val();
    // var contract_type_id = $('#contract_type_id').val();
    // var country_id = $('#country_id').val();

    var client = $('#building').val();
    data['startDate'] = startDate;
    data['endDate'] = endDate;
    });
    $.easyBlockUI('#buildings-table');
    window.LaravelDataTables["buildings-table"].draw();
    $.easyUnblockUI('#buildings-table');
    });
    $("body").on('click', '.add_floor', function (e) {
    e.preventDefault();
    $("#form_floor").append(`<div class="row">
                            <div class="col-lg-11">
                                <div class="form-group">
                                    <label>Building</label>
                                    <input type="text" class="form-control input_name_floor" name="name[]">
                                </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_floor').on('click', '.del_row', function (e) {
    e.preventDefault();
    $(this).parent().remove();
    });
    $('#createBuilding').on('submit', function (e) {
    $('#mdl_create_building').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
        type: 'POST',
                url: '{{route('admin.buildings.ajax_store_building')}}',
                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) => {
                getTableBuildings();
                $('#form_floor').parent().remove()
                        $('.input_name_floor').val('')
                })
                }
                },
                error: function (data) {

                }
        }, 'json');
    });
    
    $('#editBuilding').on('submit', function (e) {
    $('#mdl_edit_building').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
        type: 'POST',
                url: '{{route('admin.buildings.ajax_edit_building')}}',
                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) => {
                getTableBuildings();
                })
                }
                },
                error: function (data) {

                }
        }, 'json');
    });
    
    $("#mdl_edit_building").on('show.bs.modal', function(e) {
        var x = $(e.relatedTarget);
        $('#edit_building_id').val(x.data('id'))
        $('#edit_building_name').val(x.data('name'))
    })
    
    function delete_data_building(id){
        Swal.fire({
          title: 'Do you want to delete data?',
          showDenyButton: false,
          showCancelButton: true,
          confirmButtonText: 'Delete',
        }).then((result) => {

          if (result.isConfirmed) {
            $.get('/admin/ajax_delete_building/' + id, function(res){
                    if (res.status == 'success') {
                        Swal.fire(res.message, '', 'success')
                        getTableBuildings();
                    }else{
                        Swal.fire(res.message, '', 'error')
                    }
                },'json')

            }
        })
    }

</script>
@endpush