@extends('admin.layout.app')

@section('body')
<div class="card card-page p-3 shadow-sm">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-0">{{ __('admin.edit_material') }}#{{ $material->id }}</h4>
            <small class="text-muted">{{ __('admin.update_file_video_link') }}</small>
        </div>
        <a href="{{ route('course-materials.index',['course_id'=>$material->course_id]) }}" class="btn btn-outline-secondary">{{ __('admin.back') }}</a>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('course-materials.update',$material->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">{{ __('admin.course_2') }}</label>
                <select name="course_id" class="form-select" required>
                    @foreach($courses as $c)
                        <option value="{{ $c->id }}" @selected(old('course_id',$material->course_id)==$c->id)>
                            {{ $c->title }} @if($c->code) ({{ $c->code }}) @endif
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label class="form-label">{{ __('admin.title_2') }}</label>
                <input name="title" class="form-control" required value="{{ old('title',$material->title) }}">
            </div>

            <div class="col-md-4">
                <label class="form-label">{{ __('admin.type') }}</label>
                <select name="type" id="materialType" class="form-select" required>
                    <option value="file" @selected(old('type',$material->type)==='file')>{{ __('admin.file_2') }}</option>
                    <option value="video_link" @selected(old('type',$material->type)==='video_link')>{{ __('admin.video_link') }}</option>
                </select>
            </div>

            <div class="col-md-8" id="fileWrap">
                <label class="form-label">{{ __('admin.replace_file') }}</label>
                <input type="file" name="file" class="form-control">

                @if($material->file_path)
                    <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
                        <a class="btn btn-sm btn-outline-info" target="_blank"
                           href="{{ asset('storage/'.$material->file_path) }}">
                            <i class="fas fa-download me-1"></i> {{ __('admin.view_current_file') }}
                        </a>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="remove_file" value="1" id="rmFile">
                            <label class="form-check-label" for="rmFile">{{ __('admin.remove_current_file') }}</label>
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-md-8 d-none" id="videoWrap">
                <label class="form-label">{{ __('admin.video_url') }}</label>
                <input name="video_url" class="form-control" value="{{ old('video_url',$material->video_url) }}">
            </div>

            <div class="col-12">
                <button class="btn btn-primary">
                    <i class="fas fa-save me-2"></i> {{ __('admin.update') }}
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script')
<script>
    (function(){
        const type = document.getElementById('materialType');
        const fileWrap = document.getElementById('fileWrap');
        const videoWrap = document.getElementById('videoWrap');

        function toggle(){
            if(type.value === 'video_link'){
                fileWrap.classList.add('d-none');
                videoWrap.classList.remove('d-none');
            }else{
                videoWrap.classList.add('d-none');
                fileWrap.classList.remove('d-none');
            }
        }
        toggle();
        type.addEventListener('change', toggle);
    })();
</script>
@endsection