@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 ">               
					<div class="card-header d-md-flex align-items-center justify-content-between flex-wrap gap-3 my-bg-1 ">
					  <div>
						<h4 class="mb-0">Add Song</h4>
						</div>
						<div>						
						<a href="{{route('add-songs')}}" type="button" class="mt-2 btn btn-link px-0 me-3">
										  <i width="15" height="16" class="me-2 fa fa-plus-circle" ></i> <span class="text-light">Song to album</span></a>
						<a class="btn btn-primary" type="button" href="{{route('add-genres')}}">+ Add New Genres</a>
						</div>	
					</div>
	</div>	
</div>	
	</div>
		<div class="row">
			<div class="col-lg-12">
				
           <div class="card mb-4"> 
					<div class="card-body px-0 my-bg ">
						<div class="table-data-top table-responsive">
							<table class="table mb-0" id="datatable" data-toggle="data-table">
								<thead>
                            <tr>
                                <th scope="col">No.</th>
                                <th scope="col">Song name</th>
                                <th scope="col">Gentres</th>
								<th scope="col">Song File</th>
                                <!--<th scope="col">Action</th>-->
                            </tr>
                        </thead>
								<tbody>
							    @foreach($songs as $song)
                                <tr>
                                    <td>{{$song->id}}</td>
                                    <td>
                                        <div class="d-flex align-items-center col-10 col-md-5">
                                            <div class="realese-song ">
                                                <a href="javascript:void(0);"><img src="{{ asset('img/' .$song->thumbnail) }}" class="rounded avatar-60 img-fluid" alt=""></a>
                                            </div>
                                            <div class=" ms-3">
                                                <p class="mb-0">{{$song->name}}</p>                                            
                                            </div>
                                        </div>
                                    </td>
                                    <td><p class="mb-0">{{$song->genre}}</p> </td>
                                    <td>
                                        <!-- Audio Play Button -->
                                        <audio controls style="margin-top: 10px; width: 100%;">
                                            <source src="{{ asset('assets/' . $song->file) }}" type="audio/mpeg">
                                            Your browser does not support the audio element.
                                        </audio>
                                    </td>
                                    <!--<td>-->
                                    <!--    <div class="dropdown ">-->
                                    <!--        <span class="d-flex align-items-center h5 mb-0" id="dropdownMenuButton07" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
                                    <!--            <i class="fa fa-ellipsis-v"></i>-->
                                    <!--        </span>-->
                                    <!--        <div class="dropdown-menu dropdown-menu-end my-bg-1" aria-labelledby="dropdownMenuButton07" style="">-->
                                    <!--            <a class="dropdown-item" href="#">-->
                                    <!--                <i class="fa fa-pencil"></i>-->
                                    <!--                Edit-->
                                    <!--            </a>-->
                                    <!--            <a class="dropdown-item" href="#">-->
                                    <!--                <i class="fa fa-eye"></i>-->
                                    <!--                View-->
                                    <!--            </a>-->
                                    <!--            <a class="dropdown-item" href="#">-->
                                    <!--               <i class="fa fa-trash"></i>-->
                                                    
                                    <!--                Delete-->
                                    <!--            </a>-->
                                    <!--        </div>-->
                                    <!--    </div>-->
                                    <!--</td>-->
                                </tr>
                                 @endforeach
                           
 <!--                                <tr>-->
 <!--                               <td>02</td>-->
 <!--                               <td>-->
 <!--                                   <div class="d-flex align-items-center col-10 col-md-5">-->
 <!--                                       <div class="realese-song ">-->
 <!--                                           <a href="javascript:void(0);"><img src="assets/images/dashboard/05.png" class="rounded avatar-60 img-fluid" alt=""></a>-->
 <!--                                       </div>-->
 <!--                                       <div class=" ms-3">-->
 <!--                                           <p class="mb-0">The Girl</p>                                            -->
 <!--                                       </div>-->
 <!--                                   </div>-->
 <!--                               </td>-->
 <!--                               <td><p class="mb-0">Heart Is Beating</p> </td>-->
 <!--                               <td><p class="mb-0">	Lorem Ipsum is simply dummy ...</p></td>-->
 <!--                               <td>-->
 <!--                                   <div class="dropdown ">-->
 <!--                                       <span class="d-flex align-items-center h5 mb-0" id="dropdownMenuButton07" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
 <!--                                           <i class="fa fa-ellipsis-v"></i>-->
 <!--                                       </span>-->
 <!--                                       <div class="dropdown-menu dropdown-menu-end my-bg-1" aria-labelledby="dropdownMenuButton07" style="">-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                               <i class="fa fa-pencil"></i>-->
 <!--                                               Edit-->
 <!--                                           </a>-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                               <i class="fa fa-eye"></i>-->
 <!--                                               View-->
 <!--                                           </a>-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                              <i class="fa fa-trash"></i>-->
                                                
 <!--                                               Delete-->
 <!--                                           </a>-->
 <!--                                       </div>-->
 <!--                                   </div>-->
 <!--                               </td>-->
 <!--                           </tr>-->
 <!--<tr>-->
 <!--                               <td>03</td>-->
 <!--                               <td>-->
 <!--                                   <div class="d-flex align-items-center col-10 col-md-5">-->
 <!--                                       <div class="realese-song ">-->
 <!--                                           <a href="javascript:void(0);"><img src="assets/images/dashboard/05.png" class="rounded avatar-60 img-fluid" alt=""></a>-->
 <!--                                       </div>-->
 <!--                                       <div class=" ms-3">-->
 <!--                                           <p class="mb-0">The Girl</p>                                            -->
 <!--                                       </div>-->
 <!--                                   </div>-->
 <!--                               </td>-->
 <!--                               <td><p class="mb-0">Heart Is Beating</p> </td>-->
 <!--                               <td><p class="mb-0">	Lorem Ipsum is simply dummy ...</p></td>-->
 <!--                               <td>-->
 <!--                                   <div class="dropdown ">-->
 <!--                                       <span class="d-flex align-items-center h5 mb-0" id="dropdownMenuButton07" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
 <!--                                           <i class="fa fa-ellipsis-v"></i>-->
 <!--                                       </span>-->
 <!--                                       <div class="dropdown-menu dropdown-menu-end my-bg-1" aria-labelledby="dropdownMenuButton07" style="">-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                               <i class="fa fa-pencil"></i>-->
 <!--                                               Edit-->
 <!--                                           </a>-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                               <i class="fa fa-eye"></i>-->
 <!--                                               View-->
 <!--                                           </a>-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                              <i class="fa fa-trash"></i>-->
                                                
 <!--                                               Delete-->
 <!--                                           </a>-->
 <!--                                       </div>-->
 <!--                                   </div>-->
 <!--                               </td>-->
 <!--                           </tr>-->
 <!--<tr>-->
 <!--                               <td>04</td>-->
 <!--                               <td>-->
 <!--                                   <div class="d-flex align-items-center col-10 col-md-5">-->
 <!--                                       <div class="realese-song ">-->
 <!--                                           <a href="javascript:void(0);"><img src="assets/images/dashboard/05.png" class="rounded avatar-60 img-fluid" alt=""></a>-->
 <!--                                       </div>-->
 <!--                                       <div class=" ms-3">-->
 <!--                                           <p class="mb-0">The Girl</p>                                            -->
 <!--                                       </div>-->
 <!--                                   </div>-->
 <!--                               </td>-->
 <!--                               <td><p class="mb-0">Heart Is Beating</p> </td>-->
 <!--                               <td><p class="mb-0">	Lorem Ipsum is simply dummy ...</p></td>-->
 <!--                               <td>-->
 <!--                                   <div class="dropdown ">-->
 <!--                                       <span class="d-flex align-items-center h5 mb-0" id="dropdownMenuButton07" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
 <!--                                           <i class="fa fa-ellipsis-v"></i>-->
 <!--                                       </span>-->
 <!--                                       <div class="dropdown-menu dropdown-menu-end my-bg-1" aria-labelledby="dropdownMenuButton07" style="">-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                               <i class="fa fa-pencil"></i>-->
 <!--                                               Edit-->
 <!--                                           </a>-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                               <i class="fa fa-eye"></i>-->
 <!--                                               View-->
 <!--                                           </a>-->
 <!--                                           <a class="dropdown-item" href="#">-->
 <!--                                              <i class="fa fa-trash"></i>-->
                                                
 <!--                                               Delete-->
 <!--                                           </a>-->
 <!--                                       </div>-->
 <!--                                   </div>-->
 <!--                               </td>-->
 <!--                           </tr>							-->
                        </tbody>
							</table>
						</div>	
					</div>
				</div>
			</div>
		</div>
	
@endsection