@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 $theme) {
if ($theme->theme_id == $business_card->theme_id) {
$defaultImage = asset("backend/img/vCards/".$theme->theme_thumbnail);
}
}
@endphp

@section('content')
<div class="page-wrapper">
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="row g-0">
                    <div class="col-12 col-md-3 border-end">
                        <div class="card-body">
                            <h4 class="subheader">{{ __('Update Business Card') }}</h4>
                            <div class="list-group list-group-transparent">
                                {{-- Nav links --}}
                                @include('user.edit-cards.includes.nav-link', ['link' => 'basic'])
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-9 d-flex flex-column">
                        <form action="{{ route('user.update.business.card', Request::segment(3)) }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <h3 class="card-title mb-4">{{ __('Basic Details') }}</h3>

                                <div class="row">
                                    {{-- Themes --}}
                                    <div class="col-md-5 col-xl-5 mb-5">
                                        <img src="{{ $defaultImage }}" class="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" id="choosedTheme"
                                                value="{{ $business_card->theme_id }}">
                                            <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" 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 }}" {{
                                                            strtolower($business_card->card_lang) == $langLocale ?
                                                            '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()"
                                                            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">
                                                    <div class="form-label {{$settings->card_cover}}">{{ __('Cover') }}</div>
                                                    <input type="file" class="form-control" name="cover"
                                                        placeholder="{{ __('Cover') }}..."
                                                        value="{{ $business_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') }}..."
                                                        value="{{ $business_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()"
                                                        placeholder="{{ __('Business name / Your name') }}..."
                                                        value="{{ $business_card->title }}" 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"
                                                        placeholder="{{ __('Location / Job title') }}..."
                                                        value="{{ $business_card->sub_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>{{ $business_card->description }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-transparent mt-auto">
                                <div class="btn-list justify-content-end">
                                    <a href="{{ route('user.cards') }}" class="btn">
                                        {{ __('Cancel') }}
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        {{ __('Submit & Next') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </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 ($business_card->type == null || $business_card->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" {{ $theme->theme_id == $business_card->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
                    @endif

                    @if ($business_card->type == "personal" && $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" {{ $theme->theme_id == $business_card->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 src="{{ asset('backend/js/fslightbox.js') }}"></script>
<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");

    $(".submitBtn").attr("class", "btn btn-primary submitBtn");
}

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