@extends('admin.admin_dashboard')
@section('admin')

{{-- jQuery & Select2 CSS/JS --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

@php use Carbon\Carbon; @endphp

<style>
  /* ensure the dropdown isn’t too narrow */
  .match-select {
    min-width: 200px !important;
  }
</style>

<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">Match Bank Transactions</h5>
    <div>
      <a href="{{ route('bank.import.form') }}" class="btn btn-light me-2">
        <i class="bx bx-chevrons-left me-1"></i> Import
      </a>
      <a href="{{ route('bank.report') }}" class="btn btn-light">
        <i class="bx bx-file-text me-1"></i> Report
      </a>
    </div>
  </div>

  <form method="POST" action="{{ route('bank.match.store') }}">
    @csrf
    <div class="row">
      {{-- Bank Transactions --}}
      <div class="col-lg-6">
        <div class="card shadow-sm border-0 rounded mb-4">
          <div class="card-header bg-secondary text-white">
            Bank Transactions
          </div>
          <div class="card-body p-0">
            <table class="table mb-0">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Description</th>
                  <th class="text-end">Amount</th>
                  <th>Match To</th>
                </tr>
              </thead>
              <tbody>
                @foreach($bankTxns as $txn)
                  <tr>
                    <td>{{ Carbon::parse($txn->trans_date)->format('Y-m-d') }}</td>
                    <td>{{ $txn->description }}</td>
                    <td class="text-end">{{ number_format($txn->amount, 2) }}</td>
                    <td>
                      <select
                        name="matches[{{ $txn->id }}]"
                        class="form-select match-select"
                        data-placeholder="–"
                      >
                        <option value="">—</option>
                        @foreach($journalLines as $jl)
                          <option value="{{ $jl->id }}">
                            {{ optional($jl->journalEntry)->entry_date
                                 ? Carbon::parse($jl->journalEntry->entry_date)->format('Y-m-d')
                                 : '–' }}
                            &nbsp;›&nbsp; {{ $jl->account->code }} – {{ $jl->account->name }}
                            &nbsp;({{ number_format($jl->debit - $jl->credit, 2) }})
                          </option>
                        @endforeach
                      </select>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {{-- Reconcile Button --}}
      <div class="col-lg-6 d-flex align-items-center justify-content-center">
        <button type="submit" class="btn btn-primary px-4">
          <i class="bx bx-check-double me-1"></i> Reconcile Selected
        </button>
      </div>
    </div>
  </form>
</div>

{{-- Initialize Select2 --}}
<script>
  $(function(){
    $('.match-select').select2({
      theme: 'bootstrap-5',
      placeholder: function(){
        return $(this).data('placeholder');
      },
      allowClear: true,
      dropdownAutoWidth: true,
      width: 'style'
    });
  });
</script>

@endsection