@extends('layouts.app')

@section('title', 'Salary Advance')
@section('page', 'payroll')
@section('payrollNav', 'advances')

@php
  $statusVariant = fn ($s) => $s === 'Active' ? 'success' : 'danger';
@endphp

@section('content')
  @include('partials.account-payroll-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="salary-advances-table"
    class="catalog-table"
    title="Salary Advance"
    subtitle="Record staff advances and post Out entries to cash or bank book."
    search-placeholder="Search advances..."
    :selectable="false"
    :page-size="15"
  >
    <x-slot:toolbarActions>
      @if ($canManage ?? false)
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#advanceModal" data-advance-add @disabled($staff->isEmpty())>
          <i class="bi bi-plus-lg"></i> Add Advance
        </button>
      @endif
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Active</option>
        <option>Cancel</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--warning">
              <span class="product-kpi__icon" aria-hidden="true"><span class="product-kpi__glyph"><i class="bi bi-wallet2"></i></span></span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Advances</p>
                <p class="product-kpi__value">{{ money($totalAdvances) }}</p>
                <p class="product-kpi__meta">Active records</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Date" col="date" />
      <x-data-table-th label="Staff" col="staff" />
      <x-data-table-th label="Amount" col="amount" sort-type="number" />
      <x-data-table-th label="Pay From" col="pay_from" />
      <x-data-table-th label="Notes" col="notes" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($advances as $row)
        <tr data-id="{{ $row->id }}">
          <td data-col="date">{{ $row->advance_date?->format('Y-m-d') ?? '—' }}</td>
          <td data-col="staff" class="cell-primary">{{ $row->staff?->name ?? '—' }}</td>
          <td data-col="amount" data-sort-value="{{ $row->amount }}" class="fw-semibold">{{ money((float) $row->amount) }}</td>
          <td data-col="pay_from">
            @if ($row->pay_from === 'cash_book')
              {{ $row->cashBook?->name ?? 'Cash' }}
            @else
              {{ $row->bankAccount?->name ?? 'Bank' }}
            @endif
          </td>
          <td data-col="notes">{{ $row->notes ?: '—' }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge></td>
          <td data-edt-actions>
            @if ($canManage ?? false)
              <div class="edt-row-actions product-actions">
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--edit"
                  title="Edit"
                  data-advance-edit
                  data-id="{{ $row->id }}"
                  data-staff-id="{{ $row->staff_id }}"
                  data-advance-date="{{ $row->advance_date?->format('Y-m-d') }}"
                  data-amount="{{ number_format((float) $row->amount, 2, '.', '') }}"
                  data-pay-from="{{ $row->pay_from }}"
                  data-cash-book-id="{{ $row->cash_book_id }}"
                  data-bank-account-id="{{ $row->bank_account_id }}"
                  data-notes="{{ $row->notes }}"
                  data-status="{{ $row->status }}"
                  data-update-url="{{ route('account.salary-advances.update', $row) }}"
                >
                  <i class="bi bi-pencil" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--delete"
                  title="Delete"
                  data-delete-open
                  data-delete-url="{{ route('account.salary-advances.destroy', $row) }}"
                  data-delete-label="{{ ($row->staff?->name ?? 'Advance').' · '.money((float) $row->amount) }}"
                  data-delete-type="salary-advance"
                >
                  <i class="bi bi-trash" aria-hidden="true"></i>
                </button>
              </div>
            @endif
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="7" class="text-center text-muted py-4">No salary advances yet.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  @if ($canManage ?? false)
    <div class="modal fade" id="advanceModal" tabindex="-1" aria-labelledby="advanceModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content edt-modal">
          <form id="advance-form" method="post" action="{{ route('account.salary-advances.store') }}" data-store-url="{{ route('account.salary-advances.store') }}">
            @csrf
            <input type="hidden" name="_method" value="POST">
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="advanceModalLabel">Add advance</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="row g-3">
                <div class="col-12">
                  <label class="form-label" for="advance_staff_id">Staff</label>
                  <select class="form-select" id="advance_staff_id" name="staff_id" required>
                    <option value="">Select staff</option>
                    @foreach ($staff as $member)
                      <option value="{{ $member->id }}">{{ $member->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="advance_date">Date</label>
                  <input type="date" class="form-control" id="advance_date" name="advance_date" required value="{{ now()->toDateString() }}">
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="advance_amount">Amount</label>
                  <input type="number" class="form-control" id="advance_amount" name="amount" min="0.01" step="0.01" required>
                </div>
                <div class="col-12">
                  <label class="form-label" for="advance_pay_from">Pay from</label>
                  <select class="form-select" id="advance_pay_from" name="pay_from" required>
                    <option value="cash_book">Cash Book</option>
                    <option value="bank_account">Bank Account</option>
                  </select>
                </div>
                <div class="col-12" data-pay-source="cash_book">
                  <label class="form-label" for="advance_cash_book_id">Cash book</label>
                  <select class="form-select" id="advance_cash_book_id" name="cash_book_id">
                    <option value="">Select cash book</option>
                    @foreach ($cashBooks as $book)
                      <option value="{{ $book->id }}">{{ $book->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-12 d-none" data-pay-source="bank_account">
                  <label class="form-label" for="advance_bank_account_id">Bank account</label>
                  <select class="form-select" id="advance_bank_account_id" name="bank_account_id">
                    <option value="">Select bank account</option>
                    @foreach ($bankAccounts as $account)
                      <option value="{{ $account->id }}">{{ $account->name }}{{ $account->bank?->name ? ' · '.$account->bank->name : '' }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="advance_status">Status</label>
                  <select class="form-select" id="advance_status" name="status" required>
                    <option value="Active">Active</option>
                    <option value="Cancel">Cancel</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="advance_notes">Notes</label>
                  <input type="text" class="form-control" id="advance_notes" name="notes" maxlength="1000" placeholder="Optional">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content edt-modal">
          <form id="delete-confirm-form" method="post" action="#">
            @csrf
            @method('DELETE')
            <div class="modal-header">
              <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete advance</h2>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this advance</strong>?</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/payroll-advances.js') }}"></script>
@endpush