@extends('layouts.app')
@section('content')
    <div class="container">
        @if (!$provider_user_acct->isAvailable())
            <div class="col-md-12 text-center flex-vertical">
                <i class="fa fa-exclamation-triangle fa-5x text-primary"></i>
                <br>
                <br>
                <h3>This provider is not available</h3>
            </div>
        @else
            <h3>{{ $provider_svc->service }} Instructions/Process</h3>
            <p>
                Please browse to select your file, complete each field, provide instructions for your provider, and click on
                the “Upload” button to submit payment on the next page.
            </p>
            <br>

            <div style="text-align: center">
                <a class="btn knowmad_btn_blue knowmad_btn" style="width: unset;"
                    href="{{ route('admin.recenteditors.index', [$provider_svc_id]) }}">Choose
                    Different Provider</a>
            </div>

            <div class="row">
                <div>
                    {!! Form::open([
                        'route' => 'admin.checkout',
                        'name' => 'submit',
                        'files' => true,
                        'enctype' => 'multipart/form-data',
                        'id' => 'checkoutForm',
                    ]) !!}
                    {!! csrf_field() !!}

                    <input type="hidden" name="provider_userId" id="provider_userId" value="{{ $provider_user_acct->id }}">
                    <input type="hidden" name="provider_username" id="provider_username" value="{{ $provider_user_acct->username }}">
                    <input type="hidden" name="provider_svc_id" id="provider_svc_id" value="{{ $provider_svc_id }}">


                    <div class="row">
                        <div class="col-md-3 push-top">
                            <label>{{ $provider_svc->service }} Provider</label>
                        </div>
                        <div class="col-md-7 push-top">
                            @include('partials.single_editor', ['user' => $provider_user_acct, 'profile_base_url' => $profile_base_url, 'provider_svc_id' => $provider_svc_id, 'isWriters' => $provider_svc_id !== 1])
                        </div>
                    </div>
                    <div class="row push-top">
                        <div class="col-md-3">
                            <label for="category_select" class="required"> Service</label> <span class="required_input">*</span>
                        </div>
                        <div class="col-md-9">
                            <div class="btn-group">
                                <button 
                                class="dropdown-toggle" 
                                type="button" id="submitDropdown" 
                                data-bs-toggle="dropdown" 
                                data-bs-auto-close="true" 
                                aria-expanded="false" style="box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
                                border-radius: unset!important;
                                color: #000; background: white;font-family: var(--nib_font)!important;
    font-size: 16px; border: 1px solid #ced4da;">
                                    {{$provider_svc->service}}
                                </button>
                                <ul class="dropdown-menu" id="submitMenu" aria-labelledby="submitDropdown">
                                    @foreach ($hirable_services as $s)

                                        <li class="dropdown-item @if ($s->service->id === $provider_svc->id) active @endif">
                                            <a href="{{ route('public.document.create', [$s->service->id, $provider_user_acct->username]) }}">
                                                {{ $s->service->service }}
                                            </a>
                                        </li>
                                    @endforeach
                                    
                                </ul>
                            </div>
                           
                           
                        </div>
                    </div>
                    {{-- <div class="row push-top">
                        <div class="col-md-3">
                            <label for="category_select" class="required"> Category</label> <span class="required_input">*</span>
                        </div>
                        <div class="col-md-9">
                            <select name="category_select" id="category_select" class="form-control editor-profile" style="appearance: auto">
                            <option value="0" selected>Select</option>
                             @foreach ($allowed_categories as $c)

                                <option value="{{ $c->name }}">
                                    {{ $c->name }}

                                </option>
                            @endforeach
                        </select>
                        </div>
                    </div> --}}
                    <div class="row">
                        <div class="col-md-3 push-top">
                            {{-- if writing doc, file upload not required --}}
                            @if ($provider_svc_id == 2)
                                <label> Upload File </label>
                            @else
                                <label class="required"> Upload File </label> <span class="required_input">*</span>
                            @endif
                        </div>
                        <div class="col-md-9 push-top-min">
                            @if ($provider_svc_id == 2)
                                <input value="" type="file" for="attachment" name="file" id="attachment"
                            class=""><span id="file_ext"></span>
                            @else
                                <input value="" type="file" for="attachment" name="file" id="attachment"
                                    class="required" required><span id="file_ext"></span>
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 push-top">
                            {{-- if writing/rewriting doc, call it Request Name/Title --}}
                            @if ($provider_svc_id == 2 || $provider_svc_id == 3)
                                <label class="required"> Request Name/Title </label> <span class="required_input">*</span>
                            @else
                                <label class="required"> File Name/Title </label> <span class="required_input">*</span>
                            @endif
                        </div>
                        <div class="col-md-9 push-top-min">
                            <input required type="text" id="doc_name" for="File Name" name="doc_name"
                                class="form-control editor-profile" maxlength="50"
                                data-msg-required="Please enter File Name." value="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 push-top">
                            <label class="required"> Total Word Count (no commas) </label>
                        </div>
                        <div class="col-md-9 push-top-min" id="submit">
                            <input required type="number" id="word_count_submitdocument" name="word_count" for="word_count"
                                class="form-control editor-profile" maxlength="7"
                                data-msg-required="Please enter Word Count." value="" style="width:208px;"
                                onblur="df()">
                            <div class="text-danger word-errors hide">
                                <a href="#" class="text-danger" data-toggle="tooltip"
                                    title="The word count you entered is below the minimum word count required. ">
                                    <i class="fa fa-exclamation-circle fa-fw"></i>
                                </a>
                                <span>Minimum word count not met.</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            &nbsp;
                        </div>
                        <div class="col-md-9">
                            <span class="required_input">
                                *</span>
                                {{-- If writing/rewriting, change wording to reflect request --}}
                                @if ($provider_svc_id == 2 || $provider_svc_id == 3)
                                    Please enter the word count of your request to view available services.
                                @else
                                    Please enter the word count of your document to view available services.
                                @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3  push-top">
                            <label>Turnaround Times</label>
                        </div>

                        <div class="col-md-9 push-top-min">
                            <select name="price_select" id="price_select" class="form-control editor-profile"
                                onchange="df()" style="appearance: auto; max-width: unset">
                                <option value="0" selected>Select Time</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="deadlinediv" name="deadlinediv" id="deadlinediv" style="display:none">
                            <div class="col-md-3">
                                &nbsp;
                            </div>
                            <div class="col-md-9 push-top-min">

                                <input type="checkbox" name="deadline" id="deadline" value="checked"><label> &nbsp; I
                                    understand that the deadline is 11:59pm Eastern on the due date.</label>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 push-top">
                            <label> Total Price </label>
                        </div>
                        <div class="col-md-9 push-top-min">
                            <input class="form-control editor-profile" type="text" name="total_price_submitdocument"
                                id="total_price_submitdocument" readonly>
                            <span class="pdf-alert text-warning"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3  push-top">
                            <label>Currency Conversion</label>
                        </div>
                        <div class="col-md-9 push-top-min">
                            <select name="currency_select" id="currency_select" class="form-control editor-profile"
                                style="appearance: auto">
                                <option value="USD" selected>US Dollar</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 push-top">
                            <label> Conversion Price </label>
                        </div>
                        <div class="col-md-9 push-top-min">
                            <input class="form-control editor-profile" type="text" name="total_price_conversion"
                                id="total_price_conversion" readonly>
                            <input class="form-control editor-profile" type="hidden" name="conversion_rate"
                                id="conversion_rate">
                            <span class="pdf-alert text-warning"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 push-top">
                            <label> English Preference</label>
                        </div>
                        <div class="col-md-9 push-top-min">
                            <select name="english_preference" id="english_preference" class="form-control editor-profile"
                                style="appearance: menulist-button">
                                <option value="american">American English</option>
                                <option value="british">British English</option>
                            </select>
                        </div>
                    </div>
                    @if ($provider_svc_id === 1 || $provider_svc_id === 3)
                        <div class="row">
                            <div class="col-md-3 push-top">
                                <label>Editing Certificate</label>
                                <label>(Optional)</label>
                            </div>
                            <div class="col-md-9 push-top-min">
                                <input type="checkbox" name="editing_cert" id="editing_cert" value="checked"><label
                                    style="margin-top: -18; margin-left: 18;">
                                    I require a document certifying that the document has been professionally edited by an
                                    Editor World editor. The editing certificate will be available for download after the
                                    editor
                                    uploads the edited file. ($5 - optional add-on)</label>
                            </div>
                        </div>
                    @endif
                    {{-- If editing or rewriting service, offer formatting service add-on --}}
                    <!--@if ($provider_svc_id === 1 || $provider_svc_id === 3)
                        <div class="row">
                            <div class="col-md-3 push-top">
                                <label>Formatting Service</label>
                                <label>(Optional)</label>
                            </div>
                            <div class="col-md-9 push-top-min">
                                <input type="checkbox" name="formatting_addon" id="formatting_addon" value="checked"><label
                                    style="margin-top: -18; margin-left: 18;">
                                    Additional formatting service to format your document in addition to editing / rewriting service. 
                                    (Price varies by word count - optional add-on)</label>
                            </div>
                        </div>
                    @endif-->
                    <div class="row" id="parent_duedate">
                        <div class="col-md-3 push-top">
                            <label> Due Date </label>
                        </div>
                        <div class="col-md-9 push-top-min">
                            <input type="text" readonly="" id="due_date" value="" name="due_date"
                                class="form-control editor-profile">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3 push-top">
                            <label>Provide Instructions</label>
                        </div>
                        <div class="col-md-9 push-top-min">
                            <textarea maxlength="5000" data-msg-required="Please enter your message." rows="10"
                                class="form-control editor-profile" name="message" id="message"></textarea>
                            <hr>
                        </div>
                    </div>
                    <div class="col-md-12 text-center">
                        <button id="submitForm" type="submit"
                            class="btn knowmad_btn_blue knowmad_btn width_fitContent">Upload</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        @endif
    </div>
@stop

@push('footer_js')
    <script>
        jQuery(documentSubmit.ready)
    </script>
    <script type="text/javascript">
        //  var e = document.getElementById('price_select');

        // var service = e.options[e.selectedIndex].value;	
        // console.log(service)

        var df2 = function() {
            var e = document.getElementById('price_select');
            var service = e.options[e.selectedIndex].value;

            if (service != '7' && service != '8' && service != '9' && service != '10') {
                document.getElementById("deadlinediv").style.display = "block";
            } else {
                document.getElementById("deadlinediv").style.display = "none";
            }

        }
        var df = function() {
            document.getElementById("deadlinediv").style.display = "block";

            var e = document.getElementById('price_select');
            var service = e.options[e.selectedIndex].value;

            if (service != '7' && service != '8' && service != '9' && service != '10' && service != '0') {
                document.getElementById("deadlinediv").style.display = "block";
            } else {
                document.getElementById("deadlinediv").style.display = "none";
            }

        }


        document.getElementById('checkoutForm').addEventListener('submit', (e) => {
            let msg = [];
            if (document.getElementById('price_select').value == 0) {
                e.preventDefault()
                alert('Please select a Turnaround Time for your document.')
            } else if (document.getElementById('price_select').value != 7 &&
                document.getElementById('price_select').value != 8 &&
                document.getElementById('price_select').value != 9 &&
                document.getElementById('price_select').value != 10) {
                if (!(document.getElementById('deadline').checked)) {
                    e.preventDefault()
                    alert(
                        'Please check the box under the Turnaround Time selection to indicate your understanding of the deadline.'
                    )
                }
            }
        });
    </script>
@endpush