@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-9 col-lg-7">
            <div class="card border-0 shadow-lg" style="border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);">
                <div class="card-header border-0 text-white text-center py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <div class="mb-3">
                        <i class="bi bi-mortarboard fs-1"></i>
                    </div>
                    <h3 class="fw-bold mb-0">Join Our LMS</h3>
                    <p class="mb-0 opacity-75">Create your account to start learning</p>
                </div>

                <div class="card-body p-4 p-md-5">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label for="name" class="form-label small fw-bold text-secondary text-uppercase">{{ __('Name') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-person text-secondary"></i></span>
                                    <input id="name" type="text" class="form-control bg-light border-0 @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus placeholder="Full Name" style="border-radius: 0 10px 10px 0;">
                                </div>
                                @error('name')
                                    <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-4">
                                <label for="email" class="form-label small fw-bold text-secondary text-uppercase">{{ __('Email Address') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-envelope text-secondary"></i></span>
                                    <input id="email" type="email" class="form-control bg-light border-0 @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="name@example.com" style="border-radius: 0 10px 10px 0;">
                                </div>
                                @error('email')
                                    <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label for="password" class="form-label small fw-bold text-secondary text-uppercase">{{ __('Password') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-lock text-secondary"></i></span>
                                    <input id="password" type="password" class="form-control bg-light border-0 @error('password') is-invalid @enderror" name="password" required autocomplete="new-password" placeholder="••••••••" style="border-radius: 0 10px 10px 0;">
                                </div>
                                @error('password')
                                    <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-4">
                                <label for="password-confirm" class="form-label small fw-bold text-secondary text-uppercase">{{ __('Confirm Password') }}</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-shield-lock text-secondary"></i></span>
                                    <input id="password-confirm" type="password" class="form-control bg-light border-0" name="password_confirmation" required autocomplete="new-password" placeholder="••••••••" style="border-radius: 0 10px 10px 0;">
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="standard_id" class="form-label small fw-bold text-secondary text-uppercase">{{ __('Your Standard') }}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-stack text-secondary"></i></span>
                                <select id="standard_id" name="standard_id" class="form-select bg-light border-0 @error('standard_id') is-invalid @enderror" required style="border-radius: 0 10px 10px 0;">
                                    <option value="" selected disabled>Choose your standard...</option>
                                    @foreach($standards as $standard)
                                        <option value="{{ $standard->id }}" {{ old('standard_id') == $standard->id ? 'selected' : '' }}>{{ $standard->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('standard_id')
                                <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-secondary text-uppercase d-block mb-3">{{ __('Enrolled Subjects') }}</label>
                            <div class="p-4 border rounded-4 bg-light bg-opacity-50">
                                <div class="row g-3">
                                @foreach($subjects as $subject)
                                    <div class="col-md-6">
                                        <div class="form-check custom-option p-2 rounded-3">
                                            <input class="form-check-input ms-0 me-3 shadow-none" type="checkbox" name="subjects[]" value="{{ $subject->id }}" id="subject_{{ $subject->id }}" {{ is_array(old('subjects')) && in_array($subject->id, old('subjects')) ? 'checked' : '' }}>
                                            <label class="form-check-label fw-semibold text-dark" for="subject_{{ $subject->id }}">
                                                {{ $subject->name }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                            @error('subjects')
                                <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span>
                            @enderror
                        </div>

                        <div class="d-grid mt-5">
                            <button type="submit" class="btn btn-primary btn-lg fw-bold py-3 shadow-sm border-0" style="border-radius: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                CREATE MY ACCOUNT
                            </button>
                        </div>

                        <div class="text-center mt-4">
                            <p class="small text-secondary mb-0">Already have an account? <a href="{{ route('login') }}" class="text-primary fw-bold text-decoration-none">Login Here</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .custom-option {
        border: 2px solid transparent;
        background: #fff;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .custom-option:hover {
        border-color: #667eea;
        background: #f8fafc;
    }
    .form-check-input:checked {
        background-color: #667eea;
        border-color: #667eea;
    }
</style>
@endsection