@php $id = 'popup_upload_image' @endphp
@section('script')
    @parent
    <script>

        function getReceiptType (){
            const active_modal = $('.modal.show');
            let receipt =active_modal.find('.receipt-type').val();
            let receipt_others = active_modal.find('.receipt-type-others').val();
            return receipt==='others' ?  receipt_others :receipt;
        }

        $(function(){

            $('#{{$id}} .receipt-type').select2({
                width: 'resolve'
            }).on('change', function(){
                $('#{{$id}}').find('.receipt-type').val()==='others' ? $('#{{$id}}').find('.receipt-type-others').show().val('') : $('#{{$id}}').find('.receipt-type-others').hide().val('');
            });

        })
    </script>
@endsection


@component(getPopupLayout(), ['id'=>$id])
    <div class="status_item" status_id="default" >
        <x-main.challenge-details/>


        <div class="form-group text-left">
            <label for="{{$id}}-receipt-type">{{ __('enterprise.labelSelectReceiptType') }}</label>
            <select id="{{$id}}-receipt-type" class="receipt-type custom-select"
                    placeholder="{{ __('enterprise.placeholderSelectReceiptType') }}">
                <option value="" disabled selected>{{ __('enterprise.labelSelectReceiptType') }}</option>
            </select>

            <input type="text" id="{{$id}}-receipt-type-others" class="receipt-type-others form-control mt-1" style="display: none"
                   aria-describedby="othersHelp" placeholder="{{ __('enterprise.placeholderOtherStoreName') }}"/>
        </div>
        <x-main.receipt-example-dynamic/>

        <label id="{{$id}}-upload-btn" class='btn btn-primary' type="receipt">
            <span id="{{$id}}-upload-btn-text">Upload Image</span>
            <input type="file" name="receipt" id="{{$id}}-upload"
                   class="d-none inputfile" accept="image/*"
                   onchange="document.getElementById('{{$id}}-preview').src = window.URL.createObjectURL(this.files[0]); loadPopup('{{$id}}','submit')"
            />
        </label>
    </div>

    <div class="status_item" status_id="submit">
        <h5>{{ __('enterprise.titleReviewYourReceiptMsg') }}</h5>

        <div id="camera-container">
            <img id="{{$id}}-preview" class="w-100 h-auto d-block mx-auto" style="max-height: 500px; object-fit: contain"/>
        </div>

        @component('components.main.challenge-survey', ['id' => $id])
        @endcomponent

        <div class="message mb-3"></div>
        <button id="{{$id}}-submit" class='btn btn-primary w-100 inputfile-btn mt-4' type="receipt">{{ __('label.btn_submit') }}</button>
        <button class="btn mx-auto d-block text-underline default-font-color" onclick="loadPopup('{{$id}}','default'); $('input').val(''); ">{{ __('label.btn_back') }}</button>

    </div>

@endcomponent