@extends('layouts.user', ['header' => true, 'nav' => true, 'demo' => true, 'settings' => $settings])

{{-- Custom CSS --}}
@section('css')
<style>
    .section-theme {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .theme-image {
        /* filter: blur(0.5px);
        position: relative; */
        width: 100% !important;
        height: 85% !important;
        margin-bottom: 1rem;
    }

    .btn-choose-theme {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        {{ __('Overview') }}
                    </div>
                    <h2 class="page-title">
                        {{ __('Edit Video Landing page') }}
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-xl">
            <div class="row row-deck row-cards">
                <div class="col-sm-12 col-lg-12">
                    <form action="{{ route('user.edit.video.card') }}" method="post" enctype="multipart/form-data"
                        class="card">
                        @csrf
                        <input type="hidden" class="form-control" name="theme_id" value="588969110990">
                        <input type="hidden" class="form-control" name="id" value="{{$business_card->id}}">
                        {{-- Create Card --}}
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 col-xl-12">
                                    <div class="mb-3">
                                        <label class="form-label required">{{ __('Card Color') }}</label>
                                        <div class="row g-2">

                                            <div class="col-auto">
                                                <label class="form-colorinput">
                                                    <input name="card_color" type="radio" value="blue"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "blue" ? 'checked' :
                                                    ''
                                                    }} />
                                                    <span class="form-colorinput-color bg-blue"></span>
                                                </label>
                                            </div>
                                            <div class="col-auto">
                                                <label class="form-colorinput form-colorinput-light">
                                                    <input name="card_color" type="radio" value="indigo"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "indigo" ? 'checked'
                                                    : ''
                                                    }} />
                                                    <span class="form-colorinput-color bg-indigo"></span>
                                                </label>
                                            </div>
                                            <div class="col-auto">
                                                <label class="form-colorinput">
                                                    <input name="card_color" type="radio" value="green"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "green" ? 'checked' :
                                                    ''
                                                    }} />
                                                    <span class="form-colorinput-color bg-green"></span>
                                                </label>
                                            </div>
                                            <div class="col-auto">
                                                <label class="form-colorinput">
                                                    <input name="card_color" type="radio" value="yellow"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "yellow" ? 'checked'
                                                    : ''
                                                    }} />
                                                    <span class="form-colorinput-color bg-yellow"></span>
                                                </label>
                                            </div>

                                            <div class="col-auto">
                                                <label class="form-colorinput">
                                                    <input name="card_color" type="radio" value="red"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "red" ? 'checked' :
                                                    '' }}
                                                    />
                                                    <span class="form-colorinput-color bg-red"></span>
                                                </label>
                                            </div>
                                            <div class="col-auto">
                                                <label class="form-colorinput">
                                                    <input name="card_color" type="radio" value="purple"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "purple" ? 'checked'
                                                    : ''
                                                    }} />
                                                    <span class="form-colorinput-color bg-purple"></span>
                                                </label>
                                            </div>
                                            <div class="col-auto">
                                                <label class="form-colorinput">
                                                    <input name="card_color" type="radio" value="pink"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "pink" ? 'checked' :
                                                    ''
                                                    }} />
                                                    <span class="form-colorinput-color bg-pink"></span>
                                                </label>
                                            </div>
                                            <div class="col-auto">
                                                <label class="form-colorinput form-colorinput-light">
                                                    <input name="card_color" type="radio" value="gray"
                                                        class="form-colorinput-input" {{
                                                        $business_card->theme_color == "gray" ? 'checked' :
                                                    ''
                                                    }} />
                                                    <span class="form-colorinput-color bg-muted"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Video Link') }}</label>
                                        <input type="text" class="form-control" name="video_link" value="{{$business_card->video_link}}" placeholder="{{ __('Enter Video Link') }}..." required>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Video title') }}</label>
                                        <input type="text" class="form-control" 
                                            onload="convertToLink(this.value); checkLink()"
                                            onkeyup="convertToLink(this.value); checkLink()"
                                            name="title" value="{{$business_card->title}}" placeholder="{{ __('Enter Video Title') }}..." required>
                                    </div>
                                </div>
                                @if ($plan_details->personalized_link)
                                    <div class="col-md-6 col-xl-6">
                                        <div class="mb-3">
                                            <label class="form-label required">{{ __('Personalized Link')
                                                }}</label>
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    {{ URL::to('/') }}
                                                </span>
                                                <input type="text" class="form-control" name="link"
                                                    placeholder="{{ __('Personalized Link') }}"
                                                    autocomplete="off" id="plink" onkeyup="checkLink()"
                                                    minlength="2" value="{{ $business_card->card_url }}"
                                                    required>
                                            </div>
                                            <p id="status"></p>
                                        </div>
                                    </div>
                                    @endif
                                <div class="col-md-6 col-xl-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Button Label') }}(optional)</label>
                                        <input type="text" class="form-control" name="btn_video_label" value="{{$business_card->btn_video_label}}"  placeholder="{{ __('Enter Button Label (optional)') }}...">
                                    </div>
                                </div>
                                <div class="col-md-6 col-xl-6">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Button Link') }}</label>
                                        <input type="text" class="form-control" name="btn_video_link" value="{{$business_card->btn_video_link}}"  placeholder="{{ __('Enter Button Link') }}..." required>
                                    </div>
                                </div>
                                <div class="col-md-8 col-xl-8">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Video Description') }}(optional)</label>
                                        <textarea class="form-control" name="description" placeholder="{{ __('Enter Video Description (optional)') }}...">{{$business_card->description}}</textarea>
                                    </div>
                                </div>

                                <div class="col-md-12 col-xl-12">
                                    <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
{{-- Custom JS --}}
@push('custom-js')
<script>
    function checkLink(){
        "use strict";
        var plink = $('#plink').val();
        
        if(plink.length > 2){
            $.ajax({
            url: "{{ route('user.check.link') }}",
            method: 'POST',
            data:{_token: "{{ csrf_token() }}", link: plink},
            }).done(function(res) {
                if(res.status == 'success') {
                    $('#status').html("<span class='badge mt-2 bg-green'>{{ __('Available') }}</span>");
                }else{
                    $('#status').html("<span class='badge mt-2 bg-red'>{{ __('Not available') }}</span>");
                }
            });
        }else{
            $('#status').html("");
        }
    }
    function convertToLink( str ) {
        "use strict";
        //replace all special characters | symbols with a space
        str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ')
                .toLowerCase();
        
        // trim spaces at start and end of string
        str = str.replace(/^\s+|\s+$/gm,'');
        
        // replace space with dash/hyphen
        str = str.replace(/\s+/g, '-');   
        document.getElementById("plink").value = str;
        //return str;
    }
</script>
@endpush