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










<div class="card" 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>Time Shift Schedule</h5>
            <button class="btn btn-primary" onclick="openAddTimeShiftPopup()">+ Add Time Shift</button>
        </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">
                <th class="text-center align-middle" style="font-size:smaller;">DAYTIME</th>
                    @foreach($slottable as $slottable)
                        <th class="text-center" style="font-size:smaller; cursor: pointer;" title="Edit Slot" onclick="openPopup(this, 'time', {{ $slottable->slot_id }})">
                            {{ \Carbon\Carbon::parse($slottable->start_time)->format('h:i A') }} - {{ \Carbon\Carbon::parse($slottable->end_time)->format('h:i A') }}
                        </th>
                    @endforeach
                </thead>
                <tbody>
                    @foreach (['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as $day)
                    <tr>
                        <th class="text-center align-middle" style="font-size:smaller;">
                            {{ $day }}
                        </th>

                        <!-- Shift 1 -->
                        <td class="text-center" onclick="openPopup(this, 'dropdown')" title="Delete Shift" style="cursor: pointer;">
                            @foreach ($shift1 as $employee)
                                @if ($employee->day === $day)
                                    {{ $employee->employee_first_name }}<br>
                                @endif
                            @endforeach
                        </td>

                        <!-- Shift 2 -->
                        <td class="text-center" onclick="openPopup(this, 'dropdown')" title="Delete Shift" style="cursor: pointer;">
                            @foreach ($shift2 as $employee)
                                @if ($employee->day === $day)
                                    {{ $employee->employee_first_name }}<br>
                                @endif
                            @endforeach
                        </td>

                        <!-- Shift 3 -->
                        <td class="text-center" onclick="openPopup(this, 'dropdown')" title="Delete Shift" style="cursor: pointer;">
                            @foreach ($shift3 as $employee)
                                @if ($employee->day === $day)
                                    {{ $employee->employee_first_name }}<br>
                                @endif
                            @endforeach
                        </td>

                        <!-- Shift 4 -->
                        <td class="text-center" onclick="openPopup(this, 'dropdown')" title="Delete Shift" style="cursor: pointer;">
                            @foreach ($shift4 as $employee)
                                @if ($employee->day === $day)
                                    {{ $employee->employee_first_name }}<br>
                                @endif
                            @endforeach
                        </td>

                        <!-- Shift 5 -->
                        <td class="text-center" onclick="openPopup(this, 'dropdown')" title="Delete Shift" style="cursor: pointer;">
                            @foreach ($shift5 as $employee)
                                @if ($employee->day === $day)
                                    {{ $employee->employee_first_name }}<br>
                                @endif
                            @endforeach
                        </td>

                        <!-- Shift 6 -->
                        <td class="text-center" onclick="openPopup(this, 'dropdown')" title="Delete Shift" style="cursor: pointer;">
                            @foreach ($shift6 as $employee)
                                @if ($employee->day === $day)
                                    {{ $employee->employee_first_name }}<br>
                                @endif
                            @endforeach
                        </td>

                        <!-- Shift 7 -->
                        <td class="text-center" onclick="openPopup(this, 'dropdown')" title="Delete Shift" style="cursor: pointer;">
                            @foreach ($shift7 as $employee)
                                @if ($employee->day === $day)
                                    {{ $employee->employee_first_name }}<br>
                                @endif
                            @endforeach
                        </td>
                    </tr>
                @endforeach
            </tbody>
            </table>

            <div class="modal fade" id="popupModal" tabindex="-1" role="dialog" aria-labelledby="popupModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="popupModalLabel">Edit Information</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="{{ route('admins.timeshiftmanage') }}" method="POST">
                            @csrf
                            <div class="modal-body">
                                <div id="textInputContainer" class="form-group">
                                    <label for="textInput">Edit Text:</label>
                                    <input type="text" id="textInput" class="form-control">
                                </div>

                                <div id="timePickerContainer" class="form-group">
                                    <input type="hidden" id="slotId" name="slot_id">
                                    <label for="startTime">Start Time:</label>
                                    <input type="time" id="startTime" name="start_time" class="form-control">
                                    <label for="endTime" class="mt-2">End Time:</label>
                                    <input type="time" id="endTime" name="end_time" class="form-control">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary" onclick="saveSelection()">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="dropdownModal" tabindex="-1" role="dialog" aria-labelledby="dropdownModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="dropdownModalLabel">Delete the Shift choosen</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="{{ route('admins.editshift') }}" method="POST">
                            @csrf
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="dropdown">Choose the Day:</label>
                                    <select id="dayDropdown" name="day" class="form-control">
                                        <option value="">Select a Day</option>
                                        <option value="Monday" {{ old('day') == 'Monday' ? 'selected' : '' }}>Monday</option>
                                        <option value="Tuesday" {{ old('day') == 'Tuesday' ? 'selected' : '' }}>Tuesday</option>
                                        <option value="Wednesday" {{ old('day') == 'Wednesday' ? 'selected' : '' }}>Wednesday</option>
                                        <option value="Thursday" {{ old('day') == 'Thursday' ? 'selected' : '' }}>Thursday</option>
                                        <option value="Friday" {{ old('day') == 'Friday' ? 'selected' : '' }}>Friday</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="dropdown">Choose the Slot:</label>
                                    <select id="slotDropdown" name="slot_use_id" class="form-control">
                                        <option value="">Select a Slot</option>
                                        <option value="1" {{ old('slot_use_id') == '1' ? 'selected' : '' }}>SLOT 1</option>
                                        <option value="2" {{ old('slot_use_id') == '2' ? 'selected' : '' }}>SLOT 2</option>
                                        <option value="3" {{ old('slot_use_id') == '3' ? 'selected' : '' }}>SLOT 3</option>
                                        <option value="4" {{ old('slot_use_id') == '4' ? 'selected' : '' }}>SLOT 4</option>
                                        <option value="5" {{ old('slot_use_id') == '5' ? 'selected' : '' }}>SLOT 5</option>
                                        <option value="6" {{ old('slot_use_id') == '6' ? 'selected' : '' }}>SLOT 6</option>
                                        <option value="7" {{ old('slot_use_id') == '7' ? 'selected' : '' }}>SLOT 7</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="dropdown">Choose Staff:</label>
                                    <select id="staffDropdown" name="selected_option" class="form-control">
                                        <option value="">Select Staff</option>
                                        @foreach ($stafffiltered as $staff)
                                            <option value="{{ $staff->staff_id }}" class="staff-option" data-day="{{ $staff->day }}" data-slot="{{ $staff->slot_use_id }}">
                                                {{ $staff->employee_first_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-danger">Delete</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <!-- New Time Shift Modal -->
            <div class="modal fade" id="addTimeShiftModal" tabindex="-1" role="dialog" aria-labelledby="addTimeShiftModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addTimeShiftModalLabel">Add New Time Shift</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="{{ route('admins.slottimemanage') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="staffSelect">Select Staff</label>
                                <select id="staffSelect" name="staff_id" class="form-control" required>
                                    @foreach($staffList as $staff)
                                        <option value="{{ $staff->employee_id }}">{{ $staff->employee_first_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="daySelect">Select Day</label>
                                <select id="daySelect" name="day" class="form-control" required>
                                    <option value="Monday">Monday</option>
                                    <option value="Tuesday">Tuesday</option>
                                    <option value="Wednesday">Wednesday</option>
                                    <option value="Thursday">Thursday</option>
                                    <option value="Friday">Friday</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="timeSlotSelect">Select Time Slot</label>
                                <select id="timeSlotSelect" name="slot_id[]" class="form-control" multiple required>
                                    @foreach($slot as $timeSlot)
                                        <option value="{{ $timeSlot->slot_id }}">
                                            {{ \Carbon\Carbon::parse($timeSlot->start_time)->format('h:i A') }} - 
                                            {{ \Carbon\Carbon::parse($timeSlot->end_time)->format('h:i A') }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="form-text text-muted">Hold Ctrl (Windows) or Cmd (Mac) to select multiple slots.</small>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add Time Shift</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </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