@extends('layouts.header')

@section('content')
<style>
    .container .row .card {
      width: 700px;
      margin: 30px;
      overflow: hidden;
      backdrop-filter: blur(5px);
      border-radius: 15px;
  }

  .container .row .card .card-body {
      padding: 1rem 1.2rem;
  }

  .container .row .card .card-body .card-img img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      transform: translateY(50px);
      transition: 0.5s;
      border-radius: 50%
  }

  .container .row .card .card-body .name {
      transform: translateY(50px);
      transition: 0.5s
  }

  html, body {
    height: 100%;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-family: 'Poppins', sans-serif;
    background: radial-gradient(circle, var(--cashier-color) 1%, transparent 5%),
                radial-gradient(circle, var(--cashier-color) 1%, transparent 3%);
    background-size: 30px 30px; /* Ukuran polkadot */
    background-position: 0 0, 15px 15px;
}
/* body {
    background-color: rgba(96, 165, 250, 0.5) !important; /* Background color with opacity */
/* } */
</style>
<div class="container pt-lg-4">
    <div class="row justify-content-center">
        <div class="header-bar">
            <a href="{{ route('member.index') }}" class="custom-button1 back-button">Back</a>
            
        </div>
        <div class="card login-card">
            <div class="card-header">
                <div class="logo-home text-center">
                    <img src="{{asset('assets/Logo Softcomp - RGB-01.png')}}" width="190px" height="75px" alt="Deskripsi Gambar">
                </div>
                {{-- <h1 class="card-title text-center fs-2 pt-2 fw-bolder text-white">Register</h1> --}}
            </div>
            @if (session('status'))
            <div class="alert alert-success" role="alert">
                {{ session('status') }}
            </div>
            @endif
            @if (session('danger'))
            <div class="alert alert-danger" role="alert">
                {{ session('danger') }}
            </div>
            @endif
            <div class="card-body">
                <form method="POST" action="{{ route('member.store') }}">
                    @csrf

                    <div class="row mb-3">
                        {{-- <label for="name" class="col-md-4 col-form-label text-md-end">{{ __('Name') }}</label> --}}

                        <div class="col-md-12">
                            <input id="name" type="text" class="rounded-pill form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="off" placeholder="Name" autofocus>

                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        {{-- <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label> --}}

                        <div class="col-md-12">
                            <input id="email" type="email" class="rounded-pill form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Email" required autocomplete="off">

                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        {{-- <label for="hp" class="col-md-4 col-form-label text-md-end">{{ __('Handphone') }}</label> --}}

                        <div class="col-md-12">
                            <input id="hp" type="hp" class="rounded-pill form-control @error('hp') is-invalid @enderror" name="phone" placeholder="No Handphone" value="{{ old('hp') }}" required>

                            @error('hp')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        {{-- <label for="alamat" class="col-md-4 col-form-label text-md-end">{{ __('Address') }}</label> --}}

                        <div class="col-md-12">
                            <input id="alamat" type="address" class="rounded-pill form-control @error('address') is-invalid @enderror" name="address" placeholder="Address" value="{{ old('address') }}" required autocomplete="off">

                            @error('address')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-3">
                        {{-- <label for="hobby" class="col-md-4 col-form-label text-md-end">{{ __('Hobby') }}</label> --}}

                        <div class="col-md-12">
                            <input id="hobby" type="hobby" class="rounded-pill form-control @error('hobby') is-invalid @enderror" name="hobby" placeholder="Hobby" value="{{ old('hobby') }}" required autocomplete="off">

                            @error('hobby')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="row text-center">
                        <div class="">
                            <button type="submit" class="btn rounded-pill text-black" style="background-color: white">
                                {{ __('Save') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="card login-card">
            <div class="card-header fs-4 text-center">{{ __('Register With Social') }}</div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card-body text-center">
                        <h1>Google</h1>
                        <img src="{{ asset('assets/generategoogle.svg') }}"  class="mx-auto">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card-body text-center">
                        <h1>Twitter</h1>
                        <img src="{{ asset('assets/googleqrcode.png') }}" alt="" width="65%" class="mx-auto">
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>
@endsection