@extends('layouts.simple_admin_base')

@section('stylesheets')
    <!-- third party css -->
    <link href="{{ asset('simple-admin/assets/libs/datatables/dataTables.bootstrap4.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/datatables/buttons.bootstrap4.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/datatables/responsive.bootstrap4.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/datatables/select.bootstrap4.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('simple-admin/assets/libs/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet" />
    <link href="{{ asset('simple-admin/assets/libs/switchery/switchery.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('simple-admin/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- Summernote css -->
    <link href="{{ asset('simple-admin/assets/libs/summernote/summernote-bs4.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('content')

    <!-- start messages row -->
    <div class="row">
        <div class="col-12">
            @include('inc.components.simple_admin.messages')
        </div>
    </div>
    <!-- end messages row -->

    <!-- start profile image -->
    <div class="row">
        <div class="col-md-12">
            <div class="p-0 text-center">
                <div class="member-card">
                    <div class="avatar-xxl member-thumb mb-2 center-page mx-auto">
                        @if($asset->asset_image)
                            <img src="{{ asset('storage/images/assets/small/'. $asset->asset_image) }}" class="rounded-circle img-thumbnail" alt="asset-image">
                        @else
                            <img src="{{ asset('simple-admin/assets/images/users/avatar-11.jpg') }}" class="rounded-circle img-thumbnail" alt="asset-image">
                        @endif
                        <i class="mdi mdi-star-circle member-star text-success" title="verified user"></i>
                    </div>

                    <div class="">
                        <h5 class="mt-3">
                            {{ $asset->asset_name }}
                        </h5>
                    </div>

                    <p class="text-muted">
                        {{ $asset->asset_code }}
                    </p>

                    <button class="btn btn-icon btn-teal waves-effect waves-light" data-toggle="modal" data-target="#edit-asset-image">
                        <i class="far fa-edit"></i>
                        Edit Asset Image
                    </button>

                </div>

            </div>
            <!-- end card-box -->

        </div>
        <!-- end col -->
    </div>
    <!-- end profile image -->

    <div class="mt-5">
        <ul class="nav nav-tabs tabs-bordered">
            <li class="nav-item">
                <a href="#asset-information" data-toggle="tab" aria-expanded="false" class="nav-link active">
                    Asset Information
                </a>
            </li>
            <li class="nav-item">
                <a href="#qr-code" data-toggle="tab" aria-expanded="true" class="nav-link">
                    QR Code
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="asset-information">
                <!-- start row -->
                <div class="row">
                    <div class="col-lg-4">

                        <!-- asset information-->
                        <div class="panel card panel-fill">
                            <div class="card-header">
                                <h5 class="font-16 m-1">Asset Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-4">
                                    <strong>Name</strong>
                                    <br>
                                    <p class="text-muted">{{ $asset->asset_name }}</p>
                                </div>
                                <div class="mb-4">
                                    <strong>Code</strong>
                                    <br>
                                    <p class="text-muted">{{ $asset->asset_code }}</p>
                                </div>
                                <div class="mb-4">
                                    <strong>Type</strong>
                                    <br>
                                    <p class="text-muted">{{ $asset->assetType->name }}</p>
                                </div>
                                <div class="mb-4">
                                    <strong>Description</strong>
                                    <br>
                                    <p class="text-muted">{{ $asset->description ?? "N/A" }}</p>
                                </div>
                                <div class="mb-4">
                                    <strong>Status</strong>
                                    <br>
                                    <p class="text-muted">
                                        @if($asset->assetStatus->status == "ACTIVE")
                                            <span class="badge badge-success badge-pill">ACTIVE</span>
                                        @elseif($asset->assetStatus->status == "INACTIVE")
                                            <span class="badge badge-danger badge-pill">INACTIVE</span>
                                        @endif
                                    </p>
                                </div>

                                <div class="mb-0">
                                    <br>
                                    <div class="modal-footer">
                                        <button class="btn btn-icon btn-teal waves-effect waves-light" data-toggle="modal" data-target="#edit-asset-modal">
                                            <i class="fa fa-edit"></i>
                                            Edit
                                        </button>

                                        @if($userType == 'ADMIN')
                                            <button class="btn btn-icon btn-danger waves-effect waves-light" data-toggle="modal" data-target="#edit-asset-modal">
                                                <i class="fa fa-trash"></i>
                                                Remove
                                            </button>
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- /asset information-->
                    </div>

                    <div class="col-lg-8">

                        <!-- asset coordinates table -->
                        <div class="col-sm-12">

                            <div class="card-box">
                                <h5 class="mt-0 font-14 mb-3">Coordinates</h5>

                                <div id="remove-messages"></div>

                                <div class="pull pull-right">
                                    <button  class="btn btn-icon btn-teal waves-effect waves-light" data-toggle="modal" data-target="#add-new-asset-location" onclick="addCoordinates()">
                                        <i class="fa fa-plus-circle"></i>
                                        Add Coordinates
                                    </button>
                                </div>
                                <div class="table-responsive">
                                    @include('assets::inc.components.sections.asset_coordinates_table_section')
                                </div>
                            </div>
                        </div>
                        <!-- /asset coordinates table -->
                    </div>
                </div>
                <!-- end row -->
            </div>

            <div class="tab-pane" id="qr-code">
                <!-- qr code -->
                <div class="row">
                    <div class="col-lg-12">

                        <!-- user session table -->
                        <div class="col-sm-4">
                            <div class="card-box">
                                <img src="{{ asset('storage/images/qrcodes/'. $asset->asset_code .'.svg') }}" width="100%" height="30%" alt="qr-code"/>
                            </div>
                        </div>
                        <!-- /user session table -->
                    </div>
                </div>
                <!-- /qr code -->
            </div>
        </div>
    </div>

    @include('assets::inc.components.modals.edit_asset_image_modal')
    @include('assets::inc.components.modals.edit_asset_modal')
    @include('assets::inc.components.modals.add_asset_location_modal')
    @include('assets::inc.components.modals.edit_asset_location_modal')
    @include('assets::inc.components.modals.remove_asset_location_modal')
@endsection

@section('scripts')
    <script src="{{ asset('simple-admin/assets/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/switchery/switchery.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/select2/select2.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/bootstrap-filestyle2/bootstrap-filestyle.min.js') }}"></script>

    <!-- Required datatable js -->
    <script src="{{ asset('simple-admin/assets/libs/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <!-- Buttons examples -->
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.keyTable.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/buttons.print.min.js') }}"></script>

    <script src="{{ asset('simple-admin/assets/libs/bootstrap-filestyle2/bootstrap-filestyle.min.js') }}"></script>

    <!-- Responsive examples -->
    <script src="{{ asset('simple-admin/assets/libs/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/datatables/responsive.bootstrap4.min.js') }}"></script>

    <!-- Init js-->
    <script src="{{ asset('simple-admin/assets/js/pages/form-advanced.init.js') }}"></script>

@endsection

@section('page_scripts')
    <script>
        var manageCoordinatesTable;
        var baseUrl = '{{ route('asset.locations.all', $asset->id) }}';

        $(document).ready(function () {
            manageCoordinatesTable = $("#asset-coordinates-table").DataTable({
                lengthChange: !1,
                buttons: ["copy", "excel", "pdf"],
                ajax: {
                    url: baseUrl,
                    dataSrc: 'data'
                }
            });
        });

        //add coordinates function
        function addCoordinates() {

            $("#addNewAssetLocationForm")[0].reset();
            // remove the error
            $('.text-danger').remove();
            // remove the form-error
            $('.form-group').removeClass('has-error').removeClass('has-success');


            //submit coordinates form function
            $("#addNewAssetLocationForm").unbind('submit').bind('submit', function() {

                //remove the error text
                $(".text-danger").remove();
                //remove the form error
                $(".form-group").removeClass("has-error").removeClass("has-success");

                var latitude = $("#latitude").val();
                var longitude = $("#longitude").val();

                if(latitude && longitude){
                    var form = $(this);

                    //button loading
                    //$("#createSupplierBtn").button('loading');

                    $.ajax({
                        url : form.attr('action'),
                        type: form.attr('method'),
                        data: form.serialize(),
                        dataType: 'json',
                        success:function(response) {

                            // button loading
                            $("#addNewAssetLocationBtn").button('reset');

                            if(response.code == 201) {
                                // reload the manage categories table
                                manageCoordinatesTable.ajax.reload(null, false);

                                $("#addNewAssetLocationForm")[0].reset();
                                // remove the error text
                                $(".text-danger").remove();
                                // remove the form error
                                $('.form-group').removeClass('has-error').removeClass('has-success');

                                $('#add-coordinates-messages').html('<div class="alert alert-success text-success alert-dismissible fade show" role="alert">'+
                                    '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                                    '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.data.message +
                                    '</div>');

                                $(".alert-success").delay(500).show(10, function() {
                                    $(this).delay(3000).hide(10, function() {
                                        $(this).remove();
                                    });
                                }); // /.alert
                            }  // if

                        } // /success
                    });// ajax
                }

                return false;
            });//submit coordinates form function
        }
        //add coordinates function

        //edit coordinates function
        function editCoordinates(assetLocationId = null) {
            if(assetLocationId) {
                //remove category id
                $("#category_id").remove();

                //refresh the form
                $("#editAssetLocationForm")[0].reset();

                // remove the error
                $('.text-danger').remove();
                // remove the form-error
                $('.form-group').removeClass('has-error').removeClass('has-success');

                $.ajax({
                    url: baseUrl+'/'+assetLocationId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        $("#edit-latitude").val(response.data.latitude);
                        $("#edit-longitude").val(response.data.longitude);

                        //submit asset location form function
                        $("#editAssetLocationForm").unbind('submit').bind('submit', function() {

                            //remove the error text
                            $(".text-danger").remove();

                            //remove the form error
                            $(".form-group").removeClass("has-error").removeClass("has-success");

                            var latitude = $("#edit-latitude").val();
                            var longitude = $("#edit-longitude").val();

                            if(latitude && longitude){
                                var form = $(this);

                                //button loading
                                //$("#editCategoryBtn").button('loading');

                                $.ajax({
                                    url : baseUrl+'/'+assetLocationId+'/update',
                                    type: form.attr('method'),
                                    data: form.serialize(),
                                    dataType: 'json',
                                    success:function(response) {
                                        // button loading
                                        //$("#editAssetLocationBtn").button('reset');

                                        if(response.code === 200) {
                                            // reload the manage categories table
                                            manageCoordinatesTable.ajax.reload(null, false);

                                            //$("#editAssetLocationForm")[0].reset();
                                            // remove the error text
                                            $(".text-danger").remove();
                                            // remove the form error
                                            $('.form-group').removeClass('has-error').removeClass('has-success');

                                            $('#edit-coordinates-messages').html('<div class="alert alert-success text-success alert-dismissible fade show" role="alert">'+
                                                '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                                                '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.data.message +
                                                '</div>');

                                            $(".alert-success").delay(500).show(10, function() {
                                                $(this).delay(3000).hide(10, function() {
                                                    $(this).remove();
                                                });
                                            }); // /.alert
                                        }  // if

                                    } // /success
                                });// ajax
                            }

                            return false;
                        });//edit asset locations form function

                    }// success
                });// ajax
            }
        }
        //edit coordinates function

        //remove coordinates function
        function removeCoordinates(assetLocationId = null) {
            if(assetLocationId) {
                $("#removeAssetLocationBtn").unbind('click').bind('click', function() {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': '{{ @csrf_token() }}',
                        },
                        url: baseUrl+'/'+assetLocationId+'/delete',
                        type: 'DELETE',
                        dataType: 'json',
                        success: function(response) {
                            if(response.code === 200) {

                                //hide the modal
                                $("#remove-asset-location").modal('hide');

                                //reload the manage coordinates table
                                manageCoordinatesTable.ajax.reload(null, false);

                                $('#remove-messages').html('<div class="alert alert-success text-success alert-dismissible fade show" role="alert">'+
                                    '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                                    '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.data.message +
                                    '</div>');

                                $(".alert-success").delay(500).show(10, function() {
                                    $(this).delay(3000).hide(10, function() {
                                        $(this).remove();
                                    });
                                }); // /.alert
                            }//success
                        }// success
                    });// ajax

                });
            }//if
        }
        //remove coordinates function
    </script>
@endsection