@props([
    'artstyles' => [],
    'mediums' => [],
    'moods' => [],
    'resolutions' => [],
    'number_images' => [],
    'usecases' => null,
    'user' => Auth::user(),
])

<x-form method="post" :route="route('document.storeDocument', ['document' => 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.imagesBalance', ['images' => $user->get_remaining_images]) !!}
            </div>
        </div>
        @if ($user->get_remaining_images <= setting('low_images_warning', 5))
            <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-12 mb-3">
            <label for="art_style" class="form-label">@lang('images.artStyle')</label>
            <select class="form-select" aria-label="Default select example" name="art_style">
                @foreach ($artstyles as $key => $artstyle)
                    <option value="{{ $artstyle }}" @if (session('document_request.art_style') == $artstyle) selected @endif>
                        {{ $artstyle }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-12 mb-3">
            <label for="name" class="form-label">@lang('images.documentName')</label>
            <input type="text" name="name" class="form-control" id="name"
                value="{{ session('document_request.name', __('document.newImage')) }}" />
        </div>
        <div class="col-md-12 mb-3">
            <label for="description" class="form-label">@lang('document.description')</label>
            <textarea class="form-control" name="description" placeholder="" required></textarea>
        </div>
        <div id="fields-div">
        </div>
        <div class="col-md-6 mb-3">
            <label for="medium" class="form-label">@lang('images.medium')</label>
            <select class="form-select" aria-label="Default select example" name="medium">
                @foreach ($mediums as $key => $medium)
                    <option value="{{ $medium }}" @if (session('document_request.medium') == $medium) selected @endif>
                        {{ $medium }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6 mb-3">
            <label for="mood" class="form-label">@lang('images.mood')</label>
            <select class="form-select" aria-label="Default select example" name="mood">
                @foreach ($moods as $key => $mood)
                    <option value="{{ $mood }}" @if (session('document_request.mood') == $mood) selected @endif>
                        {{ $mood }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6 mb-3">
            <label for="resolution" class="form-label">@lang('images.resolution')</label>
            <select class="form-select" aria-label="Default select example" name="resolution">
                @foreach ($resolutions as $key => $resolution)
                    <option value="{{ $key }}" @if (session('document_request.resolution') == $key) selected @endif>
                        {{ $resolution }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6 mb-3">
            <label for="no_of_image" class="form-label">@lang('images.noOfImages')</label>
            <select class="form-select" aria-label="Default select example" name="no_of_image">
                @foreach ($number_images as $key => $number)
                    <option value="{{ $number }}" @if (session('document_request.no_of_image') == $number) selected @endif>
                        {{ $number }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-12 mb-3">
            <input type="hidden" name="usecase_id" value="{{ $usecases->first()->id }}">
            <input type="hidden" name="document_type" value="image" />
            <button type="submit" class="btn btn-primary w-100">@lang('contact.submit')</button>
        </div>
    </div>
</x-form>