@extends('layouts.app')

@section('title', 'My Tasks')

@section('content')
    <div class="portal-page-header">
        <h1 class="h4 mb-0">My marketing tasks</h1>
        <p class="subtitle">Leads assigned to you. Edit details, manage vendor prices, and assign design work to the 3D / design team.</p>
    </div>

    @forelse($leads as $lead)
        <div class="portal-card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
                    <div>
                        <h5 class="mb-1 fw-bold">{{ $lead->displayFairName() ?: 'Lead #' . $lead->id }}</h5>
                        <p class="text-muted small mb-0">
                            @if($lead->company_name){{ $lead->company_name }} · @endif
                            Assigned {{ optional($lead->assigned_at)->format('M d, Y H:i') ?: '—' }}
                            @if($lead->assignedBy) by {{ $lead->assignedBy->name }} @endif
                        </p>
                        @if($lead->designAssignedTo)
                            <p class="small mb-0 mt-1">
                                Design → <strong>{{ $lead->designAssignedTo->name }}</strong>
                                @include('partials.design-task-status-badge', ['status' => $lead->clean_design_task_status])
                                @if($lead->design_due_date)
                                    · Due {{ $lead->design_due_date->format('M d, Y') }}
                                @endif
                            </p>
                        @endif
                    </div>
                    <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                        @include('partials.lead-status-badge', ['status' => $lead->clean_lead_status])
                        @if($canAssignDesign)
                            <button type="button"
                                    class="btn btn-portal-outline btn-sm btn-assign-design"
                                    data-bs-toggle="modal"
                                    data-bs-target="#assignDesignModal"
                                    data-lead-id="{{ $lead->id }}"
                                    data-lead-name="{{ $lead->displayFairName() ?: 'Lead #' . $lead->id }}"
                                    data-design-assigned-to="{{ $lead->design_assigned_to_user_id }}">
                                Assign design
                            </button>
                        @endif
                        @if(can_edit_lead($lead))
                            <a href="{{ route('leads.edit', $lead) }}" class="btn btn-portal-outline btn-sm">Edit</a>
                        @endif
                        <a href="{{ route('leads.show', $lead) }}" class="btn btn-portal-primary btn-sm">Full detail</a>
                    </div>
                </div>

                <div class="portal-detail-grid">
                    <div class="portal-detail-item">
                        <div class="label">Venue</div>
                        <div class="value">{{ $lead->displayVenue() }}</div>
                    </div>
                    <div class="portal-detail-item">
                        <div class="label">Country</div>
                        <div class="value">{{ optional(optional($lead->tradefair)->fairCountry)->name ?: $lead->country ?: '—' }}</div>
                    </div>
                    <div class="portal-detail-item">
                        <div class="label">Contact</div>
                        <div class="value">{{ $lead->contact_person_name ?: '—' }}</div>
                    </div>
                    <div class="portal-detail-item">
                        <div class="label">Fair dates</div>
                        <div class="value">
                            {{ optional($lead->effectiveFairStartDate())->format('M d, Y') ?: '—' }}
                            –
                            {{ optional($lead->effectiveFairEndDate())->format('M d, Y') ?: '—' }}
                        </div>
                    </div>
                    <div class="portal-detail-item">
                        <div class="label">Budget</div>
                        <div class="value">{{ $lead->lead_budget !== null ? number_format($lead->lead_budget, 2) : '—' }}</div>
                    </div>
                    <div class="portal-detail-item">
                        <div class="label">Booth area</div>
                        <div class="value">{{ $lead->displayArea() }}</div>
                    </div>
                    <div class="portal-detail-item">
                        <div class="label">Email</div>
                        <div class="value">
                            @if($lead->email_id)
                                <a href="mailto:{{ $lead->email_id }}">{{ $lead->email_id }}</a>
                            @else — @endif
                        </div>
                    </div>
                    <div class="portal-detail-item">
                        <div class="label">Phone</div>
                        <div class="value">{{ $lead->phone_number ?: '—' }}</div>
                    </div>
                </div>

                @if($lead->description)
                    <div class="mt-3 pt-3 border-top">
                        <div class="portal-section-title">Description</div>
                        <p class="small mb-0">{{ $lead->description }}</p>
                    </div>
                @endif
            </div>
        </div>
    @empty
        <div class="portal-card">
            <div class="portal-empty py-5">
                <p class="mb-0">No tasks assigned to you yet.</p>
            </div>
        </div>
    @endforelse

    @if($canAssignDesign)
        <div class="modal fade" id="assignDesignModal" tabindex="-1" aria-labelledby="assignDesignModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <form method="POST" id="assignDesignForm" action="">
                        @csrf
                        <div class="modal-header border-0 pb-0">
                            <h5 class="modal-title fw-bold" id="assignDesignModalLabel">Assign to design team</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="text-muted small mb-3">Lead: <strong id="assignDesignLeadName">—</strong></p>
                            @if($designTeamUsers->isEmpty())
                                <div class="alert alert-warning mb-0 small">
                                    No design team users found. Add users to the <strong>3D Designer</strong> or <strong>CAD</strong> department (with a non-admin role).
                                </div>
                            @else
                                <label class="form-label fw-semibold small">Design team member</label>
                                <select name="design_assigned_to_user_id" id="assignDesignUser" class="form-select mb-3" required>
                                    <option value="">— Select user —</option>
                                    @foreach($designTeamUsers as $du)
                                        <option value="{{ $du->id }}">{{ $du->name }} ({{ optional($du->department)->name }})</option>
                                    @endforeach
                                </select>
                                <label class="form-label fw-semibold small">Due date (optional)</label>
                                <input type="date" name="design_due_date" class="form-control mb-3">
                                <label class="form-label fw-semibold small">Initial remark (optional)</label>
                                <textarea name="design_remark" class="form-control" rows="2" placeholder="Brief for the designer…"></textarea>
                            @endif
                        </div>
                        <div class="modal-footer border-0 pt-0">
                            <button type="button" class="btn btn-portal-outline" data-bs-dismiss="modal">Cancel</button>
                            @if($designTeamUsers->isNotEmpty())
                                <button type="submit" class="btn btn-portal-primary">Assign design task</button>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection

@if($canAssignDesign)
@push('scripts')
<script>
(function () {
    var form = document.getElementById('assignDesignForm');
    var nameEl = document.getElementById('assignDesignLeadName');
    var userSel = document.getElementById('assignDesignUser');
    var base = @json(url('/leads'));

    document.querySelectorAll('.btn-assign-design').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var leadId = btn.getAttribute('data-lead-id');
            if (form) form.action = base + '/' + leadId + '/assign-design';
            if (nameEl) nameEl.textContent = btn.getAttribute('data-lead-name') || 'Lead';
            var assigned = btn.getAttribute('data-design-assigned-to');
            if (userSel) userSel.value = assigned || '';
        });
    });
})();
</script>
@endpush
@endif
