@extends('Frontend.partials.layout')
@section('styles')
<style>
    .form-group {
        margin-bottom: 1.5rem;
    }
    ul#lang-items-wrapper {
        box-shadow: 0 1px 4px rgb(24 28 33 / 9%);
        max-width: fit-content;
        border: 1px solid #cdcdcda8;
        border-radius: 6px;
        margin: 0px auto;
        padding: 0px;
    }

    ul#lang-items-wrapper li.nav-item a.nav-link{
        transition: .4s ease;
        margin: 0px;
        padding: 10px 20px;
        border-radius: 0px;
        border: none;
        min-width: 90px;
        text-align: center;
        cursor: pointer;
    }

    ul#lang-items-wrapper li.nav-item:first-child a.nav-link {
        border-radius: 6px 0px 0px 6px;
    }

    ul#lang-items-wrapper li.nav-item:last-child a.nav-link {
        border-radius: 0px 6px 6px 0px;
    }

    ul#lang-items-wrapper li.nav-item:not(:last-child) a.nav-link {
        border-right: 1px solid #cdcdcda8;
    }
    
    ul#lang-items-wrapper li.nav-item a.nav-link.active {
        background-color: #ebebeb;
        font-weight: 600;
    }
    
    ul#lang-items-wrapper li.nav-item .nav-link {
        color: dimgray;
    }
    .swal2-popup.swal2-modal.swal2-show {
        width: auto;
        padding: 25px 60px;
    }
    #swal2-title {
        margin: 0px;
        font-size: 25px;
    }
    .swal2-content {
        margin: 0px !important;
    }
    img.swal2-image {
        width: 300px !important;
        height: auto !important;
    }

    #uploaded-logo{
        border: 1px solid #e4e4e4;
        min-width: 300px;
        max-width: 300px;
        height: auto;
        padding: 8px;
        border-radius: 5px;
    }
</style>
@endsection

@section('content')
{{-- Main Section --}}
<section class="user-settings">
    <div class="row">
        {{-- col-6 content header --}}
        <div class="col-md-6">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fas fa-cog primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{ trans("action.user_settings") }}</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="" id="tp-setting-container">
        <form id="user-settings-form" method="post" enctype="multipart/form-data">
            <div class="card">
                <h5 class="card-header font-weight-bold"><i class="fas fa-cog mr-1"></i>{{ trans("action.therapist_settings") }}</h5>
                <div class="lang-contents-container p-0 card-body">
                    <div class="form-group px-4 pt-4">
                        <p>{{ trans('action.general_setting_for') }}</p>
                    </div>

                    <div class="form-group px-4">
                        <h5 class="d-inline-block">{{  trans('action.custom_link') }}</h5>
                        <input id="custom-link" type="text" value="{{$user_data->useroption->custom_link}}" class="form-control" name="custom_link" placeholder="Enter Link">
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group px-4">
                                <h5>{{ trans('action.pdf_logo_upload') }}</h5>
                                <input type="file" class="" name="pdf_logo" style="cursor: pointer;" id="pdf-logo-input">
                            </div>
                        </div>

                        @if (!empty($user_data->useroption->pdf_logo))
                            <div class="col-md-6">
                                <div class="form-group px-4">
                                    <h5>{{ trans('action.uploaded_pdf_logo') }}</h5>
                                    <div class="position-relative">
                                        <img data-view="true" id="uploaded-logo" style="border: 1px solid #e4e4e4;min-width: 300px;max-width: 300px;height: auto;padding: 8px;border-radius: 5px;" src="{!! asset('/users/pdf_logo/') !!}/{{ $user_data->useroption->pdf_logo }}">

                                        <a href="javascript:void(0)" class="ml-2 position-absolute" onclick="deletePDFLogo({{ $user_data->useroption->id }})"><i title="{{trans('action.pdf_intro3')}}" class="fas fa-trash text-danger"></i></a>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>

                    <hr>

                    <div class="form-group px-4 pb-4 m-0">
                        <h5 class="">{{trans('action.pdf_second_page_title')}}</h5>

                        <ul class="nav selected_lang mb-4 red" id="lang-items-wrapper">
                            @foreach ($languages as $lang)
                                <li class="nav-item">
                                    <a class="nav-link {{ ($lang->id == auth()->user()->language_id) ? 'active' : '' }}" data-langcode="{{$lang->short_code}}">{{ $lang->name }}</a>
                                </li>
                            @endforeach
                        </ul>
                        
                        <textarea name="pdf_second_page" id="pdf-sec-page" class="editor">
                            {{ $pdfSecondPage }}
                        </textarea>
                    </div>
                </div>
                <div class="card-footer text-right">
                    <button id="update-btn" type="submit" class="btn btn-success m-0 text-white">{{trans('action.update')}}</button>
                </div>
            </div>
        </form>
    </div>
</section>
{{-- /Main Section --}}

@endsection

@section('scripts')
    <script src="{!! asset('/vendor/js/tinymce/tinymce.min.js') !!}"></script>
    <script>tinymce.init({ selector:'.editor' });</script>
    <script src="{{ asset('/vendor/libs/bootstrap-select/bootstrap-select.js') }}"></script>
    <script src="{{ asset('/vendor/libs/select2/select2.js') }}"></script>
    <script>
        $(document).ready(function(){
            // change lang
            $("#lang-items-wrapper .nav-link").click(function () {
                $("#lang-items-wrapper .nav-link").removeClass("active");
                $(this).addClass("active");
                
                let lastLangId = $(this).data('langcode');
                
                $.ajax({
                    url: '{{ route("users.get-pdf-template") }}',
                    type: "GET",
                    dataType: "json",
                    data: {
                        langCode:lastLangId
                    },
                    beforeSend: function(){
                        Swal.fire({
                            title: `{{ trans('action.processing')}}`,
                            imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            confirm: true,
                            showLoaderOnConfirm: true,
                            width: '300px',
                            height: '180px'
                        })
                    },
                    success:function(data){
                        Swal.close();
                        tinymce.get("pdf-sec-page").setContent(data.pdf_data);
                    },
                    error:function(data){Swal.close();console.log(data);}
                });
            });

            // update data
            $("form#user-settings-form").submit(function(e) {
                e.preventDefault();
                let formData = new FormData(this);
                let langCode = $('#lang-items-wrapper .nav-item').find('.active').data('langcode');
                formData.append("lang_code", langCode);

                $.ajax({
                    url: "{{ route('users.update-user-settings') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function(){
                        Swal.fire({
                            title: `{{ trans('action.processing')}}`,
                            imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            confirm: true,
                            showLoaderOnConfirm: true,
                            width: "300px",
                            height: "180px"
                        })
                    },
                    success: function (data) {
                        Swal.close();
                        toastr.success(data.message);
                        location.reload();
                    },
                    error:function(data){

                    }
                });
            });
        });
    </script>
@endsection