@extends('layouts.app')

@section('title', 'Edit ' . $project->name)

@push('styles')
<style>
    /* ─── Page Shell ─────────────────────────────────────────── */
    .main-content {
        padding: 14px 16px;
        background: #f7f8fa;
        min-height: 100vh;
    }

    /* ─── Gradient Page Header ───────────────────────────────── */
    .content-header {
        background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
        border-radius: 10px;
        padding: 12px 18px;
        color: white;
        margin-bottom: 14px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--primary-500);
        box-shadow: 0 2px 8px rgba(99,102,241,.3);
    }

    .content-header::before {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 90px; height: 90px;
        background: rgba(255,255,255,.08);
        border-radius: 50%;
        transform: translate(22px,-22px);
    }

    .content-title {
        color: white;
        font-weight: 700;
        font-size: 17px;
        margin-bottom: 2px;
        position: relative;
        z-index: 1;
    }

    .content-subtitle {
        color: rgba(255,255,255,.8);
        font-size: 12px;
        margin: 0;
        font-weight: 400;
        position: relative;
        z-index: 1;
    }

    /* ─── Two-Panel Grid ─────────────────────────────────────── */
    .cu-layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 14px;
        align-items: start;
    }

    /* ─── Left Info Panel ────────────────────────────────────── */
    .cu-info-panel {
        background: white;
        border: 1px solid #e3e4e8;
        border-radius: 8px;
        overflow: hidden;
        position: sticky;
        top: 14px;
    }

    .cu-info-panel-header {
        background: #f7f8fa;
        border-bottom: 1px solid #e3e4e8;
        padding: 10px 14px;
    }

    .cu-info-panel-header span {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .8px;
        color: #8a8f98;
    }

    .cu-info-body {
        padding: 14px;
    }

    .cu-project-avatar {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 22px;
        color: white;
        margin: 0 auto 10px;
    }

    .cu-project-name {
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: #1a1d23;
        margin-bottom: 4px;
        word-break: break-word;
    }

    .cu-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 9px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        margin: 0 auto 12px;
    }

    .cu-status-badge.not-started  { background:#f1f2f4; color:#6b7385; }
    .cu-status-badge.in-progress  { background:#e8f0fe; color:#3b66d4; }
    .cu-status-badge.completed    { background:#e6f9f0; color:#1a8a56; }
    .cu-status-badge.closed       { background:#f3f4f6; color:#9ca3af; }

    .cu-meta-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 0;
        border-top: 1px solid #f0f1f3;
        font-size: 12px;
        color: #6b7385;
    }

    .cu-meta-row i { font-size: 13px; color: #adb0b8; flex-shrink: 0; }
    .cu-meta-row strong { color: #1a1d23; font-weight: 600; }

    /* ─── Right — Form Sections ──────────────────────────────── */
    .cu-sections {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .cu-section {
        background: white;
        border: 1px solid #e3e4e8;
        border-radius: 8px;
        overflow: hidden;
    }

    .cu-section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: #fafbfc;
        border-bottom: 1px solid #e3e4e8;
    }

    .cu-section-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        flex-shrink: 0;
    }

    .cu-section-icon.purple { background: #ede9fe; color: #7c3aed; }
    .cu-section-icon.blue   { background: #dbeafe; color: #2563eb; }
    .cu-section-icon.green  { background: #dcfce7; color: #16a34a; }
    .cu-section-icon.red    { background: #fee2e2; color: #dc2626; }

    .cu-section-title {
        font-size: 13px;
        font-weight: 700;
        color: #1a1d23;
        margin: 0;
    }

    .cu-section-subtitle {
        font-size: 11px;
        color: #8a8f98;
        margin: 0 0 0 auto;
    }

    .cu-section-body {
        padding: 16px;
    }

    /* ─── Field Rows ─────────────────────────────────────────── */
    .cu-field {
        margin-bottom: 14px;
    }

    .cu-field:last-child { margin-bottom: 0; }

    .cu-field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .cu-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .7px;
        color: #8a8f98;
        margin-bottom: 5px;
    }

    .cu-input {
        width: 100%;
        height: 34px;
        padding: 0 10px 0 34px;
        border: 1px solid #d3d5db;
        border-radius: 6px;
        background: white;
        font-size: 13px;
        color: #1a1d23;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
        box-sizing: border-box;
    }

    .cu-input.no-icon { padding-left: 10px; }

    .cu-input:focus {
        border-color: #7c3aed;
        box-shadow: 0 0 0 2px rgba(124,58,237,.15);
    }

    .cu-input.is-invalid { border-color: #dc2626; }

    .cu-input-wrap {
        position: relative;
    }

    .cu-input-wrap > i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        color: #adb0b8;
        pointer-events: none;
    }

    .invalid-feedback {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        color: #dc2626;
        font-weight: 500;
    }

    /* ─── Quill Editor ───────────────────────────────────────── */
    .cu-editor-wrap {
        border: 1px solid #d3d5db;
        border-radius: 6px;
        overflow: hidden;
        transition: border-color .15s, box-shadow .15s;
    }

    .cu-editor-wrap:focus-within {
        border-color: #7c3aed;
        box-shadow: 0 0 0 2px rgba(124,58,237,.15);
    }

    .cu-editor-wrap .ql-toolbar {
        border: none;
        border-bottom: 1px solid #e3e4e8;
        background: #fafbfc;
        padding: 6px 10px;
    }

    .cu-editor-wrap .ql-toolbar .ql-formats { margin-right: 8px; }

    .cu-editor-wrap .ql-container {
        border: none;
        font-family: inherit;
        font-size: 13px;
    }

    .cu-editor-wrap .ql-editor {
        min-height: 130px;
        padding: 10px 12px;
        color: #1a1d23;
        line-height: 1.6;
    }

    .cu-editor-wrap .ql-editor.ql-blank::before {
        color: #b0b4be;
        font-style: normal;
        left: 12px;
    }

    /* ─── Status Chips ───────────────────────────────────────── */
    .cu-status-chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .cu-chip-option { position: relative; }

    .cu-chip-option input {
        position: absolute;
        opacity: 0;
        width: 0; height: 0;
    }

    .cu-chip-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border: 1px solid #d3d5db;
        border-radius: 20px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        color: #6b7385;
        background: white;
        transition: all .15s;
        user-select: none;
    }

    .cu-chip-label:hover { border-color: #7c3aed; color: #7c3aed; background: #faf5ff; }

    .cu-chip-option input:checked + .cu-chip-label {
        border-color: currentColor;
        background: #faf5ff;
    }

    .cu-chip-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* chip colors */
    .chip-not-started  .cu-chip-label { --chip-color: #6b7385; }
    .chip-in-progress  .cu-chip-label { --chip-color: #2563eb; }
    .chip-completed    .cu-chip-label { --chip-color: #16a34a; }
    .chip-closed       .cu-chip-label { --chip-color: #9ca3af; }

    .chip-not-started .cu-chip-dot  { background: #8a8f98; }
    .chip-in-progress .cu-chip-dot  { background: #3b66d4; }
    .chip-completed   .cu-chip-dot  { background: #16a34a; }
    .chip-closed      .cu-chip-dot  { background: #d1d5db; }

    .chip-not-started input:checked + .cu-chip-label  { color:#6b7385; border-color:#8a8f98; background:#f1f2f4; }
    .chip-in-progress input:checked + .cu-chip-label  { color:#2563eb; border-color:#3b66d4; background:#e8f0fe; }
    .chip-completed   input:checked + .cu-chip-label  { color:#16a34a; border-color:#16a34a; background:#e6f9f0; }
    .chip-closed      input:checked + .cu-chip-label  { color:#6b7280; border-color:#d1d5db; background:#f3f4f6; }

    /* ─── Bottom Action Bar ──────────────────────────────────── */
    .cu-action-bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 12px 16px;
        background: #fafbfc;
        border-top: 1px solid #e3e4e8;
    }

    .cu-btn-cancel {
        padding: 6px 16px;
        border: 1px solid #d3d5db;
        background: white;
        color: #6b7385;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: all .15s;
        line-height: 1.4;
    }

    .cu-btn-cancel:hover { border-color: #adb0b8; color: #1a1d23; background: #f7f8fa; }

    .cu-btn-save {
        padding: 6px 18px;
        background: #7c3aed;
        border: 1px solid #7c3aed;
        color: white;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
        line-height: 1.4;
    }

    .cu-btn-save:hover { background: #6d28d9; border-color: #6d28d9; box-shadow: 0 2px 6px rgba(109,40,217,.35); }

    /* ─── Danger Zone ────────────────────────────────────────── */
    .cu-danger-section .cu-section-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .cu-danger-text h6 {
        font-size: 13px;
        font-weight: 700;
        color: #1a1d23;
        margin: 0 0 2px;
    }

    .cu-danger-text p {
        font-size: 12px;
        color: #6b7385;
        margin: 0;
    }

    .cu-btn-danger {
        padding: 6px 16px;
        background: white;
        border: 1px solid #dc2626;
        color: #dc2626;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .cu-btn-danger:hover { background: #dc2626; color: white; }

    /* ─── Responsive ─────────────────────────────────────────── */
    @media (max-width: 768px) {
        .cu-layout { grid-template-columns: 1fr; }
        .cu-info-panel { position: static; }
        .cu-field-row { grid-template-columns: 1fr; }
        .cu-danger-section .cu-section-body { flex-direction: column; align-items: flex-start; }
    }
</style>
@endpush

@section('content')
<div class="main-content">

    {{-- ── Gradient Page Header ──────────────────────────────── --}}
    <div class="content-header">
        <div class="d-flex align-items-center" style="position:relative;z-index:1;">
            <a href="{{ route('projects.show', $project) }}" class="me-3 text-decoration-none">
                <i class="bi bi-arrow-left fs-5" style="color:rgba(255,255,255,.8);"></i>
            </a>
            <div>
                <h1 class="content-title mb-1">Edit Project</h1>
                <p class="content-subtitle">Update your project information and settings</p>
            </div>
        </div>
    </div>

    {{-- ── Two-Panel Layout ──────────────────────────────────── --}}
    @php
        $colors = ['#6366f1','#8b5cf6','#06b6d4','#10b981','#f59e0b','#ef4444','#ec4899'];
        $projectColor = $colors[strlen($project->name) % count($colors)];
        $statusMap = [
            'not_started' => ['label'=>'Not Started','class'=>'not-started'],
            'in_progress' => ['label'=>'In Progress','class'=>'in-progress'],
            'completed'   => ['label'=>'Completed',  'class'=>'completed'],
            'closed'      => ['label'=>'Closed',     'class'=>'closed'],
        ];
        $statusInfo = $statusMap[$project->status] ?? $statusMap['not_started'];
    @endphp

    <div class="cu-layout">

        {{-- ── Left Info Panel ──────────────────────────────── --}}
        <div class="cu-info-panel">
            <div class="cu-info-panel-header">
                <span>Project</span>
            </div>
            <div class="cu-info-body">
                <div class="cu-project-avatar" style="background:{{ $projectColor }};">
                    {{ strtoupper(substr($project->name, 0, 1)) }}
                </div>
                <div class="cu-project-name">{{ $project->name }}</div>
                <div class="text-center mb-2">
                    <span class="cu-status-badge {{ $statusInfo['class'] }}">
                        <i class="bi bi-circle-fill" style="font-size:7px;"></i>
                        {{ $statusInfo['label'] }}
                    </span>
                </div>

                @if($project->start_date)
                <div class="cu-meta-row">
                    <i class="bi bi-calendar-event"></i>
                    <span>Start&nbsp;<strong>{{ \Carbon\Carbon::parse($project->start_date)->format('M d, Y') }}</strong></span>
                </div>
                @endif

                @if($project->end_date)
                <div class="cu-meta-row">
                    <i class="bi bi-calendar-x"></i>
                    <span>Due&nbsp;<strong>{{ \Carbon\Carbon::parse($project->end_date)->format('M d, Y') }}</strong></span>
                </div>
                @endif

                @if($project->budget)
                <div class="cu-meta-row">
                    <i class="bi bi-currency-dollar"></i>
                    <span>Budget&nbsp;<strong>${{ number_format($project->budget, 0) }}</strong></span>
                </div>
                @endif

                <div class="cu-meta-row">
                    <i class="bi bi-clock-history"></i>
                    <span>Updated&nbsp;<strong>{{ $project->updated_at->diffForHumans() }}</strong></span>
                </div>

                <div class="cu-meta-row">
                    <i class="bi bi-person"></i>
                    <span>Owner&nbsp;<strong>{{ auth()->user()->name }}</strong></span>
                </div>
            </div>
        </div>

        {{-- ── Right Form Sections ───────────────────────────── --}}
        <form action="{{ route('projects.update', $project) }}" method="POST" id="editProjectForm">
            @csrf
            @method('PUT')

            <div class="cu-sections">

                {{-- General Info --}}
                <div class="cu-section">
                    <div class="cu-section-header">
                        <span class="cu-section-icon purple"><i class="bi bi-folder2-open"></i></span>
                        <span class="cu-section-title">General Info</span>
                    </div>
                    <div class="cu-section-body">
                        <div class="cu-field">
                            <label for="name" class="cu-label">Project Name <span style="color:#dc2626;">*</span></label>
                            <div class="cu-input-wrap">
                                <i class="bi bi-folder"></i>
                                <input type="text"
                                       name="name"
                                       id="name"
                                       class="cu-input {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                       value="{{ old('name', $project->name) }}"
                                       placeholder="Enter project name"
                                       required>
                            </div>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="cu-field">
                            <label class="cu-label">Description</label>
                            <div class="cu-editor-wrap">
                                <div id="quill-editor"></div>
                                <textarea name="description" id="description" style="display:none;">{{ old('description', $project->description) }}</textarea>
                            </div>
                            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                {{-- Timeline & Budget --}}
                <div class="cu-section">
                    <div class="cu-section-header">
                        <span class="cu-section-icon blue"><i class="bi bi-calendar3"></i></span>
                        <span class="cu-section-title">Timeline &amp; Budget</span>
                    </div>
                    <div class="cu-section-body">
                        <div class="cu-field-row cu-field">
                            <div class="cu-field" style="margin-bottom:0;">
                                <label for="start_date" class="cu-label">Start Date</label>
                                <div class="cu-input-wrap">
                                    <i class="bi bi-calendar-event"></i>
                                    <input type="date"
                                           name="start_date"
                                           id="start_date"
                                           class="cu-input {{ $errors->has('start_date') ? 'is-invalid' : '' }}"
                                           value="{{ old('start_date', $project->start_date ? \Carbon\Carbon::parse($project->start_date)->format('Y-m-d') : '') }}">
                                </div>
                                @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="cu-field" style="margin-bottom:0;">
                                <label for="end_date" class="cu-label">End Date</label>
                                <div class="cu-input-wrap">
                                    <i class="bi bi-calendar-x"></i>
                                    <input type="date"
                                           name="end_date"
                                           id="end_date"
                                           class="cu-input {{ $errors->has('end_date') ? 'is-invalid' : '' }}"
                                           value="{{ old('end_date', $project->end_date ? \Carbon\Carbon::parse($project->end_date)->format('Y-m-d') : '') }}">
                                </div>
                                @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="cu-field" style="margin-bottom:0; margin-top:12px;">
                            <label for="budget" class="cu-label">Budget (USD)</label>
                            <div class="cu-input-wrap">
                                <i class="bi bi-currency-dollar"></i>
                                <input type="number"
                                       name="budget"
                                       id="budget"
                                       class="cu-input {{ $errors->has('budget') ? 'is-invalid' : '' }}"
                                       value="{{ old('budget', $project->budget) }}"
                                       step="0.01" min="0"
                                       placeholder="0.00">
                            </div>
                            @error('budget')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                {{-- Status --}}
                <div class="cu-section">
                    <div class="cu-section-header">
                        <span class="cu-section-icon green"><i class="bi bi-ui-checks"></i></span>
                        <span class="cu-section-title">Status</span>
                        <span class="cu-section-subtitle">Select current state</span>
                    </div>
                    <div class="cu-section-body">
                        <div class="cu-status-chips">
                            <div class="cu-chip-option chip-not-started">
                                <input type="radio" name="status" id="status_not_started" value="not_started"
                                    {{ old('status', $project->status) == 'not_started' ? 'checked' : '' }}>
                                <label for="status_not_started" class="cu-chip-label">
                                    <span class="cu-chip-dot"></span> Not Started
                                </label>
                            </div>
                            <div class="cu-chip-option chip-in-progress">
                                <input type="radio" name="status" id="status_in_progress" value="in_progress"
                                    {{ old('status', $project->status) == 'in_progress' ? 'checked' : '' }}>
                                <label for="status_in_progress" class="cu-chip-label">
                                    <span class="cu-chip-dot"></span> In Progress
                                </label>
                            </div>
                            <div class="cu-chip-option chip-completed">
                                <input type="radio" name="status" id="status_completed" value="completed"
                                    {{ old('status', $project->status) == 'completed' ? 'checked' : '' }}>
                                <label for="status_completed" class="cu-chip-label">
                                    <span class="cu-chip-dot"></span> Completed
                                </label>
                            </div>
                            <div class="cu-chip-option chip-closed">
                                <input type="radio" name="status" id="status_closed" value="closed"
                                    {{ old('status', $project->status) == 'closed' ? 'checked' : '' }}>
                                <label for="status_closed" class="cu-chip-label">
                                    <span class="cu-chip-dot"></span> Closed
                                </label>
                            </div>
                        </div>
                        @error('status')<div class="invalid-feedback mt-2">{{ $message }}</div>@enderror
                    </div>
                    <div class="cu-action-bar">
                        <a href="{{ route('projects.show', $project) }}" class="cu-btn-cancel">Cancel</a>
                        <button type="submit" class="cu-btn-save">
                            <i class="bi bi-check-lg me-1"></i>Save Changes
                        </button>
                    </div>
                </div>

            </div>
        </form>
    </div>

    {{-- ── Danger Zone (full-width, below grid) ─────────────── --}}
    <div class="cu-section cu-danger-section" style="margin-top:10px; border-color:#fecaca;">
        <div class="cu-section-header" style="background:#fff5f5; border-bottom-color:#fecaca;">
            <span class="cu-section-icon red"><i class="bi bi-exclamation-triangle"></i></span>
            <span class="cu-section-title" style="color:#dc2626;">Danger Zone</span>
        </div>
        <div class="cu-section-body">
            <div class="cu-danger-text">
                <h6>Delete this project</h6>
                <p>Permanently removes all tasks, files, and associated data. This cannot be undone.</p>
            </div>
            <form action="{{ route('projects.destroy', $project) }}" method="POST" id="deleteForm">
                @csrf
                @method('DELETE')
                <button type="button" class="cu-btn-danger" onclick="confirmDelete()">
                    <i class="bi bi-trash me-1"></i>Delete Project
                </button>
            </form>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('editProjectForm');
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');

    // Auto-set minimum end date based on start date
    startDateInput.addEventListener('change', function() {
        if (this.value) {
            endDateInput.min = this.value;
            if (endDateInput.value && endDateInput.value < this.value) {
                endDateInput.value = '';
            }
        }
    });

    // Form validation
    form.addEventListener('submit', function(e) {
        const name = document.getElementById('name').value.trim();

        if (!name) {
            e.preventDefault();
            alert('Please enter a project name.');
            return;
        }

        if (startDateInput.value && endDateInput.value) {
            if (new Date(endDateInput.value) < new Date(startDateInput.value)) {
                e.preventDefault();
                alert('End date cannot be before start date.');
                return;
            }
        }
    });

    // Initialize Quill editor
    var quill = new Quill('#quill-editor', {
        theme: 'snow',
        placeholder: 'Describe your project goals, objectives, and key deliverables...',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }],
                ['link'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'align': [] }],
                ['clean']
            ]
        }
    });

    // Set initial content if available
    var initialContent = document.getElementById('description').value;
    if (initialContent) {
        quill.root.innerHTML = initialContent;
    }

    // Update hidden textarea when content changes
    quill.on('text-change', function() {
        document.getElementById('description').value = quill.root.innerHTML;
    });

    // Update hidden textarea before form submission
    document.querySelector('form').addEventListener('submit', function() {
        document.getElementById('description').value = quill.root.innerHTML;
    });
});

function confirmDelete() {
    if (confirm('Are you sure you want to delete this project? This action cannot be undone and will remove all associated tasks, files, and data.')) {
        if (confirm('This is your final warning. Are you absolutely sure you want to permanently delete this project?')) {
            document.getElementById('deleteForm').submit();
        }
    }
}
</script>

<!-- Quill.js CSS and JS -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
@endpush