@extends('layouts.app')

@section('styles')
<style>
    .sidebar .sidebar-brand {
        padding: 1rem;
        font-size: 1.2rem;
        text-align: center;
        background-color: #0B2C53;
        margin-bottom: 10px;
    }
    .sidebar .sidebar-brand img {
        max-width: 130px !important;
    }
    .sidebar a i {
        margin-right: 10px;
    }
    .page-item.active .page-link {
        color: #fff;
        background-color: #001d40 !important;
        border: none !important;
    }
    .page-link {
        color: #000 !important;
    }
    .manage-head {
        display: flex;
    }
    .manage-head a {
        margin-left: 20px;
    }
    .table {
        margin-top: 50px !important;
    }
    .sidebar .sidebar-brand {
        background-color: #ffffff4d;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: #001d40 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
   
    background: #fff !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
        color: #000 !important;
        background: #f8f9fa !important;
    }
    .dataTables_wrapper .dataTables_paginate{
        margin:10px 0px;
    }
    .dataTables_wrapper .dataTables_info{
        margin:10px 0px; 
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>Manage Grade</h2>
        <a href="{{ route('materials.create') }}" class="btn btn-primary">Add Grade</a>
    </div>
    
    <table id="usersTable" class="table table-bordered table-striped" style="width:100%;">
        <thead>
            <tr>
                <th>S.No.</th>
                <th>Material</th>
                <th>Grade</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($materials as $index => $material)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $material->material }}</td>
                <td>{{ $material->grade }}</td>
                <td>
                    <form action="{{ route('materials.destroy', $material->grade_id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this grade?');">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-danger" type="submit">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#usersTable').DataTable({
            pageLength: 10, 
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        });
    });
</script>
@endsection