@extends('components.dashboard.layouts.master')

@section('styles')
    @stack('datatableStyles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .bold {
            font-weight: bold;
        }

        .underline-line {
            text-decoration: underline;
        }

        .schedule-row {
            border: 1px solid #e0e0e0;
            padding: 15px 15px 10px 15px;
            border-radius: 6px;
            margin-bottom: 12px;
            background-color: #f9f9f9;
            position: relative;
        }

        #add-schedule,
        .btn-remove-schedule {
            width: 38px;
            height: 38px;
            font-size: 20px;
            line-height: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid #0A4199;
            background: white;
            color: #0A4199;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            user-select: none;
            font-weight: bold;
        }

        #add-schedule:hover,
        .btn-remove-schedule:hover {
            background-color: #0A4199;
            color: white;
        }

        .schedule-controls {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            height: 100%;
        }

        .label-with-btn {
            display: flex;
            align-items: center;
            gap: 10px;
        }


        .row.g-3 > [class*='col-'] {
            margin-bottom: 12px;
        }

        @media (max-width: 575.98px) {
            .schedule-row .form-group {
                margin-bottom: 10px;
            }
        }
    </style>
@endsection

@section('title')
    {{ __('Add Group') }}
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row"></div>
            <div class="content-body">

                <x-dashboard.layouts.breadcrumb now="{{__('Add Group')}}">
                    <li class="breadcrumb-item"><a href="{{route('teacher.groups.index')}}">
                            {{__('Groups')}}
                        </a></li>
                </x-dashboard.layouts.breadcrumb>


                <section id="basic-input">
                    <div class="row justify-content-center">
                        <div class="col-xl-10 col-lg-11 col-md-12 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('Add Group') }}</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <form action="{{ route('teacher.groups.store') }}" method="POST" novalidate>
                                            @csrf

                                            <div class="row g-3">

                                                <div class="col-md-9 col-12">
                                                    <label for="grade_ids" class="form-label font-weight-bold underline-line">{{ __('Grades') }}</label>
                                                    <select id="grade_ids" name="grade_ids[]" class="form-control select2 select-group mb-2" multiple>
                                                        @foreach($grades as $grade)
                                                            <option value="{{ $grade->id }}" {{ collect(old('grade_ids'))->contains($grade->id) ? 'selected' : '' }}>
                                                                {{ $grade->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    @error('grade_ids')
                                                    <div class="text-danger mt-1 small">
                                                        <i class="fas fa-exclamation-circle me-1"></i> {{ $message }}
                                                    </div>
                                                    @enderror
                                                </div>

                                                <div class="col-md-4 col-12 seletc-test">
                                                    <label for="standardized_test_id" class="form-label font-weight-bold underline-line">{{ __('Test Type') }}</label>
                                                    <select name="standardized_test_id" id="standardized_test_id" class="form-control">
                                                        <option value="">{{ __('Select Test Type') }}</option>
                                                        @foreach($tests as $test)
                                                            <option value="{{ $test->id }}" {{ old('standardized_test_id') == $test->id ? 'selected' : '' }}>
                                                                {{ $test->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('standardized_test_id')
                                                    <div class="text-danger mt-1 small">
                                                        <i class="fas fa-exclamation-circle me-1"></i> {{ $message }}
                                                    </div>
                                                    @enderror
                                                </div>

                                                <div class="col-md-2 col-12 select-group">
                                                    <label for="status" class="form-label font-weight-bold underline-line">{{ __('Status') }}</label>
                                                    <select name="status" id="status" class="form-control">
                                                        <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                                                    </select>
                                                    @error('status')
                                                    <div class="text-danger mt-1 small">
                                                        <i class="fas fa-exclamation-circle me-1"></i> {{ $message }}
                                                    </div>
                                                    @enderror
                                                </div>

                                                <div class="col-md-3 col-12 select-group">
                                                    <label for="max_students" class="form-label font-weight-bold underline-line">{{ __('Max Students') }}</label>
                                                    <input type="number" name="max_students" id="max_students" class="form-control"
                                                           value="{{ old('max_students', 0) }}" min="0" placeholder="{{ __('Enter max students') }}">
                                                    @error('max_students')
                                                    <div class="text-danger mt-1 small">
                                                        <i class="fas fa-exclamation-circle me-1"></i> {{ $message }}
                                                    </div>
                                                    @enderror
                                                </div>

                                                <div class="col-12 position-relative">
                                                    <div class="label-with-btn mb-1 d-flex align-items-center justify-content-between">
                                                        <label class="form-label font-weight-bold underline-line mb-0">{{ __('Schedules') }}</label>
                                                        <div class="col-md-3 d-flex align-items-end schedule-controls px-1">
                                                            <button type="button" id="add-schedule" title="{{ __('Add Schedule') }}">+</button>
                                                        </div>
                                                    </div>

                                                    <div id="schedule-wrapper">
                                                        <div class="schedule-row">
                                                            <div class="row g-3">
                                                                <div class="col-md-3">
                                                                    <label class="form-label">{{ __('Day') }}</label>
                                                                    <select name="schedules[0][day]" class="form-control" required>
                                                                        <option value="">{{ __('Select Day') }}</option>
                                                                        @foreach(\App\Enum\DaysEnum::getValues() as $day)
                                                                            <option value="{{ $day }}">{{ __($day) }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <label class="form-label">{{ __('From') }}</label>
                                                                    <input type="time" name="schedules[0][start_time]" class="form-control" required>
                                                                </div>

                                                                <div class="col-md-3">
                                                                    <label class="form-label">{{ __('To') }}</label>
                                                                    <input type="time" name="schedules[0][end_time]" class="form-control" required>
                                                                </div>

                                                                <div class="col-md-3 d-flex align-items-end schedule-controls">
                                                                    <button type="button" class="btn btn-outline-danger rounded-circle btn-remove-schedule">&minus;</button>
                                                                </div>

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

                                                <div class="col-12 mt-4 d-flex justify-content-end">
                                                    <button type="submit" class="btn btn-primary px-5">{{ __('Save') }}</button>
                                                </div>

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

            </div>
        </div>
    </div>
@endsection

@section('script')
    @stack('datatableScripts')

    <script>
        let scheduleIndex = 1;

        const wrapper = document.getElementById('schedule-wrapper');
        const addBtn = document.getElementById('add-schedule');

        function createScheduleRow(index) {
            const row = document.createElement('div');
            row.classList.add('schedule-row');
            row.innerHTML = `
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">{{ __('Day') }}</label>
                        <select name="schedules[${index}][day]" class="form-control" required>
                            <option value="">{{ __('Select Day') }}</option>
                            @foreach(\App\Enum\DaysEnum::getValues() as $day)
            <option value="{{ $day }}">{{ __($day) }}</option>
                            @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label">{{ __('From') }}</label>
                        <input type="time" name="schedules[${index}][start_time]" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('To') }}</label>
                        <input type="time" name="schedules[${index}][end_time]" class="form-control" required>
                    </div>
                    <div class="col-md-3 d-flex align-items-end schedule-controls">
                        <button type="button" class="btn btn-outline-danger rounded-circle btn-remove-schedule">&minus;</button>
                    </div>
                </div>
            `;
            return row;
        }

        addBtn.addEventListener('click', () => {
            const newRow = createScheduleRow(scheduleIndex);
            wrapper.appendChild(newRow);
            scheduleIndex++;
        });

        wrapper.addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('btn-remove-schedule')) {
                const schedules = wrapper.querySelectorAll('.schedule-row');
                if (schedules.length > 1) {
                    e.target.closest('.schedule-row').remove();
                } else {
                    alert("{{ __('At least one schedule is required.') }}");
                }
            }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#grade_ids').select2({
                placeholder: "{{ __('Select Grades') }}",
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endsection