@extends('backendPartials.default')

<style>
    /* Ensures the editor looks clean with Bootstrap 5 */
    .note-editable {
        background-color: #fff !important;
    }
    .current-img-preview {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 5px;
        border: 1px solid #ddd;
    }
</style>

@section('section')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4>Edit Team Member: {{ $member->name }}</h4>
                    <a href="{{ route('admin.team') }}" class="btn btn-secondary btn-sm">Back</a>
                </div>
                    
                <form method="post" action="{{ route('admin.team.update') }}" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{{ $member->id }}">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Full Name</label>
                            <input type="text" required name="name" class="form-control" 
                                   value="{{ $member->name }}" placeholder="e.g. John Doe">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Job Title</label>
                            <input type="text" required name="job_title" class="form-control" 
                                   value="{{ $member->job_title }}" placeholder="e.g. Senior Developer">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Profile Image</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                            <small class="text-muted">Leave blank to keep the current image.</small>
                            <div class="mt-2">
                                <p class="mb-1 small fw-bold text-muted">Current Image:</p>
                                <img src="{{ asset('storage/team/' . $member->image) }}" class="current-img-preview">
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Status</label>
                            <select name="active" required class="form-select">
                                <option value="1" {{ $member->is_active == 1 ? 'selected' : '' }}>Active (Visible on Site)</option>
                                <option value="0" {{ $member->is_active == 0 ? 'selected' : '' }}>Inactive (Hidden)</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Biography / Description</label>
                        <textarea name="description" id="summernote" class="form-control">{!! $member->description !!}</textarea>
                    </div>

                    <div class="mt-4 border-top pt-3 text-end">
                        <a href="{{ route('admin.team') }}" class="btn btn-light px-4 me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary px-5">
                            <i class="fas fa-save"></i> Update Team Member
                        </button>
                    </div>
                </form>    
                
            </div>
        </div>
    </div>
</div>
@endsection

@section('jsOutside')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
    var $j = jQuery.noConflict();

    $j(document).ready(function() {
        if ($j().summernote) {
            $j('#summernote').summernote({
                height: 300,
                placeholder: 'Edit biography...',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']],
                    ['view', ['fullscreen', 'codeview']]
                ]
            });
        }
    });
</script>
@endsection