@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" />
    @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">Add 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">Add Service</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <form action="{{ url('admin/serviceitems/update/'.$serviceItem->id) }}" method="POST" id="softwareForm">
                    @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="{{$serviceItem->name}}"
                                            id="project-title-input" placeholder="Enter name">
                                        @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">Select Service</label>
                                        <select name="service_id" id="service_id" class="form-control">
                                            @foreach ($services as $service)
                                            <option value="{{$service->id}}" @if($service->id == $serviceItem->service_id) selected @endif>{{$service->name}}</option>
                                            @endforeach
                                        </select>
                                        @error('service_id')
                                            <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">{{$serviceItem->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">Price</label>
                                        <input type="text" class="form-control" name="price" id="price" value="{{$serviceItem->price}}"
                                            id="project-title-input" placeholder="Enter price">
                                        @error('price')
                                            <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="{{$serviceItem->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">{{$serviceItem->meta_desc}}</textarea>
                                        @error('meta_desc')
                                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-12 mb-3 ">
                                        <div class="mb-3 mb-lg-0">
                                            <label for="choices-priority-input" class="form-label">Features
                                            </label>
                                            <select class="form-select features" name="feature[]" id="features"
                                                multiple required>
                                                @foreach (json_decode($serviceItem->services) as  $feature)
                                                    <option value="{{$feature}}" selected>{{$feature}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </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="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function() {
            $(".features").select2({
                placeholder: "Enter features",
                tags: true,
                tokenSeparators: [',']
            });
        });
    </script>
    @endpush
@endsection