@extends('admin.admin_dashboard')
@section('admin')
<div class="page-content">
  <div class="page-breadcrumb d-flex justify-content-between align-items-center mb-3 p-3 bg-primary text-white rounded shadow-sm">
    <h5 class="mb-0">Resources for “{{ $project->name }}”</h5>
    <a href="{{ route('projects.resource-costs.create', $project) }}" class="btn btn-light">
      <i class="bx bx-plus-circle me-1"></i> Add Resource Cost
    </a>
  </div>

  <div class="card shadow-sm rounded-lg border-0">
    <div class="card-body p-4">
      <table id="example" class="table table-hover table-striped table-bordered align-middle mb-0">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Date</th>
            <th>Resource</th>
            <th class="text-end">Hours</th>
            <th class="text-end">Rate</th>
            <th class="text-end">Cost</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach($costs as $i => $c)
            <tr>
              <td class="fw-bold text-center">
                {{ $i+1 + ($costs->currentPage()-1)*$costs->perPage() }}
              </td>
              <td>{{ \Carbon\Carbon::parse($c->date)->format('Y-m-d') }}</td>
              <td>{{ $c->resource->name }}</td>
              <td class="text-end">{{ number_format($c->hours, 2) }}</td>
              <td class="text-end">{{ number_format($c->rate, 2) }}</td>
              <td class="text-end">{{ number_format($c->total_cost, 2) }}</td>
              <td>
                <div class="dropdown">
                  <a class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown"></a>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <a class="dropdown-item"
                         href="{{ route('projects.resource-costs.edit', [$project, $c]) }}">
                        Edit
                      </a>
                    </li>
                    <li>
                      <form method="POST"
                            action="{{ route('projects.resource-costs.destroy', [$project, $c]) }}"
                            class="delete-form">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="dropdown-item text-danger delete-btn">
                          Delete
                        </button>
                      </form>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>

      <div class="mt-3">
        {{ $costs->links('vendor.pagination.bootstrap-5') }}
      </div>
    </div>
  </div>
</div>

{{-- SweetAlert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  document.querySelectorAll('.delete-btn').forEach(button => {
    button.addEventListener('click', () => {
      const form = button.closest('.delete-form');
      Swal.fire({
        title: 'Are you sure?',
        text: "This will permanently delete this resource cost.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel',
        reverseButtons: true
      }).then((result) => {
        if (result.isConfirmed) {
          form.submit();
        }
      });
    });
  });
</script>
@endsection