@extends('layouts.main')

@section('content')
<style>
    .register-page {
        background: #f8f9fa;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;
    }
    .register-card {
        background: #fff;
        width: 100%;
        max-width: 900px;
        padding: 40px;
        border-radius: 15px;
    }
    .register-card h1 {
        font-size: 42px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 5px;
        color: #000;
    }
    .register-card p.subtitle {
        text-align: center;
        color: #888;
        font-size: 18px;
        margin-bottom: 40px;
    }
    .form-control-custom {
        background: #f4f7f9;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        padding: 15px 20px;
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
        width: 100%;
        transition: all 0.3s ease;
    }
    .form-control-custom:focus {
        outline: none;
        border-color: #7494ec;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(116, 148, 236, 0.1);
    }
    .form-control-custom::placeholder {
        color: #a0abb8;
    }
    .login-link-container {
        margin-top: 20px;
        font-size: 16px;
        color: #333;
    }
    .login-link-container a {
        color: #2c3e50;
        font-weight: 600;
        text-decoration: none;
    }
    .submit-container {
        text-align: center;
        margin-top: 30px;
    }
    .btn-submit {
        background: #ff8c00;
        color: #fff;
        border: none;
        padding: 12px 60px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    .btn-submit:hover {
        background: #e67e00;
    }
    .error-msg {
        color: #dc3545;
        font-size: 14px;
        margin-top: -15px;
        margin-bottom: 10px;
        display: block;
    }
</style>

<div class="register-page">
    <div class="register-card">
        <h1>Register</h1>
        <p class="subtitle">as Counsellor</p>

        <form method="POST" action="{{ route('counsellor.store') }}">
            @csrf
            
            <div class="row">
                <div class="col-md-6">
                    <label>First Name *</label>
                    <input type="text" name="first_name" class="form-control-custom" placeholder="Enter first name" value="{{ old('first_name') }}" required>
                    @error('first_name') <span class="error-msg">{{ $message }}</span> @enderror

                    <label>Email *</label>
                    <input type="email" name="email" class="form-control-custom" placeholder="Enter email" value="{{ old('email') }}" required>
                    @error('email') <span class="error-msg">{{ $message }}</span> @enderror

                    <label>Password *</label>
                    <input type="password" name="password" class="form-control-custom" placeholder="Enter password" required>
                    @error('password') <span class="error-msg">{{ $message }}</span> @enderror
                </div>
                
                <div class="col-md-6">
                    <label>Last Name *</label>
                    <input type="text" name="last_name" class="form-control-custom" placeholder="Enter last name" value="{{ old('last_name') }}" required>
                    @error('last_name') <span class="error-msg">{{ $message }}</span> @enderror

                    <label>Phone Number *</label>
                    <input type="text" name="phone_number" class="form-control-custom" placeholder="Enter phone" value="{{ old('phone_number') }}" required>
                    @error('phone_number') <span class="error-msg">{{ $message }}</span> @enderror

                    <label>Confirm Password *</label>
                    <input type="password" name="password_confirmation" class="form-control-custom" placeholder="Confirm password" required>
                </div>
            </div>

            <div class="login-link-container">
                Already registered ? <a href="{{ route('login') }}">Login</a>
            </div>

            <div class="submit-container">
                <button type="submit" class="btn-submit">Submit</button>
            </div>
        </form>
    </div>
</div>
@endsection