@extends('layouts.appv2')

@section('content')


<div class="d-flex align-items-center mb-4">
    <h1 class="mb-4 gradient-text">Staff Overtime</h1>
</div>

<div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
    <div class="card-header">
        <h5>Overtime List</h5>
    </div>
        <!-- ============================================ -->
    <!-- FILTER SECTION - NEW CODE STARTS HERE -->
    <!-- ============================================ -->
    
    <!-- This creates a gray box for filters -->
    <div class="card-body" style="background-color: #f8f9fa; border-bottom: 2px solid #dee2e6;">
        
        <!-- FORM TAG: When you click "Filter" button, it sends data to the server -->
        <!-- action="{{ route('staffovertime') }}" = Where to send the data (to staffovertime page) -->
        <!-- method="GET" = How to send the data (GET means data shows in URL like ?name=John) -->
        <form action="{{ route('staffovertime') }}" method="GET">
            
            <!-- ROW: Creates a horizontal row to put filters side by side -->
            <div class="row">
                
                <!-- ========================================= -->
                <!-- FILTER 1: Employee Name Search Box -->
                <!-- ========================================= -->
                <!-- col-md-3 = This filter takes 3 out of 12 columns (25% width) -->
                <!-- mb-3 = Margin bottom (space below this filter) -->
                <div class="col-md-3 mb-3">
                    <!-- LABEL: The text above the input box -->
                    <label for="employee_name" class="form-label">Employee Name</label>
                    
                    <!-- INPUT BOX: Where user types the employee name -->
                    <input type="text" 
                           class="form-control"  
                           id="employee_name"  
                           name="employee_name"  
                           placeholder="Search by name"  
                           value="{{ request('employee_name') }}">
                    
                    <!-- EXPLANATION OF ATTRIBUTES:
                         - type="text" = This is a text input box
                         - class="form-control" = Bootstrap styling to make it look nice
                         - id="employee_name" = Unique identifier for this box
                         - name="employee_name" = The name sent to server (becomes ?employee_name=John)
                         - placeholder = Gray text shown when box is empty
                         - value="{{ request('employee_name') }}" = Keeps the text you typed after filtering
                           (Example: If you typed "John" and clicked Filter, "John" stays in the box)
                    -->
                </div>

                <!-- ========================================= -->
                <!-- FILTER 2: Status Dropdown -->
                <!-- ========================================= -->
                <div class="col-md-2 mb-3">
                    <label for="status" class="form-label">Status</label>
                    
                    <!-- DROPDOWN/SELECT: List of options to choose from -->
                    <select class="form-control" id="status" name="status">
                        <option value="">All Status</option>
                        
                        <!-- Each OPTION is a choice in the dropdown -->
                        <!-- value="5" = What gets sent to server when you select this -->
                        <!-- {{ request('status') == '5' ? 'selected' : '' }} = If you previously selected "Pending", keep it selected -->
                        <option value="5" {{ request('status') == '5' ? 'selected' : '' }}>Pending</option>
                        <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Verified</option>
                        <option value="2" {{ request('status') == '2' ? 'selected' : '' }}>Approved</option>
                        <option value="3" {{ request('status') == '3' ? 'selected' : '' }}>Rejected</option>
                        <option value="4" {{ request('status') == '4' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                    
                    <!-- EXPLANATION:
                         The {{ request('status') == '5' ? 'selected' : '' }} part means:
                         - IF the status in the URL is "5" (means you filtered by Pending before)
                         - THEN add "selected" to this option (keeps Pending selected)
                         - ELSE add nothing (option is not selected)
                         
                         It's like Python: "selected" if request('status') == '5' else ""
                    -->
                </div>

                <!-- ========================================= -->
                <!-- FILTER 3: Date From (Start Date) -->
                <!-- ========================================= -->
                <div class="col-md-2 mb-3">
                    <label for="date_from" class="form-label">Date From</label>
                    
                    <!-- DATE PICKER: Calendar popup to select a date -->
                    <input type="date" 
                           class="form-control" 
                           id="date_from" 
                           name="date_from"
                           value="{{ request('date_from') }}">
                    
                    <!-- EXPLANATION:
                         - type="date" = Shows a calendar when you click it
                         - User selects start date (example: 2025-01-01)
                         - Works together with "Date To" to create a date range
                    -->
                </div>

                <!-- ========================================= -->
                <!-- FILTER 4: Date To (End Date) -->
                <!-- ========================================= -->
                <div class="col-md-2 mb-3">
                    <label for="date_to" class="form-label">Date To</label>
                    
                    <input type="date" 
                           class="form-control" 
                           id="date_to" 
                           name="date_to"
                           value="{{ request('date_to') }}">
                    
                    <!-- EXPLANATION:
                         - User selects end date (example: 2025-01-31)
                         - Together with Date From: Shows overtimes from Jan 1 to Jan 31
                    -->
                </div>

                <!-- ========================================= -->
                <!-- BUTTONS: Filter and Reset -->
                <!-- ========================================= -->
                <div class="col-md-3 mb-3 d-flex align-items-end">
                    <!-- d-flex = Display as flex (puts buttons side by side) -->
                    <!-- align-items-end = Pushes buttons to bottom of the column -->
                    
                    <!-- FILTER BUTTON: Submits the form and applies filters -->
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-search"></i> Filter
                    </button>
                    
                    <!-- EXPLANATION:
                         - type="submit" = When clicked, sends the form data to server
                         - class="btn btn-primary" = Blue button styling
                         - me-2 = Margin end (right side space between Filter and Reset)
                         - <i class="fas fa-search"></i> = Search icon (magnifying glass)
                    -->
                    
                    <!-- RESET BUTTON: Clears all filters and shows all records -->
                    <a href="{{ route('staffovertime') }}" class="btn btn-secondary">
                        <i class="fas fa-redo"></i> Reset
                    </a>
                    
                    <!-- EXPLANATION:
                         - This is a LINK (not a submit button)
                         - href="{{ route('staffovertime') }}" = Goes back to the page WITHOUT any filters
                         - Clears the URL (removes ?employee_name=John&status=5, etc.)
                         - Shows ALL overtime records again
                    -->
                </div>
            </div>
        </form>
    </div>
    
    <!-- ============================================ -->
    <!-- END OF FILTER SECTION -->
    <!-- ============================================ -->
    <div class="card-body">
        <div class="table-responsive">
            <table class="table  mb-0 table-hover table-bordered results">
                <thead class="text-center thead-dark">
                    <tr>
                        <!-- <th style="padding: 5px;">No</th> -->
                        <th style="padding: 5px;">Employee Name</th>
                        <th style="padding: 5px;">Overtime For</th>
                        <th style="padding: 5px;">Requested on</th>
                        <th style="padding: 5px;">Date</th>
                        <th style="padding: 5px;">Start Hours Est</th>
                        <th style="padding: 5px;">End Hours Est</th>
                        <th style="padding: 5px;">Total Hours Est</th>
                        <th style="padding: 5px;">Status</th>
                        <th style="padding: 5px;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($overtime as $ot)
                    <tr>
                        <td style="padding: 5px;">{{ $ot->employee_first_name }}</td>
                        <td style="padding: 5px;">{{ $ot->overtime_for }}</td>
                        <td style="padding: 5px;">{{ \Carbon\Carbon::parse($ot->created_at)->format('l, d M Y') }}</td>
                        <td style="padding: 5px;">{{ \Carbon\Carbon::parse($ot->date)->format('l, d M Y') }}</td>
                        <td style="padding: 5px;">{{ $ot->start_hours }}</td>
                        <td style="padding: 5px;">{{ $ot->end_hours }}</td>
                        <td style="padding: 5px;">{{ $ot->total_hours }}</td>
                        <td style="padding: 5px;">{{ $ot->status }}</td>
                        <td style="padding: 5px;">
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#overtimeModal{{ $ot->overtime_id }}">
                                View Details
                            </button>
                        </td>
                    </tr>

                    <div class="modal fade" id="overtimeModal{{ $ot->overtime_id }}" tabindex="-1" role="dialog" aria-labelledby="overtimeModalLabel{{ $ot->overtime_id }}" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="overtimeModalLabel{{ $ot->id }}">Overtime Details</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p><strong>Employee:</strong> {{ $ot->employee_first_name }}</p>
                                    <p><strong>Overtime For:</strong> {{ $ot->overtime_for }}</p>
                                    <p><strong>Requested On:</strong> {{ \Carbon\Carbon::parse($ot->created_at)->format('l, d M Y') }}</p>
                                    <p><strong>Overtime Date:</strong> {{ \Carbon\Carbon::parse($ot->date)->format('l, d M Y') }}</p>
                                    <p><strong>Reason:</strong> {{ $ot->reason }}</p>
                                    <p><strong>Status:</strong> {{ $ot->status }}</p>

                                    <hr>

                                    <h6 class="font-weight-bold mt-4">ESTIMATED TIME:</h6>
                                    <p><strong>Start Time:</strong> {{ \Carbon\Carbon::parse($ot->start_hours)->format('g:i A') }}</p>
                                    <p><strong>End Time:</strong> {{ \Carbon\Carbon::parse($ot->end_hours)->format('g:i A') }}</p>
                                    <p><strong>Total Hours:</strong> {{ \Carbon\Carbon::parse($ot->total_hours)->format('g:i A') }}</p>

                                    <div class="mt-4">
                                        <h6 class="font-weight-bold">ACTUAL TIME:</h6>
                                        @if($ot->checkin_time || $ot->checkout_time)
                                        
                                        @if($ot->checkin_time)
                                        <p><strong>Check-in Time (OT):</strong> {{ \Carbon\Carbon::parse($ot->checkin_time)->format('H:i:s') }}</p>
                                        @endif

                                        @if($ot->checkout_time)
                                        <p><strong>Check-out Time (OT):</strong> {{ \Carbon\Carbon::parse($ot->checkout_time)->format('H:i:s') }}</p>
                                        @endif

                                        @if($ot->checkin_time && $ot->checkout_time)
                                        @php
                                        $checkin = \Carbon\Carbon::parse($ot->checkin_time);
                                        $checkout = \Carbon\Carbon::parse($ot->checkout_time);
                                        $totalHours = $checkin->floatDiffInHours($checkout);
                                        @endphp
                                        <p><strong>Total Hours (OT):</strong> {{ number_format($totalHours, 2) }} hours</p>
                                        @endif

                                        @else
                                        <p class="text-muted">No overtime check-in/out records found for this date</p>
                                        @endif
                                    </div>

                                    <!-- <hr> -->

                                    <!-- <p><strong>Rate Hours:</strong></p>
                                    <p><strong>Total Claim:</strong></p> -->

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="11" class="font-italic" style="padding: 5px; text-align: center;">No staff apply overtime yet</td>
                    </tr>
                    @endforelse
                </tbody>

            </table>
        </div>
    </div>
    <div class="card-footer">
        <div class="d-flex justify-content-center">
            {{ $overtime->links('pagination::bootstrap-4') }}
        </div>
    </div>
</div>

<style>
    /* Make the pagination container nicer */
    .pagination {
        gap: 5px;  /* Space between buttons */
    }
    
    /* Style all the page buttons (numbers and arrows) */
    .pagination .page-link {
        padding: 8px 12px;  /* Space inside each button (top/bottom left/right) */
        font-size: 14px;  /* Text size */
        border-radius: 8px;  /* Rounded corners */
        border: 1px solid #ddd;  /* Light gray border */
        color: #333;  /* Dark gray text */
        transition: all 0.3s;  /* Smooth animation when hovering */
    }
    
    /* When you hover over a button */
    .pagination .page-link:hover {
        background-color: #007bff;  /* Blue background */
        color: white;  /* White text */
        border-color: #007bff;  /* Blue border */
        transform: scale(1.05);  /* Make it slightly bigger */
    }
    
    /* The active/current page button */
    .pagination .page-item.active .page-link {
        background-color: #007bff;  /* Blue background */
        border-color: #007bff;  /* Blue border */
        color: white;  /* White text */
        font-weight: bold;  /* Make text thicker */
    }
    
    /* Style the arrow buttons specifically */
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        font-size: 18px;  /* Make arrows bigger */
        font-weight: bold;  /* Make arrows thicker */
        padding: 8px 15px;  /* More left/right space for arrows */
    }
    
    /* Add nice arrow symbols */
    .pagination .page-item:first-child .page-link::after {
        content: ' ←';  /* Left arrow */
    }
    
    .pagination .page-item:last-child .page-link::after {
        content: ' →';  /* Right arrow */
    }
    
    /* When arrow buttons are disabled (can't click) */
    .pagination .page-item.disabled .page-link {
        background-color: #f8f9fa;  /* Light gray background */
        color: #6c757d;  /* Gray text */
        cursor: not-allowed;  /* Show "can't click" cursor */
    }
    
    /* Add shadow to make buttons pop out */
    .pagination .page-link {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* Subtle shadow */
    }
    
    /* Remove shadow on disabled buttons */
    .pagination .page-item.disabled .page-link {
        box-shadow: none;
    }
</style>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bs5-datepicker@1.2.0/dist/js/bootstrap-datepicker.min.js"></script>
@endsection