@extends('log_layouts.main')

@section('container')
<div class="container">
    <div class="row vh-100 d-flex justify-content-center">
        <div class="col-12 align-self-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <img src="{{ url('') }}/assets/images/ship/1.jpg" class="d-block w-100" alt="...">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{{ url('') }}/assets/images/ship/2.jpg" class="d-block w-100" alt="...">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{{ url('') }}/assets/images/ship/3.jpg" class="d-block w-100" alt="...">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{{ url('') }}/assets/images/ship/4.jpg" class="d-block w-100" alt="...">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="{{ url('') }}/assets/images/ship/5.jpg" class="d-block w-100" alt="...">
                                        </div>
                                    </div>
                                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
                                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                      <span class="visually-hidden">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
                                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                      <span class="visually-hidden">Next</span>
                                    </a>
                                </div>
                            </div><!--end col-->
                            <div class="col-lg-5 offset-lg-1 align-self-center">
                                <div class="card">
                                    <div class="card-body p-0 auth-header-box">
                                        <div class="text-center p-3">
                                            <a href="index.html" class="logo logo-admin">
                                                <img src="{{ url('') }}/assets/images/ship/ship1.png" height="50" alt="logo" class="auth-logo">
                                            </a>
                                            <h4 class="mt-3 mb-1 fw-semibold text-white font-18">PT. Pelayaran Bahtera Adhiguna</h4>   
                                            <p class="text-muted  mb-0">Sign in to continue to PMS Ship</p>  
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                         <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div class="tab-pane active p-3" id="LogIn_Tab" role="tabpanel">                                        
                                                <form class="form-horizontal auth-form" action="index.html">
                    
                                                    <div class="form-group mb-2">
                                                        <label class="form-label" for="username">Username</label>
                                                        <div class="input-group">                                                                                         
                                                            <input type="text" class="form-control" name="username" id="username" placeholder="Enter username">
                                                        </div>                                    
                                                    </div><!--end form-group--> 
                        
                                                    <div class="form-group mb-2">
                                                        <label class="form-label" for="userpassword">Password</label>                                            
                                                        <div class="input-group">                                  
                                                            <input type="password" class="form-control" name="password" id="userpassword" placeholder="Enter password">
                                                        </div>                               
                                                    </div><!--end form-group--> 
                        
                                                    <div class="form-group mb-0 row">
                                                        <div class="col-12">
                                                            <button class="btn btn-primary w-100 waves-effect waves-light" type="button">Log In <i class="fas fa-sign-in-alt ms-1"></i></button>
                                                        </div><!--end col--> 
                                                    </div> <!--end form-group-->                           
                                                </form><!--end form-->
    
                                            </div>
                                        </div>
                                    </div><!--end card-body-->
                                    <div class="card-body bg-light-alt text-center">
                                        <span class="text-muted d-none d-sm-inline-block">PT. ATA © <script>
                                            document.write(new Date().getFullYear())
                                        </script></span>                                            
                                    </div>
                                </div><!--end card-->
                            </div><!--end col-->
                            
                        </div><!--end row-->
                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div>
       
    </div>
</div>
    
 
@endsection