@extends('layouts.admin')
@section('content')
@include('components.admin.header')
@include('components.admin.nav')
    @push('styles')
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="{{ asset('plugins/dropify/css/dropify.min.css') }}">
        <link type="text/css" rel="stylesheet" href="{{ asset('plugins/uploadify/imageuploadify.min.css') }}">
    @endpush
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Edit Service</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Dashboard</a></li>
                                    <li class="breadcrumb-item active">Edit Service</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <form action="{{ url('admin/services/update/'.$service->id) }}" method="POST" id="softwareForm"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label" for="project-title-input">Name</label>
                                        <input type="text" class="form-control" name="name" id="name" value="{{$service->name}}"
                                            id="project-title-input" placeholder="Enter category title">
                                        @error('name')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="project-title-input">Short Description</label>
                                        <textarea name="short_desc" id="short_desc" class="form-control" rows="10">{{$service->short_desc}}</textarea>
                                        @error('short_desc')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="project-title-input">Meta Title</label>
                                        <input type="text" class="form-control" name="meta_title" id="meta_title" value="{{$service->meta_title}}"
                                            id="project-title-input" placeholder="Enter meta title">
                                        @error('meta_title')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="project-title-input">Meta Description</label>
                                        <textarea name="meta_desc" id="meta_desc" class="form-control" rows="2">{{$service->meta_desc}}</textarea>
                                        @error('meta_desc')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <label for="choices-priority-input" class="form-label">Featured Image*</label>
                                        <input type="file" id="input-file-now" class="dropify" name="image"
                                            data-allowed-file-extensions="jpg png jpeg gif webp" data-max-file-size="5M"
                                            data-errors-position="outside" data-default-file="{{ $service->image }}">
                                        @error('image')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="text-end mb-4">
                                <button type="submit" class="btn btn-primary w-sm">Update</button>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
                <!-- end page title -->
            </div>
            <!-- container-fluid -->
        </div>
        @include('components.admin.footer')
    </div>
    @push('scripts')
        <script src="{{ asset('plugins/dropify/js/dropify.min.js') }}"></script>
        <script src="{{ asset('plugins/multiple/jquery.uploader.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('plugins/uploadify/imageuploadify.min.js') }}"></script>
        <script>
            $('.dropify').dropify({
                messages: {
                    'default': 'Drag and drop a image here or click',
                    'replace': 'Drag and drop or click to replace',
                    'remove': 'Remove Image',
                    'error': 'Ooops, something wrong happended.'
                },
                error: {
                    'fileSize': 'The file size is too big (5 MB max).',
                    'imageFormat': 'The image format is not allowed (jpg, png, jpeg, gif, webp only).'
                },
            });
        </script>
    @endpush
@endsection