@extends('theme.master')
@section('title', 'Add Faculty Material')
<style>
.custom-dropdown {
    height: 50px !important;
    padding: 10px !important;
}
</style>
@section('content')
    <section id="blog-home" class="blog-home-main-block profile_had">
        <div class="container">
            <h1 class="blog-home-heading text-white">Add Material</h1>
        </div>
    </section>
    <section class="profile-item-block homepad p-5">
        @include('admin.message')
        <form action="{{ route('faculty.upload_pdf.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row" id="row_1">
                <div class="col-md-10" style="background: rgba(80, 111, 228, 0.1);">
                    <label for="">Add Course Material: 1</label>
                </div>
                <div class="col-md-12 mb-2">
                    <label for="exampleInputDetails">Note:</label>
                    <textarea name="text[1]" rows="3" class="form-control" id="text_1" data-id="1" required maxlength="200"></textarea>
                </div>
                <div class="col-md-6">
                    <label for="exampleInputDetails">Select Course<sup class="text-danger">*</sup></label>
                    <select class="form-control custom-dropdown" name="course_id[1]" required id="course_id_1">
                        <option value="">Select an Option</option>
                        @foreach ($courses as $course)
                            <option value="{{ $course->id }}">{{ $course->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="exampleInputDetails">PDF:</label>
                    <input type="file" name="pdf[1]" class="form-control" id="pdf_1" accept=".pdf,.docx" title="Please enter .PDF and .DOCX files only." data-id="1" required>
                </div>
            </div>
            <br>
            <div class="add"></div>
            <div class="row">
                <div class="">
                    <button type="submit" class="btn btn-danger text-capitalize font-size-15 border-0 line-hight-1">{{ __('adminstaticword.Save') }}</button>
                </div>
                <div class="col-md-6">
                    <button class="btn btn-danger p-2 text-capitalize font-size-15 border-0 line-hight-1" type="button" id="addrow">Click here to add course material</button>
                </div>
            </div>
        </form>
    </section>
@endsection

@section('custom-script')
    <script>
        var count = 2;
        $("#addrow").on("click", function() {
            var detailRow = '';
            detailRow += '<div class="row" id="row_' + count + '">';
            detailRow += '<div class="col-md-10" style="background: rgba(80, 111, 228, 0.1);"><label for="">Add Course Material: ' + count + '</label></div>';
            detailRow += '<div><button class="btn btn-danger-rgba" type="button" onclick="remove(' + count + ')">Remove</button></div>';
            detailRow += '<div class="col-md-12 mb-2"><label for="exampleInputDetails">Note:</label><textarea name="text[' + count + ']" rows="3" class="form-control" id="text_' + count + '" data-id="' + count + '" required></textarea></div>';
            detailRow += '<div class="col-md-6"><label for="exampleInputDetails">Select Course<sup class="text-danger">*</sup></label><select class="form-control custom-dropdown" name="course_id[' + count + ']" required id="course_id_' + count + '"><option value="">Select an Option</option>@foreach ($courses as $course)<option value="{{ $course->id }}">{{ $course->title }}</option>@endforeach</select></div>';
            detailRow += '<div class="col-md-6 mb-2"><label for="exampleInputDetails">PDF:</label><input type="file" name="pdf[' + count + ']" class="form-control" id="pdf_' + count + '" accept=".pdf,.docx" title="Please enter .PDF and .DOCX files only." data-id="' + count + '" required></div>';
            detailRow += '</div><br><br>';
            count++;
            $('.add').append(detailRow);
        });

        function remove(rowId) {
            $('#row_' + rowId).remove();
        }
    </script>
@endsection