@extends('admin.dashboard.layouts.app')
@section('main')

<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Edit Doctor Schedule</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('doctor-schedules.index') }}">Schedules</a></li>
                        <li class="breadcrumb-item active">Edit</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Edit Schedule Details</h3>
                        </div>

                        <form action="{{ route('doctor-schedules.update', $schedule->id) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="card-body">
                                <!-- Doctor Selection -->
                                <div class="form-group">
                                    <label for="doctor_id">Doctor</label>
                                    <select name="doctor_id" id="doctor_id" class="form-control" required>
                                        <option value="">Select Doctor</option>
                                        @foreach($doctors as $doctor)
                                            <option value="{{ $doctor->doctor_id }}" 
                                                {{ $schedule->doctor_id == $doctor->doctor_id ? 'selected' : '' }}>
                                                {{ $doctor->d_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Organization Selection -->
                                <div class="form-group">
                                    <label for="organization_id">Organization</label>
                                    <select name="organization_id" class="form-control" required>
                                        <option value="">Select Organization</option>
                                        @foreach($organizations as $org)
                                            <option value="{{ $org->id }}" 
                                                {{ $schedule->organization_id == $org->id ? 'selected' : '' }}>
                                                {{ $org->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                 <!-- Available Days - Checkbox Version -->
        <div class="row mb-3">
            <div class="col-12 col-md-6" id="onlineAvailableDiv">
                <label for="">Available on</label>
                <div class="d-flex flex-wrap">
                    @php
                        // Parse the existing available_on value to determine which days are selected
                        $selectedDays = $schedule->available_on ? explode(', ', $schedule->available_on) : [];
                        $days = ['All', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
                    @endphp
                    
                    @foreach($days as $index => $day)
                    <div class="custom-control custom-checkbox m-1">
                        <input class="custom-control-input {{ $day === 'All' ? '' : 'day-checkbox' }}" 
                               type="checkbox" 
                               id="onlineCheckbox{{ $index + 1 }}" 
                               value="{{ $day === 'All' ? 'all' : $day }}" 
                               onchange="{{ $day === 'All' ? 'toggleAllDays()' : 'updateAllCheckbox()' }}"
                               {{ in_array($day, $selectedDays) || ($day === 'All' && count($selectedDays) === 7) ? 'checked' : '' }}>
                        <label for="onlineCheckbox{{ $index + 1 }}" class="custom-control-label">{{ $day }}</label>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="online_selected_date">Selected Days</label>
                    <input type="text" readonly name="available_on" value="{{ $schedule->available_on }}" class="form-control" id="online_selected_date">
                    @error('available_on')
                    <span class="text-danger">{{$message}}</span>
                    @enderror
                </div>
            </div>
        </div>

                              

                                <!-- Time Slots -->
                                <div class="row">
                                    <div class="col-lg-6">
                <div class="form-group">
                    <label for="d_starting_time">Starting Time</label>
                    <div class="input-group">
                        <input type="text" 
       name="d_starting_time" 
       value="{{ $schedule->d_starting_time 
            ? \Carbon\Carbon::parse($schedule->d_starting_time)->format('h:i A') 
            : '' }}" 
       class="form-control" 
       id="onlineStartTimePicker" 
       required>
                        <div class="input-group-append">
                            <span class="input-group-text"><ion-icon name="time-outline"></ion-icon></span>
                        </div>
                    </div>
                    @error('d_starting_time')
                        <span class="text-danger">{{$message}}</span>
                    @enderror
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label for="d_ending_time">Ending Time</label>
                    <div class="input-group">
                        <input type="text" name="d_ending_time" 
                               value="{{ $schedule->d_ending_time ? \Carbon\Carbon::parse($schedule->d_ending_time)->format('h:i A') : '' }}" 
                               class="form-control" id="onlineEndTimePicker" required>
                        <div class="input-group-append">
                            <span class="input-group-text"><ion-icon name="time-outline"></ion-icon></span>
                        </div>
                    </div>
                    @error('d_ending_time')
                        <span class="text-danger">{{$message}}</span>
                    @enderror
                </div>
            </div>
        </div>


                                <!-- Fee and Consultation Time -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="d_fee">Consultation Fee</label>
                                            <input type="number" step="0.01" name="d_fee" class="form-control" 
                                                value="{{ $schedule->d_fee }}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="avg_delay">Consultation Duration (minutes)</label>
                                            <select name="avg_delay" class="form-control" required>
                                                @foreach([5,10,15,20,25,30,35,40,45,50,55,60] as $minutes)
                                                    <option value="{{ $minutes }}" 
                                                        {{ $schedule->avg_delay == $minutes ? 'selected' : '' }}>
                                                        {{ $minutes }} minutes
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Additional Options -->
                                <div class="form-group">
                                    <label for="additional_time">Additional Time </label>
                                    <input type="text" name="additional_time" class="form-control" 
                                        value="{{ $schedule->additional_time }}">
                                </div>
                                 <div class="form-group">
                                    <label for="black_time">Black Time</label>
                                    <input type="text" name="black_time" class="form-control" 
                                        value="{{ $schedule->black_time }}">
                                </div>

                             
                            </div>

                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Update Schedule</button>
                                <a href="{{ route('doctor-schedules.index') }}" class="btn btn-default">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    function toggleAllDays() {
        const allCheckbox = document.getElementById('onlineCheckbox1');
        const dayCheckboxes = document.querySelectorAll('.day-checkbox');
        const isChecked = allCheckbox.checked;
        
        dayCheckboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });
        
        updateSelectedDate();
    }
    
    function updateAllCheckbox() {
        const allCheckbox = document.getElementById('onlineCheckbox1');
        const dayCheckboxes = document.querySelectorAll('.day-checkbox');
        const allChecked = Array.from(dayCheckboxes).every(checkbox => checkbox.checked);
        const noneChecked = Array.from(dayCheckboxes).every(checkbox => !checkbox.checked);
        
        if (allChecked) {
            allCheckbox.checked = true;
        } else if (noneChecked) {
            allCheckbox.checked = false;
        } else {
            // When some but not all are checked, set the all checkbox to indeterminate state
            allCheckbox.indeterminate = true;
        }
        
        updateSelectedDate();
    }
    
    function updateSelectedDate() {
        const selectedDays = [];
        const dayCheckboxes = document.querySelectorAll('.day-checkbox:checked');
        
        dayCheckboxes.forEach(checkbox => {
            selectedDays.push(checkbox.value);
        });
        
        document.getElementById('online_selected_date').value = selectedDays.join(', ');
    }
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Set initial state for the "All" checkbox
        const allCheckbox = document.getElementById('onlineCheckbox1');
        const dayCheckboxes = document.querySelectorAll('.day-checkbox');
        const allChecked = Array.from(dayCheckboxes).every(checkbox => checkbox.checked);
        
        if (allChecked) {
            allCheckbox.checked = true;
        } else if (Array.from(dayCheckboxes).some(checkbox => checkbox.checked)) {
            allCheckbox.indeterminate = true;
        }
        
        updateSelectedDate();
    });
</script>

@endsection