@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Students</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
    .edit:hover {
        color: #fff !important;
        background-color: blue !important;
        border-color: #696cff !important;
        border-radius: 5px !important;
    }

    .delete:hover {
        color: #fff !important;
        background-color: #E3242B !important;
        border-color: #E3242B !important;
        border-radius: 5px !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }

    .syllabus-content {
        display: flex;
        flex-wrap: wrap;
    }

    body {
        background-color: #f8f9fa;
    }

    .card {
        background-color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .card:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

    .text-primary {
        color: #007bff;
    }

    h4 {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .card-title {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .card-text {
        font-size: 1rem;
        color: #555;
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .modal-content {
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .modal-title {
        color: #007bff;
    }

    .read-more-link {
        color: #007bff;
        cursor: pointer;
        text-decoration: none;
    }

    .read-more-link:hover {
        color: #0056b3;
    }
</style>

@section('main-content')
<div style="margin-left:30px; margin-top:20px; height:70px">
    <div id="alert" class="col-md-3">
        @if(Session::has('success'))
        <div class="alert alert-primary" role="alert">
            {{Session::get('success')}}
        </div>
        @endif

        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>
</div>

<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Student /</span> Records</h4>

        <div class="row mb-5">
            @if(!empty($batchdetail))
            <div class="col-12">
                <h4 class="text-center text-primary mb-4">Student Batch Details</h4>
            </div>

            @foreach($batchdetail as $detail)
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ $detail->name }}</h5>
                        <p class="card-text"><strong>Class Name:</strong> {{ $detail->class_name }}</p>
                        @if($detail->subject_name)
                        <p class="card-text"><strong>Subject:</strong> {{ $detail->subject_name }}</p>
                        @endif
                        <p class="card-text"><strong>Batch Start Time:</strong> {{ \Carbon\Carbon::parse($detail->start_time)->format('g:i A') }}</p>
                        <p class="card-text"><strong>Batch End Time:</strong> {{ \Carbon\Carbon::parse($detail->end_time)->format('g:i A') }}</p>
                        <div class="content">
                            <div class="syllabus-content">
                                <strong>Syllabus: </strong>
                                                                {!! $trimmedContent !!}

                                                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @else
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <h4 class="card-title text-primary mb-4">Student Batch Details</h4>
                        <p class="card-text text-muted">No batch details available.</p>
                    </div>
                </div>
            </div>
            @endif
        </div>

        @foreach($batchdetail as $detail)
                @endforeach
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
@endsection