@extends('layouts.dashboard.app')

@php
    $body_class = 'fullpage';
    $header_params = [
            'btn_back_url' => route('dashboard.websites.index')
    ] ;

    /*if($website->id){
         $action =  route('dashboard.websites.update-select-template', $website);
    } else {
         $action = route('dashboard.websites.store');
    }*/
    $step_params = ['step' => 4];
@endphp

@section('content')
    <div class="wrapper header-fixed sidebar-gutters">
        <main class="content">
            <div class="container content-container">
                <section class="section-wrapper">
                    <div class="wrappe-container">
                        <div class="section-wrapper--header --border-header">

                            <div class="container section-wrapper--header--container --sm">
                                <x-dashboard.website-step :sparams="$step_params" />

                                <a href="{{ route('dashboard.websites.index') }}" class="btn btn--primary btn--lg btn--lg-2">
                                    <span>Submit</span>
                                </a>
                            </div>

                        </div>
                        <div class="section-wrapper--body">
                            <div class="container section-wrapper--body--container --sm">
                                <div class="row gy-24">
                                    <div class="col-lg-5">
                                        <h3 class="mb-10">Setup Your Global Code</h3>
                                        <p class="fw-500 color-secondary text--xs mb-20">Add some code to your website manually</p>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="row gy-42 gx-16">
                                            <div class="col-12">
                                                <div class="form-group input--xl">
                                                    <label class="label label-flex">
                                                        <span>Paste this code in “Head” of your website</span>
                                                        <a href="#" data-target="code_element" class="copy_code_bnt btn btn--xs p-0 gap--xs btn-link-1-custom">
                                                            <span class="ico">@php include(public_path('dash/img/ico-copy.svg')) @endphp</span>
                                                            <span class="text--xs">Copy Code</span>
                                                        </a>
                                                    </label>
                                                    <textarea rows="10" data-element="code_element" class="textarea input--outline disabled">
                                                    <!-- CookiesFlow JavaScript Code -->
                                                    {{ $script }}
                                                    </textarea>
                                                </div>
                                            </div>

                                            @if(false)
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label label-flex">
                                                            <span>Paste this code in “Body” of your website</span>
                                                            <a href="#" class="btn btn--xs p-0 gap--xs btn-link-1-custom">
                                                                <span class="ico">@php include(public_path('dash/img/ico-copy.svg')) @endphp</span>
                                                                <span class="text--xs">Copy Code</span>
                                                            </a>
                                                        </label>
                                                        <textarea rows="10" class="textarea input--outline disabled"><!DOCTYPE html>
                                                            <html>
                                                                <head>
                                                                    <title>Welcome to My Website</title>
                                                                    <!-- Custom JavaScript Code -->
                                                                        <script type="text/javascript">
                                                                            // JavaScript code to show an alert when the page loads
                                                                            window.onload = function() {
                                                                                alert('Welcome to my website!');
                                                                            };
                                                                        </script>
                                                                </head>
                                                                <body>
                                                                    <h1>Hello World!</h1>
                                                                    <p>This is a simple example of adding custom code in the header.</p>
                                                                </body>
                                                            </html>
                                                    </textarea>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="section-wrapper--body tw-pt-2">
                            <div class="container section-wrapper--body--container --sm">
                                <div class="row gy-24">
                                    <div class="col-lg-5">
                                        <h3 class="mb-10">Download the WordPress plugin </h3>
                                        <p class="fw-500 color-secondary text--xs mb-20">Insert ID into WP Plugin on your website</p>

                                        <a href="{{ route('wp-pluging-download') }}" class="btn btn--primary btn--lg btn--lg-2">
                                            <span>Download</span>
                                        </a>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>
                        @if(false)
                        <div class="section-wrapper--footer">
                            <div class="container section-wrapper--footer--container --sm">
                                <a href="#" class="btn btn--lg btn--lg-2 btn--light radius-1 w-max">
                                    <p>Cancel</p>
                                </a>
                            </div>
                        </div>
                        @endif
                    </div>
                </section>
            </div>

        </main>
        <x-footer-dashboard />
    </div>

@endsection



@push('scripts')
    <script src="{{ asset('dash/js/websites.js') }}"></script>
@endpush