<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="fusion_tasks.FusionTaskMapView">
        <div class="o_fusion_task_map_view">
            <Layout display="display">
                <t t-set-slot="control-panel-additional-actions">
                    <CogMenu/>
                </t>
                <t t-set-slot="layout-buttons">
                    <t t-call="{{ props.buttonTemplate }}"/>
                </t>
                <t t-set-slot="layout-actions">
                    <SearchBar toggler="searchBarToggler"/>
                </t>
                <t t-set-slot="control-panel-navigation-additional">
                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                </t>

                <div class="fc_map_wrapper">

                    <!-- ========== SIDEBAR ========== -->
                    <div t-att-class="'fc_sidebar' + (state.sidebarOpen ? '' : ' fc_sidebar--collapsed')">

                        <!-- Sidebar header -->
                        <div class="fc_sidebar_header">
                            <div class="d-flex align-items-center justify-content-between">
                                <h6 class="mb-0 fw-bold">
                                    <i class="fa fa-list-ul me-2"/>Deliveries
                                    <span class="badge text-bg-primary ms-1" t-esc="state.taskCount"/>
                                </h6>
                                <button class="btn btn-sm btn-link text-muted p-0" t-on-click="toggleSidebar"
                                        title="Toggle sidebar">
                                    <i t-att-class="'fa ' + (state.sidebarOpen ? 'fa-chevron-left' : 'fa-chevron-right')"/>
                                </button>
                            </div>
                            <!-- New task button -->
                            <button class="btn btn-primary btn-sm w-100 mt-2" t-on-click="createNewTask">
                                <i class="fa fa-plus me-1"/>New Delivery Task
                            </button>

                            <!-- Day filter chips -->
                            <div class="fc_day_filters mt-2">
                                <t t-foreach="state.groups" t-as="group" t-key="group.key + '_filter'">
                                    <button t-att-class="'fc_day_chip' + (isGroupVisible(group.key) ? ' fc_day_chip--active' : '')"
                                            t-att-style="isGroupVisible(group.key) ? 'background:' + group.dayColor + ';color:#fff;border-color:' + group.dayColor : ''"
                                            t-on-click="() => this.toggleDayFilter(group.key)">
                                        <t t-esc="group.label"/>
                                        <span class="fc_day_chip_count" t-esc="group.count"/>
                                    </button>
                                </t>
                                <button class="fc_day_chip fc_day_chip--all" t-on-click="showAllDays"
                                        title="Show all">All</button>
                            </div>

                            <!-- Technician filter -->
                            <t t-if="state.allTechnicians.length > 1">
                                <div class="fc_tech_filters mt-2">
                                    <t t-foreach="state.allTechnicians" t-as="tech" t-key="tech.id">
                                        <button t-att-class="'fc_tech_chip' + (isTechVisible(tech.id) ? ' fc_tech_chip--active' : '')"
                                                t-on-click="() => this.toggleTechFilter(tech.id)"
                                                t-att-title="tech.name">
                                            <span class="fc_tech_chip_avatar" t-esc="tech.initials"/>
                                            <span class="fc_tech_chip_name" t-esc="tech.name"/>
                                        </button>
                                    </t>
                                    <button class="fc_tech_chip fc_tech_chip--all" t-on-click="showAllTechs"
                                            title="Show all technicians">All</button>
                                </div>
                            </t>
                        </div>

                        <!-- Sidebar body: grouped task list -->
                        <div class="fc_sidebar_body">
                            <t t-foreach="state.groups" t-as="group" t-key="group.key">
                                <!-- Group header (collapsible) with day color -->
                                <div class="fc_group_header" t-on-click="() => this.toggleGroup(group.key)">
                                    <i t-att-class="'fa me-1 ' + (isGroupCollapsed(group.key) ? 'fa-caret-right' : 'fa-caret-down')"/>
                                    <i class="fa fa-circle me-1" style="font-size:8px;"
                                       t-att-style="'color:' + group.dayColor"/>
                                    <span class="fc_group_label" t-esc="group.label"/>
                                    <span t-if="!isGroupVisible(group.key)" class="fc_group_hidden_tag">hidden</span>
                                    <span class="fc_group_badge" t-esc="group.count"/>
                                </div>

                                <!-- Group tasks -->
                                <div t-if="!isGroupCollapsed(group.key)" class="fc_group_tasks">
                                    <t t-foreach="group.tasks" t-as="task" t-key="task.id">
                                        <div t-att-class="'fc_task_card' + (state.activeTaskId === task.id ? ' fc_task_card--active' : '')"
                                             t-on-click="() => this.focusTask(task.id)">

                                            <!-- Card top row: number + status -->
                                            <div class="fc_task_card_top">
                                                <span class="fc_task_num" t-att-style="'background:' + task._dayColor">
                                                    <t t-esc="'#' + task._scheduleNum"/>
                                                </span>
                                                <span class="fc_task_status" t-att-style="'color:' + task._statusColor">
                                                    <i t-att-class="'fa ' + task._statusIcon" style="margin-right:3px;"/>
                                                    <t t-esc="task._statusLabel"/>
                                                </span>
                                            </div>

                                            <!-- Client name -->
                                            <div class="fc_task_client" t-esc="task._clientName"/>

                                            <!-- Type + time -->
                                            <div class="fc_task_meta">
                                                <span><i class="fa fa-tag me-1"/><t t-esc="task._typeLbl"/></span>
                                                <span><i class="fa fa-clock-o me-1"/><t t-esc="task._timeRange"/></span>
                                            </div>

                                            <!-- Date -->
                                            <div class="fc_task_date">
                                                <i class="fa fa-calendar me-1"/><t t-esc="task._dateLabel"/>
                                            </div>

                                            <!-- Technician + address -->
                                            <div class="fc_task_detail">
                                                <span><i class="fa fa-user me-1"/><t t-esc="task._techName"/></span>
                                            </div>
                                            <div t-if="task.address_display" class="fc_task_address">
                                                <i class="fa fa-map-marker me-1"/>
                                                <t t-esc="task.address_display"/>
                                            </div>

                                            <!-- Travel + source -->
                                            <div class="fc_task_bottom_row">
                                                <span t-if="task.travel_time_minutes" class="fc_task_travel">
                                                    <i class="fa fa-car me-1"/>
                                                    <t t-esc="task.travel_time_minutes"/> min travel
                                                </span>
                                                <span t-if="task._sourceLabel" class="fc_task_source"
                                                      t-att-style="'background:' + task._sourceColor">
                                                    <i class="fa fa-building-o me-1"/>
                                                    <t t-esc="task._sourceLabel"/>
                                                </span>
                                                <span class="fc_task_edit_btn"
                                                      t-on-click.stop="() => this.openTask(task.id)"
                                                      title="Edit task">
                                                    <i class="fa fa-pencil me-1"/>Edit
                                                </span>
                                            </div>
                                        </div>
                                    </t>
                                </div>
                            </t>

                            <!-- Empty state -->
                            <div t-if="state.groups.length === 0 and !state.loading" class="fc_sidebar_empty">
                                <i class="fa fa-inbox fa-2x text-muted d-block mb-2"/>
                                <span class="text-muted">No tasks found</span>
                            </div>
                        </div>

                        <!-- Sidebar footer: technician count -->
                        <div class="fc_sidebar_footer">
                            <div class="d-flex align-items-center gap-2">
                                <svg width="14" height="14" viewBox="0 0 48 48">
                                    <rect x="2" y="2" width="44" height="44" rx="12" ry="12" fill="#1d4ed8" stroke="#fff" stroke-width="3"/>
                                    <text x="24" y="30" text-anchor="middle" fill="#fff" font-size="17" font-family="Arial,sans-serif" font-weight="bold">T</text>
                                </svg>
                                <small class="text-muted">
                                    <t t-esc="state.techCount"/> technician(s) online
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- Collapsed sidebar toggle -->
                    <button t-if="!state.sidebarOpen"
                            class="fc_sidebar_toggle_btn" t-on-click="toggleSidebar"
                            title="Open sidebar">
                        <i class="fa fa-chevron-right"/>
                    </button>

                    <!-- ========== MAP AREA ========== -->
                    <div class="fc_map_area">
                        <!-- Legend bar -->
                        <div class="fc_map_legend_bar d-flex align-items-center gap-3 px-3 py-2 border-bottom bg-view flex-wrap">
                            <button class="btn btn-sm d-flex align-items-center gap-1"
                                    t-att-class="state.showTasks ? 'btn-primary' : 'btn-outline-secondary'"
                                    t-on-click="toggleTasks">
                                <i class="fa fa-map-marker"/>Tasks <t t-esc="state.taskCount"/>
                            </button>
                            <button class="btn btn-sm d-flex align-items-center gap-1"
                                    t-att-class="state.showTechnicians ? 'btn-primary' : 'btn-outline-secondary'"
                                    t-on-click="toggleTechnicians">
                                <i class="fa fa-user"/>Techs <t t-esc="state.techCount"/>
                            </button>
                            <span class="border-start mx-1" style="height:20px;"/>
                            <span class="text-muted fw-bold" style="font-size:11px;">Pins:</span>
                            <span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#f59e0b;"/>Pending</span>
                            <span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#ef4444;"/>Today</span>
                            <span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#3b82f6;"/>Tomorrow</span>
                            <span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#10b981;"/>This Week</span>
                            <span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#a855f7;"/>Upcoming</span>
                            <span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#9ca3af;"/>Yesterday</span>
                            <span class="flex-grow-1"/>
                            <button class="btn btn-sm d-flex align-items-center gap-1"
                                    t-att-class="state.showRoute ? 'btn-info' : 'btn-outline-secondary'"
                                    t-on-click="toggleRoute" title="Toggle route animation">
                                <i class="fa fa-road"/>Route
                            </button>
                            <button class="btn btn-sm d-flex align-items-center gap-1"
                                    t-att-class="state.showTraffic ? 'btn-warning' : 'btn-outline-secondary'"
                                    t-on-click="toggleTraffic" title="Toggle traffic layer">
                                <i class="fa fa-car"/>Traffic
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" t-on-click="onRefresh" title="Refresh">
                                <i class="fa fa-refresh" t-att-class="{'fa-spin': state.loading}"/>
                            </button>
                        </div>

                        <!-- Map container -->
                        <div class="fc_map_container">
                            <div t-ref="mapContainer" style="position:absolute;top:0;left:0;right:0;bottom:0;"/>

                            <!-- Loading -->
                            <div t-if="state.loading"
                                 class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
                                 style="z-index:10;background:rgba(255,255,255,.92);">
                                <div class="text-center">
                                    <i class="fa fa-spinner fa-spin fa-3x text-primary mb-3 d-block"/>
                                    <span class="text-muted">Loading Google Maps...</span>
                                </div>
                            </div>

                            <!-- Error -->
                            <div t-if="state.error"
                                 class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
                                 style="z-index:10;background:rgba(255,255,255,.92);">
                                <div class="alert alert-danger m-4" role="alert">
                                    <i class="fa fa-exclamation-triangle me-2"/><t t-esc="state.error"/>
                                </div>
                            </div>

                            <!-- Empty -->
                            <div t-if="!state.loading and !state.error and state.taskCount === 0 and state.techCount === 0"
                                 class="position-absolute top-50 start-50 translate-middle text-center" style="z-index:5;">
                                <div class="bg-white rounded-3 shadow p-4">
                                    <i class="fa fa-map-marker fa-3x text-muted mb-3 d-block"/>
                                    <h5>No locations to show</h5>
                                    <p class="text-muted mb-0">Try adjusting the filters or date range.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Layout>
        </div>
    </t>

    <t t-name="fusion_tasks.FusionTaskMapView.Buttons"/>

</templates>
