@php
    // if (empty($user_meta)) {
    //     $user_userid = '';
    //     $user_title = '';
    //     $user_firstname = '';
    //     $user_lastname = '';
    //     $user_position = '';
    //     $user_email = '';
    //     $user_group = '';
    //     $user_school = '';
    //     $user_picture = '';
    // } else {
    //     $user_userid = $user_meta->user_userid;
    //     $user_title = $user_meta->user_title;
    //     $user_firstname = $user_meta->user_firstname;
    //     $user_lastname = $user_meta->user_lastname;
    //     $user_position = $user_meta->user_position;
    //     $user_email = $user_meta->user_email;
    //     $user_group = $user_meta->user_group;
    //     $user_school = $user_meta->user_school;
    //     $user_picture = $user_meta->user_picture;
    // }
@endphp
@extends('layouts.master')
@section('title', 'Register')

@section('style')
    <style>
        .card1 {
            margin: auto;
            width: 50%;
            /* ปรับขนาด card ตามต้องการ */
        }
    </style>
@endsection

@section('script')
    <script>
        function myFunction() {
            var x = document.getElementById("myInput");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
@endsection

@section('content')
    @include('layouts.header')
    <section class="wrapper image-wrapper bg-image bg-overlay text-white"
        data-image-src="{{ asset('/bg/3.jpg') }}"
        style="background-image: url('{{ asset('/bg/3.jpg') }}');">
        <div class="container pt-14 pt-md-16 pb-23 pb-md-15 text-center">
            <div class="row">
                <div class="row">
                    <div class="col-lg-8 col-xxl-7 mx-auto text-center" data-cues="slideInDown" data-group="page-title"
                        data-delay="600">
                        <h1 class="fs-58 mb-2 text-light">Register</h1>
                        {{-- <h2 class="fs-16 text-uppercase ls-xl text-light mb-4">Hello! This is Sandbox</h2> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <br>
    <div class="card1">
        <h3>Register Form</h3>
        <div class="card-body">
            <form action="{{ url('/registerinsert') }}" class="text-start mb-3" method="post"
                enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-10"></div>
                </div>
                <div class="card">
                    <div class="row py-2 px-2">
                        <div class="col-md-12">
                            <div class="form-floating mb-4">
                                <input id="textInputExample" type="text" class="form-control" placeholder="First Name"
                                    name="user_firstname">
                                <label for="textInputExample">First Name</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-floating mb-4">
                                <input id="textInputExample" type="text" class="form-control" placeholder="Last Name"
                                    name="user_lastname">
                                <label for="textInputExample">Last Name</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-floating mb-4">
                                <input id="textInputExample" type="email" class="form-control" placeholder="E-mail"
                                    name="user_email">
                                <label for="textInputExample">E-mail</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-floating mb-4">
                                <input id="textInputExample" type="text" class="form-control" placeholder="Username"
                                    name="name">
                                <label for="textInputExample">Username</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-4">
                                <input id="textInputExample" type="password" class="form-control" placeholder="Password"
                                    name="" id="myInput">
                                <div class="input-group-addon" style="cursor: poiter;" onclick="switch_hide_password1()">
                                    <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                </div>
                                <label for="textInputExample">Password</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating mb-4">
                                <input id="textInputExample" type="password" class="form-control"
                                    placeholder="Confirm Password" name="password" id="myInput">
                                <div class="input-group-addon" style="cursor: poiter;" onclick="switch_hide_password2()">
                                    <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                </div>
                                <label for="textInputExample">Confirm Password</label>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <button class="btn btn-info w-100 text-light" type="submit">Register</button>

            </form>
        </div>
        <p>You have an account? <a class="hover" style="color: #702a8d; font-size: 16px; font-weight: bold"
                data-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#modal-login">Login</a></p>
    </div>

    <br>

    @include('layouts.footer')
@endsection