@extends('layouts.admin')

@section('styles')
@endsection


@section('content')
    <div class="container-fluid">

        <style>
            .table thead tr td {
                padding: 0px 0px 15.2px 0px;
            }
        </style>

        <div class="row">

            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-10">
                                @include('elements.admin-breadcrumb')
                            </div>
                            <div class="col-2 text-end">
                                <a class="btn btn-primary" href="{{ route('admin.export.extraPracticalHourReport') }}"><i class="fa-solid fa-file-export"></i> Export</a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        @include('elements.alert')

                        <form class="mb-15" id="kt_Location_delete" action="" method="POST">
                            @csrf
                            @method('post')

                            <table id="common_datatable" class="table table-striped w-100"
                                data-column="id,student_name,practical_session,amount,time,payment_status,booking_status,created_at"
                                data-column-name="id,student_name,practical_session,amount,time,payment_status,booking_status,created_at"
                                data-extra-param=""
                                data-extra-param-name=""
                                data-control="{{ route('admin.extra-practical-hours.list') }}" data-sorting="5"
                                data-sorting-type="DESC" data-serial-number="1" data-except-sorting-columns="9"
                                role="grid" aria-describedby="common_datatable_info">
                                <thead>
                                    <tr>
                                        <th>
                                            <input class="form-check-input" type="checkbox" name="checkAll" id="checkAll">
                                        </th>
                                        <th>Student</th>
                                        <th>Practical Session</th>
                                        <th>Amount</th>
                                        <th>Time(Min.)</th>
                                        <th>Payment Status</th>
                                        <th>Booking Status</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                    </div>
                    </form>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div> <!-- end row-->

    </div>

@endsection

@section('scripts')

@endsection