@extends('auth.layouts.master')

@push('head-stylesheets')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href={{ mix('css/front-styles/theme-main.css') }}>

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
{{-- <link rel="stylesheet" href="{{ mix('css/theme-style.css')}}">   --}}
@endpush

@section('title')
  Login
@endsection
@section('content')

<div class="d-flex justify-content-end flex-column onePage">

    <header class="login-header">
        <div class="container-fluid h-100">
            <div class="d-flex h-100 flex-wrap align-items-center justify-content-center justify-content-md-between">
                <div class="logo-reef">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item py-1 align-middle">
                            <a href="https://reef.rocks" target="_blank">
                                <img src="{{asset('images/REEFwhite2022.svg')}}" alt="Reef Logo" class="logo">
                            </a>
                        </li> 
                    </ul>
                </div>
                <div>
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item py-1 ps-5 ps-md-0 align-middle dropdown dropdown-sing-out d-none d-md-block">
                            <a href="#"  data-bs-toggle="modal" data-bs-target="#update-details">
                                <span class="icon" data-toggle="dropdown"></span>
                                Login
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

<div class="menu-spacer spacer-login"></div>

<section class="home-box-rounded d-flex align-items-center">
    <div class="container">
      <div class="big-box " style="background-image: url('{{asset('images/Login-photo.png')}}');">
          <div class="row">
              <div class="col-12 offset-0 col-lg-10 offset-lg-1">
                  <div class="box" data-aos="fade-in" data-aos-offset="1" data-aos-delay="0" data-aos-duration="1200" data-aos-once="true">
                      <h1 class="h2 mb-3 mb-md-4 text-uppercase smaller f-35">Welcome to the Reef Portal</h1>
                      <ul class="list-inline list-inline-fix mb-0 text-center text-md-start mt-5">
                          <li class="list-inline-item py-1 mb-4 mb-md-0">
                              <a href="#" data-bs-toggle="modal" data-bs-target="#update-details" class="btn-green login font-poppins">Login</a>
                          </li>
                          <li class="list-inline-item py-1">
                              <a href="{{route('contact')}}" class="btn-register font-poppins">Contact</a>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>


<footer class="login-footer text-center text-lg-start">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6 mb-5 mb-lg-0">
                <p><a href="#"><img src="{{asset('images/reef-logo.png')}}" alt="#"></a></p>
                <ul class="list-inline mb-2">
                    <li class="list-inline-item py-1">
                        <a href="https://www.facebook.com/thirdworkspace" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="19.003" height="19.003" viewBox="0 0 19.003 19.003">
                                <path d="M18.407,1.928H5.738A3.167,3.167,0,0,0,2.571,5.1V17.763a3.167,3.167,0,0,0,3.167,3.167h6.335V12.617H9.7V10.242h2.375V8.46a2.969,2.969,0,0,1,2.969-2.969h2.969V7.866H15.041a.594.594,0,0,0-.594.594v1.782h3.266l-.594,2.375H14.448v8.314h3.959a3.167,3.167,0,0,0,3.167-3.167V5.1a3.167,3.167,0,0,0-3.167-3.168Z" transform="translate(-2.571 -1.928)" fill="#17202a"/>
                            </svg>
                        </a>
                    </li>

                    <li class="list-inline-item py-1">
                        <a href="https://instagram.com/thirdworkspace" target="_blank">
                            <svg id="Icon_ionic-logo-instagram" data-name="Icon ionic-logo-instagram" xmlns="http://www.w3.org/2000/svg" width="16.632" height="16.632" viewBox="0 0 16.632 16.632">
                                <path d="M16.281,5.886a3.475,3.475,0,0,1,3.465,3.465v6.93a3.475,3.475,0,0,1-3.465,3.465H9.351a3.475,3.475,0,0,1-3.465-3.465V9.351A3.475,3.475,0,0,1,9.351,5.886h6.93m0-1.386H9.351A4.865,4.865,0,0,0,4.5,9.351v6.93a4.865,4.865,0,0,0,4.851,4.851h6.93a4.865,4.865,0,0,0,4.851-4.851V9.351A4.865,4.865,0,0,0,16.281,4.5Z" transform="translate(-4.5 -4.5)" fill="#17202a"/>
                                <path d="M24.665,11.079a1.04,1.04,0,1,1,1.04-1.04A1.037,1.037,0,0,1,24.665,11.079Z" transform="translate(-11.844 -6.228)" fill="#17202a"/>
                                <path d="M15.408,12.636a2.772,2.772,0,1,1-2.772,2.772,2.775,2.775,0,0,1,2.772-2.772m0-1.386a4.158,4.158,0,1,0,4.158,4.158,4.159,4.159,0,0,0-4.158-4.158Z" transform="translate(-7.092 -7.092)" fill="#17202a"/>
                            </svg>
                        </a>
                    </li>

                    <li class="list-inline-item py-1">
                        <a href="https://www.linkedin.com/company/thethirdworkspace/" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" width="19.404" height="19.404" viewBox="0 0 19.404 19.404">
                                <path d="M18.018,2.25H1.382A1.392,1.392,0,0,0,0,3.649V20.255a1.392,1.392,0,0,0,1.382,1.4H18.018a1.4,1.4,0,0,0,1.386-1.4V3.649A1.4,1.4,0,0,0,18.018,2.25ZM5.865,18.882H2.989V9.622h2.88v9.26ZM4.427,8.357A1.668,1.668,0,1,1,6.094,6.69,1.668,1.668,0,0,1,4.427,8.357ZM16.645,18.882H13.769v-4.5c0-1.074-.022-2.456-1.494-2.456-1.5,0-1.728,1.169-1.728,2.378v4.583H7.671V9.622H10.43v1.265h.039a3.029,3.029,0,0,1,2.724-1.494c2.911,0,3.452,1.919,3.452,4.414Z" transform="translate(0 -2.25)" fill="#17202a"/>
                            </svg>
                        </a>
                    </li>
                </ul>
                <div class="w-100 clearfix"></div>
                <ul class="list-inline mb-0">
                    <li class="list-inline-item py-1">
                        <img src="{{asset('images/TechRound100-Winner-Badge.png')}}" alt="#">
                    </li>
                </ul>
            </div>
            <div class="col-12 col-lg-6">
                <div class="row g-5">
                    <div class="col-12 col-sm-4">
                        <ul class="list-unstyled menu-list mb-0">
                            {{-- <li>Top Cities</li>
                            <li><a>London</a></li>
                            <li><a>Sheffield</a></li>
                            <li><a>Leeds</a></li>
                            <li><a>Manchester</a></li>
                            <li><a>Liverpool</a></li>
                            <li><a>Birmingham</a></li> --}}
                        </ul>
                    </div>

                    <div class="col-12 col-sm-4">
                        <ul class="list-unstyled menu-list mb-0">
                            <li>Company</li>
                            <li><a href="https://reef.rocks/about-us">About</a></li>
                            <li><a href="https://reef.rocks/blogs">Blog</a></li>
                            <li><a href="https://reef.rocks/careers">Careers</a></li>
                            <li><a href="https://reef.rocks/terms-of-use-for-Reef">Terms</a></li>
                            <li><a href="https://reef.rocks/privacy-policy">Privacy</a></li>
                            <li><a href="https://reef.rocks/cookie-policy">Cookies</a></li>
                        </ul>
                    </div>

                    <div class="col-12 col-sm-4">
                        <ul class="list-unstyled menu-list mb-0">
                            <li>Information</li>
                            <li><a href="https://reef.rocks/pricing">Pricing</a></li>
                            <li><a href="https://reef.rocks/map">Our Spaces</a></li>
                            <li><a href="https://reef.rocks/venues">Become a space</a></li>
                            <li><a href="https://reef.rocks/partners">Become a partner</a></li>
                            
                            <li><a href="https://reef.rocks/login">Login to your portal</a></li>
                   
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copy">
        <div class="container">
            <p class="mb-0 text-center">© Copyright <script>document.write(new Date().getFullYear());</script>. Reef App Limited. All rights reserved.Made by <a href="https://www.unlimitedcoders.com/" target="_blank">UnlimitedCoders</a></p>
        </div>
    </div>
</footer>



  

@endsection

@section('modals')


<div class="modal" tabindex="-1" id="update-details">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content content-update">
            <form method="POST" action="{{ route('login') }}">
                @csrf
            <div class="modal-header header-update-details">
            <h5 class="modal-title text-white title-update reset-password">Login</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
            <div class="modal-body text-white"> 
                <div>
                    <div>
                        <div class="placeholder-settings-modal">
                            <x-jet-label class="text-nowrap placeholder-settings-text" for="email" value="{{ __('Email') }}" />Email:   
                            <x-jet-input id="email" class="block mt-1 w-full reset-input-field card_holder  mb-3 ms-0" type="email" name="email" :value="old('email')" required autofocus />
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="placeholder-settings-modal">
                            <x-jet-label  class="placeholder-settings-text" for="password" value="{{ __('Password') }}" />Password:
                            <x-jet-input id="password" class="block mt-1 w-full reset-input-field card_holder mb-3 ms-0" type="password" name="password" required autocomplete="current-password" />
                        </div>
                    </div>
                
                    <p class="mb-0">
                        @if (Route::has('password.request'))
                            <a class="text-white reset-password f-14" href="{{ route('password.request') }}">
                                {{ __('Forgot Your Password?') }}
                            </a>
                        @endif
                        
                    </p>

                    <p class="mb-0">
                        {{-- <a class="text-white reset-password  f-14" href="{{ route('reset_username') }}"> --}}
                            {{-- Forgot Your Username? --}}
                        {{-- </a>   --}}
                    </p>
                </div>
                
            </div>
            <div class="modal-footer footer-update justify-content-center">
                <x-jet-button class="ml-4 btn-green">
                    {{ __('Log in') }}
                </x-jet-button>
            </div>
            </form>
        </div>
    </div>
</div>

@endsection




@push('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

{{--  add bootstrap 5 js file --}}
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

{{-- <script src="{{ mix('js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ mix('js/bootstrap.bundle.min.js') }}"></script> --}}
<script>
    AOS.init();
  </script>
<script>
     // ============Modals Input Field=========
$(document).ready(function(){
    $('.placeholder-settings-modal').click(function(){
        console.log($(this).closest('div'));
    $(this).parent().find('.card_holder').focus();
});
    $(document).on('focusin', '.card_holder', function(){
       
          var x = $(this).closest('div').find('.placeholder-settings-modal').hide();
          console.log(x);
        //x.style.display = "none";
    })
    $(document).on('focusout', '.card_holder', function(){
            var x = $(this).closest('div').find('.placeholder-settings-modal');

            if($(this).val() == "") {
             $(x).show();
         } else {
            $(x).hide();
         }
    })
})
</script>

@endpush