@extends('super-admin.layouts.main')
@section('content')
    <main>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0">Add Master Class Topics</h1>
                            <a class="btn btn-info" href="javascript:history.back()">Back</a>
                        </div><!-- /.col -->

                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- Main content -->
            <div class="content">
                <div class="container-fluid">
                    <div class="card">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-body">
                                    <form action="{{ route('masterClassTopic.store', [$master_class_id]) }}" method="POST"
                                        enctype="multipart/form-data" id="addmasterclasstopic">
                                        @if (Session::has('success'))
                                            <div class="alert alert-success">{{ Session::get('success') }}</div>
                                        @endif
                                        @csrf

                                        <div id="dynamicTableMasterclassTopic">
                                            <div class="row main">
                                                <div class="col-12">
                                                    <label for="">Title</label>
                                                    <span class="text-danger">*</span>
                                                    <input type="text" class="form-control"
                                                        name="master_class_topic[0][title]">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 mt-1">
                                            <button style="margin-left: -7px;" type="button" name="add"
                                                id="addMasterclassTopic" class="btn btn-success">Add More</button>
                                        </div>

                                        <button class="btn btn-info mt-4" type="submit">Submit</button>
                                    </form>


                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
    </main>
    <script>
        document.getElementById("addMasterclassTopic").addEventListener("click", function () {
        var dynamicTableMasterclassTopic = document.getElementById("dynamicTableMasterclassTopic");
        var rowCount = dynamicTableMasterclassTopic.querySelectorAll('.main').length;
        var newRow = document.createElement('div');
        newRow.className = 'row main';
        newRow.innerHTML = `
            <div class="col-12">
                <label for="">Title</label>
                <span class="text-danger">*</span>
                <input type="text" class="form-control" name="master_class_topic[${rowCount}][title]">
                <button type="button" class="btn btn-danger btn-sm mt-1 remove">Remove</button>
            </div>
        `;
        dynamicTableMasterclassTopic.appendChild(newRow);
    });

    // Event delegation to handle remove button click
    document.addEventListener("click", function (e) {
        if (e.target && e.target.classList.contains("remove")) {
            e.target.parentNode.parentNode.remove();
        }
    });
    </script>
@endsection