@extends('frontend.layouts.main')
@section('title', 'Đăng nhập')
@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/login.css') }}?v={{ time() }}">
<link rel="stylesheet" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}">
@endsection

@section('content')
<div class="breadcrumb">
    <div class="ctnr">
        <ul>
            <li>
                <a href="{{ makeLink('home') }}">{{ __('home.home') }}</a>
            </li>
            <li>
                Đăng nhập
            </li>
        </ul>
    </div>
</div>
<section class="form-login-section">
    <div class="ctnr">
        <div class="content">
            <div class="form-login">

                <div class="img-wrap">
                    <img src="{{ asset($loginSetting->image_path ) }}" alt="avatar">
                </div>

                <div class="info">
                    <div class="header-title">
                        <h1>Đăng Nhập</h1>
                        <p>Vui lòng nhập thông tin để đăng nhập vào hệ thống</p>
                    </div>

                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul style="margin: 0; padding-left: 20px;">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                    @endif

                    <form action="{{ route('profile.login') }}" method="POST">
                        @csrf

                        <div class="form-group">
                            <label for="field">{{ __('common.Tài khoản') }} <span class="required">*</span></label>
                            <div class="input-with-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
                                    <path
                                        d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z"
                                        fill="currentColor" />
                                    <path
                                        d="M4 20C4 16.6863 6.68629 14 10 14H14C17.3137 14 20 16.6863 20 20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V20Z"
                                        fill="currentColor" />
                                </svg>
                                <input type="text" name="field" placeholder="Nhập số điện thoại*"
                                    value="{{ old('field') }}" required>
                            </div>
                            @error('field')
                            <span class="error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="password">{{ __('common.Mật Khẩu') }} <span class="required">*</span></label>
                            <div class="input-with-icon">
                                <svg height="20" viewBox="-64 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0">
                                    </path>
                                    <path
                                        d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0">
                                    </path>
                                </svg>
                                <input type="password" name="password" class="password-input"
                                    placeholder="{{ __('common.Nhập mật khẩu') }}" required>

                                <!-- Icon con mắt (hiện mật khẩu) -->
                                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    class="toggle-password-eye hide-eye d-none" height="20">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <path
                                            d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z"
                                            stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path
                                            d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z"
                                            stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </g>
                                </svg>

                                <!-- Icon con mắt gạch (ẩn mật khẩu) -->
                                <svg height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                                    class="toggle-password-eye show-eye">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <path
                                            d="M2.99902 3L20.999 21M9.8433 9.91364C9.32066 10.4536 8.99902 11.1892 8.99902 12C8.99902 13.6569 10.3422 15 11.999 15C12.8215 15 13.5667 14.669 14.1086 14.133M6.49902 6.64715C4.59972 7.90034 3.15305 9.78394 2.45703 12C3.73128 16.0571 7.52159 19 11.9992 19C13.9881 19 15.8414 18.4194 17.3988 17.4184M10.999 5.04939C11.328 5.01673 11.6617 5 11.9992 5C16.4769 5 20.2672 7.94291 21.5414 12C21.2607 12.894 20.8577 13.7338 20.3522 14.5"
                                            stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </g>
                                </svg>
                            </div>
                            @error('password')
                            <span class="error">{{ $message }}</span>
                            @enderror
                        </div>



                        <button type="submit" class="submit-btn">{{ __('common.Đăng nhập') }}</button>

                        <div class="form-footer">
                            <p>
                                {{ __('common.Bạn chưa có tài khoản') }}?
                                <a href="{{ route('profile.register') }}">
                                    {{ __('common.Đăng ký') }}
                                </a>
                            </p>

                            <p>
                                Bạn đã quên mật khẩu?
                                <a href="{{ route('password.request') }}">
                                    Lấy lại mật khẩu
                                </a>
                            </p>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        $('.toggle-password-eye').on('click', function() {
            const $container = $(this).closest('.input-with-icon');
            const $input = $container.find('input.password-input');
            const isPassword = $input.attr('type') === 'password';

            // Toggle input type
            $input.attr('type', isPassword ? 'text' : 'password');

            // Toggle icon visibility
            $container.find('.show-eye').toggleClass('d-none', isPassword);
            $container.find('.hide-eye').toggleClass('d-none', !isPassword);
        });
    });
</script>
@endsection