@extends('layouts.userapp')

@section('content')

    @php
        use Carbon\Carbon;
    @endphp


    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif  

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <h4>Overtime Request</h4>
        </div>
        <div class="card-body">
            <form action="{{ route('check.ovtrequest') }}" method="POST">
            @csrf
                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <label for="" class="form-label"><strong>Date</strong></label>
                        <input type="date" name="date" class="form-control" id="" placeholder="Date" value="" style="border-radius: 10px;" required>
                    </div>


                    <div class="col-md-6">
                        <label for="" class="form-label"><strong>Overtimes For</strong></label>
                        <select type="text" name="overtime_for" class="form-control" id="" placeholder="Total Hours" value="" style="border-radius: 10px;" required>
                            <option value="ND">Normal Day</option>
                            <option value="RD">Rest Day</option>
                            <option value="PH">Public Holiday</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <label for="" class="form-label"><strong>Start Hours</strong></label>
                        <input type="time" name="start_hours" class="form-control" id="start-hours" placeholder="Hours" value="18:00" style="border-radius: 10px; wi" required>
                    </div>
                    <div class="col-md-6">
                        <label for="" class="form-label"><strong>End Hours</strong></label>
                        <input type="time" name="end_hours" class="form-control" id="end-hours" placeholder="Hours" value="" style="border-radius: 10px;" required>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6 mb-3">
                        <label for="" class="form-label"><strong>Reason</strong></label>
                        <textarea type="text" name="reason" class="form-control" id="" placeholder="Reason" value="" style="border-radius: 10px;" required></textarea>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                        <label for="total-hours-display" class="form-label"><strong>Total Hours</strong></label>
                        <input type="text" class="form-control" id="total-hours-display" placeholder="Total Hours" value="" style="border-radius: 10px;" readonly>
                        <small class="form-text text-danger" style="margin-bottom: 5px; color:red;">* Total hours must be above 1 hour</small>
                        <input type="hidden" name="total_hours" id="total-hours" value="">
                    </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col text-center">
                        <button type="submit" class="btn btn-primary" id="submit-btn" disabled>Submit Request</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


<script>
function calculateTotalHours() {
    const startHours = document.querySelector('input[name="start_hours"]').value;
    const endHours = document.querySelector('input[name="end_hours"]').value;

    if (startHours && endHours) {
        const [startHour, startMinute] = startHours.split(':').map(Number);
        const [endHour, endMinute] = endHours.split(':').map(Number);

        let totalHours = endHour - startHour;
        let totalMinutes = endMinute - startMinute;

        if (totalMinutes < 0) {
            totalMinutes += 60;
            totalHours -= 1;
        }

        const formattedHours = totalHours;
        const formattedMinutes = totalMinutes;

        document.querySelector('#total-hours-display').value = `${formattedHours} Hours ${formattedMinutes} Minutes`;
        document.querySelector('#total-hours').value = `${formattedHours}:${formattedMinutes}`;

        const submitButton = document.querySelector('#submit-btn');
        if (formattedHours < 1) {
            submitButton.disabled = true;
        } else {
            submitButton.disabled = false;
        }
    }
}

document.querySelector('input[name="start_hours"]').addEventListener('input', calculateTotalHours);
document.querySelector('input[name="end_hours"]').addEventListener('input', calculateTotalHours);
document.addEventListener('DOMContentLoaded', calculateTotalHours);
</script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@endsection