@extends('layouts.app')

@section('title', $page_title)

@push('styles')
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
@endpush

@section('content')
<div class="d-flex flex-column-fluid">
    <div class="container-fluid">
        <!--begin::Notice-->
        <div class="card card-custom gutter-b">
            <div class="card-header flex-wrap py-5">
                <div class="card-title">
                    <h3 class="card-label"><i class="{{ $page_icon }} text-primary"></i> {{ $sub_title }}</h3>
                </div>
                <div class="card-toolbar">
                    <!--begin::Button-->
                    @if (permission('asset-add'))
                    <a href="javascript:void(0);" onclick="showNewFormModal('{{__('file.Add New Asset')}}','{{__('file.Save')}}')" class="btn btn-primary btn-sm font-weight-bolder">
                        <i class="fas fa-plus-circle"></i> {{__('file.Add New')}}</a>
                    @endif
                    <!--end::Button-->
                </div>
            </div>
        </div>
        <!--end::Notice-->
        <!--begin::Card-->
        <div class="card card-custom">
            <div class="card-header flex-wrap py-5">
                <form method="POST" id="form-filter" class="col-md-12 px-0">
                    <div class="row">
                        <x-form.textbox labelName="{{__('file.Asset Tag')}}" name="tag" col="col-md-3" />
                        <x-form.textbox labelName="{{__('file.Asset Name')}}" name="name" col="col-md-3" />
                        <x-form.selectbox labelName="{{__('file.Asset Type')}}" name="asset_type_id" col="col-md-3" class="selectpicker">
                            @if (!$types->isEmpty())
                            @foreach ($types as $key => $value)
                                <option value="{{ $value->id }}">{{ $value->name }}</option>
                            @endforeach
                            @endif
                        </x-form.selectbox>
                        <x-form.selectbox labelName="{{__('file.Asset Status')}}" name="asset_status" col="col-md-3" class="selectpicker">
                            @foreach (ASSET_STATUS as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </x-form.selectbox>
                        <div class="col-md-12">
                            <button id="btn-reset" class="btn btn-danger btn-sm btn-elevate btn-icon float-right" type="button"
                            data-toggle="tooltip" data-theme="dark" title="{{__('file.Reset')}}">
                            <i class="fas fa-undo-alt"></i></button>

                            <button id="btn-filter" class="btn btn-primary btn-sm btn-elevate btn-icon mr-2 float-right" type="button"
                            data-toggle="tooltip" data-theme="dark" title="{{__('file.Search')}}">
                            <i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <!--begin: Datatable-->
                <div id="kt_datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="dataTable" class="table table-bordered table-hover">
                                <thead class="bg-primary">
                                    <tr>
                                        @if (permission('asset-bulk-delete'))
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="select_all" onchange="select_all()">
                                                <label class="custom-control-label" for="select_all"></label>
                                            </div>
                                        </th>
                                        @endif
                                        <th>{{__('file.SL')}}</th>
                                        <th>{{__('file.Image')}}</th>
                                        <th>{{__('file.Asset Tag')}}</th>
                                        <th>{{__('file.Asset Name')}}</th>
                                        <th>{{__('file.Asset Type')}}</th>
                                        <th>{{__('file.Purchase Date')}}</th>
                                        <th>{{__('file.Cost')}}</th>
                                        <th>{{__('file.Warranty')}}</th>
                                        <th>{{__('file.Asset User')}}</th>
                                        <th>{{__('file.Location')}}</th>
                                        <th>{{__('file.Asset Status')}}</th>
                                        <th>{{__('file.Status')}}</th>
                                        <th>{{__('file.Action')}}</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr class="bg-primary">
                                        @if (permission('asset-bulk-delete'))
                                        <th></th>
                                        @endif
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th style="text-align: right !important;font-weight:bold;">{{__('file.Total')}}</th>
                                        <th style="text-align: right !important;font-weight:bold;"></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <!--end: Datatable-->
            </div>
        </div>
        <!--end::Card-->
    </div>
</div>
@include('asset::modal')
@include('asset::view')
@endsection

@push('scripts')
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/spartan-multi-image-picker-min.js"></script>
<script>
    var table;
    $(document).ready(function(){
        $('.date').datetimepicker({format: 'YYYY-MM-DD',ignoreReadonly: true});
        table = $('#dataTable').DataTable({
            "processing": true, //Feature control the processing indicator
            "serverSide": true, //Feature control DataTable server side processing mode
            "order": [], //Initial no order
            "responsive": true, //Make table responsive in mobile device
            "bInfo": true, //TO show the total number of data
            "bFilter": false, //For datatable default search box show/hide
            "lengthMenu": [
                [5, 10, 15, 25, 50, 100, 1000, 10000, -1],
                [5, 10, 15, 25, 50, 100, 1000, 10000, "All"]
            ],
            "pageLength": 25, //number of data show per page
            "language": {
                processing: `<i class="fas fa-spinner fa-spin fa-3x fa-fw text-primary"></i> `,
                emptyTable: '<strong class="text-danger">{{__('file.No Data Found')}}</strong>',
                infoEmpty: '',
                zeroRecords: '<strong class="text-danger">{{__('file.No Data Found')}}</strong>'
            },
            "ajax": {
                "url": "{{route('asset.datatable.data')}}",
                "type": "POST",
                "data": function (data) {
                    data.tag           = $("#form-filter #tag").val();
                    data.name          = $("#form-filter #name").val();
                    data.asset_type_id = $("#form-filter #asset_type_id option:selected").val();
                    data.asset_status  = $("#form-filter #asset_status option:selected").val();
                    data._token        = _token;
                }
            },
            "columnDefs": [{

                    @if (permission('asset-bulk-delete'))
                    "targets": [0,2,13],
                    @else
                    "targets": [1,12],
                    @endif
                    "orderable": false,
                    "className": "text-center"
                },
                {

                    @if (permission('asset-bulk-delete'))
                    "targets": [1,6,8,11,12],
                    @else
                    "targets": [0,5,7,10,11],
                    @endif

                    "className": "text-center"
                },
                {

                    @if (permission('asset-bulk-delete'))
                    "targets": [7],
                    @else
                    "targets": [6],
                    @endif

                    "className": "text-right"
                }
            ],
            "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6' <'float-right'B>>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'<'float-right'p>>>",

            "buttons": [
                @if (permission('asset-report'))
                {
                    'extend':'colvis','className':'btn btn-secondary btn-sm text-white','text':'{{__('file.Column')}}','columns': ':gt(0)'
                },
                {
                    "extend": 'print',
                    'text':'{{__('file.Print')}}',
                    'className':'btn btn-secondary btn-sm text-white',
                    "title": "{{ $page_title }} List",
                    "orientation": "landscape", //portrait
                    "pageSize": "A4", //A3,A5,A6,legal,letter
                    'columns': ':gt(0)',
                    "exportOptions": {
                        @if (permission('asset-bulk-delete'))
                        columns: ':visible:not(:eq(0),:eq(2),:eq(13))'
                        @else
                        columns: ':visible:not(:eq(1),:eq(12))'
                        @endif
                    },
                    customize: function (win) {
                        $(win.document.body).addClass('bg-white');
                        $(win.document.body).find('table thead').css({'background':'#034d97'});
                        $(win.document.body).find('table tfoot tr').css({'background-color':'#034d97'});
                        $(win.document.body).find('h1').css('text-align', 'center');
                        $(win.document.body).find('h1').css('font-size', '15px');
                        $(win.document.body).find('table').css( 'font-size', 'inherit' );

                    },
                    footer:true,
                },
                {
                    "extend": 'csv',
                    'text':'{{__('file.CSV')}}',
                    'className':'btn btn-secondary btn-sm text-white',
                    "title": "{{ $page_title }} List",
                    "filename": "{{ strtolower(str_replace(' ','-',$page_title)) }}-list",
                    "exportOptions": {
                        @if (permission('asset-bulk-delete'))
                        columns: ':visible:not(:eq(0),:eq(2),:eq(13))'
                        @else
                        columns: ':visible:not(:eq(1),:eq(12))'
                        @endif
                    },
                    footer:true,
                },
                {
                    "extend": 'excel',
                    'text':'{{__('file.Excel')}}',
                    'className':'btn btn-secondary btn-sm text-white',
                    "title": "{{ $page_title }} List",
                    "filename": "{{ strtolower(str_replace(' ','-',$page_title)) }}-list",
                    "exportOptions": {
                        @if (permission('asset-bulk-delete'))
                        columns: ':visible:not(:eq(0),:eq(2),:eq(13))'
                        @else
                        columns: ':visible:not(:eq(1),:eq(12))'
                        @endif
                    },
                    footer:true,
                },
                {
                    "extend": 'pdf',
                    'text':'{{__('file.PDF')}}',
                    'className':'btn btn-secondary btn-sm text-white',
                    "title": "{{ $page_title }} List",
                    "filename": "{{ strtolower(str_replace(' ','-',$page_title)) }}-list",
                    "orientation": "portrait", //portrait
                    "pageSize": "A4", //A3,A5,A6,legal,letter
                    "exportOptions": {
                        @if (permission('asset-bulk-delete'))
                        columns: ':visible:not(:eq(0),:eq(2),:eq(13))'
                        @else
                        columns: ':visible:not(:eq(1),:eq(12))'
                        @endif
                    },
                    footer:true,
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 7; //<-- set fontsize to 16 instead of 10
                        doc.styles.tableHeader.fontSize = 7;
                        doc.styles.tableFooter.fontSize = 7;
                        doc.pageMargins = [5,5,5,5];
                    }

                },
                @endif
                @if (permission('asset-bulk-delete'))
                {
                    'className':'btn btn-danger btn-sm delete_btn d-none text-white',
                    'text':'{{__('file.Delete')}}',
                    action:function(e,dt,node,config){
                        multi_delete();
                    }
                }
                @endif
            ],
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api(), data;

                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };
                @if (permission('asset-bulk-delete'))
                var index = 7;
                @else
                var index = 6;
                @endif
                // Total over all pages
                    // Total over this page
                    total = api
                        .column( index )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    // Total over this page
                    pageTotal = api
                        .column(index, { page: 'current'} )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    // Update footer
                    $( api.column( index ).footer() ).html('= '+number_format(pageTotal) +' ('+ number_format(total) +' Total)');

            }
        });

        $('#btn-filter').click(function () {
            table.ajax.reload();
        });

        $('#btn-reset').click(function () {
            $('#form-filter')[0].reset();
            $('#form-filter .selectpicker').selectpicker('refresh');
            table.ajax.reload();
        });

        $(document).on('click', '#save-btn', function () {
            let form = document.getElementById('store_or_update_form');
            let formData = new FormData(form);
            let url = "{{route('asset.store.or.update')}}";
            let id = $('#update_id').val();
            let method;
            if (id) {
                method = 'update';
            } else {
                method = 'add';
            }
            store_or_update_data(table, method, url, formData);
        });

        $(document).on('click', '.edit_data', function () {
            let id = $(this).data('id');
            $('#store_or_update_form')[0].reset();
            $('#store_or_update_form').find('.is-invalid').removeClass('is-invalid');
            $('#store_or_update_form').find('.error').remove();
            if (id) {
                $.ajax({
                    url: "{{route('asset.edit')}}",
                    type: "POST",
                    data: { id: id,_token: _token},
                    dataType: "JSON",
                    success: function (data) {
                        if(data.status == 'error'){
                            notification(data.status,data.message)
                        }else{
                            $('#store_or_update_form #update_id').val(data.id);
                            $('#store_or_update_form #name').val(data.name);
                            $('#store_or_update_form #tag').val(data.tag);
                            $('#store_or_update_form #asset_type_id').val(data.asset_type_id);
                            $('#store_or_update_form #purchase_date').val(data.purchase_date);
                            $('#store_or_update_form #warranty').val(data.warranty);
                            $('#store_or_update_form #user').val(data.user);
                            $('#store_or_update_form #location').val(data.location);
                            $('#store_or_update_form #cost').val(data.cost);
                            $('#store_or_update_form #asset_status').val(data.asset_status);
                            $('#store_or_update_form #description').val(data.description);
                            $('#store_or_update_form .selectpicker').selectpicker('refresh');


                            if(data.photo){
                                $('#store_or_update_form .spartan_image_placeholder').css('display','none');
                                $('#store_or_update_form .spartan_remove_row').css('display','none');
                                $('#store_or_update_form .img_').css('display','block');
                                $('#store_or_update_form .img_').attr('src',`{{ 'storage/'.ASSET_PHOTO_PATH }}`+data.photo);
                            }else{
                                $('#store_or_update_form .spartan_image_placeholder').css('display','block');
                                $('#store_or_update_form .spartan_remove_row').css('display','none');
                                $('#store_or_update_form .img_').css('display','none');
                                $('#store_or_update_form .img_').attr('src','');
                            }
                            $('#store_or_update_form #old_photo').val(data.photo);

                            $('#store_or_update_modal').modal({
                                keyboard: false,
                                backdrop: 'static',
                            });
                            $('#store_or_update_modal .modal-title').html(
                                '<i class="fas fa-edit text-white"></i> <span>{{__('file.Edit')}} ' + data.name + '</span>');
                            $('#store_or_update_modal #save-btn').text('{{__('file.Update')}}');
                        }

                    },
                    error: function (xhr, ajaxOption, thrownError) {
                        console.log(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
                    }
                });
            }
        });

        $(document).on('click', '.view_data', function () {
            let id = $(this).data('id');
            if (id) {
                $.ajax({
                    url: "{{route('asset.view')}}",
                    type: "POST",
                    data: { id: id,_token: _token},
                    success: function (data) {
                        $('#view_modal #view-data').html('');
                        $('#view_modal #view-data').html(data);
                        $('#view_modal').modal({
                            keyboard: false,
                            backdrop: 'static',
                        });
                    },
                    error: function (xhr, ajaxOption, thrownError) {
                        console.log(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
                    }
                });
            }
        });

        $(document).on('click', '.delete_data', function () {
            let id    = $(this).data('id');
            let name  = $(this).data('name');
            let row   = table.row($(this).parent('tr'));
            let url   = "{{ route('asset.delete') }}";
            delete_data(id, url, table, row, name);
        });

        function multi_delete(){
            let ids = [];
            let rows;
            $('.select_data:checked').each(function(){
                ids.push($(this).val());
                rows = table.rows($('.select_data:checked').parents('tr'));
            });
            if(ids.length == 0){
                Swal.fire({
                    type:'error',
                    title:'Error',
                    text:'{{__('file.Please checked at least one row of table!')}}',
                    icon: 'warning',
                });
            }else{
                let url = "{{route('asset.bulk.delete')}}";
                bulk_delete(ids,url,table,rows);
            }
        }

        $(document).on('click', '.change_status', function () {
            let id     = $(this).data('id');
            let name   = $(this).data('name');
            let status = $(this).data('status');
            let row    = table.row($(this).parent('tr'));
            let url    = "{{ route('asset.change.status') }}";
            change_status(id, url, table, row, name, status);
        });

        $("#photo").spartanMultiImagePicker({
            fieldName:        'photo',
            maxCount: 1,
            rowHeight:        '200px',
            groupClassName:   'col-md-12 col-sm-12 col-xs-12',
            maxFileSize:      '',
            dropFileLabel : "Drop Here",
            allowedExt: 'png|jpg|jpeg',
            onExtensionErr : function(index, file){
                Swal.fire({icon: 'error',title: 'Oops...',text: '{{__('file.Only png,jpg,jpeg file format allowed!')}}'});
            },

        });

        $("input[name='photo']").prop('required',true);

        $('.remove-files').on('click', function(){
            $(this).parents(".col-md-12").remove();
        });


    });


    function showNewFormModal(modal_title, btn_text) {
        $('#store_or_update_form')[0].reset();
        $('#store_or_update_form #update_id').val('');
        $('#store_or_update_form').find('.is-invalid').removeClass('is-invalid');
        $('#store_or_update_form').find('.error').remove();
        $('#store_or_update_form .selectpicker').selectpicker('refresh');

        $('#store_or_update_form .spartan_image_placeholder').css('display','block');
        $('#store_or_update_form .spartan_remove_row').css('display','none');
        $('#store_or_update_form .img_').css('display','none');
        $('#store_or_update_form .img_').attr('src','');
        $('#store_or_update_form #old_photo').val('');

        $('#store_or_update_modal').modal({
            keyboard: false,
            backdrop: 'static',
        });
        $('#store_or_update_modal .modal-title').html('<i class="fas fa-plus-square"></i> '+modal_title);
        $('#store_or_update_modal #save-btn').text(btn_text);
    }
    </script>
@endpush