@extends('saas-admin.layout')

@section('title', 'New company')

@section('content')
    <div class="d-flex align-items-center mb-3">
        <a href="{{ route('saas-admin.companies.index') }}" class="text-decoration-none me-2">&larr;</a>
        <h4 class="m-0">{{ __('New company') }}</h4>
    </div>

    <div class="card shadow-sm">
        <div class="card-body p-4">
            <p class="text-muted">
                {{ __('Creates the company and its first admin login together — that admin can sign in immediately with the password you set below.') }}
            </p>

            <form action="{{ route('saas-admin.companies.store') }}" method="POST">
                @csrf

                <h6 class="text-uppercase text-muted small mt-4 mb-3">{{ __('Company') }}</h6>
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="form-label">{{ __('Company name') }} <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="companyName" class="form-control"
                            value="{{ old('name') }}" placeholder="{{ __('e.g. BBA') }}">
                        @error('name')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <h6 class="text-uppercase text-muted small mt-4 mb-3">{{ __('Where it lives') }}</h6>
                @error('create_subdomain')
                    <div class="alert alert-danger py-2">{{ $message }}</div>
                @enderror
                <div class="row">
                    <div class="col-md-7 mb-3">
                        <div class="form-check mb-2">
                            <input type="checkbox" name="create_subdomain" value="1" class="form-check-input" id="createSubdomain"
                                {{ old('create_subdomain', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="createSubdomain">{{ __('Give it a subdomain') }}</label>
                        </div>
                        <div class="input-group">
                            <input type="text" name="slug" id="companySlug" class="form-control"
                                value="{{ old('slug') }}" placeholder="{{ __('auto-generated from name') }}">
                            <span class="input-group-text">.{{ tenantRootDomain() }}</span>
                        </div>
                        @error('slug')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                        <p class="form-text m-0">
                            {{ __('Live immediately as') }}
                            <code id="subdomainPreview">…</code>
                        </p>
                    </div>
                    <div class="col-md-5 mb-3">
                        <div class="form-check mb-2">
                            <input type="checkbox" name="use_custom_domain" value="1" class="form-check-input" id="useCustomDomain"
                                {{ old('use_custom_domain') ? 'checked' : '' }}>
                            <label class="form-check-label" for="useCustomDomain">{{ __('It already has its own domain') }}</label>
                        </div>
                        <input type="text" name="custom_domain" class="form-control"
                            value="{{ old('custom_domain') }}" placeholder="{{ __('e.g. learn.theircompany.com') }}">
                        @error('custom_domain')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                        <p class="form-text m-0">
                            {{ __('Marked verified immediately since you\'re entering it directly — it still won\'t resolve until they point its DNS at us.') }}
                        </p>
                    </div>
                </div>
                <p class="form-text">
                    {{ __('Check both and the custom domain is what\'s shown as primary — the subdomain stays underneath it as an always-working fallback.') }}
                </p>

                <h6 class="text-uppercase text-muted small mt-4 mb-3">{{ __('First admin login') }}</h6>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">{{ __('Admin name') }} <span class="text-danger">*</span></label>
                        <input type="text" name="admin_name" class="form-control" value="{{ old('admin_name') }}">
                        @error('admin_name')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">{{ __('Admin email') }} <span class="text-danger">*</span></label>
                        <input type="email" name="admin_email" class="form-control" value="{{ old('admin_email') }}">
                        @error('admin_email')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">{{ __('Admin password') }} <span class="text-danger">*</span></label>
                        <input type="password" name="admin_password" class="form-control" placeholder="{{ __('Set it directly — no email sent') }}" autocomplete="new-password">
                        @error('admin_password')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-4 mb-3">
                    <h6 class="text-uppercase text-muted small m-0">{{ __('Subscription (optional)') }}</h6>
                    <a href="{{ route('saas-admin.subscription-plans.create') }}" class="small">{{ __('+ New plan') }}</a>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">{{ __('Plan') }}</label>
                        <select name="subscription_plan_id" class="form-select">
                            <option value="">{{ __('No plan yet — company starts pending') }}</option>
                            @foreach ($plans as $plan)
                                <option value="{{ $plan->id }}" @selected(old('subscription_plan_id') == $plan->id)>
                                    {{ $plan->name }} — {{ number_format($plan->price, 2) }}/{{ $plan->billing_interval }}
                                </option>
                            @endforeach
                        </select>
                        @error('subscription_plan_id')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Starts') }}</label>
                        <input type="date" name="started_at" class="form-control" value="{{ old('started_at') }}">
                        <p class="form-text m-0">{{ __('Blank = today') }}</p>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">{{ __('Ends') }}</label>
                        <input type="date" name="expires_at" class="form-control" value="{{ old('expires_at') }}">
                        @error('expires_at')
                            <p class="text-danger small mt-1">{{ $message }}</p>
                        @enderror
                        <p class="form-text m-0">{{ __('Blank = never expires on its own') }}</p>
                    </div>
                </div>
                <p class="form-text mt-n2">
                    {{ __('A future start date means the company is created "pending" and switches to "active" on its own that day; crossing the end date switches it to "expired" the same way.') }}
                </p>

                <button type="submit" class="btn btn-primary mt-3">{{ __('Create company') }}</button>
            </form>
        </div>
    </div>

    <script>
        (function() {
            const nameInput = document.getElementById('companyName');
            const slugInput = document.getElementById('companySlug');
            const preview = document.getElementById('subdomainPreview');
            const rootDomain = '.{{ tenantRootDomain() }}';

            function slugify(value) {
                return value.toLowerCase()
                    .replace(/[^a-z0-9]+/g, '-')
                    .replace(/^-+|-+$/g, '');
            }

            function updatePreview() {
                const explicit = slugInput.value.trim();
                const derived = explicit || slugify(nameInput.value.trim());
                preview.textContent = (derived || '…') + rootDomain;
            }

            nameInput.addEventListener('input', updatePreview);
            slugInput.addEventListener('input', updatePreview);
            updatePreview();

            // Grey out each domain field when its own checkbox is off, so
            // it's visually obvious which one(s) will actually be created.
            const subdomainCheck = document.getElementById('createSubdomain');
            const customCheck = document.getElementById('useCustomDomain');
            const customInput = document.querySelector('input[name="custom_domain"]');

            function syncField(checkbox, field) {
                field.disabled = !checkbox.checked;
                field.closest('.col-md-7, .col-md-5').style.opacity = checkbox.checked ? '1' : '0.5';
            }

            subdomainCheck.addEventListener('change', () => syncField(subdomainCheck, slugInput));
            customCheck.addEventListener('change', () => syncField(customCheck, customInput));
            syncField(subdomainCheck, slugInput);
            syncField(customCheck, customInput);
        })();
    </script>
@endsection
