@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="mb-0">{{ __('reports.opening.create') }}</h3>
        <a class="btn btn-light" href="{{ route('gl.opening.index') }}">{{ __('reports.actions.back') }}</a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="alert alert-info">{{ __('reports.opening.hint') }}</div>

    <form method="POST" action="{{ route('gl.opening.store') }}">
        @csrf

        <div class="card mb-3">
            <div class="card-body row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ __('reports.columns.date') }}</label>
                    <input type="date" name="entry_date" class="form-control" value="{{ old('entry_date', $default_date) }}" required>
                    @error('entry_date')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-9">
                    <label class="form-label">{{ __('reports.columns.description') }}</label>
                    <input type="text" name="description" class="form-control" value="{{ old('description') }}" placeholder="{{ __('reports.placeholders.description') }}">
                    @error('description')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>{{ __('reports.gl_manage.journal.lines') }}</div>
                <button type="button" class="btn btn-sm btn-secondary" id="addLineBtn">{{ __('reports.gl_manage.actions.add_line') }}</button>
            </div>
            <div class="card-body table-responsive">
                <table class="table table-bordered table-sm" id="linesTable">
                    <thead>
                        <tr>
                            <th style="width:45%">{{ __('reports.columns.account') }}</th>
                            <th class="text-end" style="width:20%">{{ __('reports.columns.debit') }}</th>
                            <th class="text-end" style="width:20%">{{ __('reports.columns.credit') }}</th>
                            <th style="width:15%">{{ __('reports.columns.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php($oldLines = old('lines', [ ['account_id'=>'','debit'=>'','credit'=>''], ['account_id'=>'','debit'=>'','credit'=>''] ]))
                        @foreach($oldLines as $i => $ln)
                            <tr>
                                <td>
                                    <select class="form-select" name="lines[{{ $i }}][account_id]" required>
                                        <option value="">--</option>
                                        @foreach($accounts as $a)
                                            <option value="{{ $a->id }}" @selected(($ln['account_id'] ?? '') == $a->id)>
                                                {{ $a->code }} - {{ app()->getLocale()=='ar' ? $a->name_ar : $a->name_en }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td><input type="number" step="0.001" min="0" class="form-control text-end" name="lines[{{ $i }}][debit]" value="{{ $ln['debit'] ?? '' }}"></td>
                                <td><input type="number" step="0.001" min="0" class="form-control text-end" name="lines[{{ $i }}][credit]" value="{{ $ln['credit'] ?? '' }}"></td>
                                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger removeLine">{{ __('reports.gl_manage.actions.remove') }}</button></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                @error('lines')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="mt-3 col-md-3">
            <button class="btn btn-primary w-100" type="submit">{{ __('reports.actions.save') }}</button>
        </div>
    </form>
</div>

<script>
    (function() {
        const tableBody = document.querySelector('#linesTable tbody');
        const addBtn = document.getElementById('addLineBtn');

        function nextIndex() {
            return tableBody.querySelectorAll('tr').length;
        }

        function bindRemove(btn) {
            btn.addEventListener('click', function() {
                const tr = btn.closest('tr');
                tr.remove();
            });
        }

        document.querySelectorAll('.removeLine').forEach(bindRemove);

        addBtn.addEventListener('click', function() {
            const i = nextIndex();
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>
                    <select class="form-select" name="lines[${i}][account_id]" required>
                        <option value="">--</option>
                        @foreach($accounts as $a)
                            <option value="{{ $a->id }}">{{ $a->code }} - {{ app()->getLocale()=='ar' ? $a->name_ar : $a->name_en }}</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="number" step="0.001" min="0" class="form-control text-end" name="lines[${i}][debit]"></td>
                <td><input type="number" step="0.001" min="0" class="form-control text-end" name="lines[${i}][credit]"></td>
                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger removeLine">{{ __('reports.gl_manage.actions.remove') }}</button></td>
            `;
            tableBody.appendChild(tr);
            bindRemove(tr.querySelector('.removeLine'));
        });
    })();
</script>
@endsection