@extends('admin.layouts.app')
@section('content')
<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    Add new course
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.courses.update', $course) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col-2">
                            <img id="avatar_preview" src="{{ asset($course->image->path ?? 'images/default.png') }}" alt="Image Preview" class="img-thumbnail ms-3" style="max-width: 150px;">
                        </div>
                        <div class="col align-self-center">
                            <label for="image" class="form-label">Course image <small class="text-danger">*</small></label>
                            <div class="input-group">
                                <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)">
                                <label class="btn rounded-pill btn-label-primary waves-effect" for="image" id="image_label">Choose File</label>
                                @error('image')
                                <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="name" class="form-label">Course name <span class='text-danger'>*</span></label>
                            <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $course->name) }}" placeholder="e.g., Introduction to Programming" required />
                            @error('name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="provided_by" class="form-label">Provided by <span class='text-danger'>*</span></label>
                            <input type="text" name="provided_by" id="provided_by" class="form-control @error('provided_by') is-invalid @enderror" value="{{ old('provided_by', $course->provided_by) }}" placeholder="e.g., University XYZ" required />
                            @error('provided_by')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="hours" class="form-label">Hours <span class='text-danger'>*</span></label>
                            <input type="number" min="1" name="hours" id="hours" class="form-control @error('hours') is-invalid @enderror" value="{{ old('hours', $course->hours) }}" placeholder="e.g., 30" required />
                            @error('hours')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="type" class="form-label">Type <span class='text-danger'>*</span></label>
                            <select name="type" id="type" class="select2 w-100 form-control @error('type') is-invalid @enderror" required>
                                <option value="">Select a type</option>
                                <option value="online" {{ old('type', $course->type) == 'online' ? 'selected' : '' }}>Online</option>
                                <option value="offline" {{ old('type', $course->type) == 'offline' ? 'selected' : '' }}>Offline</option>
                            </select>
                            @error('type')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="description" class="form-label">Description <span class='text-danger'>*</span></label>
                            <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" placeholder="Enter course description" required>{{ old('description', $course->description) }}</textarea>
                            @error('description')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection


@section('script')
<script>
    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('avatar_preview');
            output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    }

</script>
@endsection