@extends('layout.default')
@section('content')
    <div class="d-flex flex-column-fluid">
        <div class="row justify-content-center">
            @foreach($userLanders as $userLander)
                <div class="col" style="max-width:320px; min-width:320px">
                    <div class="card card-custom gutter-b card-stretch">
                        <div class="card-body">
                            <div  style="justify-content: center" class="d-flex align-items-center">
                                <div class="align-content-center" style="border: 1px solid black;">
{{--                                    @for($i = 0; $i < 50; $i++)--}}
{{--                                    <iframe sandbox="allow-scripts allow-same-origin" id="frame1" src="{{ url('/landers/' . $userLander->page_name . '.html') }}" frameborder="0" scrolling="yes"></iframe>--}}
{{--                                    @endfor--}}
                                    <img src="{{ url('/images/cpalanders/' . $userLander->template->id . '-' . $userLander->template->slug . $userLander->template->extension) }}" alt="">
                                </div>
                            </div>
                            <div class="mt-6">
                                <div class="mr-12 d-flex flex-column mb-7">
                                    <h4 class="d-block font-weight-bolder">{{ $userLander->template->name }}</h4>
                                    <span>Main Url:</span>
                                    <a target="_blank" href="{{ 'https://' . $userLander->main_domain . '/' . $userLander->page_name }}" class="d-block font-weight-bolder">{{ $userLander->main_domain . '/' . $userLander->page_name }}</a>
                                    @if($userLander->template->options->whereIn('name', 'Opt-in') != '[]' && File::exists(public_path() . '/landers/' . $userLander->page_name . '-thanks.html'))
                                        <span>Thanks</span>
                                        <a target="_blank" href="{{ 'https://' . $userLander->main_domain . '/' . $userLander->page_name . '-thanks' }}" class="d-block font-weight-bolder">{{ $userLander->main_domain . '/' . $userLander->page_name . '-thanks' }}</a>
                                    @endif
                                </div>
                                <div class="mr-12 d-flex flex-column mb-7">
                                <span class="switch switch-outline switch-icon switch-success">
                                        <h5 class="mr-4 mt-1">Active?</h5>
                                        <label>
                                            <input id="status-{{$userLander->id}}" data-status="status-{{$userLander->id}}" type="checkbox" name="active" onclick="changeLander(this)" data-url="{{ url('members-area/cpalanders/templates/switch/' . $userLander->id) }}" data-token="{{ csrf_token() }}" {{ ($userLander->active) ? "checked" : null }} >
                                            <span></span>
                                        </label>
                                </span>
                                </div>
                                @foreach($options as $option)
                                    @if($userLander->template->options->where('id', $option->id) != '[]')
                                        <span class="label font-weight-bold label-lg label-light-success label-inline">{{ $option->name }}</span>
                                    @else
                                        <span class="label font-weight-bold label-lg label-secondary label-inline">{{ $option->name }}</span>
                                    @endif
                                @endforeach
                            </div>
                            <p class="mb-7 mt-3">{{ $userLander->template->description }}</p>
                            <div class="d-flex flex-wrap">
                                <div class="d-flex flex-column">
                                    <span class="font-weight-bolder mb-4">Colors</span>
                                    <div class="mt-2">
                                        @foreach($userLander->template->colors as $color)
                                            <span style="background: {{ $color->hexadecimal }}" class="label font-weight-bold label-lg {{ ($color->hexadecimal != $userLander->color_hexadecimal) ? 'opacity-15' : 'label-xl' }}"></span>
                                        @endforeach
                                    </div>
                                </div>
                                {{--                                <span class="label font-weight-bold label-lg label-light-success label-inline"></span>--}}
                            </div>
                        </div>
                        <div class="card-footer d-flex align-items-center">
                            <div style="margin: 0 auto">
                                <a
                                    {{ ($userLander->template->options->whereIn('name', 'Opt-in') != '[]') ? 'data-thanks=true' : '' }}
                                    data-lander="{{$userLander->page_name}}"
                                    title="Download" type="button" class="btn btn-icon btn-outline-dark mr-2 ml-2 downloadfiles">
                                    <i class="flaticon2-download"></i>
                                </a>
                                <a href="{{ url('members-area/cpalanders/templates/start-now/' . $userLander->template->id . '/page/' . $userLander->id . '/edit') }}" title="Edit" class="btn btn-icon btn-outline-primary mr-2 ml-2"><i class="flaticon2-edit"></i></a>
                                <button onclick="cloneLander(this)"  data-token="{{ csrf_token() }}" type="button" data-url="{{ url('members-area/cpalanders/templates/clone/' . $userLander->id) }}" title="Clone" class="btn btn-icon btn-outline-warning mr-2 ml-2"><i class="flaticon2-cube-1"></i></button>
                                <button onclick="deleteKB(this)" id="{{$userLander->template->id}}" type="button" data-url="{{ url('members-area/cpalanders/templates/start-now/' . $userLander->template->id . '/page/' . $userLander->id) }}" data-token="{{ csrf_token() }}" title="Delete" class="btn btn-icon btn-outline-danger mr-2 ml-2"><i class="flaticon2-rubbish-bin-delete-button"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('js/sweetdelete.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        $('.downloadfiles').click(function() {

            var link = document.createElement('a');
            link.href = window.location.origin + '/landers/' + $(this).data('lander') + '.html';
            // link.href = '/home/serverwealthymin/public_html/applications/landers/' + $(this).data('lander') + '.html';
            link.download = $(this).data('lander') + '.html';
            link.target = '_blank';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            link = null;

            if($(this).data('thanks') == true) {
                var link2 = document.createElement('a');
                link2.href = window.location.origin + '/landers/' + $(this).data('lander') + '-thanks.html';
                // link2.href = '/home/serverwealthymin/public_html/applications/landers/' + $(this).data('lander') + '-thanks.html';
                link2.download = $(this).data('lander') + '-thanks.html';
                link2.target = '_blank';
                document.body.appendChild(link2);
                link2.click();
                document.body.removeChild(link2);
                link2 = null;
            }
        });

        function changeLander(clickedButton) {
            var token = $(clickedButton).data('token');
            var url = $(clickedButton).data('url');
            Swal.fire({
                title: "Would you like to change this page status?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "Cancel",
                reverseButtons: true
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: {_method: 'post', _token: token},
                        success: function() {
                            Swal.fire({
                                icon: "success",
                                title: "Success!",
                                text: "The status has changed!"
                            }).then(function(){
                            });
                        },
                        error: function(){
                            Swal.fire({
                                icon: "error",
                                title: "Oops!",
                                text: "The status of this page could not be changed.",
                            });
                        },
                    });
                } else {
                    if($(clickedButton).is(':checked') == false) {
                        clickedButton.checked = true;
                    } else {
                        clickedButton.checked = false;
                    }
                }
            });
        }


        function cloneLander(clickedButton) {
            var token = $(clickedButton).data('token');
            var url = $(clickedButton).data('url');
            Swal.fire({
                title: "Would you like to clone this page?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "Cancel",
                reverseButtons: true
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: {_method: 'post', _token: token},
                        success: function() {
                            Swal.fire({
                                icon: "success",
                                title: "Success!",
                                text: "This page has been cloned!"
                            }).then(function(){
                                location.reload();
                            });
                        },
                        error: function(){
                            Swal.fire({
                                icon: "error",
                                title: "Oops!",
                                text: "This page could not be cloned",
                            });
                        },
                    });
                }
            });
        }
    </script>
@endsection