@extends('mainlayout.layout')

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

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

@section('content')
<main class="pm-page pm-create-page">
    <header class="pm-page-header">
        <div>
            <nav class="pm-breadcrumb" aria-label="Breadcrumb">
                <a href="/property/view">Projects</a>
                <i class="bx bx-chevron-right" aria-hidden="true"></i>
                <span aria-current="page">Add Project</span>
            </nav>
            <h1>Add Project</h1>
            <p>Create a new property project and assign it to a property owner.</p>
        </div>
        <div class="pm-page-actions">
            <button form="project-create-form" type="submit" name="save_action" value="draft" class="btn pm-btn-outline" formnovalidate>
                <i class="bx bx-save" aria-hidden="true"></i> Save Draft
            </button>
            <button form="project-create-form" type="submit" name="save_action" value="create" class="btn pm-btn-primary">
                <i class="bx bx-plus" aria-hidden="true"></i> Create Project
            </button>
        </div>
    </header>

    @if(session('error'))
        <div class="alert alert-danger pm-alert" role="alert"><i class="bx bx-error-circle"></i>{{ session('error') }}</div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger pm-alert" role="alert" tabindex="-1" data-validation-summary>
            <i class="bx bx-error-circle" aria-hidden="true"></i>
            <div><strong>Please review the highlighted fields.</strong><span>{{ $errors->first() }}</span></div>
        </div>
    @endif

    <div class="pm-create-layout">
        <form id="project-create-form" class="pm-card pm-project-form" action="/property/store" method="POST" data-project-form>
            @csrf

            <section class="pm-form-section" aria-labelledby="project-basics-title">
                <div class="pm-section-heading">
                    <span class="pm-section-icon"><i class="bx bx-folder" aria-hidden="true"></i></span>
                    <div><h2 id="project-basics-title">1. Project Basics</h2><p>Define the core identity of this property project.</p></div>
                </div>

                <div class="pm-grid pm-grid-3">
                    <div class="pm-field">
                        <label for="project-name">Project Name <span aria-hidden="true">*</span></label>
                        <input id="project-name" type="text" name="name" value="{{ old('name') }}" maxlength="125" class="form-control @error('name') is-invalid @enderror" placeholder="Enter project name" required autocomplete="organization">
                        @error('name')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-plot-id">Project Plot ID <span aria-hidden="true">*</span></label>
                        <input id="project-plot-id" type="text" name="plotid" value="{{ old('plotid') }}" maxlength="125" class="form-control @error('plotid') is-invalid @enderror" placeholder="Enter plot ID" required>
                        @error('plotid')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-owner">Project Owner <span aria-hidden="true">*</span></label>
                        @role('superadmin')
                            <select id="project-owner" name="propertyowner" class="form-control @error('propertyowner') is-invalid @enderror" required data-owner-select>
                                <option value="">Choose owner</option>
                                @foreach($propertyowners as $propowner)
                                    <option value="{{ $propowner->id }}" @selected((string) old('propertyowner') === (string) $propowner->id)
                                        data-name="{{ $propowner->name }}"
                                        data-email="{{ $propowner->email ?: 'Email not provided' }}"
                                        data-status="{{ $propowner->status_label }}"
                                        data-onboarding="{{ $propowner->onboarding_status_label }}"
                                        data-initials="{{ $propowner->initials }}"
                                        data-profile-url="{{ route('property-owners.show', encrypt($propowner->id)) }}">{{ $propowner->name }}</option>
                                @endforeach
                            </select>
                        @else
                            @php($assignedOwner = $propertyowners->first())
                            <input type="hidden" id="project-owner" name="propertyowner" value="{{ Auth::user()->propertyownerid }}" data-owner-select
                                data-name="{{ optional($assignedOwner)->name }}"
                                data-email="{{ optional($assignedOwner)->email }}"
                                data-status="{{ optional($assignedOwner)->status_label }}"
                                data-onboarding="{{ optional($assignedOwner)->onboarding_status_label }}"
                                data-initials="{{ optional($assignedOwner)->initials }}"
                                data-profile-url="{{ $assignedOwner ? route('property-owners.show', encrypt($assignedOwner->id)) : '#' }}">
                            <div class="pm-readonly-control">{{ optional($assignedOwner)->name ?: 'Assigned property owner' }}</div>
                        @endrole
                        @error('propertyowner')<span class="invalid-feedback d-block" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-tags">Project Tags <small>(separate with comma)</small> <span aria-hidden="true">*</span></label>
                        <input id="project-tags" type="text" name="tags" value="{{ old('tags') }}" maxlength="125" class="form-control @error('tags') is-invalid @enderror" placeholder="beacharea, marketarea, commercial" required>
                        @error('tags')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-launch-date">Project Launch Date <span aria-hidden="true">*</span></label>
                        <input id="project-launch-date" type="date" name="livedate" value="{{ old('livedate') }}" class="form-control @error('livedate') is-invalid @enderror" required>
                        @error('livedate')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-plot-count">Number of Plots <span aria-hidden="true">*</span></label>
                        <input id="project-plot-count" type="number" name="numberofplots" value="{{ old('numberofplots') }}" min="0" max="1000000" class="form-control @error('numberofplots') is-invalid @enderror" placeholder="Enter number of plots" required inputmode="numeric">
                        @error('numberofplots')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                </div>
            </section>

            <section class="pm-form-section" aria-labelledby="project-location-title">
                <div class="pm-section-heading">
                    <span class="pm-section-icon"><i class="bx bx-map" aria-hidden="true"></i></span>
                    <div><h2 id="project-location-title">2. Location &amp; Plot Setup</h2><p>Specify where the project is located and key land measurements.</p></div>
                </div>

                <div class="pm-grid pm-grid-4">
                    <div class="pm-field">
                        <label for="project-region">Region <span aria-hidden="true">*</span></label>
                        <select id="project-region" name="region" class="form-control @error('region') is-invalid @enderror" required data-region-select>
                            <option value="">Choose region</option>
                            @foreach($regions as $region)
                                <option value="{{ $region->id }}" @selected((string) old('region') === (string) $region->id)>{{ $region->name }}</option>
                            @endforeach
                        </select>
                        @error('region')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-district">District <span aria-hidden="true">*</span></label>
                        <select id="project-district" name="district" class="form-control @error('district') is-invalid @enderror" required data-district-select data-selected="{{ old('district') }}">
                            <option value="">Choose district</option>
                            @foreach($districts->where('regionid', old('region')) as $district)
                                <option value="{{ $district->id }}" @selected((string) old('district') === (string) $district->id)>{{ $district->name }}</option>
                            @endforeach
                        </select>
                        <span class="pm-field-help" data-district-status aria-live="polite">Select a region first.</span>
                        @error('district')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-block-id">Block ID</label>
                        <input id="project-block-id" type="text" name="block_id" value="{{ old('block_id') }}" maxlength="125" class="form-control @error('block_id') is-invalid @enderror" placeholder="Enter block ID">
                        @error('block_id')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-area">Area in SQM <span aria-hidden="true">*</span></label>
                        <input id="project-area" type="number" name="area" value="{{ old('area') }}" min="0" step="0.01" class="form-control @error('area') is-invalid @enderror" placeholder="Enter area in sqm" required inputmode="decimal">
                        @error('area')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                </div>
            </section>

            <section class="pm-form-section pm-description-section" aria-labelledby="project-description-title">
                <div class="pm-section-heading">
                    <span class="pm-section-icon"><i class="bx bx-file" aria-hidden="true"></i></span>
                    <div><h2 id="project-description-title">3. Project Description</h2><p>Provide clear project descriptions for listing and operational use.</p></div>
                </div>

                <div class="pm-grid pm-grid-2">
                    <div class="pm-field">
                        <label for="project-description-en">Description (English)</label>
                        <textarea id="project-description-en" name="description" class="form-control @error('description') is-invalid @enderror" rows="9" maxlength="50000" placeholder="Write project description in English...">{{ old('description') }}</textarea>
                        <span class="pm-character-count"><span data-count-for="project-description-en">0</span> / 50000 characters</span>
                        @error('description')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                    <div class="pm-field">
                        <label for="project-description-sw">Description (Swahili)</label>
                        <textarea id="project-description-sw" name="description_sw" class="form-control @error('description_sw') is-invalid @enderror" rows="9" maxlength="50000" placeholder="Andika maelezo ya mradi kwa Kiswahili...">{{ old('description_sw') }}</textarea>
                        <span class="pm-character-count"><span data-count-for="project-description-sw">0</span> / 50000 characters</span>
                        @error('description_sw')<span class="invalid-feedback" role="alert">{{ $message }}</span>@enderror
                    </div>
                </div>
            </section>

            <footer class="pm-form-footer">
                <a href="/property/view" class="btn pm-btn-outline">Cancel</a>
                <div>
                    <button type="submit" name="save_action" value="draft" class="btn pm-btn-outline" formnovalidate><i class="bx bx-save"></i> Save Draft</button>
                    <button type="submit" name="save_action" value="create" class="btn pm-btn-primary"><i class="bx bx-plus"></i> Create Project</button>
                </div>
            </footer>
        </form>

        <aside class="pm-create-sidebar" aria-label="Project creation guidance">
            <section class="pm-card pm-side-card">
                <h2>Before you save</h2>
                <ul class="pm-checklist" data-project-checklist>
                    <li data-fields="project-name"><i class="bx bx-circle"></i><span>Project name added</span></li>
                    <li data-fields="project-owner"><i class="bx bx-circle"></i><span>Project owner selected</span></li>
                    <li data-fields="project-region"><i class="bx bx-circle"></i><span>Region selected</span></li>
                    <li data-fields="project-plot-count"><i class="bx bx-circle"></i><span>Number of plots entered</span></li>
                    <li data-fields="project-description-en,project-description-sw"><i class="bx bx-circle"></i><span>Descriptions provided (EN &amp; SW)</span></li>
                </ul>
            </section>

            <section class="pm-card pm-side-card pm-owner-preview" data-owner-preview hidden>
                <h2>Selected Owner</h2>
                <div class="pm-owner-preview-body">
                    <span class="pm-owner-avatar" data-owner-initials>PO</span>
                    <div><strong data-owner-name>Property owner</strong><span data-owner-email>Email not provided</span><div class="pm-owner-badges"><em data-owner-status>Active</em><em data-owner-onboarding>Onboarded</em></div></div>
                </div>
                <a href="#" class="btn pm-btn-outline btn-block" data-owner-profile>View Owner Profile <i class="bx bx-link-external"></i></a>
            </section>

            <section class="pm-card pm-side-card">
                <h2>Project Readiness</h2>
                <div class="pm-readiness">
                    <div class="pm-progress-ring" data-project-progress><strong>0%</strong><span>Complete</span></div>
                    <ul>
                        <li><span>Project Basics</span><strong data-readiness-score="basics">0 / 6</strong></li>
                        <li><span>Location &amp; Setup</span><strong data-readiness-score="location">0 / 4</strong></li>
                        <li><span>Descriptions</span><strong data-readiness-score="descriptions">0 / 2</strong></li>
                    </ul>
                </div>
            </section>

            <section class="pm-guidance-card">
                <i class="bx bx-info-circle" aria-hidden="true"></i>
                <div><strong>How projects are used</strong><p>Once created, this project will be used to onboard plots and manage listings, ownership, pricing, and transactions.</p></div>
            </section>
        </aside>
    </div>
</main>
@endsection

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