@extends('layouts.master')

@section('css')
    <!-- Table css -->
    <link href="{{ URL::asset('plugins/RWD-Table-Patterns/dist/css/rwd-table.min.css') }}" rel="stylesheet" type="text/css" media="screen">
    <style>
        .swal2-image-custom {
            max-width: 400px;
            max-height: 400px;
            width: auto;
            height: auto;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            border-top: none !important;
        }
        .badge {
            padding: 8px 12px;
            font-size: 12px;
            border-radius: 4px;
        }
        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
        }
        .table td {
            vertical-align: middle;
        }
        .filter-section {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .table-title {
            margin-bottom: 20px;
            color: #333;
            font-weight: 600;
        }
        .form-inline .form-group {
            margin-right: 15px;
        }
        .action-buttons .btn {
            margin: 0 2px;
        }
        /* Fix double border issue */
        .table-bordered {
            border-collapse: collapse;
        }
        .table-bordered thead th {
            border-bottom-width: 1px !important;
        }
        .table-bordered thead tr:first-child th {
            border-top: none;
        }
        .dataTables_wrapper .dataTables_scrollHead {
            border-bottom: none !important;
        }
        .table-responsive {
            border-top: none;
        }
        .card-body {
            padding-top: 1.5rem;
        }
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title text-left">Attendance</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Attendance</a></li>
        </ol>
    </div>
@endsection

@section('content')
@include('includes.flash')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <!-- Filter Section -->
                    <div class="filter-section">
                        <form action="{{ route('admin.attendance') }}" method="GET" class="form-inline" id="filterForm">
                            <div class="form-group">
                                <label for="date" class="mr-2">Tanggal:</label>
                                <input type="date" class="form-control" id="date" name="date" 
                                    value="{{ request('date', date('Y-m-d')) }}">
                            </div>
                        </form>
                    </div>

                    <div class="table-responsive">
                        <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th data-priority="1">Nama</th>
                                    <th data-priority="2">Status</th>
                                    <th data-priority="3">Clock In</th>
                                    <th data-priority="4">Clock Out</th>
                                    <th data-priority="5">Keterangan</th>
                                    <th data-priority="6">Foto</th>
                                    <th data-priority="7">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    // Filter presensi untuk tidak menampilkan status Izin dan Sakit
                                    $filteredPresensi = $presensis->filter(function($item) {
                                        return !in_array($item->status, ['Izin', 'Sakit']);
                                    });
                                    
                                    $groupedPresensi = $filteredPresensi->groupBy(function($item) {
                                        return $item->user_id . '_' . $item->created_at->format('Y-m-d');
                                    });
                                @endphp
                                
                                @if($groupedPresensi->count() > 0)
                                    @foreach ($groupedPresensi as $key => $group)
                                        @php
                                            $clockIn = $group->where('clock_type', 'in')->first();
                                            $clockOut = $group->where('clock_type', 'out')->first();
                                            $user = $clockIn ? $clockIn->user : ($clockOut ? $clockOut->user : null);
                                        @endphp
                                        <tr>
                                            <td>{{ $user->name ?? 'N/A' }}</td>
                                            <td>
                                                @if ($clockIn)
                                                    @if ($clockIn->status == 'Hadir')
                                                        <span class="badge badge-primary">{{ $clockIn->status }}</span>
                                                    @elseif ($clockIn->status == 'Terlambat')
                                                        <span class="badge badge-danger">{{ $clockIn->status }}</span>
                                                    @endif
                                                @endif
                                            </td>
                                            <td>
                                                @if ($clockIn)
                                                    {{ $clockIn->created_at->format('H:i:s') }}
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                @if ($clockOut)
                                                    {{ $clockOut->created_at->format('H:i:s') }}
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                @if ($clockIn)
                                                    {{ $clockIn->keterangan }}
                                                @elseif ($clockOut)
                                                    {{ $clockOut->keterangan }}
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                @if ($clockIn && $clockIn->foto)
                                                    <button type="button" class="btn btn-info btn-sm" onclick="showPhoto('{{ asset('presensi/' . $clockIn->foto) }}')">
                                                        <i class="fas fa-eye"></i> Clock In
                                                    </button>
                                                @endif
                                                @if ($clockOut && $clockOut->foto)
                                                    <button type="button" class="btn btn-info btn-sm" onclick="showPhoto('{{ asset('presensi/' . $clockOut->foto) }}')">
                                                        <i class="fas fa-eye"></i> Clock Out
                                                    </button>
                                                @endif
                                            </td>
                                            <td class="action-buttons">
                                                @if ($clockIn)
                                                    <form action="{{ route('attendance.destroy', $clockIn->id) }}" method="POST" style="display: inline-block;" id="delete-form-{{ $clockIn->id }}">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{ $clockIn->id }})">
                                                            <i class="fas fa-trash"></i> Hapus Clock In
                                                        </button>
                                                    </form>
                                                @endif
                                                @if ($clockOut)
                                                    <form action="{{ route('attendance.destroy', $clockOut->id) }}" method="POST" style="display: inline-block;" id="delete-form-{{ $clockOut->id }}">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{ $clockOut->id }})">
                                                            <i class="fas fa-trash"></i> Hapus Clock Out
                                                        </button>
                                                    </form>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="7" class="text-center">
                                            Tidak ada data absensi untuk ditampilkan
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <!-- Responsive-table-->
    <script src="{{ URL::asset('plugins/RWD-Table-Patterns/dist/js/rwd-table.min.js') }}"></script>
    <!-- Sweet-Alert  -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        $(function() {
            // Hide the controls for responsive table
            $('.table-responsive').responsiveTable({
                addDisplayAllBtn: false,
                displayAll: false,
                displayPriorityCols: false
            });
            
            // Remove extra buttons (PDF, Excel, Column visibility)
            setTimeout(function() {
                $('.dt-buttons').remove();
                $('.dataTables_length').remove();
                $('.dataTables_filter').remove();
                $('.focus-btn').hide();
                $('.display-btn').hide();
            }, 100);

            // Auto submit form when date changes
            $('#date').on('change', function() {
                $('#filterForm').submit();
            });
        });

        function showPhoto(photoUrl) {
            Swal.fire({
                imageUrl: photoUrl,
                imageAlt: 'Foto Presensi',
                width: 'auto',
                padding: '1em',
                showConfirmButton: false,
                showCloseButton: true,
                background: '#fff',
                backdrop: `
                    rgba(0,0,0,0.8)
                `,
                customClass: {
                    image: 'swal2-image-custom'
                }
            });
        }

        function confirmDelete(id) {
            Swal.fire({
                title: 'Apakah anda yakin?',
                text: "Data yang dihapus tidak dapat dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }
    </script>
@endsection