@extends('backend.layouts.admin.app')

@section('content')
<style>
.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.action-icon:hover {
  background-color: #f8f9fa;
  border-radius: 4px;
}

.action-icon.d-none {
  visibility: hidden;
  width: 32px;
  height: 32px;
}
</style>
@php use App\Models\MineJob; @endphp
<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class="active">Jobs</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    @if(!$isTransporter && (auth()->user()->isAdmin() || auth()->user()->can('jobs.create')))
    <a href="{{ route('admin.jobs.create') }}"><button class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> Add Jobs</button></a>
    @endif
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="box shadow-none">
    <div class="box-body pt-0" style="position: relative;">
      
      
      
        <table aria-describedby="tbl-users-desc" class="table table-bordered table-hover" id="tbl-users">
          <thead>
            <th scope="col">{{__('app.jobs.job_id')}}</th>
            @if(!$isTransporter)
            <th scope="col">{{__('app.transporters.transporter')}}</th>
            @else
            <th scope="col">{{__('app.vehicles.title')}}</th>
            @endif
            <th scope="col">{{__('app.locations.loading_location')}}</th>
            <th scope="col">{{__('app.locations.offloading_location')}}</th>
            <th scope="col" class="min-width-158">{{__('app.jobs.load_time')}}</th>
            <th scope="col" class="min-width-158">{{__('app.jobs.offload_time')}}</th>
            <th scope="col">Quantity (Metric Tons)</th>
            <th scope="col">{{__('app.jobs.job_status')}}</th>
            <th scope="col" class="action">{{__('app.action')}}</th>
          </thead>
           {{-- <tbody>
            @foreach ($jobs as $job)
            @php
              $transporterIds = $job->transporters->pluck('id')->implode(',');
              $transporterNames = strtolower($job->transporters->pluck('name')->join(','));
              // Get load progress based on user role
              if ($isTransporter) {
                  $loadProgress = getTransporterCompletedLoadWeight($job->id, auth()->id());
              } else {
                  $loadProgress = getJobCompletedLoadWeight($job->id);
              }
            @endphp
              <tr data-transporters-id="{{ $transporterIds }}" data-transporters="{{ $transporterNames }}">
                <td data-type='text'>
                  @if($isTransporter)
                  <a href={{ route('transporter.jobs.show', $job->id) }}>{{ $job->id }}</a>
                  @elseif(auth()->user()->isAdmin() || auth()->user()->can('jobs.view'))
                  <a href={{ route('admin.jobs.show', $job->id) }}>{{ $job->id }}</a>
                  @else
                  {{ $job->id }}
                  @endif
                </td>
                <td data-type='text'>
                  @if ($isTransporter)
                    <a href="javascript:void(0);" class="show-vehicles" data-job-id="{{ $job->id }}">
                      @php
                          $loggedInTransporterId = auth()->id();
                          $tripsForUser = $job->trips->where('transport_id', $loggedInTransporterId);
                         
                          $vehiclesFromTrips = $tripsForUser->map(function($trip){
                              try {
                                  return $trip->vehicle;
                              } catch (Exception $e) {
                                  return null;
                              }
                          })->filter();
                          $vehicleCount = $vehiclesFromTrips->unique('id')->count();
                      @endphp
                      {{ $vehicleCount ?? 0}}
                    </a>
                  @else
                    <a href="javascript:void(0);" class="show-transporters" data-job-id="{{ $job->id }}">
                      {{$job->transporters->count() ? $job->transporters->count() : 0}}
                    </a>
                  @endif
                </td>
                <td data-type='text'>{{$job->loadingLocation->name ?? null }}</td>
                <td data-type='text'>{{$job->offloadingLocation->name ?? null}}</td>
                <td data-type='none'>{{ $job->load_date->format('d/m/Y') .'  '. $job->load_time_format}}</td>
                <td data-type='none'>
                    <span class="{{ \Carbon\Carbon::now()->startOfDay()->gt($job->offload_date->startOfDay()) ? 'text-danger' : '' }}">
                        {{$job->offload_date->format('d/m/Y') .'  '. $job->offload_time_format}}
                    </span>
                </td>
                <td data-type='text'>{{ $loadProgress['formatted'] ?? '0/0' }}</td>
                <td data-type='none'>
                  @php
                      $jobStatus = getJobStatusByRole($job, $user);
                  @endphp
                  <span class="{{ $jobStatus['css_class'] }}">
                    {{ ucwords($jobStatus['status_label']) }}
                  </span>
                </td>
                <td data-type='none'>
                  <div class="d-flex align-items-center gap-2">
                    <!-- Chat Icon - Always visible -->
                    <a href="" class="action-icon" id="openJobChatBtn" data-job-id="{{ $job->id }}">
                      <em class="iconsax icon-292D32 fs-20" icon-name="message-dots"></em>
                    </a>
                    
                    @if(!$isTransporter) 
                      <!-- Edit Icon - Conditionally visible -->
                      <a href="{{ route('admin.jobs.edit', $job->id) }}" 
                         class="action-icon {{ !((auth()->user()->isAdmin() || auth()->user()->can('jobs.edit')) && !$job->isCompleted()) ? 'd-none' : '' }}">
                        <em class="iconsax icon-292D32 fs-20" icon-name="edit-1"></em>
                      </a>
                      
                      <!-- Delete Icon - Conditionally visible -->
                      <a href="javascript:;" 
                         class="action-icon {{ !(auth()->user()->isAdmin() && !in_array($job->status, [MineJob::STATUS_COMPLETED, MineJob::STATUS_IN_PROGRESS])) ? 'd-none' : '' }}">
                        <em class="iconsax icon-292D32 fs-20 delete-job" data-job-id="{{ $job->id }}" icon-name="trash"></em>
                      </a>
                    @else
                      <!-- Placeholder for transporter view to maintain spacing -->
                      <span class="action-icon d-none"></span>
                      <span class="action-icon d-none"></span>
                    @endif
                  </div>
                </td>
              </tr>
              <div id="transporters-list-{{ $job->id }}" class="d-none">
                  @if($job->transporters->count())
                      <ul class="list-group">
                          @foreach($job->transporters as $transporter)
                              <li class="list-group-item">
                                  {{ $transporter->name }} ({{ $transporter->email }})
                              </li>
                          @endforeach
                      </ul>
                  @else
                      <div class="text-muted">No transporters found for this job.</div>
                  @endif
              </div>
              <div id="vehicles-list-{{ $job->id }}" class="d-none">
                  @php
                      $loggedInTransporterId = auth()->id();
                      $tripsForUser = $job->trips->where('transport_id', $loggedInTransporterId);
                      $vehiclesFromTrips = $tripsForUser->map(function($trip){
                          try {
                              return $trip->vehicle;
                          } catch (Exception $e) {
                              return null;
                          }
                      })->filter()->unique('id');
                      $vehicleCount = $vehiclesFromTrips->count();
                  @endphp
                  @if($vehicleCount > 0)
                      <ul class="list-group">
                          @foreach($vehiclesFromTrips as $vehicle)
                              <li class="list-group-item">
                                  {{ $vehicle->registration_number }} - {{ $vehicle->make }} {{ $vehicle->model }} ({{ $vehicle->transporter->name }})
                              </li>
                          @endforeach
                      </ul>
                  @else
                      <div class="text-muted">No vehicles found for this job.</div>
                  @endif
              </div>
            @endforeach
          </tbody> --}}
        </table>
      
    </div>
  </div>
  <!-- /.box -->

</section>
<!-- /.content -->
<!-- Modal start here -->
<div class="modal fade" id="autologin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-xl">
    <div class="modal-content model-content-autologin">

    </div>
  </div>
</div>
<!-- Modal end here -->

<!-- Transporters Modal -->
<div class="modal fade" id="transportersModal" tabindex="-1" aria-labelledby="transportersModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="transportersModalLabel">Transporters List</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="transportersModalBody">
        <!-- Transporters will be loaded here -->
      </div>
    </div>
  </div>
</div>

<!-- Vehicles Modal -->
<div class="modal fade" id="vehiclesModal" tabindex="-1" aria-labelledby="vehiclesModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="vehiclesModalLabel">Vehicles List</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="vehiclesModalBody">
        <!-- Vehicles will be loaded here -->
      </div>
    </div>
  </div>
</div>

<!-- Hidden template for filters -->
<div id="job-filters-template" style="display: none;">
  <div class="d-flex flex-wrap jobs-right-filter justify-content-end w-100">
    @if(!$isTransporter)
      <div class="max-w-200">
          <select id="transporters" class="form-control w-100 ">
          <option value="">Transporters</option>
          @foreach ($transporters as $transporter)  
            <option value="{{ $transporter->id }}">{{$transporter->name}}</option>
          @endforeach
          </select>
      </div>
    @endif
    <div class="max-w-200">
        <select id="loading_location" class="form-control w-100">
        <option value="">Loading</option>
        @foreach ($loadingLocations as $loadingLocation)
          <option value="{{$loadingLocation->name}}">{{$loadingLocation->name}}</option>
        @endforeach
        </select>
    </div>
    <div class="max-w-200">
        <select id="offloading_location" class="form-control w-100">
        <option value="">Offloading</option>
        @foreach ($offloadingLocations as $offloadingLocation)
          <option value="{{$offloadingLocation->name}}">{{$offloadingLocation->name}}</option>
        @endforeach
        </select>
    </div>
    <div class="max-w-200">
        <select id="status_filter" class="form-control w-100">
        <option value="">Status</option>
        <option value="pending">Pending</option>
        <option value="in progress">In Progress</option>
        <option value="completed">Completed</option>
        </select>
    </div>
  </div>
</div>

<script type="text/javascript">
  // Ensure FirebaseChat is initialized in this page as well (no-op if already initialized globally)
  try{
    if (window.FirebaseChat && !window.FirebaseChat.db){
      const firestoreDbId = "{{ config('firebase.database') }}";
      const firebaseConfig = { apiKey: "{{ config('firebase.apiKey') }}" };
      window.FirebaseChat.init(firebaseConfig, firestoreDbId, { userId: "{{ auth()->id() }}", userName: "{{ auth()->user()->name }}", role: "{{ auth()->user()->isTransporter() ? 'transporter' : 'admin' }}" });
    }
  }catch(_){ }

  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    
    // Use global loader functions
    const showLoader = window.showLoader || function(){ try { window.AppLoader && window.AppLoader.show(); } catch(_) {} };
    const hideLoader = window.hideLoader || function(){ try { window.AppLoader && window.AppLoader.hide(); } catch(_) {} };
    
    var loaderTimer = null;
    var table = $('#tbl-users').DataTable({
      processing: false, // Disable default DataTable processing indicator
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ $isTransporter ? route("transporter.jobs.datatable") : route("admin.jobs.datatable") }}',
        type: 'GET',
        data: function(d) {
          // Add your existing filters
          d.transporters = $('#transporters').val();
          d.status = $('#status_filter').val();
          d.date_from = $('#date_from').val();
          d.date_to = $('#date_to').val();
          return d;
        },
        beforeSend: function() {
          try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
          loaderTimer = setTimeout(function(){ showLoader(); }, 200);
        },
        complete: function() {
          try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
          hideLoader();
        },
        error: function() {
          try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
          hideLoader();
        }
      },
      rowCallback: function(row, data, index) {
        // Add data attributes to the row
        if (data.DT_RowData) {
          $(row).attr('data-transporters-id', data.DT_RowData['transporters-id']);
          $(row).attr('data-transporters', data.DT_RowData['transporters']);
        }
      },
      
      columns: [
        { data: 'id', name: 'id' },
        @if(!$isTransporter)
        { data: 'transporters', name: 'transporters', orderable: true, searchable: false },
        @else
        { data: 'vehicles', name: 'vehicles', orderable: true, searchable: false },
        @endif
        { data: 'loading_location', name: 'loading_location', orderable: true, searchable: true },
        { data: 'offloading_location', name: 'offloading_location', orderable: true, searchable: true },
        { data: 'load_time', name: 'load_time' },
        { data: 'offload_time', name: 'offload_time' },
        { data: 'quantity_metric_tons', name: 'quantity_metric_tons', orderable: true, searchable: false },
        { data: 'status', name: 'status'},
        { data: 'actions', name: 'actions', orderable: false, searchable: false, render: function(data, type, row) { return data; } }
      ],
      info: true,
      searching: true,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [[0, 'desc']],
      columnDefs: [
        { targets: ['action'], orderable: false }
      ],
      drawCallback: function() {
        try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
        hideLoader();
      }
    });
    
    // Add loader to pagination and other events
    function queueLoader(){
      try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
      loaderTimer = setTimeout(function(){ showLoader(); }, 200);
    }
    table.on('page.dt', queueLoader);
    table.on('length.dt', queueLoader);
    table.on('order.dt', queueLoader);
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    // Append filters to DataTable
    var filtersHtml = $('#job-filters-template').html();
    $('#tbl-users_filter').append(filtersHtml);

  // server-side filtering will use ajax data params and column searches

 //  Global search event
 $('#tbl-users_filter input[type="search"]').on('keyup', function () {
        queueLoader();
        table.search(this.value).draw();
    });

    // Column filters (loading, offloading, status)
    $('#loading_location').on('change', function () {
        queueLoader();
        table.column(2).search(this.value).draw();
    });

    $('#offloading_location').on('change', function () {
        queueLoader();
        table.column(3).search(this.value).draw();
    });

    $('#status_filter').on('change', function () {
        queueLoader();
        table.column(8).search(this.value).draw();
    });

    // Transporter dropdown filter (server-side)
    $('#transporters').on('change', function () {
        queueLoader();
        table.draw();
    });


    $('.delete-job').on('click', function() {
        const jobId = $(this).data('job-id');
        const row = $(this).closest('tr');
        var url = "{{ route('admin.jobs.destroy', ['job' => ':id']) }}";
        url = url.replace(':id', jobId);
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            // Remove the row from the table
                            try { if (window.deleteGroupChat) { window.deleteGroupChat(jobId); } } catch(_) {}
                            toastr.success(response.message);
                            showLoader();
                            setTimeout(function() {
                                location.reload();
                            }, 500);
                            // Show success message
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error('Failed to delete job');
                    }
                });
            }
        });
    });

  });

  $(document).on('click', '.show-transporters', function() {
    var jobId = $(this).data('job-id');
    showLoader();
    $('#transportersModalBody').html('');
    $('#transportersModal').modal('show');
    $.ajax({
      url: '{{ route('admin.jobs.transporters', ['job' => ':id']) }}'.replace(':id', jobId),
      type: 'GET',
      success: function(resp){
        if (resp && resp.html){
          $('#transportersModalBody').html(resp.html);
        } else {
          $('#transportersModalBody').html('<div class="text-muted">No transporters found for this job.</div>');
        }
        hideLoader();
      },
      error: function(){
        $('#transportersModalBody').html('<div class="text-danger">Failed to load transporters.</div>');
        hideLoader();
      }
    });
  });

    $(document).on('click', '.show-vehicles', function() {
      var jobId = $(this).data('job-id');
    showLoader();
    $('#vehiclesModalBody').html('');
    $('#vehiclesModal').modal('show');
    $.ajax({
      url: '{{ route('transporter.jobs.vehicles', ['job' => ':id']) }}'.replace(':id', jobId),
      type: 'GET',
      success: function(resp){
        if (resp && resp.html){
          $('#vehiclesModalBody').html(resp.html);
        } else {
          $('#vehiclesModalBody').html('<div class="text-muted">No vehicles found for this job.</div>');
        }
        hideLoader();
      },
      error: function(){
        $('#vehiclesModalBody').html('<div class="text-muted">Failed to load vehicles.</div>');
        hideLoader();
      }
    });
    });

    $(document).on('click', '#openJobChatBtn', function(e) {
     e.preventDefault();
     var jobId = $(this).data('job-id');
     const chatUrl = '{{ route($user->isTransporter() ? 'transporter.chats.index' : 'admin.chats.index') }}' + '?job=' + encodeURIComponent(jobId);
     window.location.href = chatUrl;
   });

   // Client-side Firestore deletion for group chat after job deletion
   window.deleteGroupChat = async function(jobId){
     try{
       if (!window.FirebaseChat || !window.FirebaseChat.db){ return; }
       const db = window.FirebaseChat.db;
       const chatId = 'group_job' + String(jobId);
       const { doc, collection, getDocs, deleteDoc } = await import('https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js');
       const chatRef = doc(db, 'Chats', chatId);
       // Delete known subcollections
       const subNames = ['Messages','UserChatStatus'];
       for (const sub of subNames){
         try{
           const subRef = collection(db, 'Chats', chatId, sub);
           const snap = await getDocs(subRef);
           const deletes = [];
           snap.forEach(d => { deletes.push(deleteDoc(d.ref)); });
           await Promise.allSettled(deletes);
         }catch(_){ /* ignore */ }
       }
       // Delete the chat document
       try{ await deleteDoc(chatRef); }catch(_){ }
     }catch(_){ /* ignore */ }
   }
 </script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 @endsection