@extends('layouts.master')
@section('page_title', 'Technical Assets')
@section('content')

    <div class="container bt-container bt-container-dashboard">
        {{ Form::page_header("Technical Assets",null,"img/icon_business.png") }}
        <div class="row" id="technical-assets-notes">
            @include('super_admin._technical_assets_notes')
        </div>
        <div class="row">
            <div class="grey-bg curve_container">
                @foreach($grid_settings['data'] as $section_name => $section)
                    <div class="asset-section">
                        @include('shared.grids._grid_label_button', ['grid_label' => $section_name])
                        @include('shared.grids._grid_table', ['columns' => $grid_settings['columns'], 'data' => $section])
                    </div>
                @endforeach
            </div>
            {{ Form::label_title('Additional Assets') }}
            @include('search._search_grid_wrapper')
            <div class="row-btn-notes">
                {{ Form::button_ex('Add New Asset', null, 'new_asset_btn') }}
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="border: none; text-align: center;">
                    {{ Form::label_title("Technical Assets") }}
                </div>
                <div class="modal-body" style="margin:0 3%; padding-bottom: 0">
                    {{ Form::open(['url' => action('BusinessTechnicalAssetController@post_technical_assets', compact('business')),'autocomplete' => 'off','files' => true, 'id' => 'asset_form']) }}
                    {{ Form::label_styled('' , 'asset_name', \App\Helpers\FormComponentHelper::SIZE_LARGE) }}
                    {{ Form::row_text_inline('new_asset_name', 'Asset Name', null, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                    <div class="view-form">
                        <div class="row">
                            <div class="no-left-pad col-md-4 col-xs-4 ">
                                <label class="bt-label first-label bt-label-medium " for="">Status</label>
                            </div>
                            <div class="no-left-pad col-md-7 col-xs-7 ">
                                <label class="bt-label second-label bt-label-large text-uppercase status"
                                       for=""></label>
                            </div>
                        </div>
                        {{ Form::row_label_inline('Link', '' , 'link', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_label_inline('Notes', '' , 'notes', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_label_inline('Info', '' , 'info', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_label_inline('Username', '' , 'username', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        <div class="row">
                            <div class="no-left-pad col-md-4 col-xs-4 ">
                                <label class="bt-label first-label bt-label-medium" for="">Password</label>
                            </div>
                            <div class="no-left-pad col-md-7 col-xs-7 ">
                                <label class="bt-label second-label bt-label-large text-upper password" for="">&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;</label>
                                <label class="bt-label second-label bt-label-large text-upper" for=""
                                       style="margin-left: 30px"><a class="view-pass"><u>View</u></a></label>
                            </div>
                        </div>
                        <div class="row text-center">
                            {{ Form::label_styled('', 'last_updated', \App\Helpers\FormComponentHelper::SIZE_SMALL) }}
                        </div>
                    </div>
                    <div class="edit-form">
                        <div class="row">
                            <div class="alert alert-danger technical_assets_alert"></div>
                        </div>
                        {{ Form::row_select_inline('status','Status', null, \App\Models\Business_Technical_Asset::$status_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null) }}
                        {{ Form::row_text_inline('link', 'Link', null, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_textarea_inline('notes', 'Notes', null, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_textarea_inline('info', 'Info', null, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_text_inline('username', 'Username', null, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        <div class="row">
                            <div class="no-left-pad col-md-4 col-xs-4 ">
                                <label class="bt-label first-label bt-label-medium" for="">Password</label>
                            </div>
                            <div class="no-left-pad col-md-7 col-xs-7 ">
                                {{ Form::password('password',['class'=>'bt-text bt-input password', 'id'=>'password', 'style'=>'width:100%', 'maxlength'=>175]) }}
                                <a class="view-pass-edit bt-label second-label bt-label-large text-upper"><u>View</u></a>
                            </div>
                        </div>
                        <div class="row text-center">
                            {{ Form::label_styled('', 'last_updated', \App\Helpers\FormComponentHelper::SIZE_SMALL) }}
                        </div>
                    </div>
                    {{ Form::separator_row_bottom('grey-divider') }}
                </div>
                <div class="modal-footer bt-button-row text-right" style="background: #FFFFFF; border: none;">
                    <button type="button" class="bt-btn-medium uppercase bt-button button-edit">Edit</button>
                    <button type="button" class="bt-btn-medium uppercase bt-button button-save">Save</button>
                    <button type="button" class="bt-btn-medium uppercase bt-button button-close" data-dismiss="modal">
                        Close
                    </button>
                    <input type="hidden" id="pass-hide">
                    <input type="hidden" name="business_technical_asset" id="business_technical_asset">
                    <input type="hidden" name="business_additional_asset" id="business_additional_asset">
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>

@endsection
@section('page_script')
    <script>
        $(document).ready(function () {
            $('th.status-color').removeClass('status-color');
            $('.status-color').each(function () {
                $(this).addClass('col-width-10');
                var status = $.trim($(this).text());
                change_status_color(status, $(this))
            });

            $("#status").html($("#status option").sort(function (a, b) {
                return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
            }));

            $('.column_name').addClass('col-width-20');
            $('.column_link').addClass('col-width-35');
            $('.column_notes').addClass('col-width-20');
            $('.column_status').addClass('col-width-10');

            $('#new_asset_btn').attr('data-toggle', 'modal').attr('data-target', '#myModal');
            $('#new_asset_btn').click(function () {
                $('form#asset_form').find("input[type=text], textarea").val("");
                $('form#asset_form').attr('action', '{{ action('BusinessTechnicalAssetController@add_additional_asset', compact('business')) }}');
                $('.view-form').hide();
                $('.edit-form').show();
                $('.button-save').show();
                $('.button-edit').hide();
                $('.view-pass-edit').hide();
                $('#info').parents('.row').hide();
                $('#status').val(0);
                $('#password').attr('type', 'text');
            });

            $('#view, #edit, #view_additional, #edit_additional').click(function(){
                $('form#asset_form').attr('action', '{{ action('BusinessTechnicalAssetController@post_technical_assets', compact('business')) }}');
                $('#new_asset_name').parents('.row').hide();
                $('.view-pass').show();
                $('.view-pass-edit').show();
                $('.alert-danger').hide();
                $('.alert-danger').text('');
                $('#password').attr('type', 'password');
                if($(this).attr('id') == 'view' || $(this).attr('id') == 'view_additional')
                {
                    $('.view-form').show();
                    $('.edit-form').hide();
                    $('.button-save').hide();
                    $('.button-edit').show();
                }
                else {
                    $('.view-form').hide();
                    $('.edit-form').show();
                    $('.button-save').show();
                    $('.button-edit').hide();
                }
                var url;
                var data;
                if($(this).attr('id') == 'view_additional' || $(this).attr('id') == 'edit_additional') {
                    url = '{{ action('BusinessTechnicalAssetController@additional_assets_view', compact('business')) }}';
                    data = {'business_additional_asset' : $(this).data('atom')};
                } else {
                    url = '{{ action('BusinessTechnicalAssetController@technical_assets_view',compact('business')) }}';
                    data = {'business_technical_asset' : $(this).data('atom')};
                }
                $.ajax({
                    dataType: 'json',
                    data: data,
                    url: url,
                    method: 'GET',
                    success: function (response) {
                        if (response.data.business_technical_asset) {
                            var status = response.data.business_technical_asset[0].asset_status;
                            $('.asset_name').text(response.data.business_technical_asset[0].asset_name);
                            $('.status').text(status);
                            $('.link').text(response.data.business_technical_asset[0].asset_link);
                            $('.notes').text(response.data.business_technical_asset[0].asset_notes);
                            $('.info').text(response.data.business_technical_asset[0].asset_info);
                            $('.info').parents('.row').show();
                            $('.username').text(response.data.business_technical_asset[0].username);
                            $('.last_updated').text(response.data.business_technical_asset[0].last_updated_label);
                            $("#status option").filter(function() {
                                return $(this).text() == status;
                            }).prop('selected', true);
                            $('textarea#notes').val(response.data.business_technical_asset[0].asset_notes);
                            $('#link').val(response.data.business_technical_asset[0].asset_link);
                            $('#info').val(response.data.business_technical_asset[0].asset_info);
                            $('#info').parents('.row').show();
                            $('#username').val(response.data.business_technical_asset[0].username);
                            $('#last_updated').val(response.data.business_technical_asset[0].last_updated_label);
                            $('#password').val('').hide();
                            $('#business_technical_asset').val(response.data.business_technical_asset[0].business_technical_asset);
                            $('a.view-pass').data('decrypt-url', response.data.decrypt_url);
                            change_status_color(status, $('.status'));
                            var password = password_dots(response.data.business_technical_asset[0].password.length);
                        } else if(response.data.business_additional_asset) {
                            var status = response.data.status_name;
                            $('.asset_name').text(response.data.business_additional_asset.name);
                            $('.status').text(status);
                            $('.link').text(response.data.business_additional_asset.link);
                            $('.notes').text(response.data.business_additional_asset.notes);
                            $('.info').parents('.row').hide();
                            $('.username').text(response.data.business_additional_asset.username);
                            $('.last_updated').text(response.data.business_additional_asset.last_updated_label);
                            $("#status option").filter(function() {
                                return $(this).text() == status;
                            }).prop('selected', true);
                            $('textarea#notes').val(response.data.business_additional_asset.notes);
                            $('#link').val(response.data.business_additional_asset.link);
                            $('#info').parents('.row').hide();
                            $('#username').val(response.data.business_additional_asset.username);
                            $('#last_updated').text(response.data.business_additional_asset.last_updated_label);
                            $('#password').val('').hide();
                            $('#business_additional_asset').val(response.data.business_additional_asset.business_additional_asset);
                            $('a.view-pass').data('decrypt-url', response.data.decrypt_url);
                            change_status_color(status, $('.status'));
                            var password = password_dots(response.data.business_additional_asset.password.length);
                        }
                        $('.password').html(password);
                        $('.view-pass-edit').show();
                        if (!password) {
                            $('.view-pass').hide();
                        }
                        else {
                            $('.view-pass').show();
                        }
                    },
                    error: function (xhr, status, err) {
                        var responseJSON = JSON.parse(xhr.responseText);
                    }
                });
            });

            $('.button-save').click(function(){
                var url = $('form#asset_form').attr('action');
                $.ajax({
                    dataType: 'json',
                    data: $('form').serialize(),
                    url: url,
                    method: 'POST',
                    success: function (response) {
                        $('.button-close').click();
                        location.href = '{{ action('BusinessTechnicalAssetController@technical_assets',compact('business')) }}';
                    },
                    error: function (xhr, status, err) {
                        var responseJSON = JSON.parse(xhr.responseText);
                        $('.alert-danger').html('<label id="crop-error" class="modal-error">' + responseJSON.link + '</label>');
                        $('.alert-danger').show();
                    }
                });
            });

            $('.button-edit').click(function () {
                $('.view-form').hide();
                $('.edit-form').show();
                $('.button-save').show();
                $('.button-edit').hide();
            });

            $('.view-pass').click(function () {
                $.ajax({
                    dataType: 'json',
                    url: $('a.view-pass').data('decrypt-url'),
                    method: 'GET',
                    success: function (response) {
                        $('.password').html(response['decrypted_password']);
                    }
                });
                $(this).hide();
            });

            $('.view-pass-edit').click(function () {
                $.ajax({
                    dataType: 'json',
                    url: $('a.view-pass').data('decrypt-url'),
                    method: 'GET',
                    success: function (response) {
                        $('#password').val(response['decrypted_password']).attr('type', 'text');
                    }
                });
                $('#password').show().select();
                $(this).hide();
            });

            autoheight('.technical-assets-notes');
        });

        function change_status_color(status, selector) {
            selector.removeClass('green');
            selector.removeClass('red');
            selector.removeClass('yellow');
            if(status == '{{ \App\Models\Business_Technical_Asset::$status_map[\App\Models\Business_Technical_Asset::STATUS_COMPLETE] }}')
                selector.addClass('green');
            else if(status == '{{ \App\Models\Business_Technical_Asset::$status_map[\App\Models\Business_Technical_Asset::STATUS_INCOMPLETE] }}'
                || status == '{{ \App\Models\Business_Technical_Asset::$status_map[\App\Models\Business_Technical_Asset::STATUS_ON_HOLD] }}'
                || status == '{{ \App\Models\Business_Technical_Asset::$status_map[\App\Models\Business_Technical_Asset::STATUS_DESIGN_HOLD] }}')
                selector.addClass('red');
            else
                selector.addClass('yellow');
        }

        function password_dots(password_length) {
            if(!$('#password').val())
            {
                $('#password').attr('type', 'text');
            }
            var password = '';
            if(password_length)
            {
                password = '&#9679;'.repeat(7);
            }
            return password;
        }

        function edit_technical_assets_notes(business) {
            $('div#view-notes').fadeOut(400, function () {
                $(this).remove();
            });
            $.ajax({
                type: "POST",
                url: '{{ action('BusinessTechnicalAssetController@edit_technical_assets_notes') }}',
                data: {business: business},
                success: function (result) {
                    $('div#technical-assets-notes').append(result.view).hide().fadeIn();
                }
            });
        }

        function cancel_edit_technical_assets_notes(business) {
            $('div#edit-notes').fadeOut(400, function () {
                $(this).remove();
            });
            $.ajax({
                type: "GET",
                url: '{{ action('BusinessTechnicalAssetController@cancel_edit_technical_assets_notes') }}',
                data: {business: business},
                success: function (result) {
                    $('div#technical-assets-notes').append(result.view).hide().fadeIn();
                    autoheight('.technical-assets-notes');
                }
            });
        }

        function save_technical_assets_notes(business) {
            var technical_assets_notes = $('form#technical-assets-notes-edit');
            $.ajax({
                type: "POST",
                url: '{{ action('BusinessTechnicalAssetController@save_technical_assets_notes') }}',
                data: technical_assets_notes.serialize(),
                success: function (result) {
                    $('div#edit-notes').fadeOut(400, function () {
                        $(this).remove();
                    });
                    $('div#technical-assets-notes').append(result.view).hide().fadeIn();
                    autoheight('.technical-assets-notes');
                }
            });
        }
    </script>
@endsection
@section('page_style')
    <style>
        table.table.source-data-table.source-table-responsive > tbody > tr > td {
            max-width: 150px;
        }

        .asset-section {
            margin-bottom: 30px;
        }

        .col-width-35 {
            max-width: 379px;
            overflow-wrap: break-word;
        }

        .col-width-20 {
            max-width: 200px;
            overflow-wrap: break-word;
        }

        td button {
            margin-left: 3px;
        }

        .modal-dialog .bt-label.second-label.bt-label-large {
            color: #949494;
            font-size: 14px !important;
        }

        .modal-dialog .asset_name {
            margin-bottom: 25px;
            margin-left: -15px;
        }

        .modal-dialog .first-label {
            margin: 5px 0;
        }

        .modal-dialog .second-label{
            font-size: 14px!important;
            color: #979797;
            margin: 5px 0;
        }

        .modal-dialog .button-edit,
        .modal-dialog .button-save,
        .modal-dialog .button-close {
            background: #ffffff !important;
        }

        .modal-dialog .password,
        .modal-dialog .link,
        .modal-dialog .notes,
        .modal-dialog .info,
        .modal-dialog .username {
            max-width: 360px;
            overflow-wrap: break-word;
        }

        .modal-dialog .bt-label-exlarge {
            padding-bottom: 10px;
        }

        .modal-dialog .separator-row-bottom {
            margin: 5px -15px 5px -15px !important;
        }

        .alert-danger.technical_assets_alert {
            color: #cc0000;
            background: none;
            border: none;
            padding: 0;
        }

        .row-btn-notes {
            margin-bottom: 20px;
            text-align: right;
        }

        .technical-assets-notes {
            border: none;
            resize: none;
        }

        textarea[disabled] {
            -webkit-text-fill-color: #000000;
        }

        .bottom-margin {
            margin-left: 0;
            margin-right: 0;
        }
    </style>
@endsection