@extends('dashlayouts.app')
@section('content')

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
    }
    th {
        background-color: #f4f4f4;
        color: #333;
    }
    td {
        vertical-align: top;
    }
    .slot {
        font-weight: bold;
        background-color: #e0e0e0;
    }
    .empty-cell {
        background-color: #ffffff;
    }
    
    .card-body-free {
            position: relative;
            overflow: hidden;
        }

        .card-body-free .content {
            filter: blur(4px);
            pointer-events: none;
            user-select: none;
        }

        .card-body-free .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            font-weight: bold;
            text-align: center;
        }
</style>

<div class="pagetitle">
    <h1>Murid</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Murid</a></li>
            <li class="breadcrumb-item active">{{ $student->student_name }}</li>
        </ol>
    </nav>
</div>
<section class="section dashboard">
    <div class="row">
        <div class="col-lg-8">
            <div class="row">
            @include('errors')
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title" style="margin-bottom: 0;">Maklumat Murid</h5>
                        </div>
                        <div class="card-body" style="padding: 1.5rem;">
                            <div class="row" style="margin-right: 1.5rem; display: flex; align-items: center;">
                                <div class="col-sm-12 col-12"> <!-- Use col-12 for small screens -->
                                    <div class="row">
                                        <div class="col-sm-4 col-12 mb-3"> <!-- Make each column full width on small screens -->
                                            @if($student->image_path)
                                            <img src="{{ asset($student->image_path) }}" alt="Student Image" class="img-fluid rounded-start" style="border: 1px solid #dee2e6;">
                                        @else
                                            <img src="{{ asset('img/defaultphoto.png') }}" alt="Student Image" class="img-fluid rounded-start">
                                        @endif
                                        </div>
                                        <div class="col-sm-8 col-12 mb-3"> <!-- Make each column full width on small screens -->
                                            <div class="row">
                                                <h6 style="margin-bottom: 0.5rem;">Nama Murid: {{ $student->student_name }}</h6>
                                            </div>
                                            <div class="row">
                                                <h6 style="margin-bottom: 0.5rem;">ID Murid: {{ $student->student_id }}</h6>
                                            </div>
                                            <div class="row">
                                                <h6 style="margin-bottom: 0.5rem;">Sekolah: {{ $student->nama_pusat }}</h6>
                                            </div>
                                            <div class="row">
                                                <h6 style="margin-bottom: 0.5rem;">Serial Kad: {{ $student->serial_no }}</h6>
                                            </div>
                                            <div class="row">
                                                <h6 style="margin-bottom: 0.5rem;">Status Kehadiran:</h6>
                                            <p style="margin-bottom: 0;">
                                                @if ($student->attendance_status == 0)
                                                    <span class="badge bg-success">Aktif</span>
                                                @elseif ($student->attendance_status == 1)
                                                    <span class="badge bg-warning">1/3</span>
                                                @elseif ($student->attendance_status == 2)
                                                    <span class="badge bg-warning">2/3</span>
                                                @elseif ($student->attendance_status == 3)
                                                    <span class="badge bg-danger">3/3 - AMARAN </span>
                                                @endif
                                            </p>
                                            </div>
                                        </div>
                                    </div>
                                    @if( $flag_replacement == 1 )
                                    <div class="row">
                                        <div class="col-sm-6 col-12 mb-3">
                                            {{-- <a href="{{ route('card.repshow', $student->student_id) }}" class="btn btn-primary btn-sm mt-3">Gantian Kad</a> --}}
                                            <a href="{{ route('card.repindex', $student->student_id) }}" class="btn btn-primary btn-sm mt-3">Gantian Kad</a>
                                        </div>
                                    </div>
                                    @endif
                                    {{-- <div class="row">
                                        <div class="col-sm-6 col-12 mb-3">
                                            <a href="{{ route('card.repshow', $student->student_id) }}" class="btn btn-primary btn-sm mt-3">Gantian Kad</a>
                                        </div>
                                    </div> --}}
                                </div>
                               
                                {{-- <div class="col-sm-3 col-12 text-center mb-3"> <!-- Center the logo on small screens -->
                                    @if(session('logoPath'))
                                        <img src="{{ asset(session('logoPath')) }}" alt="School Logo" style="border-radius: 50%; border: 2px solid #dee2e6; max-width: 60%;">
                                    @endif
                                </div> --}}
                            </div>
                        </div>                        
                    </div>
                    
                </div>
                <!-- Reports -->
                <div class="col-12">
                    <div class="card">
                        <div class="filter">
                            <a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                            <li class="dropdown-header text-start">
                                <h6>Filter</h6>
                            </li>

                            <li><a class="dropdown-item" href="#">Hari Ini</a></li>
                            <li><a class="dropdown-item" href="#">Bulan Ini</a></li>
                            <li><a class="dropdown-item" href="#">Tahun Ini</a></li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Laporan <span>/ Tersedia</span></h5>
                            <ul>
                                <li>
                                    <a href="{{ route('report.dailyattendancereport', ['id' => $student->student_id]) }}">
                                    {{-- <span>Laporan Kehadiran Harian ({{ \Carbon\Carbon::now()->subMonth()->format('Y-m') }})</span> --}}
                                    <span>Laporan Kehadiran Harian</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div><!-- End Reports -->

                <!-- Reports -->
                <div class="col-12">
                    <div class="card">
                    <div class="filter">
                    <a class="icon" href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></a>
                        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                            <li><a class="dropdown-item" href="{{ route('student.printtimetable')}}">Simpan PDF</a></li>
                        </ul>
                    </div>
                    <div class="card-header">
                        Jadual Kelas Murid - 2025/{{ $student->kod_pusat}}/{{ $student->kelas}} 
                    </div>
                    @if(session('subscription_type') == 'PREMIUM')
                        <div class="card-body py-2 table-responsive">
                            <table class="table-sm overflow-auto">
                                <thead>
                                    <tr>
                                        <th class="col-2" style="font-size: 12px;">Waktu</th>
                                        @foreach($weekdays as $day)
                                            <th class="col-2" style="font-size: 12px;">{{ $day }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $startTime = \Carbon\Carbon::createFromTimeString('07:00');
                                        $endTime = \Carbon\Carbon::createFromTimeString('18:30');
                                        $currentTime = $startTime->copy();
                                    @endphp
                    
                                    @while ($currentTime->lte($endTime))
                                        @php
                                            $nextTime = $currentTime->copy()->addMinutes(30);
                                        @endphp
                                        <tr>
                                            <td class="slot align-content-center" style="font-size: 12px;">{{ $currentTime->format('H:i') }} - {{ $nextTime->format('H:i') }}</td>
                                            @foreach($weekdays as $day)
                                                @php
                                                    $session = $class_sessions[$day]->filter(function ($session) use ($currentTime, $nextTime) {
                                                        $start = \Carbon\Carbon::createFromFormat('H:i:s', $session->mula_kelas);
                                                        $end = \Carbon\Carbon::createFromFormat('H:i:s', $session->tamat_kelas);
                                                        return ($start->lt($nextTime) && $end->gt($currentTime));
                                                    })->first();
                                                @endphp
                                                @if ($session)
                                                    @php
                                                        $color = $color_map[$session->code_sub] ?? '#ffffff'; // Default color if not found
                                                    @endphp
                                                    <td class="class-session" style="background-color: {{ $color }}; font-size: 10px;">
                                                        <div><b>{{ $session->code_sub }}</b></div>
                                                        {{-- <div><b>{{ $session->subjek }}</b></div> --}}
                                                        <div>{{ $session->teacher_id }}</div>
                                                    </td>
                                                @else
                                                    <td class="empty-cell">
                                                        <div></div>
                                                    </td>
                                                @endif
                                            @endforeach
                                        </tr>
                                        @php
                                            $currentTime = $nextTime;
                                        @endphp
                                    @endwhile
                                </tbody>
                            </table>
                        </div>
                    @else
                    <div class="card-body card-body-free py-2 table-responsive">
                        <div class="content">
                            <table class="table-sm overflow-auto">
                                <thead>
                                    <tr>
                                        <th class="col-2" style="font-size: 12px;">Waktu</th>
                                        @foreach($weekdays as $day)
                                            <th class="col-2" style="font-size: 12px;">{{ $day }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $startTime = \Carbon\Carbon::createFromTimeString('07:00');
                                        $endTime = \Carbon\Carbon::createFromTimeString('18:30');
                                        $currentTime = $startTime->copy();
                                    @endphp
                    
                                    @while ($currentTime->lte($endTime))
                                        @php
                                            $nextTime = $currentTime->copy()->addMinutes(30);
                                        @endphp
                                        <tr>
                                            <td class="slot align-content-center" style="font-size: 12px;">{{ $currentTime->format('H:i') }} - {{ $nextTime->format('H:i') }}</td>
                                            @foreach($weekdays as $day)
                                                @php
                                                    $session = $class_sessions[$day]->filter(function ($session) use ($currentTime, $nextTime) {
                                                        $start = \Carbon\Carbon::createFromFormat('H:i:s', $session->mula_kelas);
                                                        $end = \Carbon\Carbon::createFromFormat('H:i:s', $session->tamat_kelas);
                                                        return ($start->lt($nextTime) && $end->gt($currentTime));
                                                    })->first();
                                                @endphp
                                                @if ($session)
                                                    @php
                                                        $color = $color_map[$session->code_sub] ?? '#ffffff'; // Default color if not found
                                                    @endphp
                                                    <td class="class-session" style="background-color: {{ $color }}; font-size: 10px;">
                                                        <div><b>{{ $session->code_sub }}</b></div>
                                                        {{-- <div><b>{{ $session->subjek }}</b></div> --}}
                                                        <div>{{ $session->teacher_id }}</div>
                                                    </td>
                                                @else
                                                    <td class="empty-cell">
                                                        <div></div>
                                                    </td>
                                                @endif
                                            @endforeach
                                        </tr>
                                        @php
                                            $currentTime = $nextTime;
                                        @endphp
                                    @endwhile
                                </tbody>
                            </table>
                        </div>
                        <div class="overlay">
                            Naiktaraf ke PREMIUM untuk konten penuh &nbsp;<img src="{{ asset('img/premium.png') }}" alt="Premium" class="img-fluid" style="max-width: 26px;">
                        </div>
                    </div>
                    @endif
                    </div>
                </div><!-- End Reports -->
            </div>
        </div>
        <div class="col-lg-4">
            <div class="row">
                <div class="col">
                    <!-- Recent Activity -->
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Menu Utama <span>| {{ $student->student_name }}</span></h5>
                            <div class="activity">
                                <div class="btn-group-vertical col-12" role="group">
                                    <a type="button" href="{{ route('parent.kiddailyattendance', ['id' => $student->student_id]) }}" class="text-start btn btn-outline-primary">Rekod Kehadiran Harian</a>
                                    <a type="button" href="{{ route('parent.kidattendance', ['id' => $student->student_id]) }}" class="text-start btn btn-outline-primary">Rekod Kehadiran Kelas</a>
                                    {{-- <a type="button" href="{{ route('parent.kidcurricularattendance', ['id' => $student->student_id]) }}" class="text-start btn btn-outline-primary">Rekod Kehadiran Kokurikulum</a> --}}
                                  
                                @if(session('subscription_type') == 'PREMIUM')
                                    <div class="btn-group" role="group">
                                      <button id="btnGroupDrop1" type="button" class="btn btn-outline-primary dropdown-toggle text-start " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Menu Keluar Asrama (Outing)
                                      </button>
                                      <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="{{ route('outing.kidapply', ['id' => $student->student_id]) }}">Mohon Keluar Asrama (Outing)</a>
                                        <a class="dropdown-item" href="{{ route('parent.kidoutlist', ['id' => $student->student_id]) }}">Semak Status Permohonan</a>
                                        <a class="dropdown-item" href="{{ route('parent.kidoutrecord', ['id' => $student->student_id]) }}">Rekod Keluar Asrama (Outing)</a>
                                      </div>
                                    </div>
                                @else
                                    <div class="btn-group" role="group">
                                        <button id="btnGroupDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle text-start disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Please upgrade">
                                            <img src="{{ asset('img/premium.png') }}" alt="Premium" class="img-fluid" style="max-width: 20px;"> Naiktaraf ke PREMIUM
                                        </button>
                                    </div>                                
                                @endif
                                  </div>
                            </div>
                        </div>
                    </div>
                </div><!-- End Recent Activity -->
            </div>
            <div class="row">
                <div class="col">
                    <!-- Recent Activity -->
                    <div class="card">
                        @if(session('subscription_type') == 'PREMIUM')
                        <div class="card-body">
                            <h5 class="card-title">Sesi Kelas Murid <span>| Timeline</span></h5>
                            <div class="activity">
                
                                @if($class_session->isEmpty())
                                <p>Tiada sesi kelas hari ini.</p>
                                @else
                                    @foreach($class_session as $cs)
                                        <div class="activity-item d-flex">
                                            <div class="activite-label col-3">{{ \Carbon\Carbon::parse($cs->mula_kelas)->format('H:i') }} - {{ \Carbon\Carbon::parse($cs->tamat_kelas)->format('H:i')  }}</div>
                                            @if(\Carbon\Carbon::parse(now())->format('h:i A') > $cs->mula_kelas)
                                                <i class='bi bi-circle-fill activity-badge text-success align-self-start'></i>
                                            @else
                                                <i class='bi bi-circle-fill activity-badge text-primary align-self-start'></i>
                                            @endif
                                            <div class="activity-content">
                                                {{ $cs->subjek }}
                                            </div>
                                        </div><!-- End activity item-->
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        @else
                        <div class="card-body card-body-free">
                            <h5 class="card-title">Sesi Kelas Murid <span>| Timeline</span></h5>
                            <div class="content">
                                <div class="activity">
                                    @if($class_session->isEmpty())
                                    <p>Tiada sesi kelas hari ini.</p>
                                    @else
                                        @foreach($class_session as $cs)
                                            <div class="activity-item d-flex">
                                                <div class="activite-label col-3">{{ \Carbon\Carbon::parse($cs->mula_kelas)->format('H:i') }} - {{ \Carbon\Carbon::parse($cs->tamat_kelas)->format('H:i')  }}</div>
                                                @if(\Carbon\Carbon::parse(now())->format('h:i A') > $cs->mula_kelas)
                                                    <i class='bi bi-circle-fill activity-badge text-success align-self-start'></i>
                                                @else
                                                    <i class='bi bi-circle-fill activity-badge text-primary align-self-start'></i>
                                                @endif
                                                <div class="activity-content">
                                                    {{ $cs->subjek }}
                                                </div>
                                            </div><!-- End activity item-->
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="overlay">
                                Naiktaraf ke PREMIUM &nbsp;<img src="{{ asset('img/premium.png') }}" alt="Premium" class="img-fluid" style="max-width: 26px;">
                            </div>
                        </div>
                        @endif
                    </div>
                </div><!-- End Recent Activity -->
            </div>
            <div class="row">
                <div class="col">
                    <!-- Recent Activity -->
                    <div class="card">
                        @if(session('subscription_type') == 'PREMIUM')
                            <div class="card-body">
                                <h5 class="card-title">Aktiviti Korikulum Murid <span>| Kalendar</span></h5>
                                <div class="activity">
                    
                                    @if($cc_session->isEmpty())
                                    <p>Tiada aktiviti kokurikulum</p>
                                    @else
                                        @foreach($cc_session as $cc)
                                            <div class="activity-item d-flex">
                                                <div class="activite-label col-3">
                                                {{ \Carbon\Carbon::parse($cc->start_date)->format('d-m-Y') }}</div>
                                                @if(\Carbon\Carbon::parse(now())->format('Y-m-d') > $cc->start_date)
                                                    <i class='bi bi-circle-fill activity-badge text-success align-self-start'></i>
                                                @else
                                                    <i class='bi bi-circle-fill activity-badge text-primary align-self-start'></i>
                                                @endif
                                                <div class="activity-content">
                                                    {{$cc->kod_sub }} - {{ $cc->desc_sub }}
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        @else
                            <div class="card-body card-body-free">
                                <h5 class="card-title">Aktiviti Korikulum Murid <span>| Kalendar</span></h5>
                                <div class="content">
                                    <div class="activity">
                                        @if($cc_session->isEmpty())
                                        <p>Tiada aktiviti kokurikulum</p>
                                        @else
                                            @foreach($cc_session as $cc)
                                                <div class="activity-item d-flex">
                                                    <div class="activite-label col-3">
                                                    {{ \Carbon\Carbon::parse($cc->start_date)->format('d-m-Y') }}</div>
                                                    @if(\Carbon\Carbon::parse(now())->format('Y-m-d') > $cc->start_date)
                                                        <i class='bi bi-circle-fill activity-badge text-success align-self-start'></i>
                                                    @else
                                                        <i class='bi bi-circle-fill activity-badge text-primary align-self-start'></i>
                                                    @endif
                                                    <div class="activity-content">
                                                        {{$cc->kod_sub }} - {{ $cc->desc_sub }}
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                                <div class="overlay">
                                    Naiktaraf ke PREMIUM &nbsp;<img src="{{ asset('img/premium.png') }}" alt="Premium" class="img-fluid" style="max-width: 26px;">
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    @if (session('complaintmsg'))
                        <div class="alert alert-success fade show small" role="alert">
                        {{ session('complaintmsg') }}
                        </div>
                    @endif
                    <!-- Recent Activity -->
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">e-Aduan <span class="text-muted">| Hantar Aduan ke Sekolah</span></h5>
                            <form action="{{ route('parent.submitcomplaintform')}}" method="POST" data-parsley-validate="">
                                @csrf
                                <div class="form-group mb-3">
                                    <label for="complaintTitle">Tajuk</label>
                                    <select type="text" name="title" id="complaintTitle" class="form-control" required>
                                      <option value="" disabled selected>Sila Pilih</option>
                                      <option value="Report">Lapor</option>
                                      <option value="Opinion">Pendapat</option>
                                    </select>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="complaintDescription">Aduan</label>
                                    <textarea name="complaint" id="complaintDescription" class="form-control" rows="6" placeholder="Describe your complaint here..." required></textarea>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="anonymousCheck" name="is_anonymous">
                                    <label class="form-check-label" for="anonymousCheck">
                                        Hantar Tanpa Nama
                                    </label>
                                </div>
                                <input type="hidden" name="is_student" value="1">
                                <input type="hidden" name="student_id" value="{{ $student->student_id }}">
                                <div class="text-end">
                                    <button type="submit" class="btn btn-sm btn-primary">Hantar Aduan</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </div>
  </section>
  
<style>
    .outing-dropdown {
        position: relative;
        display: inline-block;
    }

    .outing-dropdown-content {
        display: none;
        position: absolute;
        text-align: left;
        font-size: 14px;
        background-color: #f9f9f9;
        min-width: 140px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .outing-dropdown-content a {
        display: block;
        padding: 4px 8px;
        text-decoration: none;
        color: #333;
    }

    .outing-dropdown-content a:hover {
        background-color: #f2f2f2;
    }

    .outing-dropdown:hover .outing-dropdown-content {
        display: block;
    }
    
    .btn-group:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* ensures the menu is aligned correctly */
    }

    .attendance-dropdown {
        position: relative;
        display: inline-block;
    }

    .attendance-dropdown-content {
        display: none;
        position: absolute;
        text-align: left;
        font-size: 14px;
        background-color: #f9f9f9;
        min-width: 140px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .attendance-dropdown-content a {
        display: block;
        padding: 4px 8px;
        width: 160px;
        text-decoration: none;
        color: #333;
    }

    .attendance-dropdown-content a:hover {
        background-color: #f2f2f2;
    }

    .attendance-dropdown:hover .attendance-dropdown-content {
        display: block;
    }
    
    .btn-group:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* ensures the menu is aligned correctly */
    }
    
</style>
@endsection