<form class="row g-3 auto-width image" action="{{ route('study-materials-file.store')}}" method="post" enctype='multipart/form-data'>
    @csrf
    <input type="hidden" name="id" data-id="{!! $id !!}" value="{!! $id !!}">
    <div class="col-md-12">
        <label for="document_note" class="form-label"> Document Name</label>
        <input type="text" class="form-control" name="document_note" placeholder="Document Name">
    </div>
    <div class="col-md-12">
        <label for="file_type" class="form-label">File Types <span class="text-danger"><b>*</b></span></label>
        <select class="form-control file_type" name="file_types">
            <option value="">Select File Type</option>
            @foreach (fileTypes() as $key =>  $row)
            <option value="{!! $key !!}">{!! strtoupper($row) !!}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-12 filesDive">
        <label for="file" class="form-label">Image <span class="text-danger"><b>*</b></span></label>
        <input type="file" class="form-control" id="file" name="attachment" aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_file" style="display: none;">This field is required.</span>
    </div>

    <div class="col-md-12 textDiv" style="display: none;">
        <label for="text" class="form-label">Text <span class="text-danger"><b>*</b></span></label>
        <textarea type="text" class="form-control" id="notes" name="notes" aria-describedby="inputGroupPrepend" required></textarea>
        <span class="text-danger error_file" style="display: none;">This field is required.</span>
    </div>

    <div class="col-md-12 videoDiv" style="display: none;">
        <label for="text" class="form-label">Url <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="video_url" name="video_url" aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_file" style="display: none;">This field is required.</span>
    </div>
</form>
<script>

$('body').on('change', '.file_type', function(){

var file_type = $(this).val();
if(file_type=='6')
{
    $('.textDiv').show();
    $('.filesDive').hide();
    $('.videoDiv').hide();
}
else if(file_type=='7' || file_type=='8')
{
    $('.textDiv').hide();
    $('.filesDive').hide();
    $('.videoDiv').show();
}
else
{
    $('.textDiv').hide();
    $('.videoDiv').hide();
    $('.filesDive').show();
}
});
</script>