@extends('admin.layout.baseNew')

@section('styles')
    <link rel='stylesheet' href='https://cdn.datatables.net/buttons/2.3.2/css/buttons.bootstrap5.min.css' type='text/css' media='all' />
@endsection

@section('content')

<section class="section admin-banner"></section>

<section class="section bg-white">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="header-bar">
                    <div class="title">
                        <h2>Property</h2>
                    </div>
                    <div class="infobar addbar">
                        <div class="items">
                            <a href="javascript:;" class="addup btn-add-type">New Asset Type</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="ucard p-3">
                    <div class="dash-tab-menu">
                        <a href="{{ route('admin.property.index') }}">Property List</a>
                        <a href="javascript:" class="active">Asset Types</a>
                    </div>

                    @include('common.notify')

                    <form class="udash">
                        <div class="table-responsive">
                            <table id="assettype" class="table-full">
                                <thead>
                                <tr>
                                    <th width="5%">ID</th>
                                    <th width="85%">Asset Type</th>
                                    <th width="10%">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($assets as $key => $asset)
                                <tr>
                                    <td>{{@$key + 1}}</td>
                                    <td>{{$asset->type}}</td>
                                    <td>
                                        <input type="hidden" name="asset_type_id" value="{{$asset->id}}" >
                                        <input type="hidden" name="asset_type_name" value="{{$asset->type}}" >

                                        <a class="btn-edit-type" href="javascript:;">
                                            <img src="{{asset('assets/images/admin/edit.png')}}" />
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>

                        </div>
                    </form>

                </div>
            </div>

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

<!-- Add modal -->
<div class="dash-modal" id="addAssetmodal">
    <div class="dash-modal-container wider">
        <div class="dash-title">Create Property Asset Type</div>
        <form class="uform" action="{{url('admin/property/store/assetType')}}" method="post" >

            @csrf
            <div class="row">
                <div class="col-12">
                    <label for="propertytype">Asset Type <span>*</span></label>
                    <input type="text" name="propertytype" id="propertytype_add" class="form-control" required />
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button type="submit" class="btn btn-blue me-3" onclick="validateForm('add');" >Save</button>
                    <button type="button" class="btn btn-blue close-dash-modal">Close</button>
                </div>
            </div>
        </form>

    </div>
</div>


<!-- Edit modal -->
<div class="dash-modal" id="editAssetmodal">
    <div class="dash-modal-container wider">
        <div class="dash-title">Edit Property Asset Type</div>
        <form class="uform" id="edit_asset_form" name="edit_asset_form" action="" method="post" >

            @csrf

            <input type="hidden" name="checkedtypeid" value="">
            <div class="row">
                <div class="col-12">
                    <label for="propertytype">Asset Type <span>*</span></label>
                    <input type="text" name="propertytype" id="propertytype_edit" class="form-control" value="" required />
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button type="submit" class="btn btn-blue me-3" onclick="validateForm('edit');">Save</button>
                    <button type="button" class="btn btn-blue close-dash-modal">Close</button>
                </div>
            </div>
        </form>

    </div>
</div>


<div class="dash-modal" id="notifymodal">
    <div class="dash-modal-container">
        <div class="status-info">
            <span class="text" >Please wait while we are processing!</span>
        </div>
    </div>
</div>


@endsection

@section('scripts')
<script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.bootstrap5.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js" type="text/javascript"></script>

<script>
$(document).ready(function () {
    var width = $(window).width();
    if (width < 768) {
        var table = $('#assettype').DataTable({
            dom: 'Bfrtip',
            responsive: true,
            lengthChange: true,
            pageLength: 10,
            lengthMenu: [10, 20, 50, 100, 200, 500],
            scrollX: true,
            buttons: [
                'copy', 'csv','excel', 'pdf'
            ]
        });
    }else{
        var table = $('#assettype').DataTable({
            dom: 'Bfrtip',
            responsive: true,
            lengthChange: true,
            pageLength: 10,
            lengthMenu: [10, 20, 50, 100, 200, 500],
            scrollX: false,
            buttons: [
                'copy', 'csv','excel', 'pdf'
            ]
        });
    }
    table.buttons().container().appendTo( '#assettype_wrapper .col-md-6:eq(0)' );
});

// Add modal
$(document).on('click', '.btn-add-type', function () {
    $('#addAssetmodal').css('display','block');
});

// Edit modal
$(document).on('click', '.btn-edit-type', function () {
    var listid = $(this).parents('tr').find('input[name="asset_type_id"]').val();
    var ast = $(this).parents('tr').find('input[name="asset_type_name"]').val();

    var url="{{url('admin/property/update/assetType')}}/"+listid;
    $('#edit_asset_form').attr('action', url);

    $('#editAssetmodal').find('input[name="checkedtypeid"]').val(listid);
    $('#editAssetmodal').find('input[name="propertytype"]').val(ast);
    $('#editAssetmodal').css('display','block');
});


function  validateForm(tt){
    var vv=$('#propertytype_'+tt).val();
    var fId='propertytype_'+tt;
    if(vv != ''){
        $('.dash-modal').css('display','none');
        $('#notifymodal').css('display','block');
    }
}
</script>


@endsection

@section('nav-adm-property-class', 'active')