@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet"/>
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
@endpush

<style>
  .flash {
    animation: flash-animation 1s ease-in-out infinite;
  }

  @keyframes flash-animation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  
  .badge {
    padding: 0.35em 0.65em;
    font-size: 0.875em;
    font-weight: 600;
  }
  
  .stat-card {
    border-left: 4px solid;
    transition: transform 0.3s ease;
  }
  
  .stat-card:hover {
    transform: translateY(-5px);
  }
  
  .stat-card.total {
    border-left-color: #007bff;
  }
  
  .stat-card.pending {
    border-left-color: #ffc107;
  }
  
  .stat-card.approved {
    border-left-color: #28a745;
  }
  
  .btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    margin-right: 0.25rem;
  }

  /* Table styling */
  #maintenanceTable {
    font-size: 0.8rem;
  }
  
  #maintenanceTable th,
  #maintenanceTable td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
  }
  
  #maintenanceTable th {
    font-weight: 600;
    white-space: nowrap;
  }
  
  #maintenanceTable td {
    word-wrap: break-word;
    white-space: normal;
  }
  
  /* Make badges smaller */
  .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
  }
  
  /* Make buttons smaller */
  .btn-action {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
  }
  
  /* Ensure table stays responsive */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Filter section styling */
  .filter-section {
    background-color: #f8f9fa;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .filter-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: #495057;
  }
  
  .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
  }
  
  .filter-item {
    display: flex;
    flex-direction: column;
  }
  
  .filter-label {
    font-size: 0.8rem;
    margin-bottom: 5px;
    color: #6c757d;
  }
</style>

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Maintenance</a></li>
    <li class="breadcrumb-item active" aria-current="page">Crane Maintenance Records</li>
  </ol>
</nav>

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@elseif (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Crane Maintenance Overview</h6>
        
        <!-- Statistics Cards -->
        <div class="row mb-4">
          <div class="col-md-4">
            <div class="card stat-card total">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="text-muted mb-2">Total Records</h6>
                    <h4 class="mb-0" id="totalCount">0</h4>
                  </div>
                  <div class="bg-primary bg-opacity-10 p-3 rounded">
                    <i class="fas fa-list text-primary"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card stat-card pending">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="text-muted mb-2">Pending Approval</h6>
                    <h4 class="mb-0" id="pendingCount">0</h4>
                  </div>
                  <div class="bg-warning bg-opacity-10 p-3 rounded">
                    <i class="fas fa-clock text-warning"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card stat-card approved">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="text-muted mb-2">Approved</h6>
                    <h4 class="mb-0" id="approvedCount">0</h4>
                  </div>
                  <div class="bg-success bg-opacity-10 p-3 rounded">
                    <i class="fas fa-check-circle text-success"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Filter Section -->
        <div class="filter-section mb-4">
          <h6 class="filter-title">Filter Records</h6>
          <div class="filter-group">
            <!-- Status Filter -->
            <div class="filter-item">
              <label class="filter-label">Status</label>
              <select class="form-select form-select-sm" id="statusFilter" style="width: 200px;">
                <option value="">All Statuses</option>
                <option value="approved">Approved</option>
                <option value="pending">Pending</option>
              </select>
            </div>
            
            <!-- Platform Filter -->
            <div class="filter-item">
              <label class="filter-label">Platform</label>
              <select class="form-select form-select-sm" id="platformFilter" style="width: 200px;">
                <option value="">All Platforms</option>
                @foreach($platforms as $platform)
                  <option value="{{ $platform }}">{{ $platform ?: 'N/A' }}</option>
                @endforeach
              </select>
            </div>
            
            <!-- Clear Filters Button -->
            <div class="filter-item" style="align-self: flex-end;">
              <button id="clearFilters" class="btn btn-sm btn-outline-secondary" style="margin-top: 24px;">
                Clear Filters
              </button>
            </div>
          </div>
        </div>

        <div class="table-responsive">
          <table id="maintenanceTable" class="table table-sm compact">
            <thead class="bg-light">  
              <tr>
                <th style="width: 15%;">Crane ID</th>
                <th style="width: 15%;">Maintenance Type</th>
                <th style="width: 10%;">Tag No</th>
                <th style="width: 15%;">Platform</th>
                <th style="width: 10%;">Status</th>
                <th style="width: 15%;">Date Scheduled</th>
                <th style="width: 20%;">Actions</th>
              </tr>
            </thead>
            <tbody>
              <!-- Data will be populated by server-side DataTable -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>


@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
  $(document).ready(function() {
    let statusFilterValue = '';
    let platformFilterValue = '';

    // Initialize DataTable with server-side processing
    const dataTable = $('#maintenanceTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: '{{ route('dpr.list.data') }}',
        type: 'GET',
        data: function(d) {
          // Add custom filter parameters
          d.columns[4].search.value = statusFilterValue;
          d.columns[3].search.value = platformFilterValue;
        }
      },
      columns: [
        {
          data: 'crane_id',
          name: 'company_name',
          orderable: true
        },
        {
          data: 'maintenance_type',
          name: 'maintenance_name',
          orderable: true,
          render: function(data, type, row) {
            return '<span class="badge" style="background-color: ' + data.color + '">' + data.name + '</span>';
          }
        },
        {
          data: 'tag_no',
          name: 'tag_no',
          orderable: true
        },
        {
          data: 'location',
          name: 'location',
          orderable: true
        },
        {
          data: 'is_approved',
          name: 'is_approved',
          orderable: true,
          render: function(data, type, row) {
            if (data == 1) {
              return '<span class="badge bg-success">Approved</span>';
            } else {
              return '<span class="badge bg-warning text-dark">Pending</span>';
            }
          }
        },
        {
          data: 'report_date',
          name: 'report_date',
          orderable: true
        },
        {
          data: null,
          orderable: false,
          searchable: false,
          render: function(data, type, row) {
            const deleteUrl = '{{ route('maintenance-reports.destroy', ':id') }}'.replace(':id', row.id);
            const printUrl = '{{ route('crane-maintenance.print', ['craneId' => ':crane_id', 'reportDate' => ':report_date']) }}'
              .replace(':crane_id', row.cranes_inventory_id)
              .replace(':report_date', row.report_date_raw);

            return `
              <div class="d-flex align-items-center" style="gap: 0.35rem;">
                <form action="${deleteUrl}" method="POST" class="delete-form m-0">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="btn btn-danger btn-icon btn-xs" title="Delete">
                    <i data-feather="trash-2" width="12" height="12"></i>
                  </button>
                </form>
                <a href="${printUrl}" class="btn btn-info btn-icon btn-xs" title="Download PDF" target="_blank">
                  <i class="fas fa-file-pdf"></i>
                </a>
              </div>
            `;
          }
        }
      ],
      dom: '<"top"lf>rt<"bottom"ip>',
      responsive: true,
      lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
      pageLength: 10,
      order: [[5, 'desc']], // Default sort by date descending
      language: {
        lengthMenu: "Show _MENU_ entries",
        info: "Showing _START_ to _END_ of _TOTAL_ entries",
        infoEmpty: "Showing 0 to 0 of 0 entries",
        infoFiltered: "(filtered from _MAX_ total entries)",
        processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
        zeroRecords: `
          <div class="text-center py-4">
            <i class="fas fa-search fa-3x text-muted mb-3"></i>
            <h5>No Maintenance Records Found</h5>
            <p class="text-muted">When maintenance records are added, they'll appear here</p>
          </div>
        `
      },
      drawCallback: function(settings) {
        // Re-initialize feather icons after table redraw
        if (typeof feather !== 'undefined') {
          feather.replace();
        }

        // Update statistics
        updateStatistics();

        // Re-attach delete event handlers
        attachDeleteHandlers();
      }
    });

    // Function to update statistics
    function updateStatistics() {
      // Get current filter values
      const currentFilters = {
        status: statusFilterValue,
        platform: platformFilterValue
      };

      // Use DataTable's info to get total count
      const info = dataTable.page.info();
      $('#totalCount').text(info.recordsDisplay);

      // If there's a status filter, we can calculate the counts easily
      if (currentFilters.status === 'approved') {
        $('#approvedCount').text(info.recordsDisplay);
        $('#pendingCount').text(0);
      } else if (currentFilters.status === 'pending') {
        $('#approvedCount').text(0);
        $('#pendingCount').text(info.recordsDisplay);
      } else {
        // No status filter - need to fetch counts
        // Get counts from current page data
        const pageData = dataTable.rows({page: 'current'}).data();
        let approvedCount = 0;
        let pendingCount = 0;

        pageData.each(function(record) {
          if (record.is_approved == 1) {
            approvedCount++;
          } else {
            pendingCount++;
          }
        });

        // Estimate total counts based on the ratio from current page
        const currentPageSize = pageData.length;
        const totalRecords = info.recordsDisplay;

        if (currentPageSize > 0) {
          const approvedRatio = approvedCount / currentPageSize;
          const pendingRatio = pendingCount / currentPageSize;

          const estimatedApproved = Math.round(totalRecords * approvedRatio);
          const estimatedPending = totalRecords - estimatedApproved;

          $('#approvedCount').text(estimatedApproved);
          $('#pendingCount').text(estimatedPending);
        } else {
          $('#approvedCount').text(0);
          $('#pendingCount').text(0);
        }
      }
    }

    // Status filter functionality
    $('#statusFilter').change(function() {
      statusFilterValue = $(this).val();
      dataTable.draw();
    });

    // Platform filter functionality
    $('#platformFilter').change(function() {
      platformFilterValue = $(this).val();
      dataTable.draw();
    });

    // Clear all filters
    $('#clearFilters').click(function() {
      $('#statusFilter').val('');
      $('#platformFilter').val('');
      statusFilterValue = '';
      platformFilterValue = '';
      dataTable.draw();
    });

    // Function to attach delete handlers
    function attachDeleteHandlers() {
      $('.delete-form').off('submit').on('submit', function(e) {
        e.preventDefault();
        var form = this;

        Swal.fire({
          title: 'Are you sure?',
          text: 'This action cannot be undone.',
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Yes, delete it!',
          cancelButtonText: 'No, cancel',
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
              url: form.action,
              type: 'POST',
              data: {
                _token: '{{ csrf_token() }}',
                _method: 'DELETE'
              },
              success: function(response) {
                Swal.fire(
                  'Deleted!',
                  'The maintenance record has been deleted successfully.',
                  'success'
                ).then(() => {
                  dataTable.draw();
                });
              },
              error: function(xhr) {
                Swal.fire(
                  'Error!',
                  'There was a problem deleting the record.',
                  'error'
                );
              }
            });
          }
        });
      });
    }

    // Initial statistics update
    updateStatistics();

    // Flash message timeout
    setTimeout(function() {
      $('.alert').fadeOut('slow');
    }, 5000);
  });
</script>
@endpush