@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

@php
$defaultImage = "";

foreach ($themes as $value => $theme) {
    if (Request::get('type') == null || Request::get('type') == "business" && $value == 0) {
        $defaultImage = asset("backend/img/vCards/".$theme->theme_thumbnail);
    }

    if (Request::get('type') == "personal" && $theme->theme_id == "499824398921") {
        $defaultImage = asset("backend/img/vCards/".$theme->theme_thumbnail);
    }
}
@endphp

@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">
                        {{ __('Create New Business Card') }}
                    </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.save.business.card') }}" method="post" enctype="multipart/form-data"
                        class="card">
                        @csrf
                        {{-- Create Card --}}
                        <div class="card-body">
                            <div class="row">
                                {{-- Themes --}}
                                <div class="col-md-5 col-xl-5 mb-5">
                                    <img src="{{ $defaultImage }}"
                                        class="w-100 h-100 object-cover theme-image" alt="">
                                    <a href="#" class="btn btn-primary btn-choose-theme" data-bs-toggle="modal"
                                        data-bs-target="#themeModal">
                                        {{ __('Choose a theme') }}
                                    </a>
                                </div>

                                {{-- Card details --}}
                                <div class="col-md-7 col-xl-7">
                                    <div class="row">
                                        <input type="hidden" class="form-control" name="theme_id" value="588969110990">
                                        <input type="hidden" class="form-control" name="type" value="{{ Request::get('type') ? Request::get('type') : 'business' }}">
                                        <div class="col-md-10 col-xl-10">
                                            <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" required 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" required />
                                                            <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" required />
                                                            <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" required />
                                                            <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" required />
                                                            <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" required />
                                                            <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" required />
                                                            <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" required />
                                                            <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" for="card_lang">{{ __('Language') }} <span
                                                        class="text-danger">*</span></label>
                                                <select name="card_lang" id="card_lang" class="form-control" required>
                                                    @foreach(config('app.languages') as $langLocale => $langName)
                                                    <option class="dropdown-item" value="{{ $langLocale }}" {{
                                                        $langLocale=='en' ? 'selected' : '' }}>
                                                        {{ $langName }} ({{ strtoupper($langLocale) }})
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </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()" value="{{ old('link') }}"
                                                        minlength="3" required>
                                                </div>
                                                <span id="status"></span>
                                            </div>
                                        </div>
                                        @endif

                                        <div class="col-md-6 col-xl-6">
                                            <div class="mb-3">
                                                <div class="form-label {{$settings->card_cover}}">{{ __('Cover') }}</div>
                                                <input type="file" class="form-control" name="cover"
                                                    placeholder="{{ __('Cover') }}..." {{$settings->card_cover}}
                                                    accept=".jpeg,.jpg,.png,.gif,.svg" />
                                                <small>{{ __('Recommended : 604 x 250 pixels')
                                                    }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xl-6">
                                            <div class="mb-3">
                                                <div class="form-label {{$settings->card_logo}}">{{ __('Logo') }}</div>
                                                <input type="file" class="form-control" name="logo"
                                                    placeholder="{{ __('Logo') }}..." {{$settings->card_logo}}
                                                    accept=".jpeg,.jpg,.png,.gif,.svg" />
                                                <small>{{ __('Recommended : 512 x 512 pixels')
                                                    }}</small>
                                            </div>
                                        </div>

                                        <div class="col-md-6 col-xl-6">
                                            <div class="mb-3">
                                                <label class="form-label required">{{ __('Title') }}</label>
                                                <input type="text" class="form-control" name="title"
                                                    onload="convertToLink(this.value); checkLink()"
                                                    onkeyup="convertToLink(this.value); checkLink()"
                                                    value="{{ old('title') }}"
                                                    placeholder="{{ __('Business name / Your name') }}..." required>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-xl-6">
                                            <div class="mb-3">
                                                <label class="form-label required">{{ __('Sub Title') }}</label>
                                                <input type="text" class="form-control" name="subtitle"
                                                    value="{{ old('subtitle') }}"
                                                    placeholder="{{ __('Location / Job title') }}..." required>
                                            </div>
                                        </div>

                                        <div class="col-md-12 col-xl-12">
                                            <div class="mb-3">
                                                <label class="form-label required">{{ __('Description') }}</label>
                                                <textarea class="form-control" name="description"
                                                    data-bs-toggle="autosize"
                                                    placeholder="{{ __('About business / Bio') }}..."
                                                    required>{{ old('description') }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-xl-4 my-1">
                                        <div class="mb-3">
                                            <button type="submit" class="btn btn-primary">
                                                {{ __('Submit & Next') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('user.includes.footer')
</div>

{{-- Choose a theme modal --}}
<div class="modal modal-blur fade" id="themeModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Themes') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2">
                    @foreach ($themes as $theme)
                    @if (Request::get('type') == null || Request::get('type') == "business")
                    @if ($theme->theme_id != "499824398921")
                    <div class="col-lg-4 col-sm-4 col-md-4 col-6">
                        <label class="form-imagecheck mb-2">
                            <input type="radio" id="theme_id" value="{{ $theme->theme_id }}" onclick="chooseTheme(this, `{{ asset('backend/img/vCards/'.$theme->theme_thumbnail) }}`)"
                                class="form-imagecheck-input theme_id" {{ $loop->first ? 'checked' : '' }} required />
                            <span class="form-imagecheck-figure text-center font-weight-bold">
                                <img src="{{ asset('backend/img/vCards/'.$theme->theme_thumbnail) }}"
                                    class="w-100 h-100 object-cover" alt="{{ $theme->theme_name }}"
                                    class="form-imagecheck-image">
                                <span class="badge bg-primary text-white mt-2">{{ $theme->theme_name }}</span>
                            </span>
                        </label>
                    </div>
                    @endif
                    @endif

                    @if (Request::get('type') == "personal")
                    <div class="col-lg-4 col-sm-4 col-md-4 col-6">
                        <label class="form-imagecheck mb-2">
                            <input type="radio" id="theme_id" value="{{ $theme->theme_id }}" onclick="chooseTheme(this, `{{ asset('backend/img/vCards/'.$theme->theme_thumbnail) }}`)"
                                class="form-imagecheck-input theme_id" checked required />
                            <span class="form-imagecheck-figure text-center font-weight-bold">
                                <img src="{{ asset('backend/img/vCards/'.$theme->theme_thumbnail) }}"
                                    class="w-100 h-100 object-cover" alt="{{ $theme->theme_name }}"
                                    class="form-imagecheck-image">
                                <span class="badge bg-primary text-white mt-2">{{ $theme->theme_name }}</span>
                            </span>
                        </label>
                    </div>
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- 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("");
    }
}

$(document).ready(function() {
   $(".modal").on("hidden.bs.modal", function() {
    $(".theme_id").prop('checked', false);
   });
 });

function chooseTheme(selectedTheme, thumbnail) {
    $("input[name='theme_id']").val(selectedTheme.value);
    $(".theme-image").attr("src", thumbnail);

    $("#themeModal").modal("hide");
}

/* Encode string to link */
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
@endsection