@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<button type="button" class="green-btn-inner waves-effect" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRightAdvancedPrimary" aria-controls="offcanvasRightAdvancedPrimary"><i class="bx bx-filter-alt"></i> Filter <span class="filter-counter" data-filter-id="primary">(0)</span></button>',
    '<div class="search-field"><input type="text" class="form-control pr-45 module-search" placeholder="Search" value="'. e(request()->input('search_text')) .'">'. ((request()->has('search_text') && request()->input('search_text')) ? '<i class="'. \Config::get('settings.icon_cross') .' search-clear-icon"></i>' : '<i class="'. \Config::get('settings.icon_search') .'"></i>') .'</div>',
    '<div class="d-inline-block position-relative hw-export-wrapper" data-export-wrapper data-route="'. route('sales-reps.export','__FMT__') .'">'
        .'<button type="button" class="'. \Config::get('view.buttons.primary') .' hw-export-btn" data-export-btn><i class="bx bx-download"></i> <span>Export</span></button>'
        .'<div class="hw-export-menu shadow" data-export-menu>'
            .'<button type="button" class="hw-export-item" data-format="csv">CSV</button>'
            .'<button type="button" class="hw-export-item" data-format="xlsx">XLS</button>'
        .'</div>'
    .'</div>'
    .'<a href="'. route('sales-reps.create') .'" class="'. \Config::get('view.buttons.primary') .' show-modal-lg"><i class="'. \Config::get('settings.icon_add') .'" ></i> Add Sales Rep</a>'
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <div class="project-box">
        <x-heading-sec :module="$module" :options="$headingOptions" />
        <div class="table-responsive project-table">
            <table id="datatable" class="table mb-0 dt-responsive nowrap">
                <thead class="thead-light">
                <tr>
                    <th>Sales Rep Name</th>
                    <th>Sales Rep Number</th>
                    <th>Phone Number</th>
                    <th>Email</th>
                    <th>Status</th>
                    @if($permission['edit'] || $permission['destroy'])
                        <th class="w-25 text-right">Actions</th>
                    @endif
                </tr>
                </thead>
                <tbody>
                @if(isset($data) && count($data) > 0)
                    @foreach($data as $val)
                        <tr data-id="{{ $val->id }}">
                            <td>{{ trim(($val->first_name ?? '') .' '. ($val->last_name ?? '')) }}</td>
                            <td>{{ $val->sales_rep_number ?? '' }}</td>
                            <td>{{ \App\Helpers\Helper::phone($val->phone ?? '') }}</td>
                            <td>{{ $val->email ?? '' }}</td>
                            <td class="text-{{ $val->statuses[$val->status]['badge'] ?? 'secondary' }}">{{ $val->statuses[$val->status]['name'] ?? $val->status }}</td>
                            @if($permission['edit'] || $permission['destroy'])
                                <td class="d-flex gap-2 justify-content-end">
                                    <a href="{{ route('sales-reps.assign-leads',$val->id) }}" class="action-btn show-modal" data-toggle="tooltip" title="Assign Leads">
                                        <i class="bx bx-plus"></i>
                                    </a>
                                    <a href="{{ route($routePrefix.'.edit',$val->id) }}" class="action-btn show-modal-lg" data-toggle="tooltip" title="Edit"><i class="{{ \Config::get('settings.icon_edit') }}"></i></a>
                                    <!-- <a href="{{ route($routePrefix.'.show',$val->id) }}" class="action-btn" data-toggle="tooltip" title="View"><i class="mdi mdi-eye-outline"></i></i></a> -->
                                    <a href="javascript:void(0);" class="action-btn waves-effect" data-toggle="tooltip" title="Change Status"
                                       data-confirm="Are You Sure? | You want to change status?"
                                       data-confirm-yes="event.preventDefault(); document.getElementById('change-status-form-{{ $val->id }}').submit();">
                                        <i class="{{ $val->statuses[$val->status == 1 ? 2 : 1]['icon'] }}"></i>
                                        <form id="change-status-form-{{ $val->id }}" method="POST" action="{{ route($routePrefix.'.change-status',$val->id) }}" style="display:none;">
                                            @csrf
                                        </form>
                                    </a>
                                    <a href="javascript:void(0);" class="action-btn" data-toggle="tooltip" title="Delete"
                                       data-confirm="Are You Sure? | You want to delete?"
                                       data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{ $val->id }}').submit();">
                                        <i class="{{ \Config::get('settings.icon_delete') }}"></i>
                                        <form id="delete-form-{{ $val->id }}" method="POST" action="{{ route($routePrefix.'.destroy',$val->id) }}" style="display:none;">
                                            @csrf @method('DELETE')
                                        </form>
                                    </a>
                                </td>
                            @endif
                        </tr>
                    @endforeach
                @else
                    <tr><td colspan="6" class="text-center">No Data Found</td></tr>
                @endif
                </tbody>
            </table>
        </div>
        @include('admin.components.pagination-inner')
    </div>
    @if(isset($metrics))
    <div class="row mt-4 d-none">
        <div class="col-lg-8 col-md-12 mb-3">
            <div class="project-box p-3 position-relative">
                <h5 class="mb-3">Sales Reps Wise Lead Count</h5>
                <div class="position-absolute" style="top:15px; right:20px; min-width:160px;">
                    <label class="small text-muted mb-1">Date Range</label>
                    <select class="form-control form-control-sm" id="sales-reps-range">
                        @foreach($metrics['ranges'] as $k=>$v)
                            <option value="{{$k}}" {{ $metrics['current']==$k?'selected':'' }}>{{$v}}</option>
                        @endforeach
                    </select>
                </div>
                <div id="sales-reps-chart" style="min-height:360px;"></div>
                {{-- Legend rendered by ApexCharts; duplicate removed --}}
            </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-3">
            <div class="project-box p-3 h-100">
                <h5 class="mb-3">Totals Business Volume</h5>
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead>
                            <tr>
                                <th>Sales rep Name</th>
                                <th class="text-end">Total Volume</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(($metrics['rows'] ?? []) as $r)
                                <tr>
                                    <td>{{ $r['name'] }}</td>
                                    <td class="text-end">${{ number_format($r['total_volume'],2) }}</td>
                                    <td class="text-end">${{ number_format($r['total'],0) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="border-top">
                                <th>Total</th>
                                @php($summary = $metrics['summary'])
                                <th id="sales-reps-summary-volume" class="text-end">${{ number_format($summary['sum_volume'],2) }}</th>
                                <th id="sales-reps-summary-total" class="text-end">${{ number_format($summary['sum_total'],0) }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection
@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script>
window.SalesRepMetrics = @json($metrics ?? []);
</script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="{{ asset('assets/js/sales_reps.js') }}"></script>
@endpush