@extends('admin.layout.app')

@section('title', 'Assigned Ticket Engineers')

@push('styles')
  <link href="/csstemplate/libs/downloaded/bootstrap.min.css" rel="stylesheet">
  <link href="/csstemplate/libs/downloaded/dataTables.bootstrap5.min.css" rel="stylesheet">
  <style> a{text-decoration: none !important; } </style>
  tr[data-href]:hover {
    background-color: #f5f5f5;
}
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Ticket Assignments to Engineers </h5>
      <a href="{{ route('admin.ticketengineer.create') }}" class="btn btn-sm btn-primary">
        <i class="bi bi-plus-circle me-1"></i> Assign Ticket
      </a>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="ticketEngineerTable" class="table table-hover table-bordered table-striped text-nowrap">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Ticket ID</th>
              <th>Assigned To</th>
              <th>Attended By</th>
              <th>Time In</th>
              <th>Time Out</th>
              <th>Paid Hours</th>
              <th>Cost Type</th>
              <th>Agreed Cost</th>
              <th>Hours Worked</th>
              <th>Travel Type</th>
              <th>Travel Cost</th>
              <th>Fuel Cost</th>
              <th>Parking Cost</th>
              <th>Parking Approved</th>
              <th>Car ID</th>
              <th>Consumables</th>
              <th>Comments</th>
              <th>Created By</th>
              <th>Updated By</th>
            </tr>
          </thead>
          <tbody>
          @foreach($ticketEngineers as $index => $entry)
            <tr data-href="{{ route('admin.ticketengineer.edit', $entry->id) }}" style="cursor:pointer;">
              <td>{{ $index + 1 }}</td>
              <td>{{ $entry->ticket_id }}</td>
              <td>{{ optional($entry->assignedTo)->first_name }} {{ optional($entry->assignedTo)->last_name }}</td>
              <td>{{ optional($entry->attendedBy)->first_name }} {{ optional($entry->attendedBy)->last_name }}</td>
              <td>{{ $entry->time_in }}</td>
              <td>{{ $entry->time_out }}</td>
              <td>{{ $entry->paid_hours }}</td>
              <td>{{ ucfirst($entry->cost_type) }}</td>
              <td>€{{ $entry->agreed_cost }}</td>
              <td>{{ $entry->hours_worked }}</td>
              <td>{{ ucfirst($entry->travel_type) }}</td>
              <td>€{{ $entry->travel_cost }}</td>
              <td>€{{ $entry->fuel_cost }}</td>
              <td>€{{ $entry->parking_cost }}</td>
              <td>
                @if($entry->parking_approved)
                  <span class="badge bg-success">Yes</span>
                @else
                  <span class="badge bg-secondary">No</span>
                @endif
              </td>
              <td>{{ $entry->car_id }}</td>
              <td>€{{ $entry->engineer_consumables }}</td>
              <td>{{ Str::limit($entry->comments, 30) }}</td>
              <td>{{ optional($entry->createdBy)->first_name }}</td>
              <td>{{ optional($entry->updatedBy)->first_name }}</td>
            </tr>
          @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
  <script src="/csstemplate/libs/downloaded/jquery-3.7.1.min.js"></script>
  <script src="/csstemplate/libs/downloaded/bootstrap.bundle.min.js"></script>
  <script src="/csstemplate/libs/downloaded/jquery.dataTables.min.js"></script>
  <script src="/csstemplate/libs/downloaded/dataTables.bootstrap5.min.js"></script>

  <script>
    $(document).ready(function () {
      if ($.fn.DataTable.isDataTable('#ticketEngineerTable')) {
        $('#ticketEngineerTable').DataTable().destroy();
      }

      const table = $('#ticketEngineerTable').DataTable({
        responsive: true,
        ordering: true,
        searching: true,
        paging: true,
        pageLength: 25,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search ticket assignments..."
        }
      });

      $('#navbar-search-main').on('input', function () {
        table.search(this.value).draw();
      });

      // Enable row click navigation
      $('#ticketEngineerTable tbody').on('click', 'tr', function () {
        const url = $(this).data('href');
        if (url) {
          window.location.href = url;
        }
      });
    });
  </script>
@endpush