<div class="col-xl-12">
    <div class="ps-widget bgc-white bdrs4 p30 mb30 overflow-hidden position-relative">
        <div class="bdrb1 pb15 mb25">
            <h5 class="list-title"> Update Services FAQ - "{{ $faq['answer'] }}"
            </h5>
        </div>

        <form wire:submit.prevent="updateGigFaq" class="form-style1">
            <div class="row">

                <div class="col-sm-12">
                    <div wire:ignore class="mb20">
                        <div class="form-style1">
                            <label class="heading-color ff-heading fw500 mb10">Selected service</label>
                            <div class="bootselect-multiselect">
                                <select wire:model="gig_id" class="selectpicker">
                                    <option selected hidden>Select</option>
                                    @foreach ($gigs as $gig)
                                    <option value="{{ $gig->id }}" @if($gig->id == $faq['gig_id']) selected @endif>{{ $gig->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('gig_id') <span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div wire:ignore class="mb20">
                            <div class="form-style1">
                                <label class="heading-color ff-heading fw500 text-red mb10"><b>Status</b></label>
                                <div class="bootselect-multiselect">
                                     <select wire:model="status" class="selectpicker">
                                        <option value="active" @selected($faq['status']==='active' )>Active</option>
                                        <option value="inactive" @selected($faq['status']==='inactive' )>Inactive</option>
                                    </select>
                                    </select>
                                </div>
                                @error('status') <span class="text-danger">{{ $message }}</span>@enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb20">
                            <div class="form-style1">
                                <label class="heading-color ff-heading fw500 mb10">Question ?</label>
                                <input type="text" wire:model="question" placeholder="Enter your concise question?" class="form-control">
                                @error('question') <span class="text-danger">{{ $message }}</span>@enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="mb20" x-data="{ count: 0, maxChars: 300 }">
                        <label class="heading-color ff-heading fw500 mb10">Answer</label>
                        <textarea wire:model.lazy="answer" x-on:input="count = $event.target.value.length" cols="30" rows="6" maxlength="300" class="form-control" placeholder="Describe your answer well" style="width: 100%; height: 150px;"></textarea>
                        <span x-text="count + '/' + maxChars + ' limit'" class="text-muted"></span>
                        @error('answer')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="text-start">
                        <button type="submit" wire:loading.attr="disabled" class="ud-btn btn-thm default-box-shadow2 w-100">
                            <span wire:loading wire:target="updateGigFaq" class="spinner-border spinner-border-sm"></span>
                            <span wire:loading.remove> Update</span>
                        </button>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>