@extends('admin.layouts.app')

@section('page_title')
Add New 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">Add a Project</h5>
        </div>
        <div class="card-body">
            <form method="post" action="{{route('admin.projects.store')}}" 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}}">{{$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" >
                        @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" >
                        </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
                    </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"></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" >
                        @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" checked>
                            <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>

                @if ($errors->first())
                    {{dd($errors)}}
                @endif
                
                <button type="submit" class="btn btn-primary">Submit</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