@extends('layouts.admin')

@section('content')
<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h4>Edit What We Do</h4>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.what-we-do.update', $item->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="form-group mb-3">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control" value="{{ old('title', $item->title) }}" required>
                    @error('title') <div class="text-danger">{{ $message }}</div> @enderror
                </div>

                <div class="form-group mb-3">
                    <label>Sub Title</label>
                    <input type="text" name="sub_title" class="form-control" value="{{ old('sub_title', $item->sub_title) }}">
                    @error('sub_title') <div class="text-danger">{{ $message }}</div> @enderror
                </div>

                <div class="form-group mb-3">
                    <label>Short Description</label>
                    <textarea name="short_description" class="form-control" rows="3">{{ old('short_description', $item->short_description) }}</textarea>
                    @error('short_description') <div class="text-danger">{{ $message }}</div> @enderror
                </div>

                <div class="form-group mb-3">
                    <label>Description</label>
                    <textarea name="description" id="description" class="form-control" rows="5">{{ old('description', $item->description) }}</textarea>
                    @error('description') <div class="text-danger">{{ $message }}</div> @enderror
                </div>

                <div class="form-group mb-3">
                    <label>Image (optional)</label>
                    <input type="file" name="image" class="form-control" onchange="previewImage(event)">
                    @error('image') <div class="text-danger">{{ $message }}</div> @enderror

                    <img id="previewImage"
                         src="{{ $item->image ? asset($item->image) : '' }}"
                         class="img-thumbnail mt-2"
                         width="150"
                         style="{{ $item->image ? '' : 'display:none;' }}">
                </div>

                <div class="form-group mb-3">
                    <label>Status</label>
                    <select name="status" class="form-control">
                        <option value="1" {{ $item->status == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ $item->status == 0 ? 'selected' : '' }}>Inactive</option>
                    </select>
                    @error('status') <div class="text-danger">{{ $message }}</div> @enderror
                </div>

                <button type="submit" class="btn btn-success w-100">Update</button>
            </form>
        </div>
    </div>
</div>

{{-- CKEditor --}}
<script src="https://cdn.ckeditor.com/4.21.0/full/ckeditor.js"></script>
<script>
    CKEDITOR.replace('short_description', { height: 150 });
    CKEDITOR.replace('description', { height: 300 });

    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = function(){
            const output = document.getElementById('previewImage');
            output.src = reader.result;
            output.style.display = 'block';
        };
        reader.readAsDataURL(event.target.files[0]);
    }
</script>
@endsection