@extends('admin.layouts.app')

@section('page_title')
Edit Project
@endsection
@section('content')
<div class="container-fluid p-0">
    <div class="card m-0">
        <div class="card-header pb-0">
            <h5 class="card-title mb-0">Edit Project</h5>
        </div>
        <div class="card-body">
            <form method="post" action="{{route('admin.projects.update', $id)}}" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="form-group col-md-6">
                        <label class="form-label">Category<small class="text-danger">*</small></label>
                        <div>
                            <select class="custom-select select2 form-control @error('category_id') is-invalid @enderror" id="category-select" name="category_id" >
                                <option value>Select category</option>
                                @foreach ($categories as $category)
                                    <option value="{{$category->id}}" @if($project->category_id == $category->id) selected @endif>{{$category->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('category_id')
                            <span class="text-danger" role="alert">
                                <strong style="color:red">{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group col-md-6">
                        <label class="form-label">Project Title<small class="text-danger">*</small></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" placeholder="Enter title of Project" value="{{$project->title}}">
                        @error('title')
                            <span class="invalid-feedback" role="alert">
                                <strong style="color:red">{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group col-md-12">
                        <label class="form-label">Keywords<small class="text-danger">*</small></label>
                        <div wire:ignore>
                            <input type="text" data-role="tagsinput" id="keywords-tagsinput" class="form-control @error('keywords') is-invalid @enderror" name="keywords" placeholder="Enter keywords of Project" value="{{$project->keywords}}">
                        </div>
                        @error('keywords')
                            <span class="text-danger" role="alert">
                                <strong style="color:red">{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group col-md-12">
                        <label class="form-label">Project thumbnail<small class="text-danger">*</small></label>
                        <input type="file" class="form-control @error('title') is-invalid @enderror" name="thumbnail">
                        @error('images')
                            <span class="invalid-feedback" role="alert">
                                <strong style="color:red">{{ $message }}</strong>
                            </span>
                        @enderror

                        @if ($project->thumbnail)
                            <div class="border rounded p-1 d-flex flex-column mt-2" style="width: 150px;">
                                <img src="{{asset($project->thumbnail)}}" alt="">
                                {{-- <button class="btn btn-sm btn-danger mt-2">Remove</button> --}}
                            </div>
                        @endif                        
                    </div>

                    <div class="form-group col-md-12" wire:ignore>
                        <label class="form-label"> Description</label>
                        <textarea class="form-control ckeditor-textarea" name="description" id="description" placeholder="Enter description of Category" rows="5">{{$project->description}}</textarea>
                    </div>

                    <div class="form-group col-md-8">
                        <label class="form-label">Project Link<small class="text-danger">*</small></label>
                        <input type="text" class="form-control @error('link') is-invalid @enderror" name="link" placeholder="Enter link of Project" value="{{$project->link}}">
                        @error('link')
                            <span class="invalid-feedback" role="alert">
                                <strong style="color:red">{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    
                    <div class="form-group col-md-4">
                        <label class="form-label">Status</label>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="statusCheck" name="status" @if($project->status == 1) checked @endif>
                            <label class="form-check-label" for="statusCheck">Active/Inactive</label>
                        </div>
                        
                        @error('link')
                            <span class="invalid-feedback" role="alert">
                                <strong style="color:red">{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

               
                
                <button type="submit" class="btn btn-primary">Updated</button>
                <a href="{{route('admin.projects.index')}}" class="btn btn-secondary">Cancel</a>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $('#category-select').on('change', function() {
        @this.set('category_id', $(this).val());
    });
</script>
@endsection