@extends('layouts.dashboard')

@section('title', 'Add Client')

@section('content')
<div class="mb-4">
    <a href="{{ route('dashboard.clients') }}" class="text-decoration-none">
        <i class="bi bi-arrow-left me-2"></i>Back to Clients
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent">
                <h5 class="mb-0"><i class="bi bi-building-add me-2"></i>Add New Client Organization</h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route('dashboard.clients.store') }}">
                    @csrf

                    <h6 class="text-muted mb-3"><i class="bi bi-building me-2"></i>Organization Details</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Organization Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required>
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Email Address <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required>
                            @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Phone Number</label>
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}">
                            @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Address</label>
                            <input type="text" class="form-control @error('address') is-invalid @enderror" name="address" value="{{ old('address') }}">
                            @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <hr class="my-4">

                    <h6 class="text-muted mb-3"><i class="bi bi-credit-card me-2"></i>Subscription Settings</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="form-label">Subscription Plan <span class="text-danger">*</span></label>
                            <select class="form-select @error('subscription_type') is-invalid @enderror" name="subscription_type" required>
                                <option value="trial" {{ old('subscription_type') === 'trial' ? 'selected' : '' }}>Trial (14 days)</option>
                                <option value="basic" {{ old('subscription_type') === 'basic' ? 'selected' : '' }}>Basic</option>
                                <option value="premium" {{ old('subscription_type') === 'premium' ? 'selected' : '' }}>Premium</option>
                                <option value="enterprise" {{ old('subscription_type') === 'enterprise' ? 'selected' : '' }}>Enterprise</option>
                            </select>
                            @error('subscription_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Subscription Duration (Days) <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('subscription_days') is-invalid @enderror" name="subscription_days" value="{{ old('subscription_days', 14) }}" min="1" max="365" required>
                            @error('subscription_days')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Max Users <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('max_users') is-invalid @enderror" name="max_users" value="{{ old('max_users', 10) }}" min="1" max="10000" required>
                            @error('max_users')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Max Client Admins <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('max_client_admins') is-invalid @enderror" name="max_client_admins" value="{{ old('max_client_admins', 3) }}" min="1" max="100" required>
                            @error('max_client_admins')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <hr class="my-4">

                    <h6 class="text-muted mb-3"><i class="bi bi-person-gear me-2"></i>Owner Admin Account</h6>
                    <div class="alert alert-info mb-3">
                        <i class="bi bi-info-circle me-2"></i>
                        This creates the primary administrator for the client organization. They can manage users and templates.
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Admin Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('admin_name') is-invalid @enderror" name="admin_name" value="{{ old('admin_name') }}" required>
                            @error('admin_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Admin Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('admin_email') is-invalid @enderror" name="admin_email" value="{{ old('admin_email') }}" required>
                            @error('admin_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Admin Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control @error('admin_password') is-invalid @enderror" name="admin_password" required minlength="8">
                            @error('admin_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Minimum 8 characters</div>
                        </div>
                    </div>

                    <div class="mt-4 pt-3 border-top d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-2"></i>Create Client
                        </button>
                        <a href="{{ route('dashboard.clients') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Auto-adjust subscription days based on plan
    document.querySelector('select[name="subscription_type"]').addEventListener('change', function() {
        const daysInput = document.querySelector('input[name="subscription_days"]');
        const maxUsersInput = document.querySelector('input[name="max_users"]');
        const maxAdminsInput = document.querySelector('input[name="max_client_admins"]');

        switch (this.value) {
            case 'trial':
                daysInput.value = 14;
                maxUsersInput.value = 5;
                maxAdminsInput.value = 1;
                break;
            case 'basic':
                daysInput.value = 30;
                maxUsersInput.value = 25;
                maxAdminsInput.value = 3;
                break;
            case 'premium':
                daysInput.value = 30;
                maxUsersInput.value = 100;
                maxAdminsInput.value = 10;
                break;
            case 'enterprise':
                daysInput.value = 30;
                maxUsersInput.value = 500;
                maxAdminsInput.value = 25;
                break;
        }
    });
</script>
@endpush