@extends('layouts.auth.app', ['title' => 'Login'])

@section('content')

<style>
    body {
        background: #f4f7fb;
    }

    .login-wrapper {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 16px;
    }

    .login-card {
        width: 100%;
        max-width: 1000px;
        display: flex;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    }

    .login-card .login-form-side {
        flex: 1 1 50%;
        padding: 56px 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .login-card .login-image-side {
        flex: 1 1 50%;
        background-size: cover;
        background-position: center;
        position: relative;
        min-height: 100%;
    }

    .login-logo img {
        max-width: 220px;
        margin-bottom: 32px;
    }

    .login-form-side h2 {
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8px;
    }

    .login-form-side p.subtitle {
        color: #64748b;
        margin-bottom: 28px;
    }

    .login-form-side label {
        font-weight: 500;
        color: #334155;
        margin-bottom: 6px;
    }

    .login-form-side .form-control {
        background-color: #eef2ff;
        border: 1px solid #e2e8f5;
        border-radius: 8px;
        padding: 12px 14px;
        height: auto;
    }

    .login-form-side .form-control:focus {
        background-color: #eef2ff;
        border-color: #3551b5;
        box-shadow: 0 0 0 3px rgba(53, 81, 181, 0.15);
    }

    .login-form-side .btn-primary {
        background-color: #2647ac;
        border-color: #2647ac;
        border-radius: 8px;
        padding: 12px;
        font-weight: 600;
        letter-spacing: .3px;
    }

    .login-form-side .btn-primary:hover {
        background-color: #1e3a8e;
        border-color: #1e3a8e;
    }

    .login-form-side .form-check {
        margin-bottom: 24px;
    }

    .login-footer {
        margin-top: 28px;
        text-align: center;
        font-size: 13px;
        color: #94a3b8;
    }

    .login-footer a {
        color: #2647ac;
        text-decoration: none;
        font-weight: 500;
    }

    .login-footer a:hover {
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        .login-card {
            flex-direction: column;
        }

        .login-card .login-image-side {
            min-height: 220px;
            order: -1;
        }

        .login-card .login-form-side {
            padding: 36px 28px;
        }
    }
</style>

<div class="login-wrapper">
    <div class="login-card">

        <div class="login-form-side">

            @if ($message = Session::get('error'))
                <div class="alert alert-danger alert-block">
                    <button type="button" class="close text-white" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
            @endif

            <div class="login-logo">
                {{-- <img src="{{ asset('images/logo-suzuki.png') }}" alt="Suzuki"> --}}
                <h2 class="text-danger mb-0">APOTEK</h2>
                <h2 class="text-primary">IBNU SINA MULIA</h2>
            </div>

            <hr>

            {{-- <h2>Login</h2> --}}
            <p class="subtitle">Selamat datang. Silahkan masukkan email dan password yang sudah terdaftar.</p>

            <form class="needs-validation" action="{{ route('login') }}" method="POST" id="form-login" novalidate>
                @csrf

                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email" required>
                    <div class="invalid-feedback">
                        Harap Isi Email
                    </div>
                </div>

                <div class="form-group">
                    <label for="password" class="control-label">Password</label>
                    <input type="password" name="password" id="password" class="form-control" placeholder="Password"
                        required minlength="6">
                    <div class="invalid-feedback">
                        Harap Isi Password
                    </div>
                </div>

                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="remember" name="remember">
                    <label class="form-check-label" for="remember">Remember me</label>
                </div>

                <div class="form-group">
                    <button type="submit" id="login" class="btn btn-primary btn-lg btn-block">
                        Login
                    </button>
                </div>
            </form>

            <div class="login-footer">
                Copyright &copy; {{ date('Y') }} Apotek Ibnu Sina Mulia. <br> Support by
                <a href="#" target="_blank">Sembrani Solusi Digital</a>
            </div>

        </div>

        <div class="login-image-side"
            style="background-image: url('https://img.freepik.com/foto-premium/apoteker-menjual-obat-obatan-di-toko-apotek_308072-842.jpg');">
        </div>

    </div>
</div>

@endsection

{{--
@push('js')
<script>
    function login() {
            // $.get('/sanctum/csrf-cookie', function(){

            $.ajax({
                url: '/api/login',
                type: "Post",
                cache: false,
                data: {
                    "email": $('#email').val(),
                    "password": $('#password').val()
                },

                success: function (response) {
                                  localStorage.setItem('token', response.token);

                        window.location.href = "{{ route('dashboard.index') }}";

// Swal.fire({
// icon: 'success',
// title: response.data.message,
// showConfirmButton: false,
// timer: 500
// }).then(() => {

// });
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
// )}
$(document).ready(function () {
const form = document.getElementById('form-login');

$('#login').click(function (e) {
e.preventDefault();

if (form.checkValidity()) {
login();
console.log('halo')
}
});
});
</script>
@endpush --}}