@extends('layout.master')
@section('content')
    <div class="section-body">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header row">
                        <div class="col-md-10">
                            <h4>INSTRUMENTS</h4>
                        </div>
                        <div class="col-md-2">
                            <a href="{{route('admin_instrument_store')}}" class="btn btn-primary"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="save-stage2" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th>S.no</th>
                                        <th>Instrument</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                @forelse ($instruments as $key => $instrument)
                                <tr>
                                    <td>{{$key+1}}</td>
                                    <td>{{$instrument->name}}</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <a onclick="return confirm('Sure want to delete?')" href="{{route('admin_instrument_delete', ['id' => $instrument->id])}}"
                                                    class="btn btn-danger"><i class="fas fa-trash"></i></a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                    
                                @endforelse    
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script>

$(document).ready(function() {
$('#save-stage2').DataTable( {
"lengthMenu": [[100,500,1000], [100,500,1000]]
} );
} );
   
</script>
@endpush