@extends('layouts.admin.app')
@section('content')
<div class="container-fluid w-100 mb-4">
    <div class="row">
        <p class="display-6 fw-bold">Edit Services</p>
    </div>
    <div class="row">
        <form action="{{route('admin.service.update',$service->id)}}" method="POST" id="form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="_method" value="PUT" />
            <div class="col-12 col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <input type="text" class="form-control required" id="title" name="title" value="{{$service->title}}" placeholder="Title">
                                    <label for="floatingInput">Title</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <textarea type="text" class="form-control required" id="short_description" name="short_description" placeholder="Short Sescription">{{$service->short_description}}</textarea>
                                    <label for="short_description">Short Description</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <textarea type="text" class="form-control required" id="banner_sub_text" name="banner_sub_text" placeholder="Banner Sub Text">{{$service->banner_sub_text}}</textarea>
                                    <label for="banner_sub_text">Banner Sub Text</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <textarea type="text" class="form-control editor required" id="description" name="description" placeholder="Description">{{$service->desc}}</textarea>
                                    <label for="description">Description</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <input type="file" class="form-control" id="banner" name="banner" placeholder="banner">
                                    <label for="banner">Bannet-{{$service->banner_image}}</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <input type="file" class="form-control" id="image" name="image" placeholder="image">
                                    <label for="image">Image-{{$service->image}}</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <input type="file" class="form-control" id="icon" name="icon" placeholder="icon">
                                    <label for="icon">Icon-{{$service->icon}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- FAQ Table Start -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="mb-2 d-flex justify-content-between align-items-center">
                        <label class="fw-bold mb-2">FAQs</label>
                        <button type="button" class="btn btn-primary btn-sm text-white add-faq-row">
                            <i class="fa fa-plus text-white"></i>
                        </button>
                    </div>
                    <table class="table table-bordered" id="faq-table">
                        <thead>
                            <tr>
                                <th class="w-40">Question</th>
                                <th class="w-40">Answer</th>
                                <th class="w-10"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($service_faqs as $service_faq)
                            <tr>
                                <input type="hidden" name="faq_id[]" value="{{$service_faq->id}}"/>
                                <td>
                                    <textarea type="text" name="question[]" class="form-control editor" placeholder="Enter question">{{$service_faq->question}}</textarea>
                                </td>
                                <td>
                                    <textarea type="text" name="answer[]" class="form-control editor" placeholder="Enter answer">{{$service_faq->answer}}</textarea>
                                </td>
                                <td></td>
                            </tr>
                            @endforeach
                            <tr>
                                <td>
                                    <textarea type="text" name="question[]" class="form-control editor" placeholder="Enter question"></textarea>
                                </td>
                                <td>
                                    <textarea type="text" name="answer[]" class="form-control editor" placeholder="Enter answer"></textarea>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- FAQ Table End -->
            <div class="d-flex align-items-center pe-5 my-4">
                <input class="btn btn-primary" type="submit" value="Submit">
            </div>
        </form>
    </div>
</div>
@endsection