@extends('ortu.layout')

@section('content')

<div class="card-box">

    <h5 class="mb-4">
        Riwayat Absensi Mahasiswa -
        <span class="text-gradient">
            {{ $mahasiswa->nama ?? '-' }}
        </span>
    </h5>

    {{-- FILTER --}}
    <form method="GET">

        <div class="row mb-3">

            <div class="col-md-4">
                <input
                    type="date"
                    name="tanggal"
                    class="form-control"
                    value="{{ request('tanggal') }}"
                    required>
            </div>

            <div class="col-md-4">

                <button class="btn btn-custom">
                    Tampilkan
                </button>

                <button
                    type="button"
                    class="btn btn-custom"
                    onclick="location.reload()">
                    ↻ Refresh
                </button>

            </div>

        </div>

    </form>


    {{-- TABEL --}}
    @if(request()->tanggal)

    <div class="table-responsive">

        <table class="table table-bordered">

            <thead>

                <tr class="text-center">

                    <th>No</th>
                    <th>Tanggal</th>
                    <th>Blok</th>
                    <th>Mata Kuliah</th>
                    <th>Masuk</th>
                    <th>Keluar</th>
                    <th>Foto Masuk</th>
                    <th>Foto Keluar</th>
                    <th>Status</th>

                </tr>

            </thead>


            <tbody>

                @forelse($data as $d)

                <tr class="text-center">

                    <td>
                        {{ $loop->iteration }}
                    </td>


                    <td>
                        {{ \Carbon\Carbon::parse($d->tanggal)->format('d-m-Y') }}
                    </td>


                    <td>
                        {{ $d->blok }}
                    </td>


                    <td>
                        {{ $d->matakuliah }}
                    </td>


                    <td>
                        {{ $d->waktu_masuk
                            ? date('H:i', strtotime($d->waktu_masuk))
                            : '-' }}
                    </td>


                    <td>
                        {{ $d->waktu_keluar
                            ? date('H:i', strtotime($d->waktu_keluar))
                            : '-' }}
                    </td>


                    {{-- ================================================= --}}
                    {{-- FOTO MASUK --}}
                    {{-- ================================================= --}}

                    <td>

                        @if($d->foto_masuk)

                        @if(filter_var($d->foto_masuk, FILTER_VALIDATE_URL))

                        {{-- FOTO ONLINE --}}
                        <a
                            href="{{ $d->foto_masuk }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="btn btn-sm btn-outline-primary">
                            🔗 Lihat Foto
                        </a>

                        @else

                        {{-- FOTO OFFLINE --}}
                        <img
                            src="{{ asset('upload/absensi/' . $d->foto_masuk) }}"
                            width="50"
                            height="50"
                            style="
                                        cursor:pointer;
                                        object-fit:cover;
                                        border-radius:6px;
                                    "
                            onclick="showImage(
                                        '{{ asset('upload/absensi/' . $d->foto_masuk) }}'
                                    )">

                        @endif

                        @else

                        -

                        @endif

                    </td>


                    {{-- ================================================= --}}
                    {{-- FOTO KELUAR --}}
                    {{-- ================================================= --}}

                    <td>

                        @if($d->foto_keluar)

                        @if(filter_var($d->foto_keluar, FILTER_VALIDATE_URL))

                        {{-- FOTO ONLINE --}}
                        <a
                            href="{{ $d->foto_keluar }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="btn btn-sm btn-outline-primary">
                            🔗 Lihat Foto
                        </a>

                        @else

                        {{-- FOTO OFFLINE --}}
                        <img
                            src="{{ asset('upload/absensi/' . $d->foto_keluar) }}"
                            width="50"
                            height="50"
                            style="
                                        cursor:pointer;
                                        object-fit:cover;
                                        border-radius:6px;
                                    "
                            onclick="showImage(
                                        '{{ asset('upload/absensi/' . $d->foto_keluar) }}'
                                    )">

                        @endif

                        @else

                        -

                        @endif

                    </td>


                    {{-- ================================================= --}}
                    {{-- STATUS --}}
                    {{-- ================================================= --}}

                    <td>

                        <span class="badge bg-success">
                            {{ $d->status }}
                        </span>

                    </td>

                </tr>


                @empty

                <tr>

                    <td colspan="9" class="text-center">
                        Tidak ada data
                    </td>

                </tr>

                @endforelse

            </tbody>

        </table>


        {{-- ================================================= --}}
        {{-- MODAL PREVIEW FOTO OFFLINE --}}
        {{-- ================================================= --}}

        <div
            class="modal fade"
            id="modalImage"
            tabindex="-1">

            <div class="modal-dialog modal-dialog-centered modal-lg">

                <div class="modal-content">

                    <div class="modal-body text-center">

                        <img
                            id="previewImage"
                            src=""
                            class="img-fluid"
                            alt="Foto Absensi">

                    </div>

                </div>

            </div>

        </div>

    </div>

    @endif

</div>


@section('scripts')

<script>
    function showImage(src) {

        document.getElementById('previewImage').src = src;

        new bootstrap.Modal(
            document.getElementById('modalImage')
        ).show();

    }
</script>

@endsection

@endsection