@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-7">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">Grades</h5>
                    </div>
                    {{-- <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <a href="{{ route('grade.create') }}" class="btn btn-primary add-btn"><i class="ri-add-line align-bottom me-1"></i> Add New grade</a>
                        </div>
                    </div> --}}
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <form action="{{ route('grade.index') }}" method="GET" id="filter_form">
                    <div class="row g-3 justify-content-end">
                        <div class="col-xxl-5 col-sm-3">
                            <div class="search-box">
                                <input type="text" name="search" class="form-control search"placeholder="Type name & Enter..." value="{{ request('search') }}"><i class="las la-search search-icon" ></i>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                       
                    </ul>

                    <div class="table-responsive table-card mb-1">
                        <table class="table table-nowrap align-middle" id="orderTable">
                            <thead class="text-muted table-light">
                                <tr class="text-uppercase">
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all rnsTable">
                                @if($grades->isNotEmpty())
                                @foreach($grades as $key => $grade)
                                    <tr>
                                        <td class="id">{{ ($key+1) + ($grades->currentPage() - 1)*$grades->perPage() }}</td>
                                        
                                        <td>{{ $grade->name }}</td>
                                        <td>
                                            <ul class="list-inline hstack gap-2 mb-0">
                                                <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Edit">
                                                    <a href="{{ route('grade.edit', encrypt($grade->id)) }}" class="text-primary d-inline-block edit-item-btn">
                                                        <i class="ri-pencil-fill fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Report">
                                                    <a href="{{ route('grade.edit', encrypt($grade->id)) }}" data-id="{{$grade->id}}" class="text-primary d-inline-block edit-item-btn report" data-bs-toggle="modal" data-bs-target="#reprtDate">
                                                        <i class="ri-bar-chart-line fs-16"></i>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                    data-bs-placement="top" title="Remove">
                                                    <a class="text-danger d-inline-block remove-item-btn confirm-delete" data-bs-toggle="modal"href="#deleteRecordModal" data-href="{{route('grade.destroy', encrypt($grade->id))}}">
                                                        <i class="ri-delete-bin-5-fill fs-16"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-end">
                        <div class="pagination-wrap hstack gap-2">
                            <ul class="pagination listjs-pagination mb-0">
                                {{ $grades->appends(request()->input())->links() }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ translate('Grade Details') }}</h4>
            </div>
            <div class="card-body">
            <form action="{{ route('grade.store') }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                @if(\Auth::user()->user_type == 'admin')
                    <div class="row mb-3">
                        <div class="col-lg-3">
                            <label for="school_id" class="form-label">{{ translate('Select School') }}</label>
                        </div>
                        <div class="col-lg-9">
                            <select title="Select School" name="school_id" id="school_id" class="form-control rns-selectpicker @error('school_id') is-invalid @enderror">
                                @if($schools->isNotEmpty())
                                    @foreach ($schools as $value)
                                        <option value="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                            @error('school_id')
                                <span class="invalid-feedback">{{$message}}</span>
                            @enderror
                        </div>
                    </div>
                @endif
                <x-input-component name="name" label="Grade Name" value="" type="text" :required="1"/>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <label for="description" class="form-label">{{ translate('Description') }}</label>
                    </div>
                    <div class="col-lg-9">
                        <textarea name="description" class="form-control" id="description" rows="3" placeholder="Description">{{old('description')}}</textarea>
                    </div>
                </div>
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">Add Grade</button>
                </div>
            </form>
            </div>
        </div>
    </div>
    <!--end col-->
</div>
@endsection
@section('modal')
@include('backend.modals.delete')
<!-- Grids in modals -->
<div class="modal fade" id="reprtDate" tabindex="-1" aria-labelledby="reprtDateLabel" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- <div class="modal-header">
                <h5 class="modal-title" id="reprtDateLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div> -->
            <div class="modal-body">
                <form action="{{route('report.exam-wise')}}" method="POST"> 
                    @csrf
                    <input type="hidden" name="grade_id" id="grade_id">
                    <div class="row g-3">
                        <div class="col-xxl-12">
                            <div>
                                <label for="firstName" class="form-label">Choose Date For Report</label>
                                <input type="text" name="date" class="form-control border-1 flatpickr-input active" data-provider="flatpickr" data-date-format="Y-m-d" readonly="readonly" placeholder="Choose Date" value="" required>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        $(document).ready(function(){

            $('.report').click(function(){
                var grade_id = $(this).data('id');
                $('#grade_id').val(grade_id);
                $('#reprtDate').modal('show');
            })
        })
    </script>
@endsection