@extends('layouts.admin')

@section('content')


<div class="content-inner container-fluid pb-0" id="page_layout">
		<div class="row">
			<div class="col-lg-12">
					<div class="card my-bg ">
					<div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-3">
						<h4 class="mb-0">Add New Song </h4> 
					</div>				
						<div class="card-body">
						<div class="row">
						   <div class="col-lg-6">
						   <form class="" method="POST" action="{{ route('song-store') }}" enctype="multipart/form-data" >
						   @csrf
							<div class="mb-3">
									<label for="catename" class="form-label">Song name <span class="text-danger">*</span></label></label>
									<input type="text" name="name" class="form-control" id="catename" placeholder="" required oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')">
								</div>
							</div>
                             <div class="col-lg-6">	
                                <div class="form-group">
                                    <label for="customFile2" class="form-label custom-file-input">Song File (.mp3, .mpeg,...)<span class="text-danger">*</span></label>
                                    <input class="form-control b1" name="song_file" type="file" id="customFile2" accept="audio/mp3,.mpeg,audio/*" required>
                                </div>
                            </div>
    						<div class="col-lg-6">	
    							<div class="form-group">
    									<label for="customFile1" class="form-label custom-file-input">Song Thumbnail<span class="text-danger">*</span></label>
    									<input class="form-control a1" name="image" type="file" id="customFile1" accept="image/png, image/gif, image/jpeg" required>
    							</div>

							</div>
							<div class="col-lg-6">	
								<div class="form-group">
									<label class="form-label" for="choices-single-default">Language <span class="text-danger">*</span></label>
									<select class="form-select" data-trigger name="lang" id="choices-single-default" required>
										@if(!empty($langs)&&isset($langs))
										@foreach($langs as $lang)
										<option value="{{$lang->id}}">{{$lang->name}}</option>
										@endforeach
										@endif
									</select>
								</div>
								</div>
								<div class="col-lg-6">	
								<div class="mb-3">
									<label for="catdescription" class="form-label">Lyrics <span class="text-danger">*</span></label>
									<textarea class="form-control" name="lyrics" id="catdescription" rows="8" required></textarea>
								</div>
								</div>
								<div class="col-lg-6">	
								<div class="form-group">
									<label class="form-label" for="choices-single-default">Album <span class="text-danger">*</span></label>
									<select class="form-select" data-trigger name="album" id="choices-single-default" required>
										@if(!empty($albums)&&isset($albums))
										@foreach($albums as $album)
										<option value="{{$album->id}}">{{$album->name}}</option>
										@endforeach
										@endif
									</select>
								</div>
								</div>
								<div class="col-lg-6">	
								<div class="form-group">
									<label class="form-label" for="choices-single-default">Artist <span class="text-danger">*</span></label>
									<select class="form-select" data-trigger name="artist" id="choices-single-default" required>
										@if(!empty($artists)&&isset($artists))
										@foreach($artists as $artist)
										<option value="{{$artist->id}}">{{$artist->name}}</option>
										@endforeach
										@endif
									</select>
								</div>
								</div>
								<div class="col-lg-6">	
								<div class="form-group">
									<label class="form-label" for="choices-single-default">Song Genre <span class="text-danger">*</span></label>
									<select class="form-select" data-trigger name="genre" id="choices-single-default" required>
										@if(!empty($genres)&&isset($genres))
										@foreach($genres as $genre)
										<option value="{{$genre->id}}">{{$genre->name}}</option>
										@endforeach
										@endif
									</select>
								</div>
								</div>
								<div class="col-lg-6">	
								<div class="mb-3">
									<label for="catename" class="form-label">Lyricist <span class="text-danger">*</span></label>
										<select class="form-select" data-trigger name="lyricist" id="choices-single-default" required>
										@if(!empty($lyricists)&&isset($lyricists))
										@foreach($lyricists as $lyricist)
										<option value="{{$lyricist->id}}">{{$lyricist->name}}</option>
										@endforeach
										@endif
									</select>
								</div>
								</div>
								<div class="col-lg-6">	
								<div class="mb-3">
									<label for="catename1" class="form-label">Released Date</label>
									<input type="date" name="rel_date" class="form-control" id="catename1" placeholder="">
								</div>
							   
								</div>

								<div class="col-lg-6">	
								<button type="submit" class="btn btn-danger">Submit</button>
								<div>
							</form>
							</div>
							<div class="col-lg-6">
							</div>
					   <div>
					</div>
				</div>
			</div>
			</div>
			</div>
	</div>
@endsection