@extends('layout.padrao')
@section('content')
@include('Intranet.menu')

<div class="col col-12 margin-bottom-30 ajusteMobile">
    <div class="col margin-bottom-30">
        <h2>
            Armadores
        </h2>
    </div>
    <div class="w-100"></div>
    <div class="col col-sm-12 col-md-12 col-lg-12">
        <div class="row col shadow folha-interna folha-azul rounded box padding-15-15">
            <div class="col-sm-12 col-md-12 col-lg-3 armador margin-bottom-30">
                <div class="cardObj">
                    <div class="infoLogo">
                        <img class="img-fluid" src="{!! asset('/image/armadores/CMA300x180.png') !!}" alt="CMA">
                    </div>
                    <div class="cardBottom">
                        <label for="loginCma">Login</label>

                        <div class="buttonIn">
                            <input class="form-control" type="text" name="loginCma" id="loginCma"
                                value="operacoescsa@commodity.ch" disabled>
                            <button class="btn copy" name="btnLoginCma" id="btnLoginCma" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('loginCma')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>

                        </br>
                        <label for="senhaCma">Senha</label>
                        <div class="buttonIn">
                            <input class="form-control" type="text" name="senhaCma" id="senhaCma" value="Csa@1234"
                                disabled>
                            <button class="btn copy" name="btnSenhaCma" id="btnSenhaCma" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('senhaCma')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-md-12 col-lg-3 armador margin-bottom-30">
                <div class="cardObj">
                    <div class="infoLogo">
                        <img class="img-fluid" src="{!! asset('/image/armadores/hapag-lloyd300x180.png') !!}"
                            alt="Hapag Lloyd">
                    </div>
                    <div class="cardBottom">
                        <label for="loginCma">Login</label>

                        <div class="buttonIn">
                            <input class="form-control" type="text" name="loginHapag" id="loginHapag"
                                value="operacoescsa@commodity.ch" disabled>
                            <button class="btn copy" name="btnLoginHapag" id="btnLoginHapag" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('loginHapag')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>

                        </br>
                        <label for="senhaCma">Senha</label>
                        <div class="buttonIn">
                            <input class="form-control" type="text" name="senhaHapag" id="senhaHapag"
                                value="Booking@123" disabled>
                            <button class="btn copy" name="btnSenhaHapag" id="btnSenhaHapag" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('senhaHapag')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-md-12 col-lg-3 armador margin-bottom-30">
                <div class="cardObj">
                    <div class="infoLogo">
                        <img class="img-fluid" src="{!! asset('/image/armadores/MSC300x180.png') !!}" alt="MSC">
                    </div>
                    <div class="cardBottom">
                        <label for="loginCma">Login</label>

                        <div class="buttonIn">
                            <input class="form-control" type="text" name="loginMSC" id="loginMSC"
                                value="operacoescsa@commodity.ch" disabled>
                            <button class="btn copy" name="btnLoginMSC" id="btnLoginMSC" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('loginMSC')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>

                        </br>
                        <label for="senhaCma">Senha</label>
                        <div class="buttonIn">
                            <input class="form-control" type="text" name="senhaMSC" id="senhaMSC" value="Operacoes@2021"
                                disabled>
                            <button class="btn copy" name="btnSenhaMSC" id="btnSenhaMSC" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('senhaMSC')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-3 armador margin-bottom-30">
                <div class="cardObj">
                    <div class="infoLogo">
                        <img class="img-fluid" src="{!! asset('/image/armadores/MAERSKSEA300x180.png') !!}" alt="Maersk">
                    </div>
                    <div class="cardBottom">
                        <label for="loginCma">Login</label>

                        <div class="buttonIn">
                            <input class="form-control" type="text" name="loginMaersk" id="loginMaersk"
                                value="csa_operacional" disabled>
                            <button class="btn copy" name="btnLoginMaersk" id="btnLoginMaersk" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('loginMaersk')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>

                        </br>
                        <label for="senhaCma">Senha</label>
                        <div class="buttonIn">
                            <input class="form-control" type="text" name="senhaMaersk" id="senhaMaersk" value="Csa@1234"
                                disabled>
                            <button class="btn copy" name="btnSenhaMaersk" id="btnSenhaMaersk" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('senhaMaersk')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-md-12 col-lg-3 armador margin-bottom-30">
                <div class="cardObj">
                    <div class="infoLogo">
                        <img class="img-fluid" src="{!! asset('/image/armadores/ONE300x180.png') !!}" alt="ONE">
                    </div>
                    <div class="cardBottom">
                        <label for="loginCma">Login</label>

                        <div class="buttonIn">
                            <input class="form-control" type="text" name="loginOne" id="loginOne" value="CSA2018"
                                disabled>
                            <button class="btn copy" name="btnLoginOne" id="btnLoginOne" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('loginOne')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>

                        </br>
                        <label for="senhaCma">Senha</label>
                        <div class="buttonIn">
                            <input class="form-control" type="text" name="senhaOne" id="senhaOne" value="OPERcsa2018"
                                disabled>
                            <button class="btn copy" name="btnSenhaOne" id="btnSenhaOne" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('senhaOne')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-3 armador margin-bottom-30">
                <div class="cardObj">
                    <div class="infoLogo">
                        <img class="img-fluid" src="{!! asset('/image/armadores/Hamburg-Sud300x180.png') !!}"
                            alt="Hamburg Sud">
                    </div>
                    <div class="cardBottom">
                        <label for="loginCma">Login</label>

                        <div class="buttonIn">
                            <input class="form-control" type="text" name="loginHS" id="loginHS" value="OPERACOESCSA"
                                disabled>
                            <button class="btn copy" name="btnLoginHS" id="btnLoginHS" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('loginHS')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>

                        </br>
                        <label for="senhaCma">Senha</label>
                        <div class="buttonIn">
                            <input class="form-control" type="text" name="senhaHS" id="senhaHS" value="Csa@2020"
                                disabled>
                            <button class="btn copy" name="btnSenhaHS" id="btnSenhaHS" data-toggle="tooltip"
                                data-placement="top" title="Copy" onclick="copyText('senhaHS')">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('Intranet.style')
@include('Intranet.armadores.style')

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({
            trigger: 'hover'
        });

        /* Alertando o usuario */
        $('[data-toggle="tooltip"]').on('click', function () {
            /* escondendo a tooltip */
            setTimeout(()=> {$(this).tooltip('hide')},1000);

            /* alterando a mensagem da tooltip */
            $(this).attr("data-original-title","Copied!");

            /* exibindo a tooltip */
            $(this).tooltip('show');

            /* escondendo a tooltip */
            setTimeout(()=> {$(this).tooltip('hide')},1000);

            /* alterando a mensagem da tooltip */
            $(this).attr("data-original-title","Copy");
        });
    });
</script>

@endSection