@extends('dashboard.layouts.app')

@section('title', __('transactions.Edit Transaction'))
@section('page_heading', __('transactions.Edit Transaction'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.accounts.transactions.index') }}" class="text-muted text-hover-primary">{{ __('transactions.Transactions') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('transactions.Edit Transaction') }}</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{ __('transactions.Edit Transaction') }}</h3>
        </div>
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('dashboard.accounts.transactions.update', $transaction) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label for="transaction_date" class="form-label">{{ __('transactions.Transaction Date') }}</label>
                    <input type="date" class="form-control @error('transaction_date') is-invalid @enderror" id="transaction_date" name="transaction_date" value="{{ old('transaction_date', $transaction->transaction_date->format('Y-m-d')) }}" required>
                    @error('transaction_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="description" class="form-label">{{ __('transactions.Description') }}</label>
                    <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description">{{ old('description', $transaction->description) }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <h4 class="mt-5 mb-3">{{ __('transactions.Entries') }}</h4>
                <div id="entries-container">
                    {{-- Existing entries --}}
                    @foreach($transaction->entries as $index => $entry)
                        <div class="row entry-row mb-3">
                            <div class="col-md-3">
                                <label for="entries_{{ $index }}_account_id" class="form-label">{{ __('accounts.Account') }}</label>
                                <select class="form-select account-select @error("entries.$index.account_id") is-invalid @enderror" id="entries_{{ $index }}_account_id" name="entries[{{ $index }}][account_id]" required data-control="select2">
                                    <option value="">{{ __('dashboard.Select an option') }}</option>
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}" {{ old("entries.$index.account_id", $entry->account_id) == $account->id ? 'selected' : '' }}>
                                            {{ $account->name }} ({{ $account->code }})
                                        </option>
                                    @endforeach
                                </select>
                                @error("entries.$index.account_id")
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2">
                                <label for="entries_{{ $index }}_type" class="form-label">{{ __('transactions.Type') }}</label>
                                <select class="form-select @error("entries.$index.type") is-invalid @enderror" id="entries_{{ $index }}_type" name="entries[{{ $index }}][type]" required>
                                    <option value="debit" {{ old("entries.$index.type", $entry->type) == 'debit' ? 'selected' : '' }}>{{ __('transactions.Debit') }}</option>
                                    <option value="credit" {{ old("entries.$index.type", $entry->type) == 'credit' ? 'selected' : '' }}>{{ __('transactions.Credit') }}</option>
                                </select>
                                @error("entries.$index.type")
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                             <div class="col-md-3">
                                <label for="entries_{{$index}}_currency_id" class="form-label">{{__('accounts.Currency')}}</label>
                                <select  class="form-select currency-select @error('entries.{{$index}}.currency_id') is-invalid @enderror" id="entries_{{$index}}_currency_id" name="entries[{{$index}}][currency_id]"  data-control="select2" required>
                                    <option value="">{{__('accounts.Select Currency')}}</option>
                                    @foreach ($currencies as $currency)
                                        <option value="{{$currency->id}}" @selected( old("entries.$index.currency_id", $entry->currency_id) ==  $currency->id )>{{$currency->code}}</option>
                                    @endforeach
                                </select>
                                @error('entries.{{$index}}.currency_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2">
                                <label for="entries_{{ $index }}_amount" class="form-label">{{ __('transactions.Amount') }}</label>
                                <input type="number" step="0.01" class="form-control @error("entries.$index.amount") is-invalid @enderror" id="entries_{{ $index }}_amount" name="entries[{{ $index }}][amount]" value="{{ old("entries.$index.amount", $entry->amount) }}" required>
                                @error("entries.$index.amount")
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2">
                                <label class="form-label d-block">&nbsp;</label>
                                <button type="button" class="btn btn-danger remove-entry"><i class="bi bi-x-lg"></i></button>
                            </div>
                            <input type="hidden" name="entries[{{ $index }}][id]" value="{{ $entry->id }}">
                        </div>
                    @endforeach

                    {{-- Placeholder for new entries (added via JavaScript) --}}
                </div>

                <button type="button" class="btn btn-secondary" id="add-entry">{{ __('transactions.Add Entry') }}</button>
                <button type="submit" class="btn btn-primary">{{ __('dashboard.Save') }}</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            let entryIndex = {{ $transaction->entries->count() }}; // Start index after existing entries

            $('#add-entry').click(function() {
                $.ajax({
                    url: "{{ route('dashboard.accounts.transactions.getEntryRow') }}",
                    method: "GET",
                    data: { index: entryIndex },
                    success: function(response) {
                        $('#entries-container').append(response);
                        $('#entries-container select').last().select2({  // Initialize Select2
                            placeholder: "{{ __('dashboard.Select an option') }}",
                            allowClear: true
                        });

                        entryIndex++;
                    }
                });
            });

            $(document).on('click', '.remove-entry', function() {
                $(this).closest('.entry-row').remove();
            });

            // Initialize select2 on page load:
            $('#entries-container select').select2({
                placeholder: "{{ __('dashboard.Select an option') }}",
                allowClear: true
            });
        });
    </script>
@endpush