@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', $website);
    } else {
         $action = route('dashboard.websites.store');
    }

@endphp

@section('content')
    <div class="wrapper header-fixed sidebar-gutters">
        <main class="content">
            <div class="container content-container">
                @php
                  //// dump($website);
                @endphp

                <section class="section-wrapper">
                    <form class="website_edit_form wrappe-container" action="{{ $action }}" method="post">
                            @csrf
                            @if($website->id)
                                @method('PUT')
                            @else

                            @endif
                            <div class="section-wrapper--header --border-header">

                                <div class="container section-wrapper--header--container --sm">
                                    <ul class="steps-list">
                                        <li data-step="1" class="step-list--item --step-active">
                                            <div class="step-content">
                                                <span class="active_step_ico ico step-ico">1</span>
                                                <span class="finished_step_ico ico step-ico">
                                                    @php include(public_path('dash/img/ico-check-step.svg')) @endphp
                                                </span>
                                                <p class="step-title">Website Information</p>
                                            </div>
                                        </li>
                                        <li data-step="2" class="step-list--item">
                                            <div class="step-content">
                                                <span class="ico step-ico">2</span>
                                                <p class="step-title">Setup Code</p>
                                            </div>
                                        </li>
                                    </ul>

                                    <button type="submit" href="#" class="d-none web website_submit_btn btn btn--primary btn--lg btn--lg-2">
                                        <span>Submit</span>
                                    </button>

                                    <a href="#" class="website_next_step_btn  {{ !($website->id)?' create_new':' ' }} btn btn--primary btn--lg btn--lg-2">
                                        <span>Next Step</span>
                                        <span class="ico">
                                            @php include(public_path('dash/img/ico-chevron-next.svg')) @endphp
                                        </span>
                                    </a>
                                </div>

                            </div>


                            <div data-step="1" class="website_step section-wrapper--body">
                                <div class="container section-wrapper--body--container --sm">
                                    <div class="row gy-24 mb-42">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">Add Domain</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">You need to add you domain to get API key</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="row gy-24 gx-16">
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Domain</label>
                                                        <input name="domain" class="input input--outline" type="text" value="{{ $website->domain }}" placeholder="vnexpress.net">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row gy-24">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">Website Info</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">Tell us something about your website</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="row gy-24 gx-16">
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Website Description</label>
                                                        <textarea rows="5" name="description" class="textarea input--outline" placeholder="Here will be some information about the website...">{{ $website->description }}</textarea>
                                                    </div>
                                                </div>
                                            </div>

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

                            <div data-step="2" class="d-none website_step 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="#" 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>

                                                <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>
                                            </div>

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



                            <div class="section-wrapper--footer">
                                <div class="container section-wrapper--footer--container --sm">
                                    <a href="{{ route('dashboard.websites.index') }}" class="btn btn--lg btn--lg-2 btn--light radius-1 w-max">
                                        <p>Cancel</p>
                                    </a>
                                </div>
                            </div>


                    </form>
                </section>

            </div>

        </main>

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

@endsection



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