@extends('admin.admin_dashboard')
@section('customcss')
<!-- Datatable -->
<link href="{{asset('../asset/vendor/datatables/css/jquery.dataTables.min.css')}}" rel="stylesheet">
<!-- Custom Stylesheet -->
<link href="{{asset('../asset/vendor/jquery-nice-select/css/nice-select.css')}}" rel="stylesheet">
@endsection

@section('admin')

		<!--**********************************
            Content body start
        ***********************************-->
		<div class="content-body">
			<div class="container-fluid">
				<div class="row page-titles">
					<div class="col-md-9">
						<ol class="breadcrumb">
							<li class="breadcrumb-item active"><a href="javascript:void(0)">Home</a></li>
							<li class="breadcrumb-item"><a href="javascript:void(0)">Grade Scales</a></li>
						</ol>
					</div>
					<div class="col-md-3 mb-0 text-right">
						<a href="{{ route('grade-scales.create') }}"><button class="btn btn-success"><i class="fas fa-plus"></i> Add New Grade</button></a>
					</div>
				</div>
				
				<div class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<h4 class="card-title">Grade Scales List</h4>
							</div>
							<div class="card-body">
								<div class="table-responsive">
									<table class="table table-bordered table-sm">
										<thead>
											<tr>
												<th>Grade</th>
												<th>Min Mark</th>
												<th>Max Mark</th>
												<th>Grade Point</th>
												<th>Action</th>
											</tr>
										</thead>
										<tbody>
											@foreach($grades as $grade)
												<tr>
													<td><strong>{{ $grade->grade }}</strong></td>
													<td>{{ $grade->min_mark }}</td>
													<td>{{ $grade->max_mark }}</td>
													<td><span class="badge badge-primary">{{ $grade->grade_point }}</span></td>
													<td>
														<div class="dropdown ms-auto text-end">
															<div class="btn-link" data-bs-toggle="dropdown">
																<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
															</div>
															<div class="dropdown-menu dropdown-menu-end">
																<a class="dropdown-item" href="{{ route('grade-scales.edit',$grade->id) }}"><i class="fas fa-edit"></i> Edit</a>
																<a class="dropdown-item text-danger delete-btn" href="javascript:void(0);" data-id="{{ $grade->id }}"><i class="fas fa-trash"></i> Delete</a>
															</div>
														</div>
													</td>
												</tr>
											@endforeach
											@if($grades->isEmpty())
												<tr><td colspan="5" class="text-center">No grade scales found</td></tr>
											@endif
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--**********************************
            Content body end
        ***********************************-->
@endsection

@section('customjs')

<!-- Datatable -->
<script src="{{asset('../asset/vendor/datatables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('../asset/js/plugins-init/datatables.init.js')}}"></script>

<script src="{{asset('../asset/vendor/jquery-nice-select/js/jquery.nice-select.min.js')}}"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // Delete confirmation with SweetAlert
    $('.delete-btn').on('click', function() {
        var gradeId = $(this).data('id');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Create and submit form
                var form = $('<form>', {
                    'method': 'POST',
                    'action': '{{ url("grade-scales") }}/' + gradeId
                });
                
                form.append($('<input>', {
                    'type': 'hidden',
                    'name': '_token',
                    'value': '{{ csrf_token() }}'
                }));
                
                form.append($('<input>', {
                    'type': 'hidden',
                    'name': '_method',
                    'value': 'DELETE'
                }));
                
                $('body').append(form);
                form.submit();
            }
        });
    });
});
</script>
@endsection