@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>

<div class="page-content">
  <div class="container-fluid">
    {{-- Breadcrumb & Title --}}
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 bg-primary text-white rounded shadow-sm">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 p-0">
          <li class="breadcrumb-item">
            <a href="{{ route('payroll.index') }}" class="text-white">
              <i class="bx bx-chevrons-left"></i> Back
            </a>
          </li>
          <li class="breadcrumb-item active text-white" aria-current="page">Edit Payroll</li>
        </ol>
      </nav>
      <h5 class="mb-0">Edit Payroll #{{ $payroll->id }}</h5>
    </div>

    <div class="card shadow border-0 rounded">
      <div class="card-body p-4">
        @if($errors->any())
          <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
        @endif

        <form method="POST" action="{{ route('payroll.update',$payroll->id) }}">
          @csrf @method('PUT')

          {{-- Period --}}
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label">Period Start</label>
              <input type="date" name="period_start" class="form-control"
                     value="{{ old('period_start', \Carbon\Carbon::parse($payroll->period_start)->format('Y-m-d')) }}">
              @error('period_start')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
              <label class="form-label">Period End</label>
              <input type="date" name="period_end" class="form-control"
                     value="{{ old('period_end', \Carbon\Carbon::parse($payroll->period_end)->format('Y-m-d')) }}">
              @error('period_end')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
          </div>

          <hr>

          {{-- Salary Lines --}}
          <h6 class="mb-3">Salary Lines</h6>
          <div class="table-responsive mb-3">
            <table class="table table-hover table-striped table-bordered align-middle" id="linesTable">
              <thead class="table-dark">
                <tr>
                  <th>Employee</th>
                  <th>Component</th>
                  <th class="text-end">Amount</th>
                  <th class="text-center" style="width:1%"></th>
                </tr>
              </thead>
              <tbody>
                @php
                  $lines = old('lines') 
                    ?? $payroll->lines->map(fn($l)=>[
                        'employee_id'=>$l->employee_id,
                        'salary_component'=>$l->salary_component,
                        'amount'=>$l->amount,
                      ])->toArray();
                @endphp
                @foreach($lines as $i => $line)
                <tr>
                  <td>
                    <select name="lines[{{ $i }}][employee_id]" class="form-select employee-select">
                      <option value="">Select employee…</option>
                      @foreach($employees as $id=>$name)
                        <option value="{{ $id }}" @selected($line['employee_id']==$id)>{{ $name }}</option>
                      @endforeach
                    </select>
                  </td>
                  <td>
                    <input type="text" name="lines[{{ $i }}][salary_component]" class="form-control"
                           value="{{ $line['salary_component'] }}">
                  </td>
                  <td>
                    <input type="number" step="0.01" name="lines[{{ $i }}][amount]" class="form-control text-end"
                           value="{{ $line['amount'] }}">
                  </td>
                  <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger remove-line-btn" {{ $i===0?'disabled':'' }}>&times;</button>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>

          <button type="button" id="addLineBtn" class="btn btn-sm btn-light mb-4">
            <i class="bx bx-plus me-1"></i> Add Line
          </button>

          <div class="text-end">
            <button type="submit" class="btn btn-primary px-4">
              <i class="bx bx-save me-1"></i> Update Payroll
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- Dynamic “Add/Remove Line” + Select2 like Journal --}}
<script>
$(function(){
  const opts = {
    theme: 'bootstrap-5',
    placeholder: 'Select employee',
    allowClear: true,
    width: '100%'
  };

  const $tbody       = $('#linesTable tbody');
  const templateHtml = $tbody.find('tr:first')[0].outerHTML;
  let idx            = $tbody.children().length;

  // init Select2 on existing rows
  $tbody.find('.employee-select').select2(opts);

  function bindRemove() {
    $tbody.find('.remove-line-btn')
      .prop('disabled', $tbody.children().length === 1)
      .off('click')
      .on('click', function(){
        $(this).closest('tr').remove();
        bindRemove();
      });
  }

  $('#addLineBtn').on('click', function(){
    const newHtml = templateHtml.replace(/\[\d+\]/g, `[${idx}]`);
    $tbody.append(newHtml);
    $tbody.find('tr:last .employee-select').select2(opts);
    idx++;
    bindRemove();
  });

  bindRemove();
});
</script>

@endsection