<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"> Add Services FAQ
            </h5>
        </div>

        <form wire:submit.prevent="addGigFaq" 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">Select 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 }}">{{ $gig->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('gig_id') <span class="text-danger">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>

                <div class="col-sm-12">
                    <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 class="col-sm-12">
                    <div class="mb20" x-data="{ count: 0, maxChars: 255 }">
                        <label class="heading-color ff-heading fw500 mb10">Answer</label>
                        <textarea wire:model.lazy="answer" x-model="answer" x-on:input="count = $event.target.value.length" cols="30" rows="6" maxlength="255" 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="d-flex justify-content-between w-100">
                    <div class="me-2 flex-grow-1">
                        <a href="{{ route('dashboard.faqs') }}"
                            wire:loading.attr="disabled"
                            class="ud-btn btn-thm default-box-shadow2 w-100">
                            Skip FAQ
                        </a>
                    </div>
                    <div class="flex-grow-1">
                        <button type="submit"
                            wire:loading.attr="disabled"
                            :disabled="$answer === null"
                            style="opacity: {{ $answer ? '1' : '0.5' }}; 
                   cursor: {{ $answer ? 'pointer' : 'not-allowed' }}; 
                   transition: opacity 0.3s ease-in-out;"
                            class="ud-btn btn-thm default-box-shadow2 w-100">
                            <span wire:loading wire:target="answer" class="spinner-border spinner-border-sm"></span>
                            <span wire:loading wire:target="answer">Please wait ...</span>
                            <span wire:loading wire:target="addGigFaq">Saving ...</span>
                            <span wire:loading.remove>Save FAQ</span>
                        </button>
                    </div>
                </div>


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