{{-- resources/views/accounting/budgets/edit.blade.php --}}
@extends('admin.admin_dashboard')
@section('admin')

{{-- jQuery & Select2 --}}
<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
  // prepare old input or existing lines
  $lines = old('lines')
       ?? $budget->lines->map(fn($l)=>[
            'account_id'=>$l->account_id,
            'period'    =>$l->period,
            'amount'    =>$l->amount,
          ])->toArray();
@endphp

<div class="page-content">
  <!-- 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"
  >
    <div>
      <a href="{{ route('budgets.index') }}" class="btn btn-light btn-sm me-2">
        <i class="bx bx-arrow-back"></i>
      </a>
      Edit Budget #{{ $budget->id }}
    </div>
  </div>

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

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

        {{-- Header --}}
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <label class="form-label">Name</label>
            <input
              type="text"
              name="name"
              class="form-control"
              value="{{ old('name',$budget->name) }}"
            >
          </div>
          <div class="col-md-4">
            <label class="form-label">Start Date</label>
            <input
              type="date"
              name="start_date"
              class="form-control"
              value="{{ old('start_date',$budget->start_date) }}"
            >
          </div>
          <div class="col-md-4">
            <label class="form-label">End Date</label>
            <input
              type="date"
              name="end_date"
              class="form-control"
              value="{{ old('end_date',$budget->end_date) }}"
            >
          </div>
          <div class="col-12">
            <label class="form-label">Notes</label>
            <textarea
              name="notes"
              class="form-control"
            >{{ old('notes',$budget->notes) }}</textarea>
          </div>
        </div>

        <hr>

        {{-- Line Items --}}
        <h6 class="mb-3">Line Items</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>Account</th>
                <th>Period</th>
                <th class="text-end">Amount</th>
                <th style="width:1%"></th>
              </tr>
            </thead>
            <tbody>
              @foreach($lines as $i => $line)
              <tr>
                <td>
                  <select
                    name="lines[{{ $i }}][account_id]"
                    class="form-select account-select"
                  >
                    <option value="">Select account…</option>
                    @foreach($accounts as $ac)
                      <option
                        value="{{ $ac->id }}"
                        @selected($line['account_id']==$ac->id)
                      >{{ $ac->full_name }}</option>
                    @endforeach
                  </select>
                </td>
                <td>
                  <input
                    type="date"
                    name="lines[{{ $i }}][period]"
                    class="form-control"
                    value="{{ $line['period'] }}"
                  >
                </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"
                    @if($i===0) disabled @endif
                  >&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 class="btn btn-success px-4">
            <i class="bx bx-save me-1"></i> Update Budget
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

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

    // capture template
    const $first = $('#linesTable tbody tr:first');
    const tpl    = $first.clone();
    $first.find('.account-select').select2(opts);

    let idx = {{ count($lines) }};
    function bindRemove(){
      $('#linesTable .remove-line-btn')
        .prop('disabled',$('#linesTable tbody tr').length===1)
        .off('click').on('click',function(){
          $(this).closest('tr').remove();
          bindRemove();
        });
    }

    $('#addLineBtn').click(function(){
      const $row = tpl.clone();
      $row.find('[name]').each(function(){
        const name = $(this).attr('name');
        $(this).attr('name', name.replace(/\[\d+\]/,`[${idx}]`));
        if (this.tagName==='INPUT') this.value = '';
      });
      $('#linesTable tbody').append($row);
      $row.find('.account-select').select2(opts);
      idx++;
      bindRemove();
    });

    bindRemove();
  });
</script>
@endsection