@extends('web_site.account.layout')

@section('account_title', trans('site.medical_file.title'))

@section('account_content')
    @if ($editing)
        @include('web_site.clinic.profile.partials.wizard')
    @else
        @include('web_site.clinic.profile.partials.summary')
    @endif
@endsection

@section('js')
    @if ($editing)
        @include('partials.jsvalidation', ['request' => 'App\Http\Requests\Site\Clinic\StorePatientProfileRequest', 'selector' => '#PatientProfileForm'])
        <script>
            // Four-step medical file. Without JavaScript every step shows at once and the form still submits.
            (function () {
                var form = document.getElementById('PatientProfileForm');
                var steps = Array.prototype.slice.call(form.querySelectorAll('.wizard-step'));
                var dots = Array.prototype.slice.call(form.querySelectorAll('[data-wizard-dot]'));
                var back = form.querySelector('[data-wizard-back]');
                var next = form.querySelector('[data-wizard-next]');
                var submit = form.querySelector('[data-wizard-submit]');
                var counter = form.querySelector('[data-wizard-counter]');
                var counterText = counter.getAttribute('data-template');
                var surgeryDetails = form.querySelector('[data-surgery-details]');
                var current = 0;

                function show(index) {
                    current = index;
                    steps.forEach(function (step, n) { step.hidden = n !== index; });
                    dots.forEach(function (dot, n) {
                        dot.classList.toggle('is-done', n < index);
                        dot.classList.toggle('is-current', n === index);
                    });
                    back.hidden = index === 0;
                    next.hidden = index === steps.length - 1;
                    submit.hidden = index !== steps.length - 1;
                    counter.textContent = counterText.replace(':current', index + 1);
                }

                // Client-side rules (JsValidator) for the fields of the visible step only.
                function currentStepIsValid() {
                    if (!window.jQuery || !jQuery.fn.validate) {
                        return true;
                    }
                    var validator = jQuery(form).validate();
                    var valid = true;
                    jQuery(steps[current]).find('input, select, textarea').each(function () {
                        if (this.name && !validator.element(this)) {
                            valid = false;
                        }
                    });
                    return valid;
                }

                function syncSurgeryDetails() {
                    var yes = form.querySelector('input[name="surgical_history[had_surgery]"][value="1"]');
                    surgeryDetails.hidden = !yes.checked;
                }

                next.addEventListener('click', function () {
                    if (currentStepIsValid()) {
                        show(current + 1);
                        form.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                });
                back.addEventListener('click', function () {
                    show(current - 1);
                    form.scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
                form.querySelectorAll('input[name="surgical_history[had_surgery]"]').forEach(function (radio) {
                    radio.addEventListener('change', syncSurgeryDetails);
                });

                // After a failed save, open the step that holds the first error.
                var firstError = steps.findIndex(function (step) { return step.querySelector('.is-invalid'); });
                form.classList.add('is-enhanced');
                syncSurgeryDetails();
                show(firstError > -1 ? firstError : 0);
            })();
        </script>
    @endif
@endsection