@extends('layout.mainlayout')


@section('content')
    <style>
        .radio-member{
            width: 100%;
            padding: 0;
        }
        .input-radio-btn-red{
            left: 0;
        }
    </style>
    <main class="page-main">
        <!-- Start Breadcrubms Section -->
        <section class="new-sec breadcrumbs-sec">
            <div class="container">
                <h3 class="page-title">{{$title}}</h3>
                <i class="ri-arrow-down-s-line icon"></i>
            </div>
        </section>
        <!-- End Breadcrubms Section -->
        <!-- Start Filter Section -->
        <section id="artificial-intelligence" class="new-sec filter-sec">
            <div class="container">
                <div class="sec-form">
                    <div class="steps">
                        <div class="stepper">
                            <div class="step active">
                                <p class="step-num"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="background:{{$profile->EXTRA_COLOR}}" @endif>
                                    1</p>
                                <p class="step-title"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif>{{trans('web.account')}}</p>
                            </div>
                            <div class="step ">
                                <p class="step-num"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="background:{{$profile->EXTRA_COLOR}}" @endif >
                                    2</p>
                                <p class="step-title"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif>{{trans('web.details')}}</p>
                            </div>
                            <div class="step">
                                <p class="step-num">3</p>
                                <p class="step-title"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif>{{trans('web.results')}}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="sec-form" style="max-width: 1200px;">
                    <div class="step-content">
                        <h6 class="step-title-ai-account">{{trans('web.already_have_an_account')}}</h6>
                        <h3 class="step-title-ai-patient">{{trans('web.select_patient')}}</h3>
                        <div class="step-main mt-5">
                            <div class="row">
                                @foreach($members as $member)
                                    <div class="col-md-4 mt-3">
                                        <div class="radio radio-member radio-member-input"
                                             full-name="{{ $member->FULL_NAME }}" nationality="{{$member->NATIONALITY_NAME}}"
                                             gender="{{$member->GENDER_TITLE}}" age="{{$member->AGE}}" id="{{$member->ID}}" is-member="{{$member->IS_MEMBER}}"
                                             phone="{{$member->MOBILE_NUMBER}}">
                                            <div class="container">
                                                <div class="row align-items-center">
                                                    <div class="col flex-grow-0">
                                                        <div class="patient-pic">
                                                            <span class="ri-user-3-line"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col text-left">
                                                        <h5 class="pt-2" style="font-size: 18px"><span
                                                                    class="font-weight-bold text-nowrap">{{strlen($member->FULL_NAME) > 16 ? substr($member->FULL_NAME,0,16)."..." : $member->FULL_NAME}}</span>
                                                        </h5></div>
                                                    <div class="col input-radio-btn-red"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="step-footer">
                            <a href="#" class="btn cart-btn add-new-patient-modal btn-outline-blazma mb-4" >
                                {{trans('web.add_new_patient')}}
                                <span class="icon pl-2">&#10230;</span>
                            </a>
                            <a href="#" id="ai-continue"
                               @if(!empty($profile) && $profile->COLOR) style="background:{{$profile->COLOR}}"
                               @endif class="btn continue-btn">
                                <span>{{trans('web.continue')}}</span>
                                <span class="icon pl-2">&#10230;</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>
@endsection

@section('frontend_scripts')
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/toastr/toastr.min.css">
    <script src="/bower_components/admin-lte/plugins/toastr/toastr.min.js"></script>
<script>
    $(document).on('click', '.radio-member-input', function (e) {
        $('.radio-member-input').css('background', '#FAFAFC').css('border', '1px solid #DADADA');
        //$(this).css('background', 'white').css('border', '1px solid #E35A80');
        @if(!empty($profile) && $profile->COLOR)
        $(this).css('background', 'white').css('border', "1px solid {{$profile->COLOR}}");
        @else
        $(this).css('background', 'white').css('border', '1px solid #E35A80');
        @endif

        $('.fa-check-circle').remove();
        @if(!empty($profile) && $profile->COLOR)
        $(this).find('.input-radio-btn-red').append('<i class="fa fa-check-circle" style="color: {{$profile->EXTRA_COLOR}}"></i>')
        @else
        $(this).find('.input-radio-btn-red').append('<i class="fa fa-check-circle"></i>')
        @endif

        $('#add-member-to-list').removeClass('disabled');
        full_name = $(this).attr('full-name');
        nationality = $(this).attr('nationality');
        age = $(this).attr('age');
        gender = $(this).attr('gender');
        id = $(this).attr('id');
        phone = $(this).attr('phone');
        isMember = $(this).attr('is-member');

        dataOnRadio = {
            full_name: full_name,
            nationality: nationality,
            gender: gender,
            age: age,
            id: id,
            phone: phone,
            isMember: isMember,
        }

        $('#ai-continue').off('click');
        $('#ai-continue').on('click', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            localStorage.setItem('ai-details', JSON.stringify(dataOnRadio));
            window.location.href = '/artificial-intelligence?details=1'
        })
    })

    $('.add-new-patient-modal').on('click', function (e) {
        e.preventDefault();

        e.preventDefault();
        e.stopImmediatePropagation();
        let nationalityId = $(this).attr("nationality")
        $.ajax({
            url: "/operations/website/countries",
            success: function (data) {
                $(".nationality").empty();
                $(".nationality").append('<option value="" selected disabled>{{trans("web.nationality")}}</option>');
                data.forEach(function (element) {
                    @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "ar")
                    if (nationalityId == element.id)
                        $(".nationality").append('<option selected value="' + element.id + '" iso2="' + element.code + '">' + element.ar_name + '</option>');
                    else
                        $(".nationality").append('<option  value="' + element.id + '" iso2="' + element.code + '">' + element.ar_name + '</option>');
                    @else
                    if (nationalityId == element.id)
                        $(".nationality").append('<option selected value="' + element.id + '" iso2="' + element.code + '">' + element.name + '</option>');
                    else
                        $(".nationality").append('<option  value="' + element.id + '" iso2="' + element.code + '">' + element.name + '</option>');
                    @endif

                })
            }
        })
        $('#addPatient').animate({
            scrollTop: 0
        }, 500);
        $('#addPatient').modal('show');
    });

    $('#ai-continue').on('click', function (e) {
        e.preventDefault();
        toastr.error('Select patient first')
    })

    $('#add-new-person').click(function(){
        $(".alert-danger-person").slideUp( "slow", function() {});
        $('#add-new-person').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
        //var package_id = $("#package-id").val();
        var full_name = $("#full-name-patient").val();
        var identification_type = $("#identification-type-patient").val();
        var identification = $("#identification-patient").val();
        var nationality = $("#nationality-patient").val();
        var dob = $("#dob-patient").val();
        var dob_obj = dob.split('-');
        var gender = $("#gender-patient").val();
        var passport = $("#passport-patient").val();
        var mobile_number =  $("#mobile-number-patient").val();
        var district =  $("#district").val();
        var occupation =  $("#occupation").val();
        var workplace =  $("#workplace").val();
        var symptoms =  $("#symptoms").val();
        var reason =  $("#reason-patient").val();
        var cert =  $("#cert").val();

        var data = {
            full_name: full_name,
            identification_type: identification_type,
            identification: identification,
            nationality: nationality,
            gender: gender,
            passport: passport,
            mobile_number: mobile_number,
            birth_day: parseInt(dob_obj[2]),
            birth_month: parseInt(dob_obj[1]),
            birth_year: parseInt(dob_obj[0]),
            district: district,
            occupation: occupation,
            workplace: workplace,
            symptoms: symptoms,
            reason: reason,
            cert: cert
        }
        $.ajax({
            type: "POST",
            url: "/ai/add-user",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            headers: { "Accept-Language": "{{app('translator')->getLocale()}}" }
        }).done(function(data ) {
            location.reload();
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $('#add-new-person').html('Save').attr('disabled', false);
            $('#addPatient').animate({
                scrollTop: 0
            }, 500);
            $('#addPatient').modal('show');
            $(".alert-danger-person").html(jqXHR.responseJSON.errorMessage);
            $(".alert-danger-person").slideDown( "slow", function() {});
        });
        return false;
    });
</script>

@endsection