@extends('dashboard.layouts.app')

@section('title', __('Edit Availability for') . ' ' . $teacher->name)
@section('page_heading', __('Edit Availability for') . ' ' . $teacher->name)

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}">{{ __('Home') }}</a></li>
<li class="breadcrumb-item"><a href="{{ route('dashboard.users.index') }}">{{ __('Teachers') }}</a></li>
<li class="breadcrumb-item"><a href="{{ route('dashboard.users.show', $teacher) }}">{{ $teacher->name }}</a></li>
<li class="breadcrumb-item active">{{ __('Edit Availability') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('Edit Availability') }}</h3>
         <div class="card-toolbar">
            {{--  Add Show Availability Button  --}}
            <a href="{{ route('dashboard.teachers.availability.show', $teacher) }}" class="btn btn-sm btn-info">
                {{ __('Show Availability') }}
            </a>
        </div>
    </div>
    <div class="card-body">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <form action="{{ route('dashboard.teachers.availability.update', $teacher) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label for="timezone" class="form-label">{{ __('Timezone') }}</label>
                <select name="timezone" id="timezone" class="form-select @error('timezone') is-invalid @enderror" required>
                    @foreach($timezones as $timezone)
                    <option value="{{ $timezone }}" {{ old('timezone', $current_timezone) == $timezone ? 'selected' : '' }}>
                        {{ $timezone }}
                    </option>
                    @endforeach
                </select>
                @error('timezone')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{ __('Hour') }}</th>
                            @foreach (['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] as $dayIndex => $day)
                            <th>{{ __($day) }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @for ($hour = 0; $hour < 24; $hour++) <tr>
                            <td>
                                {{ sprintf('%02d:00', $hour) }} - {{ sprintf('%02d:00', $hour + 1) }}
                                {{-- Button to select all slots for this hour --}}
                                 <button type="button" class="btn btn-sm btn-outline-secondary ms-2 select-all-hour" data-hour="{{ $hour }}">
                                    {{ __('All') }}
                                </button>
                                 <button type="button" class="btn btn-sm btn-outline-secondary ms-2 clear-hour" data-hour="{{ $hour }}">
                                        {{ __('Clear') }}
                                 </button>
                            </td>

                            @for ($day = 0; $day < 7; $day++)
                                <td>
                                    <input type="hidden" name="availabilities[{{ $day }}][{{ $hour }}]" value="0">
                                    <input type="checkbox"
                                        name="availabilities[{{ $day }}][{{ $hour }}]"
                                        value="1"
                                        class="availability-checkbox"
                                        data-day="{{ $day }}"
                                        data-hour="{{ $hour }}"
                                        @if(isset($availabilityData[$day][$hour]) && $availabilityData[$day][$hour]) checked @endif>
                                </td>
                                @endfor
                            </tr>
                            @endfor
                    </tbody>
                </table>
            </div>
            <button type="submit" class="btn btn-primary">{{ __('Save Availability') }}</button>
            <a href="{{route('dashboard.users.show',$teacher->id)}}" class='btn btn-secondary'>{{__('Back')}}</a>

        </form>
    </div>
</div>

{{-- Shift Availability Form --}}
<div class="card mt-4">
    <div class="card-header">
        <h3 class="card-title">{{ __('Shift Availabilities') }}</h3>
    </div>
     <div class="card-body">
        <form action="{{ route('dashboard.teachers.availability.shift', $teacher) }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-6">
                   <div class="input-group mb-3">
                        <span class="input-group-text">{{__('Hours')}}</span>
                        <input type="number" name="hours" class="form-control" placeholder="{{ __('Shift Hours (+/-)') }}" required>
                        <button class="btn btn-info" type="submit">{{ __('Shift') }}</button>
                   </div>
                    <small class="form-text text-muted">
                        {{ __('Enter a positive number to shift forward, negative to shift backward.') }}
                    </small>
                </div>
            </div>
        </form>
      </div>
</div>

@endsection

@section('scripts')
<script>
     $(document).ready(function() {
        $('#timezone').select2({
            placeholder: "{{__('dashboard.Select an option')}}",
            allowClear: true
        });

        $('.select-all-hour').on('click', function() {
            const hour = $(this).data('hour');
            $(`.availability-checkbox[data-hour="${hour}"]`).prop('checked', true);
        });

        // Clear button functionality
        $('.clear-hour').on('click', function() {
            const hour = $(this).data('hour');
            $(`.availability-checkbox[data-hour="${hour}"]`).prop('checked', false);
        });
    });
</script>
@endsection