@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">
      
        <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'>{{ (int)$job->load_weight }}</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');
                      // dump($vehiclesFromTrips);
                      $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>

<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")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [], // Disable initial sorting to maintain server-side order
      columnDefs: [
        { targets: ['action'], orderable: false }
      ]
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <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>
  `);

  // keep this outside so both handlers can use it
  let selectedTransporter = '';

    //  Combined custom filter (respects global + column search)
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        if (settings.nTable.id !== 'tbl-users') return true;

        const api = new $.fn.dataTable.Api(settings);
        const rowNode = settings.aoData[dataIndex].nTr;

        // Respect built-in search (global + column)
        if (!api.row(rowNode, { search: 'applied' }).any()) {
            return false;
        }

        //  Apply transporter filter
        const transporterIdsAttr = $(rowNode).data('transporters-id') || '';
        const transporterIds = transporterIdsAttr
            ? transporterIdsAttr.toString().split(',').map(s => s.trim()).filter(Boolean)
            : [];

        return !selectedTransporter || transporterIds.includes(selectedTransporter);
    });

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

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

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

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

    // Transporter dropdown filter
    $('#transporters').on('change', function () {
        selectedTransporter = $(this).val();
        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);
                            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');
    var html = $('#transporters-list-' + jobId).html();
    $('#transportersModalBody').html(html);
    $('#transportersModal').modal('show');
  });

  $(document).on('click', '.show-vehicles', function() {
    var jobId = $(this).data('job-id');
    var html = $('#vehicles-list-' + jobId).html();
    $('#vehiclesModalBody').html(html);
    $('#vehiclesModal').modal('show');
  });

    $(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