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

{{-- Select2 & jQuery --}}
<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://code.jquery.com/jquery-3.6.0.min.js"></script>
<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">
    <div
      class="page-breadcrumb bg-primary text-white rounded p-3 mb-4 d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Edit General Journal {{ $journal->reference }}</h5>
      <a href="{{ route('general.journals.index') }}" class="btn btn-light">
        <i class="bx bx-chevron-left me-1"></i> Back
      </a>
    </div>

    <div class="card shadow-sm rounded-lg border-0">
      <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('general.journals.update', $journal->id) }}">
          @csrf @method('PUT')

          {{-- Date / Reference --}}
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">Date</label>
              <input type="date" name="entry_date" class="form-control datepicker"
                     value="{{ old('entry_date', $journal->entry_date->toDateString()) }}"
                     required>
            </div>
            <div class="col-md-3">
              <label class="form-label">Reference</label>
              <input type="text" name="reference" class="form-control"
                     value="{{ old('reference', $journal->reference) }}"
                     required readonly>
            </div>
          </div>

          <hr>

          {{-- Journal Lines --}}
          <h6 class="mb-3">Journal Lines</h6>
          <div class="table-responsive mb-3">
            <table
              class="table table-striped table-bordered align-middle"
              id="linesTable">
              <thead class="table-dark">
                <tr>
                  <th>Account</th>
                  <th class="text-end">Debit</th>
                  <th class="text-end">Credit</th>
                  <th>Description</th>
                  <th class="text-center" style="width:1%"></th>
                </tr>
              </thead>
              <tbody>
                @php
                  $initial = $journal->lines->count();
                @endphp
                @foreach($journal->lines as $i => $line)
                  <tr class="line-row">
                    <td>
                      <select
                        name="lines[{{ $i }}][account_id]"
                        class="form-select js-account"
                        required
                      >
                        <option value="">Select account</option>
                        @foreach($accounts as $a)
                          <option
                            value="{{ $a->id }}"
                            @selected(old("lines.$i.account_id", $line->account_id) == $a->id)
                          >
                            {{ $a->code }} — {{ $a->name }}
                          </option>
                        @endforeach
                      </select>
                    </td>
                    <td>
                      <input
                        type="number"
                        name="lines[{{ $i }}][debit]"
                        step="0.01"
                        class="form-control text-end"
                        value="{{ old("lines.$i.debit", $line->debit) }}"
                      >
                    </td>
                    <td>
                      <input
                        type="number"
                        name="lines[{{ $i }}][credit]"
                        step="0.01"
                        class="form-control text-end"
                        value="{{ old("lines.$i.credit", $line->credit) }}"
                      >
                    </td>
                    <td>
                      <input
                        type="text"
                        name="lines[{{ $i }}][description]"
                        class="form-control"
                        value="{{ old("lines.$i.description", $line->memo) }}"
                      >
                    </td>
                    <td class="text-center">
                      <button
                        type="button"
                        class="btn btn-sm btn-danger js-remove"
                        @if($i===0) disabled @endif
                      >&times;</button>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

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

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

<script>
$(function(){
  const $tbody  = $('#linesTable tbody');
  const rawTpl  = $tbody.find('tr.line-row').first()[0].outerHTML;
  let   idx     = {{ $initial }};

  $('.js-account').select2({ theme:'bootstrap-5', width:'100%' });

  function refreshRemoveButtons(){
    const $rows = $tbody.children('tr');
    $rows.find('.js-remove')
         .prop('disabled', $rows.length === 1);
  }

  $tbody.on('click','.js-remove',function(){
    $(this).closest('tr').remove();
    refreshRemoveButtons();
  });

  $('#addLineBtn').on('click',function(){
    const html = rawTpl.replace(/\[\d+\]/g,`[${idx}]`);
    const $new = $(html).appendTo($tbody);
    $new.find('.js-account').select2({ theme:'bootstrap-5', width:'100%' });
    idx++;
    refreshRemoveButtons();
  });

  refreshRemoveButtons();
});
</script>

@endsection