@extends('crudbooster::admin_template')
@section('content')
<div class="panel panel-default">
    <div class="panel-heading">
        <strong><i class="fa fa-music">&nbsp; </i>{{$data['page_title']}}</strong>
    </div>

    <div class="panel-body" style="padding:20px 0px 0px 0px">
        <form class="form-horizontal" method="post" id="form" enctype="multipart/form-data" action="{{CRUDBooster::mainpath('save')}}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="return_url" value="{{url('admin/audios-list')}}">
            <input type="hidden" name="ref_mainpath" value="{{url('admin/audios-list')}}">
            <div class="box-body" id="parent-form-area">

                <div class="form-group header-group-0 " id="form-group-audio_name" style="">
                    <label class="col-sm-2 control-label">Audio Name <span class="text-danger">*</span> </label>
                    <div class="col-sm-10">
                        <input type="file" id="audio_name" title="Audio Name" class="form-control" accept="audio/*" name="audio_name[]">
                        <p class="help-block"></p>
                        <div class="text-danger"></div>
                    </div>
                </div>
                <div class="add_new_column"></div>
                <div class="form-group header-group-0 " id="form-group-audio_name" style="">
                    <label class="col-sm-2 control-label"></label>
                    <a href="javascript:void(0)" class="btn btn-default add_btn"><b>Add More</b></a>
                </div>
            </div>
            <!-- /.box-body -->

            <div class="box-footer" style="background: #F5F5F5">
                <div class="form-group">
                    <label class="control-label col-sm-2"></label>
                    <div class="col-sm-10">
                        <a href="{{url('admin/audios-list')}}" class="btn btn-default"><i class="fa fa-chevron-circle-left"></i> Back</a>
                        <input type="submit" name="submit" value="Save &amp; Add More" class="btn btn-success">
                        <input type="submit" name="submit" value="Save" class="btn btn-success">
                    </div>
                </div>

            </div><!-- /.box-footer-->
        </form>
    </div>
</div>
@endsection
@push('bottom')
<script>
    $('.add_btn').click(function () {
        $('.add_new_column').append(
            `<div class="form-group header-group-0 " id="form-group-audio_name" style="">
                <label class="col-sm-2 control-label">Audio Name <span class="text-danger">*</span> </label>
                <div class="col-sm-10">
                    <input type="file" id="audio_name" title="Audio Name" class="form-control" accept="audio/*" name="audio_name[]">
                    <p class="help-block"></p>
                    <div class="text-danger"></div>
                </div>
            </div>`
        );
    })
</script>
@endpush