@php
    $row = $schedule->row_number ?? $index;
    $hasExistingFile = !empty($schedule->file);
@endphp

<div class="schedule-row row_{{ $row }} border rounded p-3 mb-3">

    {{-- HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <strong>Class Schedule #{{ $index }}</strong>

        {{-- DELETE ROW --}}
        @if($index > 1)
            <a href="javascript:void(0)"
               class="deleteRow text-danger"
               data-row="{{ $row }}">
                <span class="fas fa-trash-alt"></span>
            </a>
        @endif
    </div>

    <div class="row">

        {{-- BUTTON NAME --}}
        <div class="col-md-6 mb-4">

            <label class="form-label">
                Button Name <span class="text-danger">*</span>
            </label>

            <input type="text"
                   name="data[{{ $row }}][button_name]"
                   class="form-control"
                   value="{{ old("data.$row.button_name", $schedule->button_name) }}"
                   required>

            @error("data.$row.button_name")
                <div class="text-danger small mt-1">
                    {{ $message }}
                </div>
            @enderror

        </div>


        {{-- PHOTO --}}
        <div class="col-md-6 mb-4">

            <label class="form-label">
                Choose Photo <span class="text-danger">*</span>
            </label>

            <input type="file"
                   name="files[{{ $row }}]"
                   class="form-control schedule-file-input"
                   accept="image/jpeg,image/png,image/webp"
                   @if(!$hasExistingFile) required @endif>

            @error("files.$row")
                <div class="text-danger small mt-1">
                    {{ $message }}
                </div>
            @enderror


            {{-- EXISTING IMAGE --}}
            @if($hasExistingFile)

                <div class="image-wrapper position-relative d-inline-block mt-2 uploaded_image_thumb"
                     data-id="{{ $schedule->id }}"
                     data-model="ClassSchedule"
                     data-column="file"
                     data-path="uploads/class-schedules">

                    <img src="{{ asset('uploads/class-schedules/'.$schedule->file) }}"
                         class="img-thumbnail"
                         width="80">

                    <button type="button"
                            class="remove-image-btn image-remove-icon"
                            title="Remove image">
                        ×
                    </button>

                </div>

                {{-- OLD FILE --}}
                <input type="hidden"
                       name="data[{{ $row }}][old_file]"
                       value="{{ $schedule->file }}"
                       class="old-file-input">

                {{-- REMOVE FLAG --}}
                <input type="hidden"
                       name="data[{{ $row }}][remove_file]"
                       value="0"
                       class="remove-file-input">

            @endif

        </div>

    </div>

    <input type="hidden"
           name="data[{{ $row }}][row_number]"
           value="{{ $row }}">

</div>