@extends('web.layout.login_header')
@section('title', 'Home')
@section('content')
    <style>
        body {
            background-image: url(img/background.jpg);
            background-size: cover;
            background-attachment: fixed;
        }

        body:before {
            content: "";
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            height: 100%;
            left: 0px;
            /* background-color: rgba(0, 0, 0, 0.7); */
        }

        .bg-inner {
            background-color: white !important;
            border: white solid 1px !important;
            border-radius: 3px !important;
        }

        .heading {
            position: relative !important;
            z-index: 10 !important;
            top: 47px !important;
            font-weight: 400 !important;
        }

        .profile {
            width: 5rem !important;
            top: 47px !important;
            left: 43% !important;
            right: 40% !important;
            z-index: 11 !important;
            position: relative !important;
        }

        .innerup::after {
            border-radius: 0rem !important;
            content: "" !important;
            background: #6d0000b8 !important;
            position: absolute !important;
            top: -2px;
            left: -16px;
            right: -16px;
            bottom: 0 !important;
            border-bottom-left-radius: 138px !important;
            border-bottom-right-radius: 149px !important;
            height: 12rem;
            border-top-left-radius: 4px !important;
            border-top-right-radius: 3px !important;
        }

        .imgProfile {
            border-radius: 50% !important;
            width: 6rem;
            height: 5rem !important;
            margin-top: 9px;
        }

        .headingContainer {
            left: 43% !important;
            right: 40% !important;
            color: white !important;
        }

        /* floating label */
        .form-control {
        border: none !important;
        outline: none !important;
        border-bottom:  1px solid #6d0000b8 !important;
    }

    .form-control:focus {
        border: none !important;
        outline: none !important;
        border-bottom: 1px solid #9f9f9f !important;
        box-shadow: none;
    }

        .form-group {
            position: relative !important;
            margin-bottom: 1.5rem !important;
        }

        .form-control-placeholder {
            position: absolute !important;
            top: 0 !important;
            padding: 7px 0 0 13px !important;
            transition: all 200ms !important;
            opacity: 0.5 !important;
        }

        .form-control:focus+.form-control-placeholder,
        .form-control:valid+.form-control-placeholder {
            font-size: 90% !important;
            transform: translate3d(0, -100%, 0) !important;
            opacity: 1 !important;
        }

        .onoverlay {
            position: absolute !important;
            top: -1px !important;
            height: 11rem !important;
            right: -9px !important;
            bottom: 0px !important;
            width: 102.5% !important;
            border-top-right-radius: 0px !important;
            border-top-left-radius: 0px !important;
            border-bottom-right-radius: 123px !important;
            border-bottom-left-radius: 123px !important;
        }

        .headerTop {
            margin-top: -11rem !important;
            z-index: 10;
            color: white;
        }

        .display-5 {
            font-weight: 700;
        }

        .card-padding {
            width: 18rem;
            padding-top: 1px;
            border: 0px !important;
            padding-left: 1px;
            padding-right: 1px;
        }

        .text-simple {
            color: white;
            font-weight: normal;
            font-size: 1.2rem;
            word-spacing: 5px;
            font-stretch: ultra-expanded;
        }
        }

        .text-huge {
            font-size: 2.5rem;
        }

        .imgHeader {
            height: 11.8rem;
            margin-left: -31px;
            max-width: 1108px;
            width: 100%;
            min-width: 570px;
            border-bottom-left-radius: 141px;
            border-bottom-right-radius: 149px;
        }

        .maingo {
            padding: 28px;
            padding-left: 50px;
            padding-right: 50px;
        }
        .btn-danger {
  color: #fff;
  background-color: #6d0000;
  border-color: #6d0000;
}

.btn-danger:hover {
  color: #fff;
  background-color: #6d0000b8;
  border-color: #6d0000b8;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #6d0000b8;
  border-color: #6d0000b8;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #6d0000;
  border-color: #6d0000;
}
a {
    color: #6d0000;
    font-weight: 700;
}
a:hover {
    color: #6d0000b8;
    font-weight: 700;
}
        @media only screen and (min-width: 767px) {
            body {
                min-height: 240%;
                background-size: cover;
                box-shadow: inset 15px 33px 18px 2088px rgb(228 216 223 / 60%);
                margin-top: -48px;
                padding-top: 100px;
                padding-bottom: 100px !important;
            }
        }

        /* floating label // */

    </style>
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-6 m-auto bg-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center" style="height: 95px;">
                            <img class="card-img-top imgHeader" src="{{ asset('assets/web/img/background.jpg') }}"
                                alt="Card image cap">
                            <div class="innerup card-img-top"></div>
                            <div class="row">
                                <div class="col-md-8 m-auto text-center headerTop">
                                    <div class="col-md-12">
                                        <div class="headingContainer">
                                        </div>
                                        <h2 class="display-5 text-huge">JOIN <br> House Runs For Me</h2>
                                    </div>
                                    <div class="col-md-12 pt-3">
                                        <p class="text-simple">Make the most of your professional life</p>
                                    </div>
                                    <img src="{{ asset('assets/web/img/profile.png') }}" alt="profile"
                                        class="imgProfile shadow">
                                </div>
                            </div>
                        </div>
                    </div>
                    <form id="buyerForm" method="post" enctype="multipart/form-data" action="{{ route('RegisterForm.process') }}">
                        @csrf
                        <div class="row mt-5">
                            <div class="col-md-11 ml-4 text-center">
                                <h5><b></b></h5>
                            </div>
                        </div>
                        <div class="form-group mt-5 row">
                            <div class="col-md-12 mt-5">
                                <input type="hidden" name="register_as" value="buyer">
                                <input type="hidden" name="role_id" value="3">
                                <label><b>Full Name</b></label>
                                <input type="text" class="form-control" required  name="full_name" value="{{ old('full_name') }}">
                                <span class="text-danger">{{$errors->first('full_name')}}</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><b>Address</b></label>
                                <input type="text" class="form-control" required name="address" value="{{ old('address') }}">
                                <span class="text-danger">{{$errors->first('address')}}</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><b>Email</b></label>
                                <input type="email" class="form-control" required name="email" value="{{ old('email') }}">
                                <span class="text-danger">{{$errors->first('email')}}</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><b>Phone Number</b></label>
                                <input type="number" class="form-control" required name="phoneNumber" value="{{ old('phoneNumber') }}">
                                <span class="text-danger">{{$errors->first('phoneNumber')}}</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><b>Nearest Town</b></label>
                                <select class="form-control" name="nearestTown">
                                    @foreach ($towns as $town )
                                        <option value="{{ $town->id }}">{{ $town->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><b>Password</b></label>
                                <input type="password" class="form-control" required name="password" value="{{ old('password') }}">
                                <span class="text-danger">{{$errors->first('password')}}</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label><b>Confirm Password</b></label>
                                <input type="password" class="form-control" required name="confirm_password" value="{{ old('confirm_password') }}">
                                <span class="text-danger">{{$errors->first('confirm_password')}}</span>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-danger btn-block ">Submit</button>
                            </div>
                        </div>
                    </form>
                    <div class="row form-group">
                        <div class="col-md-9 offset-md-3" style="text-align: end;">
                            Already on House Runs For Me? <span class="text-primary"><a href="{{url('signIn')}}">Sign
                                    in</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var certificates = document.getElementById("certificateArea");
        var projects = document.getElementById("projectArea");
        var services = document.getElementById("serviceArea");

        function duplicateCertificate() {
            var certifictes = certificates.cloneNode(true)
            var attrC = certifictes.querySelectorAll("input")
            for (let i = 0; i < attrC.length; i++) {
                attrC[i].value = null
            }
            document.getElementById("certificatesMain").appendChild(certifictes)
        }

        function duplicateProject() {
            var project = projects.cloneNode(true)
            var attrP = project.querySelectorAll("input")
            for (let i = 0; i < attrP.length; i++) {
                attrP[i].value = null
            }
            document.getElementById("projectMain").appendChild(project)
        }

        function duplicateService() {
            var service = services.cloneNode(true)
            var attrS = service.querySelectorAll("input")
            for (let i = 0; i < attrS.length; i++) {
                attrS[i].value = null
            }
            document.getElementById("serviceMain").appendChild(service)
        }

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(".register").click(function() {

            var fd = new FormData();
            $("#buyerForm input").not(":image").each(function(i, val) {
                let name = $(val).attr("name");
                console.log(name)
            })
            jQuery.ajax({
                url: "{{ url('register') }}",
                data: fd,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {
                    alert(data);
                }
            });
        })

    </script>
@endsection