@extends('dashlayouts.app')

@section('content')

<div class="pagetitle">
    <h1>Your Outing Application</h1>
    <nav>
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
        <li class="breadcrumb-item active">Your Outing Application</li>
        </ol>
    </nav>
</div>

<seection class="section">
    <div class="row">
        <div class="container">
            @include('errors')
            <div class="row">
                <div id="inforeg" class="col-lg-12 col-md-6">
                    <div class="box" data-aos="none">
                        <div class="card mb-4">
                            <div class="card-header" style="background-color: #090d73">
                                <h2 class="card-title text-light">Student Information</h2>
                            </div>
                            <div class="card-body">
                                <p><strong>Student ID:</strong> {{ $student->student_id }}</p>
                                {{-- <p><strong>MARA No.:</strong> {{ $student->account_no }}</p> --}}
                                <p><strong>Student Name:</strong> {{ $student->student_name }}</p>
                                <p><strong>School:</strong> {{ $student->nama_pusat }}</p>
                                <p><strong>Form:</strong> {{ $student->tingkatan }}</p>
                                <p><strong>Class:</strong> {{ $student->kelas }}</p>
                                <p><strong>Outing Application Approved:</strong> {{ $student->outing_status }}</p>
                            </div>
                        </div>
                        <div class="card mb-3 shadow">
                            <div class="card-header pt-2 pb-0 px-3 text-white"
                                style="background-color: #090d73">
                                <p><b style="font-size: 22px;">List of Application </b> </p>
                            </div>
                            <div class="card-body">
                                <!-- Add filter buttons above the table -->
                                <div class="text-right mb-3">
                                    <button class="btn btn-primary filter-button" data-filter="ALL">All</button>
                                    <button class="btn btn-warning filter-button" data-filter="PENDING">Pending</button>
                                    <button class="btn btn-success filter-button" data-filter="APPROVE">Approve</button>
                                    <button class="btn btn-danger filter-button" data-filter="REJECT">Reject</button>
                                </div>
                                <div class="fdb-box py-3 mb-3">
                                    <div class="row justify-content">
                                        <div class="col my-0 py-0">
                                            <table class="table table-sm table-hover">
                                                <thead class="thead-light">
                                                    <tr>
                                                        <th scope="col" class="text-center">Bil.</th>
                                                        <th scope="col" class="text-justify">Date Applied</th>
                                                        <th scope="col" class="text-left">Reason</th>
                                                        <th scope="col" class="text-left">Outing Period</th>
                                                        <th scope="col" class="text-center">Approval</th>
                                                        <th scope="col" class="text-left">Approval By</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($outings as $outing)
                                                        <tr class="outing-row {{ $outing->appl_status }}">
                                                            <td class="text-center">{{ $loop->iteration }}.</td>
                                                            <td class="text-justify">{{ $outing->date_created }}</td>
                                                            <td class="text-left">{{ $outing->reason }}</td>
                                                            <td class="text-left">{{ $outing->start_date }} - {{ $outing->end_date }}</td>
                                                            <td class="text-center {{ $outing->appl_status === 'REJECT' ? 'text-danger' : ($outing->appl_status === 'APPROVE' ? 'text-success' : '') }}">{{ $outing->appl_status }}</td>
                                                            <td class="text-left">{{ $outing->approval_by ?? '-' }}</td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="6" class="text-center py-3">No outing application record found for this student.</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<!-- Add jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    // JavaScript code to handle filtering
    $(document).ready(function () {
        $(".filter-button").click(function () {
            var filterValue = $(this).data("filter");

            // Show all rows when 'ALL' is clicked
            if (filterValue === "ALL") {
                $(".outing-row").show();
            } else {
                // Hide all rows and then show only the ones with the selected filter value
                $(".outing-row").hide();
                $("." + filterValue).show();
            }
        });
    });
</script>
@endsection