@extends('website.layout.master')

@section('title')

    Register Account

@endsection

@section('content')
    <style>
        .placeholders {
            padding-top: 10px;
        }

        .signupp {
            color: rgb(28, 123, 236);
        }

        .section-title {
            background-color: #fbfbfb;
            padding: 7%;
        }

        .form-check {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    </style>

    <!-- page title start -->
    <div class="breadcrumb-area bg-cover" style="background-image: url('website/images/bg/9.png');">
        <div class="container">
            <div class="breadcrumb-inner text-center">
                <h2 class="page-title">Sign up</h2>
                <ul class="page-list">
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li>Sign up</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- page title end -->


    <!-- login-inner-1 start -->
    <div class="contact-area pd-bottom-120 pd-top-120">
        <div class="container">
            <div class="contact-inner">
                <div class="row">

                    <div class="col-lg-6 mt-4 mt-lg-0 wow animated fadeInRight offset-md-3" data-wow-duration="1.5s"
                         data-wow-delay="0.3s">
                        <div class="section-title mb-0">
                            <h6 class="sub-title">Welcome!</h6>
                            <h2 class="title">Sign up to <span>continue</span></h2>
                            <p class="content">Sign up and get access to all the features of {{ $system->name }}.</p>
                            <form class="mt-4" method="post" action="{{ route('save_register_user') }}">
                                @csrf
                                @if($errors->any())
                                    @foreach($errors->all() as $error)
                                        <div class="alert alert-danger" role="alert">
                                            <i data-feather="alert-circle"></i>
                                            {{$error}}
                                        </div>
                                    @endforeach
                                @endif
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="single-input-inner style-border">
                                            <label>Name</label>
                                            <div class="placeholders">
                                                <input type="text" placeholder="Name" name="name" required
                                                       value="{{ old('email') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="single-input-inner style-border">
                                            <label>Email</label>
                                            <div class="placeholders">
                                                <input type="email" placeholder="Email" name="email" required
                                                       value="{{ old('email') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="single-input-inner style-border">
                                            <label>Phone</label>
                                            <div class="placeholders">
                                                <input type="text" placeholder="phone" name="phone" required
                                                       value="{{ old('phone') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <label>Password</label>
                                        <div class="single-input-inner style-border">
                                            <div class="placeholders">
                                                <input type="password" placeholder="Password" name="password" required
                                                       value="{{ old('password') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <label>Confirm Password</label>
                                        <div class="single-input-inner style-border">
                                            <div class="placeholders">
                                                <input type="password" placeholder="Confirm Password"
                                                       name="password_confirmation" required
                                                       value="{{ old('password_confirmation') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check"><input class="form-check-input" required type="checkbox"
                                                                       id="flexCheckDefault">
                                            <label class="form-check-label" for="flexCheckDefault">I agree to the <a
                                                    href="javascript:void(0)" class="">Terms and
                                                    conditions</a></label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="placeholders">
                                            <button class="btn btn-base mt-0 w-100 border-radius-5" type="submit">Sign
                                                up
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mt-4 text-center">
                                            <p class="mb-0">Already have an account ? <a href="{{route('login')}}"
                                                                                         class="fw-medium signupp">Sign
                                                    in </a></p>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- login-inner-1 end -->

@endsection