@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .col.alignns {
        display: grid;
        grid-template-rows: auto auto;
        align-content: center;
    }

    input[type="radio"] {
        display: none;
    }

    input[type="radio"]+label {
        display: inline-block;
        padding: 10px 20px;
        background-color: #f1f5fe;
        border-radius: 0.8rem;
        cursor: pointer;
    }

    input[type="radio"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }

    @media only screen and (max-width: 768px){
        label.form-check-label.me-3 {
            margin-top: 10px;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 1640px){
        .col-md-6 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            width: 100%;
        }
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_agent/master/comman/header')

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="tab-content">
                        <form action="{{route('theme.allotted.save')}}" method="POST" id="formtheme" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" name="id" value="{{ $data['settings']->id}}">

                            <label class="form-label">Select Theme<span class="text-danger">*</span><span class="mt-4 mb-0 text-danger text-center">(If you want to buy more themes, go to Profile Menu > Purchases. Here you can purchase more themes.)</span></label>
                            <div class="my-3">
                                <div class="form-check">
                                    @php
                                        $themes = ['theme-1', 'theme-2', 'theme-3', 'theme-4', 'theme-5'];
                                        $themeAllotted = $data['settings']->theme_allotted;
                                    @endphp

                                    @foreach ($themes as $theme)
                                        @php
                                            $checked = ($theme === $themeAllotted) ? 'checked' : '';
                                        @endphp

                                        <input class="form-check-inline DisabledTag" type="radio" name="theme" id="{{ $theme }}" value="{{ $theme }}" {{ $checked }}>
                                        <label class="form-check-label me-3" for="{{ $theme }}">Theme {{ substr($theme, -1) }}</label>
                                    @endforeach
                                </div>
                            </div>

                            <div class="row">
                                <div class="col alignns">
                                    <a href="" id="preview_link" target="_blank" class="btn btn-light waves-effect"><i class="mdi mdi-link-variant me-2 font-size-16"></i><span id="preview_text"></span></a>
                                </div>

                                <div class="col">
                                    <button class="btn btn-primary px-5 float-end" type="submit" id="btnTheme">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        }

        $('#formtheme').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

        if (responseText['status'] == 1) {
            // $('#disabledButton').attr("disabled", 'true');
            toastr["success"](responseText['msg']);
        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }

    function updatePreviewLink() {
        const checkedValue = $('input[name="theme"]:checked').val();
        const newValue = checkedValue.replace(/-/g, '');
        const linkText = $('input[name="theme"]:checked').next().text();
        var url = "{{ getThemeDomain() }}";

        if (url == "reachassure") {
            var baseUrl = "http://" + newValue + ".reachassure.org/";
        } else if (url == "localhost") {
            var baseUrl = "http://" + newValue + ".localhost:8000/";
        } else {
            baseUrl = "https://" + newValue + ".reachassuree.com/";
        }

        $('#preview_link').attr('href', baseUrl);
        $('#preview_text').text(linkText + " preview");
    }

    $(document).ready(function() {
        updatePreviewLink();
        $('input[name="theme"]').on('change', updatePreviewLink);
    });
</script>
@endsection

<!--  -->