@extends('layouts.appv2')

@section('content')




                            <h1 class="mb-4 gradient-text">Working Hours </h1>  	
                                @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

                                @if ($errors->any())
                                    <div class="alert alert-danger" role="alert">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif		

                                <div class="card mb-5" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">

                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center mb-0">
                                            <h5>Manage Working Hours</h5>
                                            <div class="btn-toolbar mb-2 mb-md-0">
                                                <a class="btn-sm btn-outline-primary" href="{{ route('admins.workinghoursadd') }}" style="border-radius: 50px; font-weight:bolder;"title="Add employee">
                                                <i class="fa-solid fa-plus" style="border-radius: 20px;"></i> Add
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-body">

                                        <div class="dt-responsive table-responsive">
                                            <table id="dom-table" class="table table-bordered nowrap ">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th class="text-center">No.</th>
                                                        <th class="col-1 text-center">Name</th>
                                                        <th class="col-1 text-center">Start Time</th>
                                                        <th class="col-1 text-center">End Time</th>
                                                        <th class="col-1 text-center">Flexibility</th>
                                                        <th class="text-center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $counter = 1;
                                                    @endphp
                                                    
                                                    @foreach($time as $times)
                                                        <tr>
                                                            <td class="col-1 text-center">{{ $times->time_schedule_id }}</td>
                                                            <td class="col-1 text-center">{{ $times->time_schedule_name }}</td>
                                                            <td class="col-1 text-center">{{ $times->time_schedule_start }}</td>
                                                            <td class="col-1 text-center">{{ $times->time_schedule_end }}</td>
                                                            <td class="col-1 text-center">{{ $times->time_schedule_flex }}</td>
                                                            <td class="col-1 text-center">
                                                                <div class="mt-1 mb-1"style="display: inline-block;">
                                                                    <a class="btn btn-sm btn-info" href="{{ route('admins.workinghoursedit', ['time_schedule_id' => $times->time_schedule_id]) }}">
                                                                        <i class="fa-solid fa-pen-to-square"></i> Edit
                                                                    </a>
                                                                </div>
                                                                <div class="mt-1 mb-1"style="display: inline-block;">
                                                                    <form action="{{ route('admins.workinghoursdelete', ['time_schedule_id' => $times->time_schedule_id]) }}" method="POST" 
                                                                        onsubmit="return confirm('Are you sure you want to delete this working hours?');" style="display: inline;">
                                                                        @csrf
                                                                        <button type="submit" class="btn btn-sm btn-danger">
                                                                            <i class="fas fa-trash"></i> Delete
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            </td>

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













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

<script>
let selectedCell = null; // To store the clicked cell
let selectedType = ''; // To store the type (day, time, dropdown)
let selectedSlotId = null; // To store the slot_id of the clicked cell


function openAddTimeShiftPopup() {
    $('#addTimeShiftModal').modal('show');
}
function openPopup(cell, type, slotId = null) {
    selectedCell = cell;  // Store the clicked cell
    selectedType = type;  // Store the type
    selectedSlotId = slotId; // Store the slot_id (if needed)

    // Reset all modal sections
    document.getElementById('textInputContainer').style.display = 'none';
    document.getElementById('timePickerContainer').style.display = 'none';

    if (type === 'day') {
        // Show text input for Day cell
        document.getElementById('textInputContainer').style.display = 'block';
        document.getElementById('textInput').value = cell.innerText.trim();  // Set existing text as default value
        $('#popupModal').modal('show');  // Show main modal
    } else if (type === 'time') {
        // Show time pickers for Time Range
        document.getElementById('timePickerContainer').style.display = 'block';

        // Split the existing time range into start and end times
        const timeRange = cell.innerText.trim();
        if (timeRange.includes("-")) {
            const [start, end] = timeRange.split(" - ").map(time => time.trim());
            document.getElementById('startTime').value = convertTo24HourFormat(start);
            document.getElementById('endTime').value = convertTo24HourFormat(end);
        }
        $('#popupModal').modal('show');  // Show main modal
    } else if (type === 'dropdown') {
        // Open the dropdown modal when the type is 'dropdown'
        $('#dropdownModal').modal('show');  // Show dropdown-specific modal
    }
}


// Function to save selection to the clicked cell
function saveSelection() {
    if (selectedType === 'day') {
        const newValue = document.getElementById('textInput').value; // Get text input value for day
        if (selectedCell) selectedCell.innerHTML = newValue;  // Update the clicked cell with the new value
    } else if (selectedType === 'time') {
        const startTime = document.getElementById('startTime').value;
        const endTime = document.getElementById('endTime').value;
        if (startTime && endTime) {
            const formattedTimeRange = `${convertTo12HourFormat(startTime)} - ${convertTo12HourFormat(endTime)}`;
            if (selectedCell) selectedCell.innerHTML = formattedTimeRange; // Update the clicked cell with the new time range
        }
    } else if (selectedType === 'dropdown') {
        const selectedOption = document.getElementById('dropdown').value;
        if (selectedCell) selectedCell.innerHTML = selectedOption; // Update the clicked cell with the selected dropdown value
    }

    // Add the slot_id to the hidden input field in the form
    if (selectedSlotId !== null) {
        document.getElementById('slotId').value = selectedSlotId;
    }

    $('#popupModal').modal('hide');  // Hide modal after saving
}

// Helper function to convert 24-hour time to 12-hour time
function convertTo12HourFormat(time) {
    const [hours, minutes] = time.split(':').map(Number);
    const period = hours >= 12 ? 'PM' : 'AM';
    const adjustedHours = hours % 12 || 12; // Convert 0 to 12 for midnight
    return `${adjustedHours}:${minutes.toString().padStart(2, '0')} ${period}`;
}

// Helper function to convert 12-hour time to 24-hour time
function convertTo24HourFormat(time) {
    const [hoursMinutes, period] = time.split(' ');
    let [hours, minutes] = hoursMinutes.split(':').map(Number);
    if (period === 'PM' && hours !== 12) hours += 12;
    if (period === 'AM' && hours === 12) hours = 0;
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}

</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const dayDropdown = document.getElementById('dayDropdown');
    const slotDropdown = document.getElementById('slotDropdown');
    const staffDropdown = document.getElementById('staffDropdown');
    const staffOptions = staffDropdown.querySelectorAll('.staff-option');
    
    // Initially disable staff dropdown
    staffDropdown.disabled = true;
    
    // Filter staff based on day and slot selection
    function filterStaff() {
        const selectedDay = dayDropdown.value;
        const selectedSlot = slotDropdown.value;
        
        // Enable staff dropdown only when both day and slot are selected
        if (selectedDay && selectedSlot) {
            staffDropdown.disabled = false;
        } else {
            staffDropdown.disabled = true;
            staffDropdown.value = ''; // Reset staff selection
        }
        
        // Reset existing staff options
        staffOptions.forEach(function(option) {
            option.style.display = 'none';
        });
        
        // Filter and show matching staff
        if (selectedDay && selectedSlot) {
            staffOptions.forEach(function(option) {
                const staffDay = option.getAttribute('data-day');
                const staffSlot = option.getAttribute('data-slot');
                
                if (staffDay === selectedDay && staffSlot === selectedSlot) {
                    option.style.display = ''; // Show matching options
                }
            });
        }
    }
    
    // Add event listeners to day and slot dropdowns
    dayDropdown.addEventListener('change', filterStaff);
    slotDropdown.addEventListener('change', filterStaff);
    
    // Initial filtering
    filterStaff();
});
</script>


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