@extends('theme.master')
@section('title', 'Profile & Setting')
<style>
.custom-dropdown {
    height: 50px!important; 
    padding: 10px!important; 
}
</style>
@section('content')

    @include('admin.message')
    {{-- @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif --}}
    <section id="blog-home" class="blog-home-main-block profile_had">
        <div class="container">
            <h1 class="blog-home-heading text-white">Add Meterial</h1>
        </div>
    </section>
    <section class="profile-item-block homepad p-5">
        <form action="{{route('institute.meterial.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 Meterial: 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="' + count +'" 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 meterial</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 Meterial: ' +
                count + '</label></div>';
            detailRow += '<div><button class="btn btn-danger-rgba" type="button" onclick="remove(' + count +
                ')">Remove</button></div>';
            // detailRow += '<div class="row">';
            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 + '" > </div>';
            detailRow += '</div><br><br>';
            count++;
            $('.add').append(detailRow);
        });

        function remove(rowId) {
            $('#row_' + rowId).remove();
        }

       
    </script>

@endsection