@extends('mahasiswa.layout')

@section('content')

<div class="card-box">

    <h5 class="mb-3">Riwayat Absensi</h5>

    {{-- FILTER --}}
    <form method="GET" class="row mb-3">

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

            <select name="id_blok" id="blok" class="form-control">

                <option value="">Pilih Blok</option>

                @foreach($blok as $b)

                <option
                    value="{{ $b->id }}"
                    {{ request('id_blok') == $b->id ? 'selected' : '' }}>
                    {{ $b->nama_blok }}
                </option>

                @endforeach

            </select>

        </div>


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

            <select
                name="id_matakuliah"
                id="matakuliah"
                class="form-control">

                <option value="">Pilih Mata Kuliah</option>

            </select>

        </div>


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

            <input
                type="date"
                name="tanggal"
                value="{{ request('tanggal') }}"
                class="form-control">

        </div>


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

            <button class="btn btn-custom w-100">
                Tampilkan Riwayat
            </button>

        </div>

    </form>


    {{-- TABEL --}}

    @if(request()->tanggal || request()->id_matakuliah || request()->id_blok)

    <div class="table-responsive">

        <table
            class="table table-modern"
            id="tableRiwayat">

            <thead>

                <tr>

                    <th>No</th>

                    <th>Tanggal</th>

                    <th>Mata Kuliah</th>

                    <th>Blok</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>

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


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


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


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


                    <td>
                        {{
                                    $d->waktu_masuk
                                    ? \Carbon\Carbon::parse($d->waktu_masuk)->format('H:i')
                                    : '-'
                                }}
                    </td>


                    <td>
                        {{
                                    $d->waktu_keluar
                                    ? \Carbon\Carbon::parse($d->waktu_keluar)->format('H:i')
                                    : '-'
                                }}
                    </td>


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

                    <td class="text-center">

                        @if($d->foto_masuk)

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

                        {{-- FOTO ONLINE GOOGLE DRIVE --}}

                        <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 class="text-center">

                        @if($d->foto_keluar)

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

                        {{-- FOTO ONLINE GOOGLE DRIVE --}}

                        <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">
                            {{ ucfirst($d->status) }}
                        </span>

                    </td>

                </tr>


                @empty

                <tr>

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

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>


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

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

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

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Foto Absensi
                    </h5>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Tutup"></button>

                </div>


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

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

                </div>

            </div>

        </div>

    </div>

    @else

    {{-- BELUM FILTER --}}

    <div class="text-center text-muted mt-4">

        <i data-feather="filter"></i>

        <br>

        Silakan pilih filter terlebih dahulu

    </div>

    @endif

</div>

@endsection


@section('scripts')

<script>
    /*
    |--------------------------------------------------------------------------
    | PREVIEW FOTO OFFLINE
    |--------------------------------------------------------------------------
    */

    function showImage(src) {

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

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

    }


    /*
    |--------------------------------------------------------------------------
    | DATATABLE
    |--------------------------------------------------------------------------
    */

    $(document).ready(function() {

        if ($('#tableRiwayat').length) {

            $('#tableRiwayat').DataTable();

        }


        /*
        |--------------------------------------------------------------------------
        | LOAD MATA KULIAH
        |--------------------------------------------------------------------------
        */

        $('#blok').on('change', function() {

            let id_blok = $(this).val();


            $('#matakuliah').html(
                '<option value="">-- Mata Kuliah --</option>'
            );


            if (id_blok) {

                $('#matakuliah').html(
                    '<option value="">Loading...</option>'
                );


                $.ajax({

                    url: '/get-matakuliah/' + id_blok,

                    type: 'GET',

                    dataType: 'json',

                    success: function(data) {

                        let html =
                            '<option value="">-- Mata Kuliah --</option>';


                        data.forEach(function(item) {

                            html +=
                                `<option value="${item.id}">
                                    ${item.nama_mk}
                                </option>`;

                        });


                        $('#matakuliah').html(html);

                    },


                    error: function() {

                        $('#matakuliah').html(
                            '<option value="">Gagal load data</option>'
                        );

                    }

                });

            }

        });


        /*
        |--------------------------------------------------------------------------
        | PERTAHANKAN FILTER SETELAH SUBMIT
        |--------------------------------------------------------------------------
        */

        let selectedBlok = "{{ request('id_blok') }}";

        let selectedMatkul = "{{ request('id_matakuliah') }}";


        if (selectedBlok) {

            $('#blok')
                .val(selectedBlok)
                .trigger('change');


            setTimeout(function() {

                $('#matakuliah')
                    .val(selectedMatkul);

            }, 500);

        }

    });
</script>

@endsection