@extends('admin.master')
@section("title", e2("Module Generator"))
@section("desc", e2("Create a new module with model, migration and view automatically."))
@section('content')

<div class="content">
    <form action="{{ url('admin/module-generator/generate') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title">{{e2("Module Basic Information")}}</h3>
            </div>
            <div class="block-content">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title">{{e2("Module Title")}}</label>
                            <input type="text" name="title" id="title" class="form-control" placeholder="e.g. Products" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="icon">{{e2("Module Icon (PNG)")}}</label>
                            <input type="file" name="icon" id="icon" class="form-control" accept="image/png">
                            <small class="text-muted">Recommended size: 64x64px. Saved to assets/icons/</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title">{{e2("Database Columns")}}</h3>
                <div class="block-options">
                    <button type="button" class="btn btn-sm btn-success" id="add-column">
                        <i class="fa fa-plus mr-1"></i> {{e2("Add Column")}}
                    </button>
                </div>
            </div>
            <div class="block-content">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="columns-table">
                        <thead>
                            <tr>
                                <th>{{e2("Column Name")}}</th>
                                <th>{{e2("Type")}}</th>
                                <th class="text-center" style="width: 50px;">{{e2("Action")}}</th>
                            </tr>
                        </thead>
                        <tbody id="columns-body">
                            <tr>
                                <td>
                                    <input type="text" name="columns[0][name]" class="form-control" placeholder="e.g. product_name" required>
                                </td>
                                <td>
                                    <select name="columns[0][type]" class="form-control" required>
                                        <option value="string">String (Text)</option>
                                        <option value="integer">Integer (Number)</option>
                                        <option value="decimal">Decimal (Price/Ratio)</option>
                                        <option value="date">Date</option>
                                        <option value="datetime">DateTime</option>
                                        <option value="long-text">Long Text (Textarea)</option>
                                        <option value="boolean">Boolean (Yes/No)</option>
                                        <option value="select">Select (Dropdown)</option>
                                        <option value="link-search">Link Search (File/PDF)</option>
                                    </select>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-danger remove-column">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="py-3">
                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                        <i class="fa fa-magic mr-1"></i> {{e2("Generate Module")}}
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

@section('script')
<script>
    $(function() {
        let colIndex = 1;
        
        $('#add-column').click(function() {
            let html = `
                <tr>
                    <td>
                        <input type="text" name="columns[${colIndex}][name]" class="form-control" placeholder="e.g. column_name" required>
                    </td>
                    <td>
                        <select name="columns[${colIndex}][type]" class="form-control" required>
                            <option value="string">String (Text)</option>
                            <option value="integer">Integer (Number)</option>
                            <option value="decimal">Decimal (Price/Ratio)</option>
                            <option value="date">Date</option>
                            <option value="datetime">DateTime</option>
                            <option value="long-text">Long Text (Textarea)</option>
                            <option value="boolean">Boolean (Yes/No)</option>
                            <option value="select">Select (Dropdown)</option>
                            <option value="link-search">Link Search (File/PDF)</option>
                        </select>
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-danger remove-column">
                            <i class="fa fa-times"></i>
                        </button>
                    </td>
                </tr>
            `;
            $('#columns-body').append(html);
            colIndex++;
        });

        $(document).on('click', '.remove-column', function() {
            if ($('#columns-body tr').length > 1) {
                $(this).closest('tr').remove();
            } else {
                alert('At least one column is required.');
            }
        });
    });
</script>
@endsection

@endsection