@props([
    'langs' => null,
    'tones' => null,
    'variants' => null,
    'creativities' => null,
    'usecases' => null,
    'selected_document' => null,
    'selected_usecase' => null,
])
<x-form method="post" :route="route('document.storeDocument', ['document' => $selected_document->id ?? null])" id="document-form">
    <div class="row">
        <div class="col-md-12 mb-3">
            <div class="alert alert-danger mb-0 alert-custom rounded-pill text-body py-1">
                <i class="an an-flag pe-1"></i>
                {!! __('profile.wordsBalance', ['words' => Auth::User()->get_remaining_words]) !!}
            </div>
        </div>
        @if (intval(str_replace(',', '', Auth::User()->get_remaining_words)) <= setting('low_words_warning', 500))
            <div class="col-md-12 mb-3 text-center">
                <a href="{{ route('plans.list') }}" class="btn btn-primary rounded-pill text-white px-3">
                    <i class="an an-rocket-art"></i>
                    <span>{{ __('common.upgrade') }}</span>
                </a>
            </div>
        @endif
        <div class="col-md-6 mb-3">
            <label for="language" class="form-label">@lang('document.selectLang')</label>
            <select class="form-select" aria-label="Default select example" name="language">
                @foreach ($langs as $key => $lang)
                    <option value="{{ $lang }}" @if (session('document_request.language', app()->getLocale()) == $key) selected @endif>
                        {{ $lang }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6 mb-3">
            <label for="tone" class="form-label">@lang('document.selectTone')</label>
            <select class="form-select" aria-label="Default select example" name="tone">
                @foreach ($tones as $key => $tone)
                    <option value="{{ $key }}" @if (session('document_request.tone') == $key) selected @endif>
                        {{ $tone }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-12 mb-3">
            <label for="language" class="form-label">@lang('document.selectUsecase')</label>
            <select id="usecase_id" class="form-select" aria-label="Default select example" name="usecase_id"
                onchange="getFields()">
                @foreach ($usecases as $usecase)
                    <option value="{{ $usecase->id }}" @if ($selected_usecase != null && $selected_usecase->id == $usecase->id) selected @endif>
                        {{ $usecase->name }}</option>
                @endforeach
            </select>
        </div>
        <div id="fields-div">
        </div>
        <div class="col-md-6 mb-3">
            <label for="variants" class="form-label">@lang('document.noOfVariant')</label>
            <select class="form-select" aria-label="Default select example" name="variant">
                @foreach ($variants as $key => $variant)
                    <option value="{{ $variant }}" @if (session('document_request.variant') == $variant) selected @endif>
                        {{ $variant }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6 mb-3">
            <label for="style" class="form-label">@lang('document.writtingStyle')</label>
            <select class="form-select" aria-label="Default select example" name="style">
                @foreach ($creativities as $key => $creativity)
                    <option value="{{ $key }}" @if (session('document_request.style') == $key) selected @endif>
                        {{ $creativity }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-12 mb-3">
            @if ($selected_document == null)
                <button type="submit" class="btn btn-primary w-100">@lang('contact.submit')</button>
            @else
                <button type="button" id="submit-form" class="btn btn-primary w-100">@lang('contact.submit')</button>
            @endif
        </div>
    </div>
</x-form>