@extends('layouts.master')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h3 mb-0 text-gray-800">Create a Journal</h1>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="row">
        <div class="col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-primary">New Journal Definition</h6></div>
                <div class="card-body">
                    <form method="POST" action="{{ route('journal-builder.store') }}">
                        @csrf
                        <div class="form-group">
                            <label>Name</label>
                            <input class="form-control" name="name" value="{{ old('name') }}" required>
                        </div>
                        <div class="form-group">
                            <label>Label</label>
                            <input class="form-control" name="label" value="{{ old('label') }}">
                        </div>
                        <div class="form-group">
                            <label>Base Type</label>
                            <select class="form-control" name="base_type" id="base_type" required>
                                <option value="customer">Customer</option>
                                <option value="supplier">Supplier</option>
                                <option value="general">General</option>
                                <option value="inventory">Inventory</option>
                            </select>
                        </div>

                        <div class="alert alert-info small" id="field-preview"></div>

                        <h6 class="font-weight-bold">Custom Fields</h6>
                        <div id="custom-fields"></div>
                        <button type="button" class="btn btn-outline-secondary btn-sm mb-3" id="add-field">Add Field</button>

                        <div>
                            <button class="btn btn-primary">Save Journal</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-primary">Existing Journals</h6></div>
                <div class="card-body table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($definitions as $definition)
                                <tr>
                                    <td>
                                        @if($definition->is_active)
                                            <a href="{{ route('custom-journals.index', $definition->slug) }}">{{ $definition->label }}</a>
                                        @else
                                            {{ $definition->label }}
                                        @endif
                                    </td>
                                    <td>{{ ucwords($definition->base_type) }}</td>
                                    <td>{{ $definition->is_active ? 'Active' : 'Inactive' }}</td>
                                    <td class="text-right">
                                        @if($definition->is_active)
                                            <form method="POST" action="{{ route('journal-builder.destroy', $definition) }}">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-outline-danger btn-sm">Deactivate</button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-muted">No custom journals yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
    var previews = {
        customer: 'date, reference, narration, currency, project, customer, DR/CR, amount',
        supplier: 'date, reference, narration, currency, project, supplier, DR/CR, amount',
        general: 'date, reference, narration, currency, project, GL account, DR/CR, amount',
        inventory: 'date, reference, narration, currency, project, item, warehouse, control account, quantities, UOM, unit cost'
    };
    var baseType = document.getElementById('base_type');
    var preview = document.getElementById('field-preview');
    function syncPreview() { preview.textContent = 'Default fields: ' + previews[baseType.value]; }
    baseType.addEventListener('change', syncPreview);
    syncPreview();

    var fields = document.getElementById('custom-fields');
    document.getElementById('add-field').addEventListener('click', function () {
        var index = fields.children.length;
        var row = document.createElement('div');
        row.className = 'form-row align-items-end mb-2';
        row.innerHTML =
            '<div class="col"><label>Label</label><input class="form-control" name="custom_fields[' + index + '][label]"></div>' +
            '<div class="col"><label>Name</label><input class="form-control" name="custom_fields[' + index + '][name]"></div>' +
            '<div class="col"><label>Type</label><select class="form-control" name="custom_fields[' + index + '][type]"><option value="string">Text</option><option value="text">Long Text</option><option value="number">Number</option><option value="date">Date</option></select></div>' +
            '<div class="col-auto"><label><input type="checkbox" name="custom_fields[' + index + '][required]" value="1"> Required</label></div>';
        fields.appendChild(row);
    });
})();
</script>
@endsection