@extends('layout.mainlayout')

@section('content')
    <div class="page-wrapper">
        <div class="content">

            <div class="page-header">
                <h3 class="page-title">My Attendance Requests</h3>
            </div>

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

                    <table class="table table-bordered table-striped align-middle" id="AttendanceTable">
                        <thead class="table-light">
                            <tr>
                                <th>Applied On</th>
                                <th>Date Range</th>
                                <th>Location</th>
                                <th>Project</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th width="160">Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($records as $attendance)
                                <tr>
                                    <td>{{ $attendance->created_at->format('d M Y') }}</td>

                                    <td>
                                        {{ \Carbon\Carbon::parse($attendance->start_date)->format('d M Y') }}
                                        →
                                        {{ \Carbon\Carbon::parse($attendance->end_date)->format('d M Y') }}
                                    </td>
                                    @if (auth()->user()->employee_type != '2')
                                        <td>
                                            {{ optional($attendance->location)->name ?? '-' }}

                                        </td>
                                    @else
                                        <td> {{ $attendance->getForm('location_city', '-') }},
                                            {{ $attendance->getForm('location_country', '-') }}</td>
                                    @endif
                                    <td>{{ optional($attendance->project)->name ?? '-' }}</td>


                                    <td>Attendance</td>

                                    <td>
                                        @if ($attendance->status_lead === 'approved' && $attendance->status_manager === 'approved')
                                            <span class="badge bg-success">Approved</span>
                                        @elseif($attendance->status_lead === 'rejected' || $attendance->status_manager === 'rejected')
                                            <span class="badge bg-danger">Rejected</span>
                                        @else
                                            <span class="badge bg-warning">Pending</span>
                                        @endif
                                    </td>

                                    <td>
                                        <button class="btn btn-sm btn-info view-attendance" data-id="{{ $attendance->id }}">
                                            View
                                        </button>

                                        @if ($attendance->status_lead === 'pending' && $attendance->status_manager === 'pending')
                                            <form method="POST" action="{{ route('attendance.delete', $attendance->id) }}"
                                                class="d-inline" onsubmit="return confirm('Are you sure?')">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-sm btn-danger">Delete</button>
                                            </form>
                                        @endif
                                    </td>

                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
            </div>

        </div>
    </div>

    <!-- Attendance Details Modal -->
    <div class="modal fade" id="attendanceViewModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Attendance Details</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body" id="attendanceDetailsBody">
                    <div class="text-center text-muted">
                        Loading details...
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        initDataTableWithFilters('AttendanceTable');
    </script>


    <script>
        $(document).on('click', '.view-attendance', function() {

            const id = $(this).data('id');

            $('#attendanceDetailsBody').html(
                '<div class="text-center text-muted">Loading details...</div>'
            );

            $('#attendanceViewModal').modal('show');

            $.get("{{ url('/attendance') }}/" + id + "/view", function(html) {
                $('#attendanceDetailsBody').html(html);
            });
        });
    </script>
@endpush