@extends('layouts.app')

@section('title', $viewAll ? 'Design tracking' : 'My design tasks')
@section('page_title', $viewAll ? 'Design tracking' : 'My design tasks')

@section('content')
    <div class="portal-page-header">
        <p class="subtitle mb-0">
            @if($viewAll)
                All design assignments in one place — track designer, status, due dates, and remarks.
            @else
                Your assigned design work — update status, due date, and add tracking remarks.
            @endif
        </p>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md">
            <div class="portal-stat" style="--stat-accent: #4f46e5;">
                <div class="portal-stat-value">{{ $stats['total'] }}</div>
                <div class="portal-stat-label">Total tasks</div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="portal-stat" style="--stat-accent: #f59e0b;">
                <div class="portal-stat-value">{{ $stats['in_progress'] }}</div>
                <div class="portal-stat-label">In progress</div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="portal-stat" style="--stat-accent: #ef4444;">
                <div class="portal-stat-value">{{ $stats['overdue'] }}</div>
                <div class="portal-stat-label">Overdue</div>
            </div>
        </div>
        <div class="col-6 col-md">
            <div class="portal-stat" style="--stat-accent: #10b981;">
                <div class="portal-stat-value">{{ $stats['completed'] }}</div>
                <div class="portal-stat-label">Completed</div>
            </div>
        </div>
    </div>

    <div class="portal-card">
        <div class="portal-table-wrap">
            <table class="table portal-table mb-0 align-middle">
                <thead>
                <tr>
                    <th>Fair / Lead</th>
                    @if($viewAll)<th>Designer</th>@endif
                    <th>Marketing</th>
                    <th>Assigned</th>
                    <th>Due date</th>
                    <th>Status</th>
                    <th>Latest remark</th>
                    <th class="text-end">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($leads as $lead)
                    <tr class="{{ $lead->isDesignOverdue() ? 'table-warning' : '' }}">
                        <td>
                            <a href="{{ route('leads.show', $lead) }}" class="lead-link fw-semibold">{{ $lead->displayFairName() ?: 'Lead #' . $lead->id }}</a>
                            @if($lead->company_name)
                                <div class="small text-muted">{{ $lead->company_name }}</div>
                            @endif
                        </td>
                        @if($viewAll)
                            <td>{{ optional($lead->designAssignedTo)->name ?: '—' }}</td>
                        @endif
                        <td class="small">{{ optional($lead->assignedTo)->name ?: '—' }}</td>
                        <td class="small text-nowrap">{{ optional($lead->design_assigned_at)->format('M d, Y') ?: '—' }}</td>
                        <td class="text-nowrap">
                            @if($lead->design_due_date)
                                <span class="{{ $lead->isDesignOverdue() ? 'text-danger fw-semibold' : '' }}">
                                    {{ $lead->design_due_date->format('M d, Y') }}
                                </span>
                            @else
                                <span class="text-muted">Not set</span>
                            @endif
                        </td>
                        <td>@include('partials.design-task-status-badge', ['status' => $lead->clean_design_task_status])</td>
                        <td class="small" style="max-width: 200px;">
                            @php $dr = $lead->designRemarks->first(); @endphp
                            @if($dr)
                                <span class="text-muted">{{ optional($dr->user)->name }}:</span>
                                {{ \Illuminate\Support\Str::limit($dr->remark, 60) }}
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <button type="button"
                                    class="btn btn-portal-outline btn-sm btn-update-design-task"
                                    data-bs-toggle="modal"
                                    data-bs-target="#updateDesignTaskModal"
                                    data-lead-id="{{ $lead->id }}"
                                    data-lead-name="{{ $lead->displayFairName() ?: 'Lead #' . $lead->id }}"
                                    data-status="{{ $lead->clean_design_task_status }}"
                                    data-due="{{ optional($lead->design_due_date)->format('Y-m-d') }}">
                                Update
                            </button>
                            <a href="{{ route('leads.show', $lead) }}" class="btn btn-portal-primary btn-sm">View</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ $viewAll ? 8 : 7 }}">
                            <div class="portal-empty py-4">No design tasks assigned yet.</div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="updateDesignTaskModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <form method="POST" id="updateDesignTaskForm" action="">
                    @csrf
                    @method('PATCH')
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title fw-bold">Update design task</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted small mb-3">Lead: <strong id="updateDesignLeadName">—</strong></p>
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">Status</label>
                            <select name="design_task_status" id="updateDesignStatus" class="form-select" required>
                                @foreach($designStatuses as $st)
                                    <option value="{{ $st }}">{{ $st }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">Due date</label>
                            <input type="date" name="design_due_date" id="updateDesignDue" class="form-control">
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-semibold small">Tracking remark</label>
                            <textarea name="design_remark" class="form-control" rows="3" placeholder="Progress update, blocker, handoff notes…"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-portal-outline" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-portal-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var form = document.getElementById('updateDesignTaskForm');
    var base = @json(url('/leads'));
    document.querySelectorAll('.btn-update-design-task').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (form) form.action = base + '/' + btn.getAttribute('data-lead-id') + '/design-task';
            var nameEl = document.getElementById('updateDesignLeadName');
            if (nameEl) nameEl.textContent = btn.getAttribute('data-lead-name') || '';
            var statusEl = document.getElementById('updateDesignStatus');
            if (statusEl) statusEl.value = btn.getAttribute('data-status') || 'Pending';
            var dueEl = document.getElementById('updateDesignDue');
            if (dueEl) dueEl.value = btn.getAttribute('data-due') || '';
        });
    });
})();
</script>
@endpush
