{{-- resources/views/accounting/accounts/create.blade.php --}}
@extends('admin.admin_dashboard')

@section('admin')

<!-- Select2 CSS -->
<link 
  href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" 
  rel="stylesheet"/>

@php
  $oldType      = old('type');
  $oldParent    = old('parent_id');
  $oldEntityType= old('entity_type');
  $oldEntityId  = old('entity_id');
@endphp

<div class="page-content">
  <div class="container-fluid">
    <div class="card shadow-sm rounded-lg border-0">

      {{-- Header --}}
      <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">New Account</h5>
        <a href="{{ route('all.accounts') }}" class="btn btn-light">
          <i class="bx bx-arrow-back"></i> Back to List
        </a>
      </div>

      {{-- Body --}}
      <div class="card-body">
        @if(session('success'))
          <div class="alert alert-success">
            <i class="bx bx-check-circle"></i> {{ session('success') }}
          </div>
        @endif

        <form action="{{ route('add.account.store') }}" method="POST" class="needs-validation" novalidate>
          @csrf

          <div class="row g-3">
            {{-- Account Code --}}
            <div class="col-md-6">
              <label class="form-label">Account Code</label>
              <input id="code" name="code" class="form-control" 
                     value="{{ old('code') }}" placeholder="e.g. 1000" required>
              @error('code')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>

            {{-- Account Name --}}
            <div class="col-md-6">
              <label class="form-label">Account Name</label>
              <input id="accountName" name="name" class="form-control" 
                     value="{{ old('name') }}" placeholder="e.g. Cash" required>
              @error('name')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>

            {{-- Account Type --}}
            <div class="col-md-6">
              <label class="form-label">Account Type</label>
              <select id="type" name="type" class="form-select" required>
                <option value="" disabled {{ $oldType ? '' : 'selected' }}>— Choose type —</option>
                @foreach(['asset','liability','equity','income','expense'] as $t)
                  <option value="{{ $t }}" @selected($oldType == $t)>
                    {{ ucfirst($t) }}
                  </option>
                @endforeach
              </select>
              @error('type')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>

            {{-- Parent Account --}}
            <div class="col-md-6">
              <label class="form-label">Parent Account</label>
              <select id="parent_id" name="parent_id" class="form-select" required>
                {{-- placeholder only; real options injected via JS --}}
                <option value="" disabled {{ $oldParent ? '' : 'selected' }}>— Select parent —</option>
              </select>
              @error('parent_id')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
          </div>

          {{-- Entity section --}}
          <div id="entitySection" class="mt-4" style="display:none;">
            <div class="row g-3">
              {{-- Entity Type --}}
              <div class="col-md-6">
                <label class="form-label">Entity Type</label>
                <select id="entityTypeSelect" name="entity_type" class="form-select">
                  <option value="" disabled {{ $oldEntityType ? '' : 'selected' }}>— Select —</option>
                  @foreach($entityTypes as $key => $lbl)
                    <option value="{{ $key }}" @selected($oldEntityType == $key)>{{ $lbl }}</option>
                  @endforeach
                </select>
                @error('entity_type')<div class="text-danger small">{{ $message }}</div>@enderror
              </div>

              {{-- Entity ID --}}
              <div class="col-md-6">
                <label class="form-label" id="entityLabel">Select Entity</label>
                <select id="entityIdSelect" name="entity_id" class="form-select">
                  <option value="" disabled {{ $oldEntityId ? '' : 'selected' }}>— Select —</option>
                  @if($oldEntityType && isset($entityOptions[$oldEntityType]))
                    @foreach($entityOptions[$oldEntityType] as $item)
                      <option value="{{ $item['id'] }}" @selected($item['id']==$oldEntityId)>
                        {{ $item['text'] }}
                      </option>
                    @endforeach
                  @endif
                </select>
                @error('entity_id')<div class="text-danger small">{{ $message }}</div>@enderror
              </div>
            </div>
          </div>

          {{-- Submit --}}
          <div class="mt-4 text-end">
            <button type="submit" class="btn btn-success rounded-pill px-4">
              <i class="bx bx-save me-1"></i> Save Account
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- jQuery & Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script 
  src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js">
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  // from controller
  const parentsByType  = @json($parentsByType);
  const entityOptions  = @json($entityOptions);
  const entityLabels   = @json($entityTypes);
  const oldType        = "{{ $oldType }}";
  const oldParent      = "{{ $oldParent }}";
  const oldEntType     = "{{ $oldEntityType }}";
  const oldEntId       = "{{ $oldEntityId }}";

  const $type       = $('#type');
  const $parent     = $('#parent_id');
  const $entitySec  = $('#entitySection');
  const $entType    = $('#entityTypeSelect');
  const $entId      = $('#entityIdSelect');
  const $name       = $('#accountName');

  function rebuildParents() {
    const t = $type.val();
    // clear + placeholder
    $parent.empty().append(
      $('<option disabled>').text('— Select parent —')
        .prop('selected', !oldParent)
    );
    if (parentsByType[t]) {
      parentsByType[t].forEach(({id,label}) => {
        const opt = $('<option>').val(id).text(label);
        if (id == oldParent) opt.prop('selected',true);
        $parent.append(opt);
      });
    }
    // init select2
    if ($parent.hasClass('select2-hidden-accessible')) {
      $parent.select2('destroy');
    }
    $parent.select2({ placeholder:'Select parent', width:'100%' });
  }

  function toggleEntitySection() {
    if ($parent.val()==='5349') {
      $entitySec.show();
      rebuildEntitySelect();
    } else {
      $entitySec.hide();
      $entType.val('').trigger('change');
      resetEntitySelect();
      $name.prop('disabled',false).attr('required',true);
    }
  }

  function resetEntitySelect(){
    if ($entId.hasClass('select2-hidden-accessible'))
      $entId.select2('destroy');
    $entId.html('<option disabled selected>— Select —</option>');
  }

  function rebuildEntitySelect(){
    const key = $entType.val();
    resetEntitySelect();
    if (!key||!entityOptions[key]) return $name.prop('disabled',false).attr('required',true);
    entityOptions[key].forEach(i=>{
      const opt = $('<option>').val(i.id).text(i.text);
      if(i.id==oldEntId) opt.prop('selected',true);
      $entId.append(opt);
    });
    $entId.select2({ placeholder:`Select ${entityLabels[key]}`, width:'100%' })
          .on('select2:select',e=>{
            $name.val(e.params.data.text).prop('disabled',true).attr('required',false);
          });
  }

  // hookups
  rebuildParents();
  if(oldType) $type.val(oldType);
  $type.on('change', rebuildParents);

  $parent.on('change', toggleEntitySection);

  $entType.on('change', rebuildEntitySelect)
          .select2({ placeholder:'Entity type', width:'100%', allowClear:true });

  // initial
  toggleEntitySection();
});
</script>

@endsection