@extends('layout.mainlayout')
@section('content')

<div class="page-wrapper cardhead">
  <div class="content container-fluid">

    @component('components.breadcrumb')
      @slot('title') Exit Management — Resignations @endslot
    @endcomponent

    @if (session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif
    @if (session('error'))   <div class="alert alert-danger">{{ session('error') }}</div>   @endif
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
      </div>
    @endif

    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between">
            <h4 class="card-title mb-0">Resignations</h4>
            <div class="d-flex gap-2">
              @can('resignation-view-mine')
                <a href="{{ url('/resignations/mine') }}" class="btn btn-sm btn-outline-primary">Your Resignations</a>
              @endcan
              @can('resignation-apply')
                <a href="{{ url('/resignations/apply') }}" class="btn btn-sm btn-primary">Apply Resignation</a>
              @endcan
            </div>
          </div>

          <div class="card-body table-responsive">
            <table class="table" id="ResignationTable">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Employee</th>
                  <th>Type</th>
                  <th>Applied</th>
                  <th>Notice (mo)</th>
                  <th>LWD</th>
                  <th>Status</th>
                  <th>Pending/Hold</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($resignations as $r)
                  @php
                $empName  = $r->employee_name ?? optional($r->user)->name;
                $empEmail = $r->employee_email ?? optional($r->user)->email;
              @endphp
                  @php $pendingCount = $r->tasks->whereNotIn('status',['APPROVED','LOST'])->count(); @endphp
                  <tr>
                    <td>{{ $r->id }}</td>
                    <td>{{ $empName }}</td>
                    <td>{{ $r->resource_type_label }}</td>
                    <td>{{ $r->resignation_date?->format('d M Y') }}</td>
                    <td>{{ $r->notice_period_months }}</td>
                    <td>{{ $r->last_working_day?->format('d M Y') ?? '—' }}</td>
                    <td>
                      <span class="badge 
                        @if($r->status === 'PENDING') bg-warning 
                        @elseif($r->status === 'APPROVED') bg-success
                        @elseif($r->status === 'DECLINED') bg-danger
                        @elseif($r->status === 'RETAIN') bg-info
                        @elseif($r->status === 'ABSCOND') bg-dark
                        @elseif($r->status === 'COMPLETED') bg-primary
                        @else bg-secondary @endif">
                        {{ $r->status }}
                      </span>
                    </td>
                    <td>{{ $pendingCount }}</td>
                    <td>
                      <a href="#" class="btn btn-sm btn-secondary"
                         data-bs-toggle="modal" data-bs-target="#resignationModal"
                         data-modal-src="{{ route('resignations.modal', $r->id) }}">
                         View
                      </a>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div><!-- card-body -->
        </div><!-- card -->
      </div>
    </div>

    <div class="modal fade" id="resignationModal" tabindex="-1">
      <div class="modal-dialog modal-xl">
        <div class="modal-content" id="resignationModalContent">
          <div class="p-4 text-center">Loading...</div>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection


@push('scripts')
<script>
  initDataTableWithFilters('ResignationTable');

  function initResignationModal() {
    const root   = document.getElementById('resignationModalContent');
    if (!root) return;

    const sel    = root.querySelector('#decisionStatus');
    const extras = root.querySelector('#approvedExtras');
    if (!sel || !extras) return;

    const toggle = () => { extras.style.display = (sel.value === 'APPROVED') ? '' : 'none'; };

    // bind and set initial state
    sel.removeEventListener('change', toggle);
    sel.addEventListener('change', toggle);
    toggle();
  }

  document.addEventListener('click', function(e){
    const btn = e.target.closest('[data-modal-src]');
    if (!btn) return;

    const url = btn.getAttribute('data-modal-src');
    const target = document.getElementById('resignationModalContent');
    target.innerHTML = '<div class="p-4 text-center">Loading...</div>';

    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
      .then(r => r.text())
      .then(html => {
        target.innerHTML = html;
        initResignationModal();   // <-- run setup after HTML injection
      })
      .catch(() => target.innerHTML = '<div class="p-4 text-danger">Failed to load.</div>');
  });
</script>
@endpush