@extends('backend.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <form action="{{ route('doctors.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-header">
                        Add Doctor
                    </div>
                    <div class="card-body">
                        <label for="name">Name </label>
                        <input type="text" name="name" id="name" class="form-control">
                        <label for="Position">Position</label>
                        <input type="text" name="position" id="position" class="form-control">
                        <label for="phone_no">Phone No.</label>
                        <input type="text" name="phone_no" id="phone_no" class="form-control">
                        <label for="description">Description</label>
                        <textarea name="description" id="description" cols="30" placeholder="Content..." rows="5"
                            class="form-control"></textarea>
                        <label for="profile">Profile</label>
                        <input type="file" name="profile" id="profile" class="form-control p-1">
                        <h2 class="green my-2">Schedule</h2>
                        @foreach (['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] as $day)
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" class="day-checkbox" id="{{ $day }}-checkbox"
                                        name="days[]" value="{{ $day }}">
                                    {{ ucfirst($day) }}
                                </label>
                                <div id="{{ $day }}-times" class="time-slots" style="display: none;">
                                    <div class="time-slot-group">
                                        <input type="time" name="{{ $day }}_start[]" placeholder="Start Time">
                                        <input type="time" name="{{ $day }}_end[]" placeholder="End Time">
                                    </div>
                                    <button type="button" class="add-time-slot" data-day="{{ $day }}">+ Add Time
                                        Slot</button>
                                </div>
                            </div>
                        @endforeach

                        <h2 class="green my-2">Test Specialization</h2>
                        <div class="row">
                            @foreach ($groupedTests as $categoryId => $tests)
                                <!-- Display the category name for each group of tests as a clickable element -->
                                <div class="col-lg-12">
                                    <h4 class="category-toggle" data-category-id="{{ $categoryId }}">
                                        <span class="toggle-icon">+</span> <!-- Add a plus sign initially -->
                                        {{ $tests->first()->category->category }}
                                    </h4>
                                </div>

                                <!-- The tests will be initially hidden, they will be shown when the category is clicked -->
                                <div class="test-group" id="category-{{ $categoryId }}" style="display: none;">
                                    @foreach ($tests as $test)
                                        <div class="col-lg-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="test_ids[]"
                                                    value="{{ $test->id }}" id="test-{{ $test->id }}">
                                                <label class="form-check-label" for="test-{{ $test->id }}">
                                                    {{ $test->name }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>

                        <button type="submit" class="btn btn-primary mt-2">Create</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('js')
    {{-- <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            CKEDITOR.replace('content');
        });
    </script> --}}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.day-checkbox').forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    var dayTimes = document.getElementById(this.id.replace('checkbox', 'times'));
                    dayTimes.style.display = this.checked ? 'block' : 'none';
                });
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const categoryToggles = document.querySelectorAll('.category-toggle');

            categoryToggles.forEach(function(toggle) {
                toggle.addEventListener('click', function() {
                    const categoryId = this.getAttribute('data-category-id');
                    const testGroup = document.getElementById('category-' + categoryId);
                    const toggleIcon = this.querySelector('.toggle-icon');

                    // Toggle visibility of the test group
                    if (testGroup.style.display === 'none' || testGroup.style.display === '') {
                        testGroup.style.display = 'block';
                        toggleIcon.textContent = '−'; // Change to minus when expanded
                    } else {
                        testGroup.style.display = 'none';
                        toggleIcon.textContent = '+'; // Change to plus when collapsed
                    }
                });
            });
        });

        document.querySelectorAll('.day-checkbox').forEach((checkbox) => {
            checkbox.addEventListener('change', function() {
                let day = this.id.split('-')[0];
                document.getElementById(day + '-times').style.display = this.checked ? 'block' : 'none';
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.add-time-slot').forEach(function(button) {
                button.addEventListener('click', function() {
                    const day = button.getAttribute('data-day');
                    const timeSlotsContainer = document.getElementById(day + '-times');

                    // Create a new time slot input group
                    const timeSlotGroup = document.createElement('div');
                    timeSlotGroup.className = 'time-slot-group';

                    // Start time input
                    const startTimeInput = document.createElement('input');
                    startTimeInput.type = 'time';
                    startTimeInput.name = day + '_start[]';
                    startTimeInput.placeholder = 'Start Time';

                    // End time input
                    const endTimeInput = document.createElement('input');
                    endTimeInput.type = 'time';
                    endTimeInput.name = day + '_end[]';
                    endTimeInput.placeholder = 'End Time';

                    // Append the inputs to the time slot group
                    timeSlotGroup.appendChild(startTimeInput);
                    timeSlotGroup.appendChild(endTimeInput);

                    // Append the new time slot group to the day's time slots container
                    timeSlotsContainer.appendChild(timeSlotGroup);
                });
            });
        });
    </script>
@endsection