@extends('back-end.master.app')

@section('title', 'Edit Poet')

@section('pageCSS')
@endsection

@section('body')
<main class="app-content">
    <div class="card">
        <div class="card-header">
            <h4>Edit Poet</h4>
        </div>
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('poets.update', $poet->id) }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>First Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $poet->name) }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" name="last_name" class="form-control" value="{{ old('last_name', $poet->last_name) }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Date of Birth</label>
                            <input type="date" name="dob" class="form-control" value="{{ old('dob', $poet->dob) }}">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Century <span class="text-danger">*</span></label>
                            <select name="centry_id" class="form-control select2" required>
                                <option value="">-- Select Century --</option>
                                @foreach ($centries as $cent)
                                    <option value="{{ $cent->id }}" {{ (old('centry_id', $poet->centry_id) == $cent->id) ? 'selected' : '' }}>
                                        {{ $cent->title_ps }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Image</label>
                            <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event)">
                            @if($poet->image && $poet->image != 'image/noimage.jpg')
                                <img src="{{ asset('storage/'.$poet->image) }}" alt="Current" style="max-width: 100%; max-height: 150px; margin-top:10px;">
                            @endif
                            <img id="imagePreview" src="#" alt="Preview" style="max-width: 100%; max-height: 150px; display: none; margin-top:10px;">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Father Name</label>
                            <input type="text" name="father_name" class="form-control" value="{{ old('father_name', $poet->father_name) }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="text" name="phone" class="form-control" value="{{ old('phone', $poet->phone) }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $poet->email) }}">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Address <span class="text-danger">*</span></label>
                            <input type="text" name="address" class="form-control" value="{{ old('address', $poet->address) }}" required>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Biography <span class="text-danger">*</span></label>
                            <textarea id="bio" name="bio" rows="6" class="form-control">{{ old('bio', $poet->bio) }}</textarea>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">Update</button>
                        <a href="{{ route('poets.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</main>
@endsection

@section('pageJs')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    $('.select2').select2();

    ClassicEditor.create(document.querySelector('#bio')).catch(error => {
        console.error(error);
    });

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

    $(".app-menu").removeClass("active");
    $("#nav_poetsi").addClass("active");
    $("#poetsi").addClass("is-expanded");
    $("#poets_history").addClass("active");
</script>
@endsection