@extends('layouts.userapp')

@section('content')
            
            @php
                use Carbon\Carbon;
            @endphp



                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </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>Leave Applied</h4>
        </div>
        <div class="card-body">
                @foreach($applied as $applied)
                    <div class="table-responsive-sm">
                        <table class="table ">
                            <tr>
                                <th>Employee Name</th>
                                <td>{{$user->username}}</td>
                            </tr>
                            <tr>
                                <th>Leave Type</th>
                                <td>{{ $applied->leavetype_name }}</td>
                            </tr>
                            <tr>
                                <th>Leave Duration</th>
                                <td>
                                @if (($applied->halfday_on_startdate !== 'FULL' || $applied->halfday_on_enddate !== 'FULL') && !is_null($applied->halfday_on_startdate) && !is_null($applied->halfday_on_enddate))
                                    HALFDAY ({{ $applied->halfday_on_startdate !== 'FULL' ? $applied->halfday_on_startdate : $applied->halfday_on_enddate }})
                                @else
                                    FULLDAY
                                @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Applied On</th>
                                <td>{{ \Carbon\Carbon::parse($applied->created_date)->format('l, d M Y') }}</td>
                            </tr>
                            <tr>
                                <th>To</th>
                                <td>{{ $applied->employee_first_name }}</td>
                            </tr>
                            <tr>
                                <th>Total Days</th>
                                <td>{{ $applied->total_days }}</td>
                            </tr>
                            <tr>
                                <th>Start Date</th>
                                <td>{{ $applied->start_date ? \Carbon\Carbon::parse($applied->start_date)->format('l, d M Y') : 'NONE' }}</td>
                            </tr>
                            <tr>
                                <th>End Date</th>
                                <td>{{ $applied->end_date ? \Carbon\Carbon::parse($applied->end_date)->format('l, d M Y') : 'NONE' }}</td>
                            </tr>
                            <tr>
                                <th>Return Date</th>
                                <td>{{ $applied->return_date ? \Carbon\Carbon::parse($applied->return_date)->format('l, d M Y') : 'NONE' }}</td>

                            </tr>
                            <tr>
                                <th class="align-middle">Attachment</th>
                                <td>
                                    @if($applied->attachment)
                                        <a href="{{ asset('storage/documentstaff/' . $applied->attachment) }}" class="btn btn-primary">Download</a>
                                    @else
                                        <button class="btn btn-secondary" style="border-radius:10px;" onclick="alert('There is no file uploaded.');">Download</button>
                                    @endif 
                                </td>
                            </tr>
                            <tr>
                                <th>Reason</th>
                                <td>{{ $applied->reason }}</td>
                            </tr>
                            <tr>
                                <th>Leave Status</th>
                                <td>{{ $applied->display_status }}</td>
                            </tr>
                            <tr>
                                <th class="align-middle">Leave History</th>
                                <td>
                                    <button type="button" class="btn btn-primary" style="border-radius:10px;" data-toggle="modal" data-target="#actionModal">
                                        View All Actions
                                    </button>
                                </td>
                            </tr>
                            @if($applied->display_status === 'Rejected')
                            <tr>
                                <th>Reject Message</th>
                                <td>{{ $applied->rejectmessage ?? 'NONE'}}</td>
                            </tr>
                            @endif
                        </table>
                        <!-- <form method="POST" action="{{ route('checkins.cancelleaves', $applied->leave_apply_id )}}">
                        @csrf
                        @if($applied->display_status === 'Pending')
                            <tr>
                                <td colspan="2">
                                    <button type="submit" class="btn btn-danger" style="width:100%;" onclick="return confirm('Are you sure you want to cancel this leave application?');">Cancel Leave Application</button>
                                </td>
                            </tr>
                        @endif
                        </form> -->
                    </div>
                @endforeach
        </div>
    </div>
    

                                <!-- Modal -->
                                <div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-labelledby="actionModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="actionModalLabel">All Actions</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <ul>
                                                @if($history && $history->isNotEmpty())
                                                    @foreach($history as $item)
                                                        <li>{{ $item->action }} BY {{ $item->employee_first_name }}</li>
                                                    @endforeach
                                                @else
                                                    <li>No History</li>
                                                @endif

                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
      






















<script>
// Get the button elements and the row you want to toggle
const checkinBtn = document.getElementById('checkin');
const checkoutBtn = document.getElementById('checkout');
const reasonRow = document.querySelector('.reason-row');  // Adjust the selector based on your actual row
const actionInput = document.getElementById('actionInput');  // Hidden input for action
const checkinTypeInput = document.getElementById('checkinTypeInput');  // Hidden input for check-in type

if (checkinBtn && checkoutBtn && reasonRow) {
    function toggleReasonRow(button) {
        reasonRow.classList.remove('hide');  // Unhide the reason row
        actionInput.value = button.id;       // Set the action input value ('checkin' or 'checkout')
        checkinTypeInput.value = button.value;  // Set the check-in type value ('IN' or 'OUT')
    }

    // Event listener for 'CHECK IN' button
    checkinBtn.addEventListener('click', function() {
        toggleReasonRow(checkinBtn);  // Call the function with the 'checkin' button
    });

    // Event listener for 'CHECK OUT' button
    checkoutBtn.addEventListener('click', function() {
        toggleReasonRow(checkoutBtn);  // Call the function with the 'checkout' button
    });
}



    // Reason selection functionality
    reasonInputs.forEach(input => {
        input.addEventListener('click', function() {
            otherReasonInput.disabled = this.value !== 'Other';
        });
    });

 

   

    // Cancel button functionality
    const cancelBtn = document.getElementById('cancel');
    if (cancelBtn) {
        cancelBtn.addEventListener('click', function() {
            reasonRow.classList.add('hide');
            actionInput.value = '';
            checkinTypeInput.value = '';
            otherReasonInput.value = '';
            otherReasonInput.disabled = true;
            reasonInputs.forEach(input => input.checked = false);
        });
    }

    // Function to show modal
    function showModal(modalId, message) {
        const modal = document.getElementById(modalId);
        const modalBody = modal.querySelector('.modal-body');
        modalBody.textContent = message;
        $(modal).modal('show');
    }

</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