@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">
                    <a class="btn btn-info" href="javascript:history.back()">Back</a>

                        <div class="col-sm-6">
                            <h1 class="m-0">Add Master Class Lectures</h1>
                        </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('masterClassLecture.store', [$master_class_topic_id]) }}"
                                        method="POST" enctype="multipart/form-data" id="addmasterclasslecture">
                                        @if (Session::has('success'))
                                            <div class="alert alert-success">{{ Session::get('success') }}</div>
                                        @endif
                                        @csrf

                                        <div id="dynamicTableMasterclassLecture">
                                            <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_lecture[0][title]"><br>

                                                    <label for="">Video</label>
                                                    <span class="text-danger">*</span>
                                                    <input type="file" class="form-control"
                                                        name="master_class_lecture[0][video]" accept="video/*"><br>

                                                    <label for="">Duration in Hour</label>
                                                    <span class="text-danger">*</span>
                                                    <input type="text" class="form-control"
                                                        name="master_class_lecture[0][duration_hour]"><br>
                                                    <label for="">Duration in minutes</label>
                                                    <span class="text-danger">*</span>
                                                    <input type="text" class="form-control"
                                                        name="master_class_lecture[0][duration_minutes]"><br>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="col-6 mt-1">
                                            <button style="margin-left: -7px;" type="button" name="add"
                                                id="addMasterclassLecture1" 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    $(document).ready(function () {

    function applyValidationRules() {
        $(".video-file").each(function () {
            $(this).rules("add", {
                accept: "video/*",
                messages: {
                    accept: "Please select a valid video file"
                }
            });
        });
    }

    // Apply validation rules to existing file input elements on page load
    applyValidationRules();
});

</script>
@endsection