@extends('layouts.app')

@section('title', 'Registracija - Checkpoint')

@section('content')
<section class="section section-height-3 section-with-shape-divider position-relative border-0 m-0">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-width-3 border-radius-0 border-color-hover-dark mb-4">
                    <div class="card-body">
                        <h4 class="font-weight-bold text-uppercase text-4 mb-3">Kreirajte nalog</h4>
                        
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                @foreach ($errors->all() as $error)
                                    <p class="mb-0">{{ $error }}</p>
                                @endforeach
                            </div>
                        @endif
                        
                        <form action="{{ route('register') }}" method="POST" class="needs-validation">
                            @csrf
                            
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label class="form-label text-color-dark text-3">Ime i prezime <span class="text-color-danger">*</span></label>
                                    <input type="text" name="name" value="{{ old('name') }}" class="form-control form-control-lg text-4" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label text-color-dark text-3">Email adresa <span class="text-color-danger">*</span></label>
                                    <input type="email" name="email" value="{{ old('email') }}" class="form-control form-control-lg text-4" required>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label class="form-label text-color-dark text-3">Lozinka <span class="text-color-danger">*</span></label>
                                    <input type="password" name="password" class="form-control form-control-lg text-4" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label text-color-dark text-3">Potvrdite lozinku <span class="text-color-danger">*</span></label>
                                    <input type="password" name="password_confirmation" class="form-control form-control-lg text-4" required>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label class="form-label text-color-dark text-3">Tip naloga <span class="text-color-danger">*</span></label>
                                    <select name="role" class="form-control form-control-lg text-4" required onchange="toggleBusinessFields(this.value)">
                                        <option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>Fizičko lice</option>
                                        <option value="entrepreneur" {{ old('role') == 'entrepreneur' ? 'selected' : '' }}>Preduzetnik</option>
                                        <option value="company_admin" {{ old('role') == 'company_admin' ? 'selected' : '' }}>Firma</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label text-color-dark text-3">Telefon</label>
                                    <input type="text" name="phone" value="{{ old('phone') }}" class="form-control form-control-lg text-4">
                                </div>
                            </div>
                            
                            <!-- Business fields -->
                            <div id="business-fields" style="display: none;">
                                <hr class="my-4">
                                <h5 class="font-weight-bold text-3 mb-3">Poslovni podaci</h5>
                                
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label class="form-label text-color-dark text-3">PIB</label>
                                        <input type="text" name="pib" value="{{ old('pib') }}" class="form-control form-control-lg text-4" maxlength="20">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="form-label text-color-dark text-3">Naziv firme</label>
                                        <input type="text" name="company_name" value="{{ old('company_name') }}" class="form-control form-control-lg text-4">
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="form-group col">
                                        <label class="form-label text-color-dark text-3">Email knjigovođe</label>
                                        <input type="email" name="accountant_email" value="{{ old('accountant_email') }}" class="form-control form-control-lg text-4">
                                        <small class="form-text text-muted">Email adresa na koju će se slati gotovinski računi</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mt-4">
                                <div class="form-group col">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="terms" required>
                                        <label class="custom-control-label text-2" for="terms">Prihvatam <a href="#" target="_blank">uslove korišćenja</a></label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="form-group col">
                                    <button type="submit" class="btn btn-dark btn-modern btn-block text-uppercase rounded-0 font-weight-bold text-3 py-3">Registruj se</button>
                                    
                                    <div class="text-center mt-4">
                                        <span class="text-2">Već imate nalog? </span>
                                        <a href="{{ route('login') }}" class="text-decoration-none font-weight-bold">Prijavite se</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function toggleBusinessFields(role) {
    const businessFields = document.getElementById('business-fields');
    if (role === 'entrepreneur' || role === 'company_admin') {
        businessFields.style.display = 'block';
    } else {
        businessFields.style.display = 'none';
    }
}

// Check on page load
document.addEventListener('DOMContentLoaded', function() {
    const roleSelect = document.querySelector('select[name="role"]');
    if (roleSelect) {
        toggleBusinessFields(roleSelect.value);
    }
});
</script>
@endsection