@extends('layouts.app')
@section('title', 'Attendance')

@section('content')

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        Attendance
        <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">
            Log attendance manually
        </small>
    </h1>
</section>

<section class="content">

<!-- FILTER -->
<div class="box box-default">
    <div class="box-header with-border">
        <h3 class="box-title">Filter Attendance</h3>
    </div>

    <div class="box-body">
        <form method="GET" class="row">

            <div class="col-md-4">
                <label>Member</label>
                <select name="member_id" id="filter_member" class="form-control">
                    <option value="">All Members</option>
                    @foreach($members as $member)
                        <option value="{{ $member->contact_id }}"
                            {{ request('member_id') == $member->contact_id ? 'selected' : '' }}>
                            {{ $member->contact_id }} - {{ $member->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label>From Date</label>
                <input type="date" name="from_date" class="form-control"
                       value="{{ request('from_date') }}">
            </div>

            <div class="col-md-3">
                <label>To Date</label>
                <input type="date" name="to_date" class="form-control"
                       value="{{ request('to_date') }}">
            </div>

            <div class="col-md-2">
                <button type="submit" class="btn btn-primary tw-mt-4">
                    Filter
                </button>
            </div>

        </form>
    </div>
</div>

<!-- ATTENDANCE FORM -->
<!--<div class="box box-primary">-->
<!--    <div class="box-header with-border">-->
<!--        <h3 class="box-title">Mark Attendance</h3>-->
<!--    </div>-->

<!--    <div class="box-body">-->

<!--        <form action="{{ route('attendance.store') }}" method="POST">-->
<!--            @csrf-->

<!--            <div class="row">-->

<!--                <div class="col-md-4">-->
<!--                    <label>Member</label>-->
<!--                    <select name="member_id" id="member_id" class="form-control" required>-->
<!--                        <option value="">Select Member</option>-->
<!--                        @foreach($members as $member)-->
<!--                            <option value="{{ $member->contact_id }}">-->
<!--                                {{ $member->contact_id }} - {{ $member->name }}-->
<!--                            </option>-->
<!--                        @endforeach-->
<!--                    </select>-->
<!--                </div>-->

<!--                <div class="col-md-4">-->
<!--                    <label>Date</label>-->
<!--                    <input type="date" name="attendance_date" class="form-control" required>-->
<!--                </div>-->

<!--                <div class="col-md-3">-->
<!--                    <label>Time</label>-->
<!--                    <input type="time" name="attendance_time" class="form-control" required>-->
<!--                </div>-->

<!--                <div class="col-md-1">-->
<!--                    <button type="submit" class="btn btn-success tw-mt-4">-->
<!--                        Add-->
<!--                    </button>-->
<!--                </div>-->

<!--            </div>-->

<!--        </form>-->

<!--    </div>-->
<!--</div>-->

<!-- TABLE -->
<div class="box box-solid">
    <div class="box-header with-border">
        <h3 class="box-title">Attendance Records</h3>
    </div>

    <div class="box-body table-responsive">

        <table class="table table-bordered table-striped">

            <thead>
                <tr>
                    <th>SL</th>
                    <th>DB Attendace Table ID</th>
                    <th>Membership ID</th>
                    <th>Member's Name</th>
                    <th>Attendance Date</th>
                    <th>Attendance Time</th>
                </tr>
            </thead>

            <tbody>

                @php
                    $start = method_exists($attendances, 'firstItem') ? $attendances->firstItem() : 1;
                @endphp

                @forelse($attendances as $attendance)

                    <tr>

                        <td>
                            {{ method_exists($attendances, 'firstItem') ? $start + $loop->index : $loop->iteration }}
                        </td>

                        <td>{{ $attendance->id }}</td>

                        <td>{{ $attendance->member_id }}</td>

                        <td>{{ $attendance->member->name ?? '' }}</td>

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

                        <td>
                            {{ \Carbon\Carbon::parse($attendance->attendance_time)->format('H:i') }}
                        </td>

                    </tr>

                @empty
                    <tr>
                        <td colspan="6" class="text-center">No attendance records found</td>
                    </tr>
                @endforelse

            </tbody>

        </table>

        {{-- Pagination only when paginator exists --}}
        @if(method_exists($attendances, 'links'))
            <div class="tw-mt-4">
                {{ $attendances->links() }}
            </div>
        @endif

    </div>
</div>

</section>

@endsection

@push('scripts')

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {
    $('#member_id, #filter_member').select2({
        placeholder: '-- Select Member --',
        allowClear: true,
        width: '100%'
    });
});
</script>

@endpush