@extends('admin.master')
@section("title", e2("Module Generator Wizard"))
@section("desc", e2("Follow the steps to create a complex module."))
@section('content')

<div class="content">
    <div class="block" id="wizard-block">
        <div class="block-header block-header-default">
            <h3 class="block-title">{{e2("Module Generator")}}</h3>
        </div>
        <!-- Step Tabs -->
        <ul class="nav nav-tabs nav-tabs-alt nav-fill" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="step1-tab" data-toggle="tab" href="#step1" role="tab">{{e2("1. Basic Info")}}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" id="step2-tab" data-toggle="tab" href="#step2" role="tab">{{e2("2. Database Columns")}}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" id="step3-tab" data-toggle="tab" href="#step3" role="tab">{{e2("3. Permissions & Finish")}}</a>
            </li>
        </ul>

        <form action="{{ url('admin/module-generator/generate') }}" method="POST" enctype="multipart/form-data" id="generator-form">
            @csrf
            <div class="block-content tab-content" style="min-height: 400px;">
                <!-- Step 1: Basic Info -->
                <div class="tab-pane active" id="step1" role="tabpanel">
                    <div class="row py-30 justify-content-center">
                        <div class="col-sm-8 col-md-6">
                            <div class="form-group">
                                <label for="title">{{e2("Module Title")}}</label>
                                <input type="text" name="title" id="title" class="form-control form-control-lg" placeholder="e.g. Product Management" required>
                            </div>
                            <div class="form-group">
                                <label for="icon">{{e2("Module Icon (PNG)")}}</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="icon" name="icon" accept="image/png">
                                    <label class="custom-file-label" for="icon">{{e2("Choose icon...")}}</label>
                                </div>
                            </div>
                            <div class="text-right">
                                <button type="button" class="btn btn-alt-primary next-step" data-next="step2">
                                    {{e2("Next Step")}} <i class="fa fa-arrow-right ml-5"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 2: Columns -->
                <div class="tab-pane" id="step2" role="tabpanel">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table table-vcenter table-hover" id="columns-table">
                                    <thead>
                                        <tr>
                                            <th>{{e2("Column Name")}}</th>
                                            <th>{{e2("Type")}}</th>
                                            <th>{{e2("Advanced Config")}}</th>
                                            <th class="text-center" style="width: 50px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="columns-body">
                                        <tr class="column-row" data-index="0">
                                            <td>
                                                <input type="text" name="columns[0][name]" class="form-control" placeholder="column_name" required>
                                            </td>
                                            <td>
                                                <select name="columns[0][type]" class="form-control column-type-select">
                                                    <option value="string">String</option>
                                                    <option value="integer">Integer</option>
                                                    <option value="decimal">Decimal</option>
                                                    <option value="long-text">Long Text</option>
                                                    <option value="date">Date</option>
                                                    <option value="datetime">DateTime</option>
                                                    <option value="time">Time</option>
                                                    <option value="boolean">Boolean (Toggle)</option>
                                                    <option value="select">Static Dropdown</option>
                                                    <option value="select-dropdown">API Dropdown</option>
                                                    <option value="multiple-choice">Multiple Choice</option>
                                                    <option value="link-search">File / PDF Link</option>
                                                    <option value="separator">--- Separator ---</option>
                                                </select>
                                            </td>
                                            <td>
                                                <div class="config-container">
                                                    <small class="text-muted">{{e2("No extra config needed")}}</small>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-alt-danger remove-column">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="py-20">
                                <button type="button" class="btn btn-alt-success btn-block" id="add-column">
                                    <i class="fa fa-plus mr-5"></i> {{e2("Add New Column")}}
                                </button>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-alt-secondary prev-step" data-prev="step1">
                                    <i class="fa fa-arrow-left mr-5"></i> {{e2("Back")}}
                                </button>
                                <button type="button" class="btn btn-alt-primary next-step" data-next="step3">
                                    {{e2("Next Step")}} <i class="fa fa-arrow-right ml-5"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 3: Permissions & Finish -->
                <div class="tab-pane" id="step3" role="tabpanel">
                    <div class="row py-30 justify-content-center">
                        <div class="col-sm-8 col-md-6 text-center">
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle mr-5"></i>
                                {{e2("Default permissions will be assigned to Level 1 (Admin). You can adjust them later in System Settings.")}}
                            </div>
                            <h3 class="font-w400 mt-50">{{e2("Ready to generate?")}}</h3>
                            <p class="text-muted">{{e2("This will create a Migration, Model, and a Blade View.")}}</p>
                            
                            <div class="py-30">
                                <button type="submit" class="btn btn-hero btn-lg btn-alt-primary">
                                    <i class="fa fa-magic mr-10"></i> {{e2("Generate Module Now")}}
                                </button>
                            </div>

                            <button type="button" class="btn btn-alt-secondary prev-step" data-prev="step2">
                                <i class="fa fa-arrow-left mr-5"></i> {{e2("Back to Columns")}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@section('scripts')
<script>
    $(function() {
        let colIndex = 1;

        // Step Navigation
        $('.next-step').click(function() {
            let nextTab = $(this).data('next');
            $('#' + nextTab + '-tab').removeClass('disabled').tab('show');
        });

        $('.prev-step').click(function() {
            let prevTab = $(this).data('prev');
            $('#' + prevTab + '-tab').tab('show');
        });

        // Column Config Logic
        function updateConfig(row) {
            let type = row.find('.column-type-select').val();
            let index = row.data('index');
            let container = row.find('.config-container');
            let html = '';

            if (type === 'select' || type === 'multiple-choice') {
                html = `
                    <div class="form-group mb-0">
                        <input type="text" name="columns[${index}][options]" class="form-control form-control-sm" placeholder="Option1, Option2, Option3" title="Comma separated options">
                        <small class="form-text text-muted">Comma separated values</small>
                    </div>
                `;
            } else if (type === 'select-dropdown') {
                html = `
                    <div class="form-group mb-0">
                        <input type="text" name="columns[${index}][source]" class="form-control form-control-sm" placeholder="api/table_name or table_name">
                        <small class="form-text text-muted">Table name or API endpoint</small>
                    </div>
                `;
            } else if (type === 'separator') {
                html = `
                    <div class="form-group mb-0">
                        <input type="text" name="columns[${index}][label]" class="form-control form-control-sm" placeholder="Separator Title">
                    </div>
                `;
            } else {
                html = '<small class="text-muted">No extra config needed</small>';
            }

            container.html(html);
        }

        $(document).on('change', '.column-type-select', function() {
            updateConfig($(this).closest('tr'));
        });

        $('#add-column').click(function() {
            let html = `
                <tr class="column-row" data-index="${colIndex}">
                    <td>
                        <input type="text" name="columns[${colIndex}][name]" class="form-control" placeholder="column_name" required>
                    </td>
                    <td>
                        <select name="columns[${colIndex}][type]" class="form-control column-type-select">
                            <option value="string">String</option>
                            <option value="integer">Integer</option>
                            <option value="decimal">Decimal</option>
                            <option value="long-text">Long Text</option>
                            <option value="date">Date</option>
                            <option value="datetime">DateTime</option>
                            <option value="time">Time</option>
                            <option value="boolean">Boolean (Toggle)</option>
                            <option value="select">Static Dropdown</option>
                            <option value="select-dropdown">API Dropdown</option>
                            <option value="multiple-choice">Multiple Choice</option>
                            <option value="link-search">File / PDF Link</option>
                            <option value="separator">--- Separator ---</option>
                        </select>
                    </td>
                    <td>
                        <div class="config-container">
                            <small class="text-muted">No extra config needed</small>
                        </div>
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-alt-danger remove-column">
                            <i class="fa fa-trash"></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();
            }
        });
    });
</script>
@endsection

@endsection