@extends('student.layouts.app')
@section('titlePage', 'Azam_Notes')
@section('content')
<script>
    document.getElementById("ktss-2").classList.add("active");
</script>
<style>
    .boxs {
        position: absolute;
        width: 74px;
        height: 48px;
        background: #323639;
        right: 68px;
    }

    .card-img-top {
        /* width: 100%; */
        /* height: 100%; */
        max-height: 220px;
        display: block;
    }

    .container-image {
        flex: 1;
        box-sizing: border-box;

    }
</style>
<div class="row mt-3">
    <div class="col">
        <h4 class="text-primary font-weight-bold py-3 mb-0">
            Dr.Azam's <span class="text-secondary">Notes</span>
        </h4>
        <div class="card">
            <div class="card-body">
                @include('common.alert')
                <form class="form-inline" action="" method="GET">
                    <div class="form-group mr-2 mb-2">
                        <input type="text" value="{{request()->get('q')}}" class="form-control" name="q" placeholder="Enter ..." minlength="2">
                    </div>
                    <button type="submit" class="btn btn-primary mb-2" style="margin-left:5px;"><i class="fa fa-search"></i> Search</button>
                    <a href="{{ _route('student.Azam_Notes.notes')}}" class="btn btn-secondary mb-2" style="margin-left:5px;"><i class="fa fa-times"></i> Reset</a>
                </form>
                <div class="row" id="notes">
                @if(count($data)>0)
                    @foreach ($data as $item)
                    <div class="col-xl-6 col-md-12 d-flex justify-content-stretch">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="">
                                            <img class="card-img-top" src="{{$item->image}}" width="250px" height="210" alt="{{$item->title}}" onerror="this.src='{{asset('assets/b2c_img/paid_course.svg')}}'; this.alt='Image';">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="card-body">
                                            <h5 class="tx-muted font-weight-semibold text-primary mb-2 text-capitalize">{!! str_limit($item->title, 50) !!}</h5>
                                            <p>{!! str_limit($item->description, 50) !!}</p>
                                            <a href="{{ _route('student.Azam_Notes.detail', $item->notes_id) }}" class="btn btn-primary">View Note</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-xl-6 col-md-12 d-flex justify-content-stretch">
                                <div class="card pricing-card d-flex flex-row justify-content-between align-items-center">
                                    <div class="container-image">
                                        <img class="card-img-top" style="" src="{{$item->image}}" alt="{{$item->title}}" onerror="this.src='{{asset('assets/b2c_img/paid_course.svg')}}'; this.alt='Image';">
                                    </div>
                                    <div class="card-body">
                                        <h5 class="tx-muted font-weight-semibold text-primary mb-2 text-capitalize">{{ $item->title }}</h5>
                                        <p>{!! str_limit($item->description, 50) !!}</p>
                                        <a href="{{ _route('student.Azam_Notes.detail', $item->notes_id) }}" class="btn btn-primary">View Note</a>
                                    </div>
                                </div>
                            </div> -->
                    @endforeach
                    @else
                    <div class="row">
                            <h3 class="text-primary text-center">No Notes Founded</h3>
                        </div> 
                    @endif
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-4 col-lg-4 my-2 offset-sm-1">
                    Showing {{$data->firstItem()}} to {{$data->lastItem()}} of {{$data->total()}} Entries
                </div>
                <div class="col-md-7 col-lg-7">
                    <div class="pull-right">
                        {!! $data->appends(request()->all())->links() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>
    $(document).on('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && (e.key == "p" || e.charCode == 16 || e.charCode == 112 || e.keyCode == 80)) {
            alert("Please use the Print PDF button below for a better rendering on the document");
            e.cancelBubble = true;
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });

    document.addEventListener('keyup', (e) => {
        if (e.key == 'PrintScreen') {
            navigator.clipboard.writeText('');
            alert('Screenshots disabled!');
        }
    });
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    });
</script>
@endpush