@extends('layouts.master')

@section('headCss')
    <link href="{{asset('assets/stylesheets/jquery.bootstrap-touchspin.css')}}" rel="stylesheet"/>
@stop

@section('headJs')
    <script src="{{asset('assets/javascripts/jquery.bootstrap-touchspin.js')}}"></script>
@stop

@section('navBar')
    @include('layouts.navBar')
@stop

@section('mainMenu')
    @include('layouts.mainMenu')
@stop

@section('content')
    <div id="demo-settings" class="col-xs-12">
        <a id="demo-settings-toggler" class="fa fa-pencil"></a>
        <h5 class="header">Asset Information</h5>

        <div class="row" id="editPanel">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 text-center">
            <div class="row form-group">
                <select id="searchAssetClient" name="clientId" data-placeholder="Select a client" class="col-xs-6">
                    <option></option>
                    @foreach($clients as $client)
                        <option value="{{$client['id']}}">{{$client['name']}}</option>
                    @endforeach
                </select>
                <div id="filterBuilding">
                    <select id="searchAssetBuilding" name="disciplineId" data-placeholder="Select a building"
                            class="col-xs-6">
                        <option></option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-group" id="accordion-asset">
        <div class="panel">
            <div class="panel-heading">
                <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-asset"
                   href="#accordionAddAsset">
                    Add New Asset
                </a>
            </div>
            <!-- / .panel-heading -->
            <div id="accordionAddAsset" class="panel-collapse collapse">

                <div class="panel-body">
                    <form id="formAddAsset" class="form-horizontal">
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">*Client:</label>

                            <div class="col-xs-8">
                                <select id="addClientSelectBox" name="client_id">
                                    <option></option>
                                    @foreach($clients as $client)
                                        <option value="{{$client['id']}}">{{$client['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">*Building:</label>

                            <div class="col-xs-8" id="addBuildingSelectBoxContent">
                                <select id="addBuildingSelectBox" name="building_id">
                                    <option></option>
                                    @foreach($buildings as $building)
                                        <option value="{{$building['id']}}">{{$building['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Name:</label>

                            <div class="col-xs-8">
                                <input id="addAssetName" type="text" name="name" class="form-control" placeholder=""
                                       required=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Category:</label>

                            <div class="col-xs-8">
                                <select id="addAssetCategorySelectBox" name="assetMake">
                                    <option></option>
                                    @foreach($assetCategories as $assetCategory)
                                        <option value="{{$assetCategory['value']}}">{{$assetCategory['value']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Description:</label>

                            <div class="col-xs-8">
                                <textarea id="addAssetDescription" name="description" class="form-control"
                                          placeholder=""></textarea>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Model:</label>

                            <div class="col-xs-8">
                                <input id="addAssetModel" type="text" name="model" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Manufacturer:</label>

                            <div class="col-xs-8">
                                <input id="addAssetManufacturer" type="text" name="manufacturer" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Version:</label>

                            <div class="col-xs-8">
                                <input id="addAssetVersion" type="text" name="version" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Serial:</label>

                            <div class="col-xs-8">
                                <input id="addAssetSerial" type="text" name="serial" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Tag:</label>

                            <div class="col-xs-8">
                                <input id="addAssetTag" type="text" name="tag" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Quantity:</label>

                            <div class="col-xs-8">
                                <input id="addAssetQuantity" type="text" name="location" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Location:</label>

                            <div class="col-xs-8">
                                <input id="addAssetLocation" type="text" name="location" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Buy Price:</label>

                            <div class="col-xs-8">
                                <input id="addAssetBuyPrice" type="text" name="buyPrice" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Sell Price:</label>

                            <div class="col-xs-8">
                                <input id="addAssetSellPrice" type="text" name="sellPrice" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Remark:</label>

                            <div class="col-xs-8">
                                <textarea id="addAssetRemark" name="remark" class="form-control"
                                       placeholder=""></textarea>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Purchase Date:</label>

                            <div class="col-xs-8">
                                <input id="addAssetPurchaseDate" type="text" name="purchaseDate" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Produce Date:</label>

                            <div class="col-xs-8">
                                <input id="addAssetProduceDate" type="text" name="produceDate" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-sm-4 control-label">Expiry Date:</label>

                            <div class="col-xs-8">
                                <input id="addAssetExpiryDate" type="text" name="expiryDate" class="form-control"
                                       placeholder=""/>
                            </div>
                        </div>

                        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>

                        <div class="panel-footer text-right">
                            <a id="addAssetPage" class="btn btn-success">Add</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-asset"
                   href="#panelAssetList">
                    Asset List
                </a>
            </div>
            <div id="panelAssetList" class="panel-collapse in">
                <div class="panel-body no-padding panelOverFlow" id="assetList">
                    <div id="delete-confirmation" class="modal modal-alert modal-danger fade">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <i class="fa fa-times-circle"></i>
                                </div>
                                <div class="modal-title" id="confirmDeletionTitle"></div>
                                <div class="modal-body">Confirm to delete this asset</div>
                                <div class="modal-footer">
                                    <a id="confirmDeletionLink"
                                       class="btn btn-danger" data-dismiss="modal">Confirm Deletion</a>
                                </div>
                            </div>
                            <!-- / .modal-content -->
                        </div>
                        <!-- / .modal-dialog -->
                    </div> <!-- / .modal -->

                    <div class="panel-body no-padding">

                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped"
                               id="assetsTable">
                            <thead>
                            <tr>
                                <th><i class="fa fa-pencil"></i></th>
                                <th>Name</th>
                                <th>Client</th>
                                <th>Building</th>
                                <th>Model</th>
                                <th>Manufacturer</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop

@section('footerJs')
    <script type="text/javascript">
        var $_token = "{{ csrf_token() }}",
                assetsTable;

        $(document).on('click', '.delete-asset', function(){
            confirmDeletionInitPost($(this).data('url'), $(this).data('id'), $(this).data('name'), $_token, refreshAssets);
        });
        $(document).on('click', '.edit-asset', function(){
            generateAssetDetail($(this).data('url'), $(this).data('id'), $_token);
        });

        assetsTable = $('#assetsTable')
                .dataTable({
                    bAutoWidth: true,
                    processing: true,
                    serverSide: true,
                    bProcessing: true,
                    order: [[ 1, "desc" ]],
                    ajax: {
                        "url": "{{URL::action("AssetController@generateAssetList")}}",
                        "type": "POST",
                        "data": function (data) {
                            data._token = $_token;
                            data.buildingId = $('#searchAssetBuilding').val();
                        }
                    },
                    columns: [
                        {data: 'edit', name: 'edit', orderable: false, searchable: false},
                        {data: 'name', name: 'assets.name'},
                        {data: 'client_name', name: 'clients.name'},
                        {data: 'building_name', name: 'buildings.name'},
                        {data: 'model', name: 'assets.model'},
                        {data: 'manufacturer', name: 'assets.manufacturer'}
                    ],
                    iDisplayLength: 25,
                    drawCallback: function(  ) {

                    }
                });

        
        function refreshAssets() {
            assetsTable.api().ajax.reload();
        }


        if ($('#addAssetCategorySelectBox').length > 0) {
            $("#addAssetCategorySelectBox").selectize();
        }
        if ($('#addAssetPurchaseDate').length > 0) {
            $('#addAssetPurchaseDate').datepicker({
                format: 'dd/mm/yyyy'
            });
        }
        if ($('#addAssetProduceDate').length > 0) {
            $('#addAssetProduceDate').datepicker({
                format: 'dd/mm/yyyy'
            });
        }
        if ($('#addAssetExpiryDate').length > 0) {
            $('#addAssetExpiryDate').datepicker({
                format: 'dd/mm/yyyy'
            });
        }
        if ($('#addClientSelectBox').length > 0) {
            $("#addClientSelectBox").selectize();

            $('#addClientSelectBox').change(function () {
                $.post('{{URL::action("AssetController@filterClientBuilding")}}', {
                    client_id: $(this).val(),
                    _token: '{{csrf_token()}}'
                }).done(function (data) {
                    $('#addBuildingSelectBoxContent').html(data);
                });
            });
        }
        if ($('#addBuildingSelectBox').length > 0) {
            $("#addBuildingSelectBox").selectize();
        }

        $('#searchAssetClient').selectize();
        $('#searchAssetClient').change(function(){
            $.post('{{URL::action("AssetController@generateFilterBuilding")}}', {
                client_id: $(this).val(),
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                $('#filterBuilding').html(data);
            });
        });
        $('#searchAssetBuilding').selectize();

        // Actions on Asset Page
        if ($('a[id^="addAssetPage"]').length > 0) {
            $('a[id^="addAssetPage"]').click(function () {
                var ahref = $(this);
                ahref.text('adding...');
                ahref.bind('click', false);
                loadingOverlay();
                $.post('{{URL::action("AssetController@uiAdd")}}', {
                    building_id: $('#addBuildingSelectBox').val(),
                    name: $('#addAssetName').val(),
                    description: $('#addAssetDescription').val(),
                    category: $('#addAssetCategorySelectBox').val(),
                    model: $('#addAssetModel').val(),
                    manufacturer: $('#addAssetManufacturer').val(),
                    version: $('#addAssetVersion').val(),
                    serial: $('#addAssetSerial').val(),
                    tag: $('#addAssetTag').val(),
                    location: $('#addAssetLocation').val(),
                    quantity: $('#addAssetQuantity').val(),
                    buyPrice: $('#addAssetBuyPrice').val(),
                    sellPrice: $('#addAssetSellPrice').val(),
                    remark: $('#addAssetRemark').val(),
                    purchaseDate: changeDateFormatToISO($('#addAssetPurchaseDate').val()),
                    produceDate: changeDateFormatToISO($('#addAssetProduceDate').val()),
                    expiryDate: changeDateFormatToISO($('#addAssetExpiryDate').val()),
                    _token: '{{csrf_token()}}'
                }).done(function (data) {
                    ahref.text('Add');
                    refreshAssets();
                    ahref.unbind('click', false);
                    loadingRemove();
                    new PNotify({
                        title: 'Success',
                        text: 'Add completed!',
                        type: 'success',
                        icon: 'fa fa-check'
                    });
                }).fail(function (data) {
                    ahref.text('Add');
                    ahref.unbind('click', false);
                    loadingRemove();
                    new PNotify({
                        title: 'Fail',
                        text: 'Add failed! Please check the inputs!',
                        type: 'error',
                        icon: 'fa fa-times'
                    });
                });
            });
        }
    </script>
@stop