@extends('app-new')

@section('content')
<div class="content-w">
  <div class="content-i">
    <div class="content-box">
      <div class="row mb-3">
        <div class="col-md-8">
          <h5 class="mb-0">Requisition Approvals</h5>
          <div class="text-muted small">Pending approvals assigned to you</div>
        </div>
        <div class="col-md-4 text-md-end">
          <a href="{{ route('requisitions.index') }}" class="btn btn-outline-secondary">Back to List</a>
        </div>
      </div>

      <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-striped table-hover mb-0" id="datatable">
              <thead class="table-light">
                <tr>
                  <th>Req No</th>
                  <th>Project</th>
                  <th>Requested By</th>
                  <th>Required Date</th>
                  <th>Created</th>
                  <th class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                @forelse($approvals as $approval)
                  @php
                    $req = $requisitions[$approval->request_id] ?? null;
                  @endphp
                  <tr>
                    <td>{{ $req->requisition_no ?? 'N/A' }}</td>
                    <td>{{ $req->project->project_name ?? '-' }}</td>
                    <td>{{ $req->requester->name ?? '-' }}</td>
                    <td>{{ optional($req?->required_date)->format('Y-m-d') }}</td>
                    <td>{{ $req?->created_at?->format('Y-m-d') }}</td>
                    <td class="text-end">
                      @if($req)
                        <a href="{{ route('requisitions.show', $req) }}" class="btn btn-sm btn-outline-secondary">View</a>
                        <button type="button" class="btn btn-sm btn-outline-success action-btn" data-id="{{ $req->id }}" data-action="approve">Approve</button>
                        <button type="button" class="btn btn-sm btn-outline-danger action-btn" data-id="{{ $req->id }}" data-action="reject">Reject</button>
                      @endif
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="6" class="text-center text-muted py-4">No pending approvals</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="mt-3">
        {{ $approvals->links() }}
      </div>
    </div>
  </div>
</div>

<form id="approvalForm" method="POST" action="#" class="d-none">
  @csrf
  <input type="hidden" name="remarks" id="approvalRemarks">
</form>
@endsection

@push('head-script')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.action-btn');
    const form = document.getElementById('approvalForm');
    const remarksInput = document.getElementById('approvalRemarks');

    buttons.forEach((btn) => {
      btn.addEventListener('click', function () {
        const action = this.dataset.action;
        const id = this.dataset.id;
        const url = action === 'approve'
          ? `{{ url('requisitions') }}/${id}/approve`
          : `{{ url('requisitions') }}/${id}/reject`;

        const title = action === 'approve' ? 'Approve requisition?' : 'Reject requisition?';

        if (window.Swal) {
          Swal.fire({
            title: title,
            input: 'text',
            inputPlaceholder: 'Remarks (optional)',
            showCancelButton: true,
            confirmButtonText: action === 'approve' ? 'Approve' : 'Reject',
            confirmButtonColor: action === 'approve' ? '#198754' : '#dc3545'
          }).then((result) => {
            if (result.isConfirmed) {
              form.action = url;
              remarksInput.value = result.value || '';
              form.submit();
            }
          });
        } else {
          if (confirm(title)) {
            form.action = url;
            remarksInput.value = '';
            form.submit();
          }
        }
      });
    });
  });
</script>
@endpush