{{-- resources/views/accounting/budgets/create.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
  // If there's old input (validation fail), use that; otherwise start with one empty row
  $lines = old('lines', [
    ['account_id' => null, 'period' => null, 'amount' => null]
  ]);
@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>
      Back
    </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.store') }}">
        @csrf

        {{-- 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') }}"
            >
          </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') }}"
            >
          </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') }}"
            >
          </div>
          <div class="col-12">
            <label class="form-label">Notes</label>
            <textarea name="notes" class="form-control">{{ old('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> Save Budget
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

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

  // Capture a pristine template row
  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(()=>{
    const $row = tpl.clone();
    // Rewrite name indices and clear inputs
    $row.find('[name]').each(function(){
      const nm = $(this).attr('name');
      $(this).attr('name', nm.replace(/\[\d+\]/,`[${idx}]`));
      if (this.tagName==='INPUT') this.value = '';
    });
    $('#linesTable tbody').append($row);
    $row.find('.account-select').select2(opts);
    idx++;
    bindRemove();
  });

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