@extends('mainlayout.layout')

@section('title', config('app.name') . ' | Add Property Owner')
@section('topbar-search', 'enabled')

@push('css')
    <link href="{{ asset('/web/assets/css/property-owner.css') }}?v=1" rel="stylesheet" type="text/css">
@endpush

@section('content')
<main class="po-page">
    <div class="po-page-header">
        <div>
            <nav class="po-breadcrumb" aria-label="Breadcrumb">
                <a href="{{ route('property-owners.index') }}">Property Owners</a>
                <i class="bx bx-chevron-right" aria-hidden="true"></i>
                <span aria-current="page">Add Property Owner</span>
            </nav>
            <h1>Add Property Owner</h1>
            <p>Register a property company and its business details for onboarding.</p>
        </div>
        <div class="po-page-actions">
            <button type="submit" form="property-owner-form" name="save_action" value="draft"
                class="btn btn-mlk-outline" formnovalidate>
                <i class="bx bx-file" aria-hidden="true"></i> Save Draft
            </button>
            <button type="submit" form="property-owner-form" name="save_action" value="create"
                class="btn btn-mlk-primary">
                <i class="bx bx-plus" aria-hidden="true"></i> Create Property Owner
            </button>
        </div>
    </div>

    @include('superadmin.propertyOwner.partials.alerts')

    <div class="po-layout-with-aside">
        <form id="property-owner-form" class="po-card po-form-card" action="{{ route('property-owners.store') }}" method="POST">
            @csrf

            <section class="po-form-section" aria-labelledby="company-information-title">
                <div class="po-section-heading">
                    <span class="po-section-icon"><i class="bx bx-buildings" aria-hidden="true"></i></span>
                    <div>
                        <h2 id="company-information-title">1. Company Information</h2>
                        <p>Basic business identification details.</p>
                    </div>
                </div>

                <div class="po-form-grid po-form-grid-3">
                    <div class="po-field">
                        <label for="owner-name">Company / Business Name <span aria-hidden="true">*</span></label>
                        <input id="owner-name" type="text" name="name" value="{{ old('name') }}"
                            class="form-control @error('name') is-invalid @enderror" maxlength="125"
                            placeholder="e.g. Miliki Properties Ltd" required autocomplete="organization">
                        @error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>

                    <div class="po-field">
                        <label for="owner-mobile">Company / Business Mobile Number <span aria-hidden="true">*</span></label>
                        <input id="owner-mobile" type="tel" name="mobile" value="{{ old('mobile') }}"
                            class="form-control @error('mobile') is-invalid @enderror" maxlength="25"
                            placeholder="e.g. +255 712 345 678" required autocomplete="tel">
                        @error('mobile')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>

                    <div class="po-field">
                        <label for="owner-email">Company / Business Email <span aria-hidden="true">*</span></label>
                        <input id="owner-email" type="email" name="email" value="{{ old('email') }}"
                            class="form-control @error('email') is-invalid @enderror" maxlength="125"
                            placeholder="e.g. info@milikiproperties.co.tz" required autocomplete="email">
                        @error('email')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>

                    <div class="po-field">
                        <label for="owner-tin">TIN <span aria-hidden="true">*</span></label>
                        <input id="owner-tin" type="text" name="tin" value="{{ old('tin') }}"
                            class="form-control @error('tin') is-invalid @enderror" maxlength="125"
                            placeholder="Enter TIN number" required>
                        @error('tin')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>

                    <div class="po-field">
                        <label for="owner-vrn">VRN <span aria-hidden="true">*</span></label>
                        <input id="owner-vrn" type="text" name="vrn" value="{{ old('vrn') }}"
                            class="form-control @error('vrn') is-invalid @enderror" maxlength="125"
                            placeholder="Enter VRN number" required>
                        @error('vrn')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                </div>
            </section>

            <section class="po-form-section" aria-labelledby="business-profile-title">
                <div class="po-section-heading">
                    <span class="po-section-icon"><i class="bx bx-file" aria-hidden="true"></i></span>
                    <div>
                        <h2 id="business-profile-title">2. Business Profile</h2>
                        <p>Company location and a concise public description.</p>
                    </div>
                </div>

                <div class="po-form-grid po-form-grid-2">
                    <div class="po-field">
                        <label for="owner-address">Physical Address <span aria-hidden="true">*</span></label>
                        <textarea id="owner-address" name="address" rows="5"
                            class="form-control @error('address') is-invalid @enderror" maxlength="125"
                            placeholder="Enter the physical address of the company" required data-character-count>{{ old('address') }}</textarea>
                        <span class="po-character-count"><span data-count-for="owner-address">0</span> / 125 characters</span>
                        @error('address')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                    </div>

                    <div class="po-field">
                        <label for="owner-description">Description</label>
                        <textarea id="owner-description" name="description" rows="5"
                            class="form-control @error('description') is-invalid @enderror" maxlength="1000"
                            placeholder="Provide a short description about the company" data-character-count>{{ old('description') }}</textarea>
                        <span class="po-character-count"><span data-count-for="owner-description">0</span> / 1000 characters</span>
                        @error('description')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                    </div>
                </div>
            </section>

            <section class="po-form-section" aria-labelledby="status-access-title">
                <div class="po-section-heading">
                    <span class="po-section-icon"><i class="bx bx-lock-alt" aria-hidden="true"></i></span>
                    <div>
                        <h2 id="status-access-title">3. Status &amp; Access</h2>
                        <p>Set the company status and onboarding stage.</p>
                    </div>
                </div>

                <div class="po-form-grid po-form-grid-2">
                    <div class="po-field">
                        <label for="owner-status">Company Status <span aria-hidden="true">*</span></label>
                        <select id="owner-status" name="status" class="form-control @error('status') is-invalid @enderror">
                            @foreach($statuses as $value => $label)
                                <option value="{{ $value }}" @selected(old('status', 'active') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('status')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>

                    <div class="po-field">
                        <label for="owner-onboarding-status">Onboarding Status</label>
                        <select id="owner-onboarding-status" name="onboarding_status" class="form-control @error('onboarding_status') is-invalid @enderror">
                            @foreach($onboardingStatuses as $value => $label)
                                <option value="{{ $value }}" @selected(old('onboarding_status', 'in_progress') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('onboarding_status')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                </div>
            </section>

            <div class="po-form-footer">
                <a href="{{ route('property-owners.index') }}" class="btn btn-mlk-outline">Cancel</a>
                <div>
                    <button type="submit" name="save_action" value="draft" class="btn btn-mlk-outline" formnovalidate>
                        <i class="bx bx-file" aria-hidden="true"></i> Save Draft
                    </button>
                    <button type="submit" name="save_action" value="create" class="btn btn-mlk-primary">
                        <i class="bx bx-plus" aria-hidden="true"></i> Add Property Owner
                    </button>
                </div>
            </div>
        </form>

        <aside class="po-aside" aria-label="Property owner onboarding guidance">
            <section class="po-card po-side-panel">
                <h2>Required Information</h2>
                <ul class="po-check-list" data-required-checklist>
                    <li data-field="owner-name"><i class="bx bx-check-circle"></i> Company / Business Name</li>
                    <li data-field="owner-mobile"><i class="bx bx-check-circle"></i> Mobile Number</li>
                    <li data-field="owner-email"><i class="bx bx-check-circle"></i> Email Address</li>
                    <li data-field="owner-tin"><i class="bx bx-check-circle"></i> TIN</li>
                    <li data-field="owner-vrn"><i class="bx bx-check-circle"></i> VRN</li>
                    <li data-field="owner-address"><i class="bx bx-check-circle"></i> Physical Address</li>
                </ul>
            </section>

            <section class="po-card po-side-panel">
                <h2>Profile Completeness</h2>
                <p>Complete all required fields to onboard faster.</p>
                <div class="po-completeness-row">
                    <div class="po-progress-ring" data-profile-ring><strong data-profile-percent>0%</strong><span>Complete</span></div>
                    <ul class="po-mini-status-list">
                        <li><span>Company Information</span><strong data-section-score="company">0 / 5</strong></li>
                        <li><span>Business Profile</span><strong data-section-score="profile">0 / 1</strong></li>
                        <li><span>Status &amp; Access</span><strong>2 / 2</strong></li>
                    </ul>
                </div>
            </section>

            <section class="po-card po-side-panel">
                <h2>Before you submit</h2>
                <div class="po-guidance-item"><span><i class="bx bx-shield-quarter"></i></span><div><strong>Verify information</strong><small>Ensure all details are accurate and up to date.</small></div></div>
                <div class="po-guidance-item"><span><i class="bx bx-file"></i></span><div><strong>Use valid company details</strong><small>TIN, VRN, email and mobile must be unique.</small></div></div>
                <div class="po-guidance-item"><span><i class="bx bx-envelope"></i></span><div><strong>Invite users separately</strong><small>Portal users can be linked after the company is created.</small></div></div>
            </section>
        </aside>
    </div>
</main>
@endsection

@push('scripts')
    <script src="{{ asset('/web/assets/js/pages/property-owner.js') }}?v=1"></script>
@endpush