@extends('layouts.master')

@section('title')
    @lang('translation.edit_avatar')
@endsection

@section('content')
    @php
    if (Auth::user()->first_name || Auth::user()->last_name) {
        $full_name = Auth::user()->first_name.' '.Auth::user()->last_name;
    }else{
        $full_name = 'N/A';
    }
    @endphp

    <div class="position-relative mx-n4 mt-n4">
        <div class="profile-wid-bg profile-setting-img">
        <img src="{{ URL::asset('assets/images/avatar-back.png') }}" alt="" class="profile-wid-img" />
        </div>
    </div>

    <div class="row">
        <div class="col-xxl-3 position-sticky" style="top: 96px;z-index: 1;">
            <div class="card mt-n5">
                <div class="card-body p-4">
                    <!-- Session Messages -->
                    @include('partials.session')
                    @php $user = Auth::user(); @endphp

                    <!-- Profile Completion Notice -->
                    @if ($user->first_name == null || $user->last_name == null || $user->username == null)
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong>Notice:</strong> Fill your personal details to proceed with the account verification!
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>    
                    @endif
                    
                    <div class="text-center">
                        <div id="avatar-container" class="profile-user position-relative d-inline-block mx-auto mb-md-4">
                        @if (Auth::user()->avatar) 
                             <i class="spinner-grow"></i>
                        @else 
                             <img src="{{ URL::asset('default_assets/user/default.jpg') }} " class="rounded avatar-xl img-thumbnail user-profile-image"> 
                        @endif

                        </div>
                        <h5 class="d-md-block d-none fs-16 mb-1">{{ $full_name }}</h5>
                        <p class="d-md-block d-none text-muted mb-0">{{ Auth::user()->username ?? 'N/A'}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-9">
            <div class="card mt-xxl-n5 p-4">
            <form id="options-form" method="POST" action="{{ url('/profile/update-avatar') }}" enctype="multipart/form-data">
                @csrf
                    <div class="row form-group">
                        <label class="col-sm-3 form-label" for="svgBackground">Background</label>
                        <div class="col-sm-9">
                            <input type="color" id="svgBackground" name="svgBackground" value="{{ $avatar->svgBackground ? $avatar->svgBackground : '#FFFFFF' }}">
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="top">Top</label>
                        <div class="col-sm-9">
                        <select id="top" name="top" class="form-control">
                            <option value="dreads01" {{ $avatar->top == 'dreads01' ? 'selected' : '' }}>Dreads 01</option>
                            <option value="dreads02" {{ $avatar->top == 'dreads02' ? 'selected' : '' }}>Dreads 02</option>
                            <option value="bald" {{ $avatar->top == 'bald' ? 'selected' : '' }}>Bald</option>
                            <option value="frizzle" {{ $avatar->top == 'frizzle' ? 'selected' : '' }}>Frizzle</option>
                            <option value="shaggyMullet" {{ $avatar->top == 'shaggyMullet' ? 'selected' : '' }}>Shaggy Mullet</option>
                            <option value="shaggy" {{ $avatar->top == 'shaggy' ? 'selected' : '' }}>Shaggy</option>
                            <option value="shortCurly" {{ $avatar->top == 'shortCurly' ? 'selected' : '' }}>Short Curly</option>
                            <option value="shortFlat" {{ $avatar->top == 'shortFlat' ? 'selected' : '' }}>Short Flat</option>
                            <option value="shortRound" {{ $avatar->top == 'shortRound' ? 'selected' : '' }}>Short Round</option>
                            <option value="sides" {{ $avatar->top == 'sides' ? 'selected' : '' }}>Sides</option>
                            <option value="shortWaved" {{ $avatar->top == 'shortWaved' ? 'selected' : '' }}>Short Waved</option>
                            <option value="theCaesarAndSidePart" {{ $avatar->top == 'theCaesarAndSidePart' ? 'selected' : '' }}>The Caesar And Side Part</option>
                            <option value="theCaesar" {{ $avatar->top == 'theCaesar' ? 'selected' : '' }}>The Caesar</option>
                            <option value="bigHair" {{ $avatar->top == 'bigHair' ? 'selected' : '' }}>Big Hair</option>
                            <option value="bob" {{ $avatar->top == 'bob' ? 'selected' : '' }}>Bob</option>
                            <option value="bun" {{ $avatar->top == 'bun' ? 'selected' : '' }}>Bun</option>
                            <option value="curly" {{ $avatar->top == 'curly' ? 'selected' : '' }}>Curly</option>
                            <option value="curvy" {{ $avatar->top == 'curvy' ? 'selected' : '' }}>Curvy</option>
                            <option value="dreads" {{ $avatar->top == 'dreads' ? 'selected' : '' }}>Dreads</option>
                            <option value="frida" {{ $avatar->top == 'frida' ? 'selected' : '' }}>Frida</option>
                            <option value="froAndBand" {{ $avatar->top == 'froAndBand' ? 'selected' : '' }}>Fro And Band</option>
                            <option value="fro" {{ $avatar->top == 'fro' ? 'selected' : '' }}>Fro</option>
                            <option value="longButNotTooLong" {{ $avatar->top == 'longButNotTooLong' ? 'selected' : '' }}>Long But Not Too Long</option>
                            <option value="miaWallace" {{ $avatar->top == 'miaWallace' ? 'selected' : '' }}>Mia Wallace</option>
                            <option value="shavedSides" {{ $avatar->top == 'shavedSides' ? 'selected' : '' }}>Shaved Sides</option>
                            <option value="straightAndStrand" {{ $avatar->top == 'straightAndStrand' ? 'selected' : '' }}>Straight And Strand</option>
                            <option value="straight01" {{ $avatar->top == 'straight01' ? 'selected' : '' }}>Straight 01</option>
                            <option value="straight02" {{ $avatar->top == 'straight02' ? 'selected' : '' }}>Straight 02</option>
                            <option value="eyepatch" {{ $avatar->top == 'eyepatch' ? 'selected' : '' }}>Eyepatch</option>
                            <option value="turban" {{ $avatar->top == 'turban' ? 'selected' : '' }}>Turban</option>
                            <option value="hijab" {{ $avatar->top == 'hijab' ? 'selected' : '' }}>Hijab</option>
                            <option value="hat" {{ $avatar->top == 'hat' ? 'selected' : '' }}>Hat</option>
                            <option value="winterHat01" {{ $avatar->top == 'winterHat01' ? 'selected' : '' }}>Winter Hat 01</option>
                            <option value="winterHat02" {{ $avatar->top == 'winterHat02' ? 'selected' : '' }}>Winter Hat 02</option>
                            <option value="winterHat03" {{ $avatar->top == 'winterHat03' ? 'selected' : '' }}>Winter Hat 03</option>
                            <option value="winterHat04" {{ $avatar->top == 'winterHat04' ? 'selected' : '' }}>Winter Hat 04</option>
                        </select>

                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="hairColor">↳ 💈 Hair Color</label>
                        <div class="col-sm-9">
                        <select id="hairColor" name="hairColor" class="form-control">
                            <option value="auburn" {{ $avatar->hairColor == 'auburn' ? 'selected' : '' }}>Auburn</option>
                            <option value="black" {{ $avatar->hairColor == 'black' ? 'selected' : '' }}>Black</option>
                            <option value="blonde" {{ $avatar->hairColor == 'blonde' ? 'selected' : '' }}>Blonde</option>
                            <option value="blondeGolden" {{ $avatar->hairColor == 'blondeGolden' ? 'selected' : '' }}>Blonde Golden</option>
                            <option value="brown" {{ $avatar->hairColor == 'brown' ? 'selected' : '' }}>Brown</option>
                            <option value="brownDark" {{ $avatar->hairColor == 'brownDark' ? 'selected' : '' }}>Brown Dark</option>
                            <option value="pastelPink" {{ $avatar->hairColor == 'pastelPink' ? 'selected' : '' }}>Pastel Pink</option>
                            <option value="platinum" {{ $avatar->hairColor == 'platinum' ? 'selected' : '' }}>Platinum</option>
                            <option value="red" {{ $avatar->hairColor == 'red' ? 'selected' : '' }}>Red</option>
                            <option value="silverGray" {{ $avatar->hairColor == 'silverGray' ? 'selected' : '' }}>Silver Gray</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="hatColor">↳  🎨 HatColor</label>
                        <div class="col-sm-9">
                        <select id="hatColor" name="hatColor" class="form-control">
                            <option value="black" {{ $avatar->hatColor == 'black' ? 'selected' : '' }}>Black</option>
                            <option value="blue01" {{ $avatar->hatColor == 'blue01' ? 'selected' : '' }}>Blue 01</option>
                            <option value="blue02" {{ $avatar->hatColor == 'blue02' ? 'selected' : '' }}>Blue 02</option>
                            <option value="blue03" {{ $avatar->hatColor == 'blue03' ? 'selected' : '' }}>Blue 03</option>
                            <option value="gray01" {{ $avatar->hatColor == 'gray01' ? 'selected' : '' }}>Gray 01</option>
                            <option value="gray02" {{ $avatar->hatColor == 'gray02' ? 'selected' : '' }}>Gray 02</option>
                            <option value="heather" {{ $avatar->hatColor == 'heather' ? 'selected' : '' }}>Heather</option>
                            <option value="pastelBlue" {{ $avatar->hatColor == 'pastelBlue' ? 'selected' : '' }}>Pastel Blue</option>
                            <option value="pastelGreen" {{ $avatar->hatColor == 'pastelGreen' ? 'selected' : '' }}>Pastel Green</option>
                            <option value="pastelOrange" {{ $avatar->hatColor == 'pastelOrange' ? 'selected' : '' }}>Pastel Orange</option>
                            <option value="pastelRed" {{ $avatar->hatColor == 'pastelRed' ? 'selected' : '' }}>Pastel Red</option>
                            <option value="pastelYellow" {{ $avatar->hatColor == 'pastelYellow' ? 'selected' : '' }}>Pastel Yellow</option>
                            <option value="pink" {{ $avatar->hatColor == 'pink' ? 'selected' : '' }}>Pink</option>
                            <option value="red" {{ $avatar->hatColor == 'red' ? 'selected' : '' }}>Red</option>
                            <option value="white" {{ $avatar->hatColor == 'white' ? 'selected' : '' }}>White</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="accessories">👓 Accessories</label>
                        <div class="col-sm-9">
                        <select id="accessories" name="accessories" class="form-control">
                            <option value="none" {{ $avatar->accessories == 'none' ? 'selected' : '' }}>None</option>
                            <option value="kurt" {{ $avatar->accessories == 'kurt' ? 'selected' : '' }}>Kurt</option>
                            <option value="prescription01" {{ $avatar->accessories == 'prescription01' ? 'selected' : '' }}>Prescription 01</option>
                            <option value="prescription02" {{ $avatar->accessories == 'prescription02' ? 'selected' : '' }}>Prescription 02</option>
                            <option value="round" {{ $avatar->accessories == 'round' ? 'selected' : '' }}>Round</option>
                            <option value="sunglasses" {{ $avatar->accessories == 'sunglasses' ? 'selected' : '' }}>Sunglasses</option>
                            <option value="wayfarers" {{ $avatar->accessories == 'wayfarers' ? 'selected' : '' }}>Wayfarers</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="accessoriesColor">↳  🎨 Accessories Color</label>
                        <div class="col-sm-9">
                        <select id="accessoriesColor" name="accessoriesColor" class="form-control">
                            <option value="black" {{ $avatar->accessoriesColor == 'black' ? 'selected' : '' }}>Black</option>
                            <option value="blue01" {{ $avatar->accessoriesColor == 'blue01' ? 'selected' : '' }}>Blue 01</option>
                            <option value="blue02" {{ $avatar->accessoriesColor == 'blue02' ? 'selected' : '' }}>Blue 02</option>
                            <option value="blue03" {{ $avatar->accessoriesColor == 'blue03' ? 'selected' : '' }}>Blue 03</option>
                            <option value="gray01" {{ $avatar->accessoriesColor == 'gray01' ? 'selected' : '' }}>Gray 01</option>
                            <option value="gray02" {{ $avatar->accessoriesColor == 'gray02' ? 'selected' : '' }}>Gray 02</option>
                            <option value="heather" {{ $avatar->accessoriesColor == 'heather' ? 'selected' : '' }}>Heather</option>
                            <option value="pastelBlue" {{ $avatar->accessoriesColor == 'pastelBlue' ? 'selected' : '' }}>Pastel Blue</option>
                            <option value="pastelGreen" {{ $avatar->accessoriesColor == 'pastelGreen' ? 'selected' : '' }}>Pastel Green</option>
                            <option value="pastelOrange" {{ $avatar->accessoriesColor == 'pastelOrange' ? 'selected' : '' }}>Pastel Orange</option>
                            <option value="pastelRed" {{ $avatar->accessoriesColor == 'pastelRed' ? 'selected' : '' }}>Pastel Red</option>
                            <option value="pastelYellow" {{ $avatar->accessoriesColor == 'pastelYellow' ? 'selected' : '' }}>Pastel Yellow</option>
                            <option value="pink" {{ $avatar->accessoriesColor == 'pink' ? 'selected' : '' }}>Pink</option>
                            <option value="red" {{ $avatar->accessoriesColor == 'red' ? 'selected' : '' }}>Red</option>
                            <option value="white" {{ $avatar->accessoriesColor == 'white' ? 'selected' : '' }}>White</option>
                        </select>
                        </div>
                    </div>
                    
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="facialHair">Facial Hair</label>
                        <div class="col-sm-9">
                        <select id="facialHair" name="facialHair" class="form-control">
                            <option value="none" {{ $avatar->facialHair == 'none' ? 'selected' : '' }}>None</option>
                            <option value="beardLight" {{ $avatar->facialHair == 'beardLight' ? 'selected' : '' }}>Beard Light</option>
                            <option value="beardMagestic" {{ $avatar->facialHair == 'beardMagestic' ? 'selected' : '' }}>Beard Magestic</option>
                            <option value="beardMedium" {{ $avatar->facialHair == 'beardMedium' ? 'selected' : '' }}>Beard Medium</option>
                            <option value="moustaceFancy" {{ $avatar->facialHair == 'moustaceFancy' ? 'selected' : '' }}>Moustache Fancy</option>
                            <option value="moustacheMagnum" {{ $avatar->facialHair == 'moustacheMagnum' ? 'selected' : '' }}>Moustache Magnum</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="facialHairColor">↳ ✂️ Facial Hair Color</label>
                        <div class="col-sm-9">
                        <select id="facialHairColor" name="facialHairColor" class="form-control">
                            <option value="auburn" {{ $avatar->facialHairColor == 'auburn' ? 'selected' : '' }}>Auburn</option>
                            <option value="black" {{ $avatar->facialHairColor == 'black' ? 'selected' : '' }}>Black</option>
                            <option value="blonde" {{ $avatar->facialHairColor == 'blonde' ? 'selected' : '' }}>Blonde</option>
                            <option value="blondeGolden" {{ $avatar->facialHairColor == 'blondeGolden' ? 'selected' : '' }}>Blonde Golden</option>
                            <option value="brown" {{ $avatar->facialHairColor == 'brown' ? 'selected' : '' }}>Brown</option>
                            <option value="brownDark" {{ $avatar->facialHairColor == 'brownDark' ? 'selected' : '' }}>Brown Dark</option>
                            <option value="pastelPink" {{ $avatar->facialHairColor == 'pastelPink' ? 'selected' : '' }}>Pastel Pink</option>
                            <option value="platinum" {{ $avatar->facialHairColor == 'platinum' ? 'selected' : '' }}>Platinum</option>
                            <option value="red" {{ $avatar->facialHairColor == 'red' ? 'selected' : '' }}>Red</option>
                            <option value="silverGray" {{ $avatar->facialHairColor == 'silverGray' ? 'selected' : '' }}>Silver Gray</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="clothing">👔 Clothes</label>
                        <div class="col-sm-9">
                        <select id="clothing" name="clothing" class="form-control">
                            <option value="blazerAndShirt" {{ $avatar->clothing == 'blazerAndShirt' ? 'selected' : '' }}>Blazer And Shirt</option>
                            <option value="blazerAndSweater" {{ $avatar->clothing == 'blazerAndSweater' ? 'selected' : '' }}>Blazer And Sweater</option>
                            <option value="collarAndSweater" {{ $avatar->clothing == 'collarAndSweater' ? 'selected' : '' }}>Collar And Sweater</option>
                            <option value="graphicShirt" {{ $avatar->clothing == 'graphicShirt' ? 'selected' : '' }}>Graphic Shirt</option>
                            <option value="hoodie" {{ $avatar->clothing == 'hoodie' ? 'selected' : '' }}>Hoodie</option>
                            <option value="overall" {{ $avatar->clothing == 'overall' ? 'selected' : '' }}>Overall</option>
                            <option value="shirtCrewNeck" {{ $avatar->clothing == 'shirtCrewNeck' ? 'selected' : '' }}>Shirt Crew Neck</option>
                            <option value="shirtScoopNeck" {{ $avatar->clothing == 'shirtScoopNeck' ? 'selected' : '' }}>Shirt Scoop Neck</option>
                            <option value="shirtVNeck" {{ $avatar->clothing == 'shirtVNeck' ? 'selected' : '' }}>Shirt V Neck</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="clothingColor">↳ Color Fabric</label>
                        <div class="col-sm-9">
                        <select id="clothingColor" name="clothingColor" class="form-control">
                            <option value="black" {{ $avatar->clothingColor == 'black' ? 'selected' : '' }}>Black</option>
                            <option value="blue01" {{ $avatar->clothingColor == 'blue01' ? 'selected' : '' }}>Blue 01</option>
                            <option value="blue02" {{ $avatar->clothingColor == 'blue02' ? 'selected' : '' }}>Blue 02</option>
                            <option value="blue03" {{ $avatar->clothingColor == 'blue03' ? 'selected' : '' }}>Blue 03</option>
                            <option value="gray01" {{ $avatar->clothingColor == 'gray01' ? 'selected' : '' }}>Gray 01</option>
                            <option value="gray02" {{ $avatar->clothingColor == 'gray02' ? 'selected' : '' }}>Gray 02</option>
                            <option value="heather" {{ $avatar->clothingColor == 'heather' ? 'selected' : '' }}>Heather</option>
                            <option value="pastelBlue" {{ $avatar->clothingColor == 'pastelBlue' ? 'selected' : '' }}>Pastel Blue</option>
                            <option value="pastelGreen" {{ $avatar->clothingColor == 'pastelGreen' ? 'selected' : '' }}>Pastel Green</option>
                            <option value="pastelOrange" {{ $avatar->clothingColor == 'pastelOrange' ? 'selected' : '' }}>Pastel Orange</option>
                            <option value="pastelRed" {{ $avatar->clothingColor == 'pastelRed' ? 'selected' : '' }}>Pastel Red</option>
                            <option value="pastelYellow" {{ $avatar->clothingColor == 'pastelYellow' ? 'selected' : '' }}>Pastel Yellow</option>
                            <option value="pink" {{ $avatar->clothingColor == 'pink' ? 'selected' : '' }}>Pink</option>
                            <option value="red" {{ $avatar->clothingColor == 'red' ? 'selected' : '' }}>Red</option>
                            <option value="white" {{ $avatar->clothingColor == 'white' ? 'selected' : '' }}>White</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="clothingGraphic">↳ Graphic</label>
                        <div class="col-sm-9">
                        <select id="clothingGraphic" name="clothingGraphic" class="form-control">
                            <option value="skrullOutline" {{ $avatar->clothingGraphic == 'skrullOutline' ? 'selected' : '' }}>Skrull Outline</option>
                            <option value="skrull" {{ $avatar->clothingGraphic == 'skrull' ? 'selected' : '' }}>Skrull</option>
                            <option value="resist" {{ $avatar->clothingGraphic == 'resist' ? 'selected' : '' }}>Resist</option>
                            <option value="pizza" {{ $avatar->clothingGraphic == 'pizza' ? 'selected' : '' }}>Pizza</option>
                            <option value="hola" {{ $avatar->clothingGraphic == 'hola' ? 'selected' : '' }}>Hola</option>
                            <option value="diamond" {{ $avatar->clothingGraphic == 'diamond' ? 'selected' : '' }}>Diamond</option>
                            <option value="deer" {{ $avatar->clothingGraphic == 'deer' ? 'selected' : '' }}>Deer</option>
                            <option value="dumbia" {{ $avatar->clothingGraphic == 'dumbia' ? 'selected' : '' }}>Dumbia</option>
                            <option value="bear" {{ $avatar->clothingGraphic == 'bear' ? 'selected' : '' }}>Bear</option>
                            <option value="bat" {{ $avatar->clothingGraphic == 'bat' ? 'selected' : '' }}>Bat</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="eyes">👁 Eyes</label>
                        <div class="col-sm-9">
                        <select id="eyes" name="eyes" class="form-control">
                            <option value="squint" {{ $avatar->eyes == 'squint' ? 'selected' : '' }}>Squint</option>
                            <option value="closed" {{ $avatar->eyes == 'closed' ? 'selected' : '' }}>Closed</option>
                            <option value="cry" {{ $avatar->eyes == 'cry' ? 'selected' : '' }}>Cry</option>
                            <option value="default" {{ $avatar->eyes == 'default' ? 'selected' : '' }}>Default</option>
                            <option value="eyeRoll" {{ $avatar->eyes == 'eyeRoll' ? 'selected' : '' }}>Eye Roll</option>
                            <option value="happy" {{ $avatar->eyes == 'happy' ? 'selected' : '' }}>Happy</option>
                            <option value="hearts" {{ $avatar->eyes == 'hearts' ? 'selected' : '' }}>Hearts</option>
                            <option value="side" {{ $avatar->eyes == 'side' ? 'selected' : '' }}>Side</option>
                            <option value="surprised" {{ $avatar->eyes == 'surprised' ? 'selected' : '' }}>Surprised</option>
                            <option value="wink" {{ $avatar->eyes == 'wink' ? 'selected' : '' }}>Wink</option>
                            <option value="winkWacky" {{ $avatar->eyes == 'winkWacky' ? 'selected' : '' }}>Wink Wacky</option>
                            <option value="xDizzy" {{ $avatar->eyes == 'xDizzy' ? 'selected' : '' }}>XDizzy</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="eyebrows">✏️ Eyebrow</label>
                        <div class="col-sm-9">
                        <select id="eyebrows" name="eyebrows" class="form-control">
                            <option value="default" {{ $avatar->eyebrows == 'default' ? 'selected' : '' }}>Default</option>
                            <option value="angryNatural" {{ $avatar->eyebrows == 'angryNatural' ? 'selected' : '' }}>Angry Natural</option>
                            <option value="defaultNatural" {{ $avatar->eyebrows == 'defaultNatural' ? 'selected' : '' }}>Default Natural</option>
                            <option value="flatNatural" {{ $avatar->eyebrows == 'flatNatural' ? 'selected' : '' }}>Flat Natural</option>
                            <option value="frownNatural" {{ $avatar->eyebrows == 'frownNatural' ? 'selected' : '' }}>Frown Natural</option>
                            <option value="raisedExcitedNatural" {{ $avatar->eyebrows == 'raisedExcitedNatural' ? 'selected' : '' }}>Raised Excited Natural</option>
                            <option value="sadConcernedNatural" {{ $avatar->eyebrows == 'sadConcernedNatural' ? 'selected' : '' }}>Sad Concerned Natural</option>
                            <option value="unibrowNatural" {{ $avatar->eyebrows == 'unibrowNatural' ? 'selected' : '' }}>Unibrow Natural</option>
                            <option value="upDownNatural" {{ $avatar->eyebrows == 'upDownNatural' ? 'selected' : '' }}>Up Down Natural</option>
                            <option value="raisedExcited" {{ $avatar->eyebrows == 'raisedExcited' ? 'selected' : '' }}>Raised Excited</option>
                            <option value="angry" {{ $avatar->eyebrows == 'angry' ? 'selected' : '' }}>Angry</option>
                            <option value="sadConcerned" {{ $avatar->eyebrows == 'sadConcerned' ? 'selected' : '' }}>Sad Concerned</option>
                            <option value="upDown" {{ $avatar->eyebrows == 'upDown' ? 'selected' : '' }}>Up Down</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="mouth">👄 Mouth</label>
                        <div class="col-sm-9">
                        <select id="mouth" name="mouth" class="form-control">
                            <option value="smile" {{ $avatar->mouth == 'smile' ? 'selected' : '' }}>Smile</option>
                            <option value="concerned" {{ $avatar->mouth == 'concerned' ? 'selected' : '' }}>Concerned</option>
                            <option value="default" {{ $avatar->mouth == 'default' ? 'selected' : '' }}>Default</option>
                            <option value="disbelief" {{ $avatar->mouth == 'disbelief' ? 'selected' : '' }}>Disbelief</option>
                            <option value="eating" {{ $avatar->mouth == 'eating' ? 'selected' : '' }}>Eating</option>
                            <option value="grimace" {{ $avatar->mouth == 'grimace' ? 'selected' : '' }}>Grimace</option>
                            <option value="sad" {{ $avatar->mouth == 'sad' ? 'selected' : '' }}>Sad</option>
                            <option value="screamOpen" {{ $avatar->mouth == 'screamOpen' ? 'selected' : '' }}>Scream Open</option>
                            <option value="serious" {{ $avatar->mouth == 'serious' ? 'selected' : '' }}>Serious</option>
                            <option value="tongue" {{ $avatar->mouth == 'tongue' ? 'selected' : '' }}>Tongue</option>
                            <option value="twinkle" {{ $avatar->mouth == 'twinkle' ? 'selected' : '' }}>Twinkle</option>
                            <option value="vomit" {{ $avatar->mouth == 'vomit' ? 'selected' : '' }}>Vomit</option>
                        </select>
                        </div>
                    </div>
                    <div class="row form-group mb-2">
                        <label class="col-sm-3 form-label" for="skin">🎨 Skin</label>
                        <div class="col-sm-9">
                        <select id="skin" name="skin" class="form-control">
                            <option value="tanned" {{ $avatar->skin == 'tanned' ? 'selected' : '' }}>Tanned</option>
                            <option value="yellow" {{ $avatar->skin == 'yellow' ? 'selected' : '' }}>Yellow</option>
                            <option value="pale" {{ $avatar->skin == 'pale' ? 'selected' : '' }}>Pale</option>
                            <option value="light" {{ $avatar->skin == 'light' ? 'selected' : '' }}>Light</option>
                            <option value="brown" {{ $avatar->skin == 'brown' ? 'selected' : '' }}>Brown</option>
                            <option value="darkBrown" {{ $avatar->skin == 'darkBrown' ? 'selected' : '' }}>Dark Brown</option>
                            <option value="black" {{ $avatar->skin == 'black' ? 'selected' : '' }}>Black</option>
                        </select>
                        </div>
                    </div>
                    
                    <div class="row form-group">
                        <div class="offset-sm-3 col-sm-9 offset-sm-3">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-download"></i> @lang('translation.save-avatar')</button>
                        </div>
                    </div>
                    <input type='image' src='' id='pngImage' class="d-none" />
                    <input type='hidden' id='webpImagebase64' name="avatarpng" />
                </form>
                <div id="radioButtonsContainer"></div>
            </div>
        </div>
    </div>

@endsection
@section('script')
        <script src="{{ URL::asset('assets/js/avataaars.js') }}"></script>
        <script>
        // console.log( Avataaars.getEditableTypes() );
        // console.log( Avataaars.getEditableTypesPaths() );
        var optionsForm = document.getElementById('options-form');
        var avatarContainer = document.getElementById('avatar-container');

        var canvas = document.createElement("canvas"); // for png
        var context = canvas.getContext("2d"); // for png
        var img = new Image(); // for png
        var pngImage = document.getElementById('pngImage'); // for png

        var webpImagebase64 = document.getElementById('webpImagebase64'); // for webpbase64


        function createAvatar(options) {
            var svgString = Avataaars.create(options);
            while (avatarContainer.firstChild) {
                avatarContainer.removeChild(avatarContainer.firstChild);
            }
            avatarContainer.innerHTML = svgString;
            
            // for png// for png// for png
            img.onload = function() {

            // Set new dimensions (adjust as needed)
            var newWidth = img.width * 0.5; // Reduce width by 50%
            var newHeight = img.height * 0.5; // Reduce height by 50%

            canvas.width = newWidth;
            canvas.height = newHeight;
            context.drawImage(img, 0, 0, newWidth, newHeight);

            var webpData = canvas.toDataURL("image/webp");
            webpImagebase64.value = webpData;
            // Now you can use 'webpData' which contains the PNG image data
            pngImage.src = webpData;
            };
            img.src = "data:image/svg+xml;base64," + btoa(svgString);
            
            // for png// for png// for png
        }

        optionsForm.addEventListener('input', function (event) {
            var options = {
                width: 200,
                height: 200,
                //style: optionsForm.style.value,
                // background: optionsForm.background.value,
                svgBackground: optionsForm.svgBackground.value,
                skin: optionsForm.skin.value,
                top: optionsForm.top.value,
                hairColor: optionsForm.hairColor.value,
                hatColor: optionsForm.hatColor.value,
                accessories: optionsForm.accessories.value,
                accessoriesColor: optionsForm.accessoriesColor.value,
                facialHair: optionsForm.facialHair.value,
                facialHairColor: optionsForm.facialHairColor.value,
                clothing: optionsForm.clothing.value,
                clothingGraphic: optionsForm.clothingGraphic.value,
                clothingColor: optionsForm.clothingColor.value,
                eyes: optionsForm.eyes.value,
                eyebrows: optionsForm.eyebrows.value,
                mouth: optionsForm.mouth.value,
            };
            createAvatar(options);
        });

        // Initial render
        var initialOptions = {
            width: 200,
            height: 200,
            //style: optionsForm.style.value,
            // background: optionsForm.background.value,
            svgBackground: optionsForm.svgBackground.value,
            skin: optionsForm.skin.value,
            top: optionsForm.top.value,
            hairColor: optionsForm.hairColor.value,
            hatColor: optionsForm.hatColor.value,
            accessories: optionsForm.accessories.value,
            accessoriesColor: optionsForm.accessoriesColor.value,
            facialHair: optionsForm.facialHair.value,
            facialHairColor: optionsForm.facialHairColor.value,
            clothing: optionsForm.clothing.value,
            clothingGraphic: optionsForm.clothingGraphic.value,
            clothingColor: optionsForm.clothingColor.value,
            eyes: optionsForm.eyes.value,
            eyebrows: optionsForm.eyebrows.value,
            mouth: optionsForm.mouth.value,
        };
        createAvatar(initialOptions);

    </script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Input Mask -->
    <script src="{{ URL::asset('assets/libs/cleave.js/cleave.js.min.js') }}"></script>
    <script src="{{ URL::asset('assets/js/pages/form-masks.init.js') }}"></script>
@endsection