@extends('layouts.admin')

@section('content')

<div class="content-inner container-fluid pb-0" id="page_layout">
<div class="card-header d-flex align-items-center justify-content-end flex-wrap gap-3 mb-3">
              
			  <a class="btn btn-primary" type="button" href="{{route('add-songs')}}">+ Add Songs</a>
	   </div>	
	<div class="card my-bg mb-3">
	<div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-3">
						<h4 class="mb-0">Song Upload</h4> 
							<div class="d-flex">
							<!--<div class="dropdown">-->
       <!--                             <button class="btn btn-link dropdown-toggle text-light" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">-->
       <!--                                 Artist name-->
       <!--                             </button>-->
       <!--                             <ul class="dropdown-menu my-bg" aria-labelledby="dropdownMenuButton" style="">-->
       <!--                                 <li><a class="dropdown-item" href="#">Action</a></li>-->
       <!--                                 <li><a class="dropdown-item" href="#">Another action</a></li>-->
       <!--                                 <li><a class="dropdown-item" href="#">Something else here</a></li>-->
       <!--                             </ul>-->
       <!--                         </div>-->
							<!--	<div class="dropdown">-->
       <!--                             <button class="btn btn-link dropdown-toggle text-light" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">-->
       <!--                                 Short by year-->
       <!--                             </button>-->
       <!--                             <ul class="dropdown-menu my-bg" aria-labelledby="dropdownMenuButton" style="">-->
       <!--                                 <li><a class="dropdown-item" href="#">Action</a></li>-->
       <!--                                 <li><a class="dropdown-item" href="#">Another action</a></li>-->
       <!--                                 <li><a class="dropdown-item" href="#">Something else here</a></li>-->
       <!--                             </ul>-->
       <!--                         </div>-->
							<!--	<div class="dropdown">-->
       <!--                             <button class="btn btn-link dropdown-toggle text-light"  type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">-->
       <!--                                 Genres-->
       <!--                             </button>-->
       <!--                             <ul class="dropdown-menu my-bg" aria-labelledby="dropdownMenuButton" style="">-->
       <!--                                 <li><a class="dropdown-item" href="#">Action</a></li>-->
       <!--                                 <li><a class="dropdown-item" href="#">Another action</a></li>-->
       <!--                                 <li><a class="dropdown-item" href="#">Something else here</a></li>-->
       <!--                             </ul>-->
       <!--                         </div>-->
							<!--</div>						-->
					</div>
			
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="card my-bg ">               
					
           
					<div class="card-body px-0">
						<div class="table-data-top table-responsive">
							<table class="table mb-0" id="datatable" data-toggle="data-table">
								<thead>
									<tr class="bg-white">
										<th scope="col">No.</th>
										<th scope="col">Song Image</th>
										<th scope="col">Song Name</th>
										<th scope="col">Song File</th>          
										<!--<th scope="col">Action</th>-->
									</tr>
								</thead>
								<tbody>
								     @foreach($songs as $item)
                                    <tr>
                                        <td>{{ $item->id }}</td>
                                        <td><img src="{{ asset('img/' .$item->thumbnail) }}" class="rounded avatar-52 img-fluid" alt=""></td>
                                        <td>{{$item->name }}</td> 
                                       <td>
                                            <!-- Audio Play Button -->
                                           <audio controls style="margin-top: 10px; width: 100%;">
                                                <source src="{{ asset('assets/' . $item->file) }}" type="audio/mpeg">
                                                Your browser does not support the audio element.
                                            </audio>
                                        </td>
          <!--                             <td>-->
										<!--	 <button type="button" class="mt-2 btn btn-link px-0">-->
										<!--  <i width="15" height="16" class="me-2 fa fa-plus-circle" ></i> <span class="text-light">Song to album</span></button> -->
										<!--</td>-->
                                    </tr>
                                @endforeach
									<!--<tr>-->
									<!--	<td>01</td>-->
									<!--	<td><img src="assets/images/dashboard/05.png" class="rounded avatar-52 img-fluid" alt=""></td>-->
									<!--	<td>Lorem ipsum dolor sit amet..</td>-->
									<!--	<td>-->
									<!--		 <button type="button" class="mt-2 btn btn-link px-0">-->
									<!--	  <i width="15" height="16" class="me-2 fa fa-plus-circle" ></i> <span class="text-light">Song to album</span></button> -->
									<!--	</td>-->
									<!--</tr>-->
									<!--<tr>-->
									<!--	<td>02</td>-->
									<!--	<td><img src="assets/images/dashboard/05.png" class="rounded avatar-52 img-fluid" alt=""></td>-->
									<!--	<td>Lorem ipsum dolor sit amet..</td>-->
									<!--	<td>-->
									<!--		 <button type="button" class="mt-2 btn btn-link px-0">-->
									<!--	  <i width="15" height="16" class="me-2 fa fa-plus-circle" ></i> <span class="text-light">Song to album</span></button> -->
									<!--	</td>-->
									<!--</tr>-->
									<!--<tr>-->
									<!--	<td>03</td>-->
									<!--	<td><img src="assets/images/dashboard/05.png" class="rounded avatar-52 img-fluid" alt=""></td>-->
									<!--	<td>Lorem ipsum dolor sit amet..</td>-->
									<!--	<td>-->
									<!--		 <button type="button" class="mt-2 btn btn-link px-0">-->
									<!--	  <i width="15" height="16" class="me-2 fa fa-plus-circle" ></i> <span class="text-light">Song to album</span></button> -->
									<!--	</td>-->
									<!--</tr>-->
									<!--<tr>-->
									<!--	<td>04</td>-->
									<!--	<td><img src="assets/images/dashboard/05.png" class="rounded avatar-52 img-fluid" alt=""></td>-->
									<!--	<td>Lorem ipsum dolor sit amet..</td>-->
									<!--	<td>-->
									<!--		 <button type="button" class="mt-2 btn btn-link px-0">-->
									<!--	  <i width="15" height="16" class="me-2 fa fa-plus-circle" ></i> <span class="text-light">Song to album</span></button> -->
									<!--	</td>-->
									<!--</tr>-->
									<!--<tr>-->
									<!--	<td>05</td>-->
									<!--	<td><img src="assets/images/dashboard/05.png" class="rounded avatar-52 img-fluid" alt=""></td>-->
									<!--	<td>Lorem ipsum dolor sit amet..</td>-->
									<!--	<td>-->
									<!--		 <button type="button" class="mt-2 btn btn-link px-0">-->
									<!--	  <i width="15" height="16" class="me-2 fa fa-plus-circle" ></i> <span class="text-light">Song to album</span></button> -->
									<!--	</td>-->
									<!--</tr>                             -->
								</tbody>
							</table>
						</div>	
					</div>
				</div>
			</div>
		</div>
	
@endsection