@extends('admin.layouts.main')

@section('title')
    {{ __('Leads') }}
@endsection

@section('content')
<main id="app">
    <loading :active.sync="isLoading"></loading>

    <div class="two-col">
        @include('admin.common.sidebar')

        <div class="right-sec" v-cloak>
            {{-- Breadcrumb --}}
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0)">{{ __('KUA') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __('Leads') }}
                    </li>
                </ol>
            </nav>

            <div class="top-bar d-flex align-items-center">
                <h2>{{ __('Leads') }}</h2>
                <div class="right-table-container ml-auto">
                    @permission('kua-product-write')
                        <a href="#"
                           class="btn btn-em" @click="openFilterModal()">
                           {{ __('Filter') }}
                        </a>
                    @endpermission
                </div>
            </div>
            

            <div class="table-wrapper">
                <div class="table-top-panel d-flex align-items-center">
                    <div class="form-group search-input float-left mb-0">
                        <img src="{{ asset('/img/ic_search.png') }}" srcset="../../img/admin/ic_search@2x.png 2x"
                            alt="search">
                        <input type="text" name="search_text" id="search_text" v-model="search_text" @input="search"
                            placeholder="Search">
                        <i class="material-icons" v-if="search_text" @click="clearSearch">close</i>
                    </div>
                    <div class="d-flex align-items-center mx-auto" v-if="leads && leads.length">
                        <div class="form-group select btm-arrow mb-0 d-flex without-label align-items-center">
                            <label style="white-space: nowrap;"
                                class="mb-0 gray">{{ @trans('kua_agent.records_per_page') }}</label>
                            <select class="form-control" id="per_page" v-model="per_page" @input="perPage">
                                <option value="25" selected>25 </option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <span>Total @{{ total }}</span>
                    </div>
                    <div class="pagination d-flex justify-content-center ml-auto" v-if="leads && leads.length">
                        @include('admin.common.paginate_js')
                    </div>
                </div>
                <div class="table-data" v-if="leads && leads.length">
                    <div class="table-responsive table-checkable">
                        <table class="table" id="mtcTable">
                            
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ @trans('kua_agent_lead.name') }}</th>
                                    <th>{{ @trans('kua_agent_lead.agent') }}
                                        <a href="javascript:void(0)" :class="classSort('agent_name')" @click="sort('agent_name')"></a>
                                      </th>
                                      <th>{{ @trans('kua_agent_lead.type') }}
                                        <a href="javascript:void(0)" :class="classSort('lead_type')" @click="sort('lead_type')"></a>
                                      </th>
                                      <th>{{ @trans('kua_agent_lead.client') }}
                                        <a href="javascript:void(0)" :class="classSort('client_name')" @click="sort('client_name')"></a>
                                      </th>
                                      <th>{{ @trans('kua_agent_lead.product') }}
                                        <a href="javascript:void(0)" :class="classSort('product_name')" @click="sort('product_name')"></a>
                                      </th>
                                      <th>{{ @trans('kua_agent_lead.created_at') }}
                                        <a href="javascript:void(0)" :class="classSort('created_at')" @click="sort('created_at')"></a>
                                      </th>
                                      <th>{{ @trans('kua_agent_lead.expected_closure_date') }}
                                        <a href="javascript:void(0)" :class="classSort('expected_closure_date')" @click="sort('expected_closure_date')"></a>
                                      </th>
                                      <th>{{ @trans('kua_agent_lead.stage') }}
                                        <a href="javascript:void(0)" :class="classSort('stage')" @click="sort('stage')"></a>
                                      </th>
                                      
                                    <th>{{ @trans('kua_agent_lead.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(lead, index) in leads" :key="lead.id || index" :class="getLeadClass(lead)">
                                  <td>@{{ ((typeof from !== 'undefined' && from) ? from : 1) + index }}</td>
                              
                                  <td>@{{ lead.customer_name || lead.business_name || '-' }}</td>
                              
                                  <!-- Safe access with optional chaining; fallback to '-' -->
                                  <td>@{{ (lead.kua_agent?.full_name) ?? '-' }}</td>
                              
                                  <td class="text-capitalize">@{{ lead.lead_type || '-' }}</td>
                                  <td class="text-capitalize">@{{ (lead.kua_company?.name) ?? '-' }}</td>
                                  <td class="text-capitalize">@{{ (lead.kua_product?.product_name) ?? '-' }}</td>
                              
                                  <!-- Only call formatDate if a value exists -->
                                  <td>@{{ lead.created_at ? lead.formatted_created_at : '-' }}</td>
                                  <td>@{{ lead.expected_closure_date ? lead.formatted_expected_closure_date : '-' }}</td>
                              
                                  <td class="text-capitalize">@{{ lead.lead_status || '-' }}</td>
                              
                                  <td class="act-btn">
                                    @permission('kua-product-read')
                                    <a
                                      :href="'{{ route('admin.kua-agent-lead.show', ['id' => 'LEAD_ID', 'panel' => Session::get('panel')]) }}'.replace('LEAD_ID', lead.id)"
                                      class="btn btn-view"
                                      title="View"
                                    >
                                      <i class="material-icons">remove_red_eye</i>
                                    </a>
                                    @endpermission
                              
                                    {{-- If you re-enable delete, keep it as is; it's fine. --}}
                                    {{-- @permission('kua-product-delete')
                                    <a href="javascript:void(0)" class="btn btn-dlt" title="Delete" @click="deleteLead(lead.id)">
                                      <i class="material-icons">delete</i>
                                    </a>
                                    @endpermission --}}
                                  </td>
                                </tr>
                              </tbody>
                              
                        </table>
                    </div>

                    {{-- If you prefer Laravel paginator links instead of JS paginate_js --}}
                    
                </div>

                {{-- Empty state --}}
                <div class="row" v-if="!leads || !leads.length">
                    <div class="col-md-12">
                        <div class="alert alert-warning" role="alert">
                            {{ __('No leads to show') }}
                        </div>
                    </div>
                </div>
            </div><!-- /.table-wrapper -->
        </div><!-- /.right-sec -->
    </div><!-- /.two-col -->
    @include('admin.modules.kua_agent_lead.modal')
</main>
@endsection
@push('pageJs')
    {{-- Inject server data for your existing kua_agent_lead.js --}}
    <script>
      $(document).ready(function() {
          // Initialize date range picker when modal is shown
          $('#lead_filter').on('shown.bs.modal', function() {
              initializeDateRangePicker();
          });
          
          function initializeDateRangePicker() {
              // Check if daterangepicker is available
              if (typeof $.fn.daterangepicker === 'undefined') {
                  console.warn('DateRangePicker plugin not loaded');
                  return;
              }

              const $dateRangeInput = $('#expected_closure_date_range');
              
              // Destroy existing picker if it exists
              if ($dateRangeInput.data('daterangepicker')) {
                  $dateRangeInput.daterangepicker('destroy');
              }
              
              // Initialize date range picker
              $dateRangeInput.daterangepicker({
                  autoUpdateInput: false,
                  locale: {
                      cancelLabel: 'Clear',
                      format: 'YYYY-MM-DD'
                  },
                  opens: 'left',
                  drops: 'down'
              });

              // Handle date range selection
              $dateRangeInput.on('apply.daterangepicker', function(ev, picker) {
                  const dateRange = picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD');
                  $(this).val(dateRange);
                  
                  // Update hidden inputs with the actual date values
                  $('#filter_expected_closure_date_from').val(picker.startDate.format('YYYY-MM-DD'));
                  $('#filter_expected_closure_date_to').val(picker.endDate.format('YYYY-MM-DD'));
              });

              // Handle clear button - this is the key fix
              $dateRangeInput.on('cancel.daterangepicker', function(ev, picker) {
                  console.log('Clear button clicked');
                  $(this).val('');
                  $('#filter_expected_closure_date_from').val('');
                  $('#filter_expected_closure_date_to').val('');
                  
                  // Reset the picker's internal state
                  picker.setStartDate(moment());
                  picker.setEndDate(moment());
              });

              // Set initial values if they exist from previous filter
              const fromDate = $('#filter_expected_closure_date_from').val();
              const toDate = $('#filter_expected_closure_date_to').val();
              
              if (fromDate && toDate) {
                  $dateRangeInput.val(fromDate + ' - ' + toDate);
              }
          }
      });
        @php
            $meta = [
                'from'         => $leads->firstItem(),
                'total'        => $leads->total(),
                'current_page' => $leads->currentPage(),
                'last_page'    => $leads->lastPage(),
                'per_page'     => $leads->perPage(),
                'search'       => request('search', ''),
                'order_by'     => request('order_by', 'id'),
                'order'        => request('order', 'desc'),
                'sort_by' => request('sort_by', 'id'),

            ];
            $query = request()->except('page');
    $baseUrl = route('admin.kua-agent-lead.index', ['panel' => Session::get('panel')]);
    $baseUrlWithQuery = empty($query) ? $baseUrl : $baseUrl.'?'.http_build_query($query);
        @endphp

        // table payload
        window.leadsFromServer = @json($leads->items());
        window.leadsMeta       = @json($meta);
        // edit mode (index usually null)
        window.editLeadId      = null;
        window.leadsMeta.order_by = window.leadsMeta.sort_by;
        window.leadData        = null;

        // routes for your JS redirects
        window.kua_agent_lead_indexUrl = @json($baseUrlWithQuery);

    </script>
<script>
    // Map UI keys → repository keys
    // (repo expects company_name & added_on; others are same)
    window.KUA_SORT_MAP = {
      client_name: 'company_name',
      created_at: 'added_on',
      // pass-throughs handled by fallback
    };
  
    // Add/override the sort() used by your headers
    if (window.kuaAgentLeadApp && typeof window.kuaAgentLeadApp.sort === 'function') {
      // if your app already defines sort, you can keep it—this is only if you need to override.
    } else {
      // global fallback if your Vue instance reads from window.* in methods
      window.sort = function(column) {
        const repoKey = window.KUA_SORT_MAP[column] || column;
  
        // current state comes from leadsMeta (pushed by PHP)
        const currentUiKey = (window.leadsMeta && (window.leadsMeta.order_by || window.leadsMeta.sort_by)) || 'id';
        const currentOrder = (window.leadsMeta && window.leadsMeta.order) || 'desc';
  
        const nextOrder = (currentUiKey === column)
          ? (currentOrder === 'asc' ? 'desc' : 'asc')
          : 'asc';
  
        const url = new URL(window.kua_agent_lead_indexUrl || window.location.href);
        url.searchParams.set('sort_by', repoKey);
        url.searchParams.set('order',   nextOrder);
        url.searchParams.delete('page');     // reset to first page on new sort
  
        window.location.href = url.toString();
      };
    }
  </script>
  
    {{-- Your existing Vue app for leads --}}
    <script src="{{ asset('js/admin/kua_agent_lead.js') }}"></script>
    <script>
        const companyProductsUrl = "{{ route('admin.company.products', ['panel' => Session::get('panel'), 'company' => 'COMPANY_ID']) }}";
        const productAgentsUrl   = "{{ route('admin.product.agents', ['panel' => Session::get('panel'), 'product' => 'PRODUCT_ID']) }}";
        
    </script>
    
@endpush