<div>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
        .bg-video {
            position: fixed; 
            right: 0; 
            bottom: 0;
            min-width: 100%; 
            min-height: 100%;
        }

        /* login panel design */
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
	        font-family: Raleway, sans-serif;
        }

        .screen {		
            background: linear-gradient(90deg, #5D54A4, #7C78B8);		
            position: relative;	
            height: 600px;
            width: 360px;	
            box-shadow: 0px 0px 24px #5C5696;
            opacity: 0.8;
        }

        .screen__content {
            z-index: 1;
            position: relative;	
            height: 100%;
        }

        .screen__background {		
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);	
        }

        .screen__background__shape {
            transform: rotate(45deg);
            position: absolute;
        }

        .screen__background__shape1 {
            height: 520px;
            width: 520px;
            background: #FFF;	
            top: -50px;
            right: 120px;	
            border-radius: 0 72px 0 0;
        }

        .screen__background__shape2 {
            height: 220px;
            width: 220px;
            background: #6C63AC;	
            top: -172px;
            right: 0;	
            border-radius: 32px;
        }

        .screen__background__shape3 {
            height: 540px;
            width: 190px;
            background: linear-gradient(270deg, #5D54A4, #6A679E);
            top: -24px;
            right: 0;	
            border-radius: 32px;
        }

        .screen__background__shape4 {
            height: 400px;
            width: 200px;
            background: #7E7BB9;	
            top: 420px;
            right: 50px;	
            border-radius: 60px;
        }

        .login {
            width: 320px;
            padding: 30px;
            padding-top: 156px;
        }

        .login__field {
            padding: 20px 0px;	
            position: relative;	
        }

        .login__icon {
            position: absolute;
            top: 30px;
            color: #7875B5;
        }

        .login__input {
            border: none;
            border-bottom: 2px solid #D1D1D4;
            background: none;
            padding: 10px;
            padding-left: 24px;
            font-weight: 700;
            width: 75%;
            transition: .2s;
        }

        .login__input:active,
        .login__input:focus,
        .login__input:hover {
            outline: none;
            border-bottom-color: #6A679E;
        }

        .login__submit {
            background: #fff;
            font-size: 14px;
            margin-top: 30px;
            padding: 16px 20px;
            border-radius: 26px;
            border: 1px solid #D4D3E8;
            text-transform: uppercase;
            font-weight: 700;
            display: flex;
            align-items: center;
            width: 100%;
            color: #4C489D;
            box-shadow: 0px 2px 2px #5C5696;
            cursor: pointer;
            transition: .2s;
        }

        .login__submit:active,
        .login__submit:focus,
        .login__submit:hover {
            border-color: #6A679E;
            outline: none;
        }

        .button__icon {
            font-size: 24px;
            margin-left: auto;
            color: #7875B5;
        }

        .social-login {	
            position: absolute;
            height: 140px;
            width: 160px;
            text-align: center;
            bottom: 0px;
            right: 0px;
            color: #fff;
        }

        .social-icons {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .social-login__icon {
            padding: 20px 10px;
            color: #fff;
            text-decoration: none;	
            text-shadow: 0px 0px 8px #7875B5;
        }

        .social-login__icon:hover {
            transform: scale(1.5);	
        }
    </style>
    <div class="container" style="height:100%;">
        <!-- <iframe width="560" class="bg-video" height="315" src="https://www.youtube.com/embed/YwEkAdmTZ1M?si=gLGV0X8TNNfbDAWs?autoplay=1&loop=1&rel=0&version=3&controls=0&mute=1&color=white&playsinline=1&iv_load_policy=3&showinfo=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> -->
        <video playsinline muted autoplay loop id="myVideo" class="bg-video"> 
             <!--muted -->
            <source src="<?php echo e(asset('assets/video/National_Flag.mp4')); ?>" type="video/mp4">
        </video>
        <div class="row justify-content-center" >
            <div class="container">
                <div class="screen">
                    <div class="screen__content">
                        <form class="login" wire:submit.prevent="login">
                            <div class="login__field">
                                <i class="login__icon fas fa-user"></i>
                                <input type="email" class="login__input <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="email" wire:model="email" placeholder="Email Address">
                                <!--[if BLOCK]><![endif]--><?php if($errors->has('email')): ?>
                                    <div class="text-danger"><?php echo e($errors->first('email')); ?></div>
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            </div>
                            <div class="login__field">
                                <i class="login__icon fas fa-lock"></i>
                                <input type="password" class="login__input <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="password" wire:model="password" placeholder="Login Password">
                                <!--[if BLOCK]><![endif]--><?php if($errors->has('password')): ?>
                                    <div class="text-danger"><?php echo e($errors->first('password')); ?></div>
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            </div>
                            <!--[if BLOCK]><![endif]--><?php if(session()->has('error')): ?>
                                <div class="text-danger"><?php echo e(session('error')); ?></div>
                            <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            <button class="button login__submit" type="submit">
                                <span wire:loading class="button__text">Processing...</span>
                                <span class="button__text" wire:loading.remove>Sing In</span>
                                <i class="button__icon fas fa-chevron-right"></i>
                            </button>				
                        </form>
                        <!--<div class="social-login">-->
                        <!--    <div class="social-icons">-->
                        <!--        <a href="#" class="social-login__icon" id="playPauseButton"><i class="fa-regular fa-circle-play"></i></a>-->
                                <!--<a href="#" class="social-login__icon fab fa-facebook"></a>-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div>
                    <div class="screen__background">
                        <span class="screen__background__shape screen__background__shape4"></span>
                        <span class="screen__background__shape screen__background__shape3"></span>		
                        <span class="screen__background__shape screen__background__shape2"></span>
                        <span class="screen__background__shape screen__background__shape1"></span>
                    </div>		
                </div>
            </div>
        </div>
    </div>
</div>

    <?php
        $__scriptKey = '69878263-0';
        ob_start();
    ?>
    <script data-navigate-once>
        document.addEventListener('livewire:navigated', () => {
            const clip = document.querySelector(".bg-video");
            // const playPauseButton = document.getElementById('playPauseButton');
            
            const myHandler = function () {
                clip.muted = false;
                clip.play();
            };
            document.addEventListener("click", myHandler, { once: true });
            document.addEventListener("touchstart", myHandler, { once: true });
            document.addEventListener("keydown", myHandler, { once: true });
            // document.addEventListener("scroll", myHandler);
        
            // playPauseButton.addEventListener('click', () => {
            //     if (clip.paused) {
            //       clip.muted = false;
            //       clip.play();
            //     } else {
            //       clip.pause();
            //     }
            // });
            $(document).trigger("click");
        }, { once: true });
        
        document.addEventListener("livewire:navigated", function() {
            const clip = document.querySelector(".bg-video");
            function getLocalStream() {

                navigator.mediaDevices
                .getUserMedia({ video: false, audio: true })
                .then((mediaStream) => {
                    clip.muted = false;
                    clip.play();
                })
                .catch((err) => {
                    // always check for errors at the end.
                    console.error(`${err.name}: ${err.message}`);
                });
            }
            getLocalStream();
        }, { once: true });
    </script>
    <?php
        $__output = ob_get_clean();

        \Livewire\store($this)->push('scripts', $__output, $__scriptKey)
    ?><?php /**PATH C:\laragon\www\marketing_data_analysis\resources\views/livewire/login.blade.php ENDPATH**/ ?>