@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-music')}}">+ Add Music Sheet</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">Music Sheet</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">-->
        <!--                                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">Artist Name</th>
										<th scope="col">Sheet Image</th>
										<th scope="col">Description</th>
										<th scope="col">Music Sheet</th>
									</tr>
								</thead>
								<tbody>
								    @foreach($musics as $music)
                                    <tr>
                                        <td>{{ $music->id }}</td>
                                        <td><img src="{{ asset('assets/' .$music->songimage) }}" class="rounded avatar-52 img-fluid" alt=""></td>
                                        <td>{{ $music->song_name }}</td> 
                                        <td>{{ $music->artist_name }}</td>
                                        <td><img src="{{ asset('assets/' .$music->sheetImage) }}" class="rounded avatar-52 img-fluid" alt=""></td>
                                        <td>{{ $music->description }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-3">
                                                <a class="btn btn-soft-info btn-icon btn-sm rounded-pill ms-2" href="{{ route('edit-music', ['id' => $music->id]) }}" role="button">
                                                    <span class="btn-inner">
                                                        <i class="fa fa-pencil text-light"></i>
                                                    </span>
                                                </a>
                                                <a class="btn btn-soft-success btn-icon btn-sm rounded-pill ms-2" href="{{ route('music-details', ['id' => $music->id]) }}" role="button">
                                                    <span class="btn-inner">
                                                        <i class="fa fa-eye text-light"></i>
                                                    </span>
                                                </a>
                                               <a class="btn btn-soft-danger btn-icon btn-sm rounded-pill ms-2" href="javascript:void(0);" onclick="confirmDelete('{{ route('music-delete', ['id' => $music->id]) }}')"role="button">
                                                    <span class="btn-inner">
                                                        <i class="fa fa-trash text-light"></i>
                                                    </span>
                                                </a>
                                            </div>
                                        </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 </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>-->
									<!--		<div class="d-flex align-items-center gap-3">-->
									<!--			<a class="btn btn-soft-info btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						<i class="fa fa-pencil text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			<a class="btn btn-soft-success btn-icon btn-sm rounded-pill ms-2" href="{{route('music-details')}}" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						 <i class="fa fa-eye text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			 <a class="btn btn-soft-danger btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">                                                -->
									<!--						 <i class="fa fa-trash text-light"></i>                                               -->
									<!--				</span>-->
									<!--			</a>-->
									<!--		</div>-->
									<!--	</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 </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	 <td>-->
									<!--		<div class="d-flex align-items-center gap-3">-->
									<!--			<a class="btn btn-soft-info btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						<i class="fa fa-pencil text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			<a class="btn btn-soft-success btn-icon btn-sm rounded-pill ms-2" href="" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						 <i class="fa fa-eye text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			 <a class="btn btn-soft-danger btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">                                                -->
									<!--						 <i class="fa fa-trash text-light"></i>                                               -->
									<!--				</span>-->
									<!--			</a>-->
									<!--		</div>-->
									<!--	</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 </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>-->
									<!--		<div class="d-flex align-items-center gap-3">-->
									<!--			<a class="btn btn-soft-info btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						<i class="fa fa-pencil text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			<a class="btn btn-soft-success btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						 <i class="fa fa-eye text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			 <a class="btn btn-soft-danger btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">                                                -->
									<!--						 <i class="fa fa-trash text-light"></i>                                               -->
									<!--				</span>-->
									<!--			</a>-->
									<!--		</div>-->
									<!--	</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 </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	 <td>-->
									<!--		<div class="d-flex align-items-center gap-3">-->
									<!--			<a class="btn btn-soft-info btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						<i class="fa fa-pencil text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			<a class="btn btn-soft-success btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						 <i class="fa fa-eye text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			 <a class="btn btn-soft-danger btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">                                                -->
									<!--						 <i class="fa fa-trash text-light"></i>                                               -->
									<!--				</span>-->
									<!--			</a>-->
									<!--		</div>-->
									<!--	</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 </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>Lorem ipsum </td>-->
									<!--	<td>-->
									<!--		<div class="d-flex align-items-center gap-3">-->
									<!--			<a class="btn btn-soft-info btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						<i class="fa fa-pencil text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			<a class="btn btn-soft-success btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">-->
									<!--						 <i class="fa fa-eye text-light"></i>-->
									<!--				</span>-->
									<!--			</a>-->
									<!--			 <a class="btn btn-soft-danger btn-icon btn-sm rounded-pill ms-2" href="#" role="button">-->
									<!--				<span class="btn-inner">                                                -->
									<!--						 <i class="fa fa-trash text-light"></i>                                               -->
									<!--				</span>-->
									<!--			</a>-->
									<!--		</div>-->
									<!--	</td>-->
									<!--</tr>-->
								</tbody>
							</table>
						</div>	
					</div>
				</div>
			</div>
		</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script>
    function confirmDelete(url) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        })
    }
</script>
@endsection