@extends('front.v2.layouts.master')
@push('header-script')
    <link href="{{ asset('plugins/bower_components/toast-master/css/jquery.toast.css') }}?{{CURRENT_VERSION}}" rel="stylesheet">

     <!-- Meta Tags for SEO -->
     <meta name="description" content="Discover AI Personas to elevate your team further. Browse through categories and find the perfect AI Persona for your needs.">
     <meta name="keywords" content="AI Personas, Team Improvement, AI Profiles, Business AI, Team Development, AI Tools">
     <meta property="og:title" content="AI Personas to Elevate Your Team | FlowyTeam">
     <meta property="og:description" content="Explore a variety of AI Personas to enhance your team's performance. Find the right AI tool for your business needs.">
     <meta property="og:image" content="{{ asset('images/ai-personas-banner.jpg') }}">
     <meta property="og:url" content="{{ url()->current() }}">
     <meta property="og:type" content="website">
    <meta property="og:site_name" content="FlowyTeam">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@FlowyTeam">
    <meta name="twitter:creator" content="@FlowyTeam">
    <meta name="twitter:title" content="AI Personas to Elevate Your Team | FlowyTeam">
    <meta name="twitter:description" content="Explore a variety of AI Personas to enhance your team's performance. Find the right AI tool for your business needs.">
    <meta name="twitter:image" content="{{ asset('images/ai-personas-banner.jpg') }}">
    <meta name="twitter:image:alt" content="AI Personas to Elevate Your Team | FlowyTeam">


    <style type="text/css">
        .bg-theme-grad {
            background: linear-gradient(14deg,#09c778 0%,#01a0f9 100%) !important;
        }

        .container-personas{
            position: relative;
            margin-top: -14rem;
            z-index:5;
        }

        @media screen and (min-width: 600) {
            .container-personas{
                margin-top: -22rem;
            }
        }
        @media screen and (min-width: 768px) {
            .container-personas{
                margin-top: -19rem;
            }
        }

        @media screen and (min-width: 992px) {
            .container-personas{
                margin-top: -17rem;
            }
        }

        @media screen and (min-width: 1024px) {
            .container-personas{
                margin-top: -16rem;
            }
        }

        @media screen and (min-width: 1400px) {
            .container-personas{
                margin-top: -18rem;
            }
        }

        .list-success:before {    
            font-family: 'FontAwesome';
            content: "\f111";
            margin:0 10px 0 -17px;
            color: #28a745 !important;
        }

        .list-danger:before {    
            font-family: 'FontAwesome';
            content: "\f111";
            margin:0px 10px 0px -17px;
            color: #dc3545 !important;
        }
        
        .list-warning:before {    
            font-family: 'FontAwesome';
            content: "\f111";
            margin:0 10px 0 -17px;
            color: #ffc107 !important;
        }
       
        .btn-flowy{
            box-shadow: none;
        }
        .title-xxl{
            font-size: 3.5rem !important;
        }

        .row-personas{
            row-gap: 1rem
        }

        .card-category{
            transition: 0.2s;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .card-category:hover{
            scale: 1.04;
            transition: 0.5s;
            box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }

        .card-category > .card-body{
            text-align: center;
        }

        .card-category > .card-body > h5{
            color: #fff !important;
        }


        .search-container{
            margin-top:5rem;
            margin-bottom:4rem;
            text-align: end;
        }

        .search-container > input {
            border-radius: 1rem;
            position: relative;
        }

        .search-container > .icon-search {
            margin-top:-36px;
            margin-right:40px;
        }

        .search-container > .icon-search > svg{
            position: absolute;
        }

        .card-persona{
            border: 1px solid rgb(169 169 169 / 38%);
            border-radius:1rem;
            margin-bottom: 0.5rem;
            padding: 0.1rem 0.2rem;
            cursor: pointer;
            transition: 0.3s;
        }

        .card-persona:hover{
            scale: 1.02;
            transition: 0.5s;
            box-shadow: 0 0 10px 0 #09c778af;
        }

        .card-persona > .card-body > h6{
            display: flex;
            justify-content: space-between;
            opacity: 0.8;
            margin-bottom: 4px;
        }

        .card-persona > .card-body > p{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        @media screen and (max-width: 767px) {
            .row-personas{
                column-gap:0rem;
                row-gap: 1rem
            }
        }

        textarea{
            overflow-y: scroll;
            overflow-x: hidden;
        }

        textarea::-webkit-scrollbar {
            width: 10px;
            cursor: pointer;
        }
        
        textarea::-webkit-scrollbar-track {
            background-color: #ebebeb;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }

        textarea::-webkit-scrollbar-thumb {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: #6d6d6d; 
        }
    </style>
@endpush
@section('header-section')
    
@endsection
@section('content')
    <div class="header-banner bg-theme-grad has-ovm has-mask">
        <div class="nk-banner">
            <div class="banner banner-fs banner-single banner-gap-b2 mt-5">
                <div class="banner-wrap">
                    <div class="container wide-auto-xl">
                        <h3 class="text-white text-center mt-4">AI Persona to elevate your team further 
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sparkles">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" />
                            </svg>
                        </h3>
                        <div class="row align-items-center justify-content-center row-personas">
                            @foreach ($categories as $category)
                                <div class="col-6 col-sm-4 col-md-3">
                                    <div class="card card-category" data-id="{{ $category->id }}" style="background: {{ !empty($category->color) ? hexToRgba($category->color, 0.2 ) : 'background: rgba(255, 255, 255, 0.2)' }};">
                                        <div class="card-body p-0">
                                            <h5>{{ $category->name }}</h5>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- .nk-banner -->
        <div class="nk-ovm mask-a shape-a"></div>    
    </div>
    <div class="container container-personas" style="">
        <div class="search-container">
            <input type="text" class="form-control personaInput" placeholder="Search your AI personas">
            <div class="icon-search">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
                    <path d="M21 21l-6 -6" />
                </svg>
            </div>
        </div>

        <div class="persona-result mb-5">
            <div class="row align-items-center justify-content-center row-personas">
                @foreach ($personas as $persona)
                    <div class="col-12 col-md-4">
                        <div class="card card-persona" data-id="{{ $persona->id }}">
                            <div class="card-body d-flex flex-column align-items-center">
                                @if(!empty($persona->image))
                                    <img class="img-circle" src="{{ asset('user-uploads/app-logo/'.$persona->image) }}" alt="{{ $persona->name }}" style="max-width:80px;border-radius:80px;">
                                @else
                                    <img class="img-circle" src="{{ asset('default-persona.png') }}" alt="{{ $persona->name }}" style="max-width:80px;border-radius:80px;opacity:0.6;">
                                @endif
                                <h6>{{ $persona->name }}</h6>
                                <span><u>{{ $persona->category->name }}</u></span>
                                <p>
                                    @foreach ($persona->profile as $profile)
                                        {{ $profile['value'] }} @if(!$loop->last) , @endif
                                    @endforeach
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach

                {{ $personas->links('vendor.pagination.bootstrap-4') }}
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalPersona" tabindex="-1" aria-labelledby="modalPersonaLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-body personaData"></div>
            </div>
        </div>
    </div>
@endsection
@push('footer-script')
    <script src="{{ asset('plugins/flowy-helper/helper.js') }}?{{CURRENT_VERSION}}"></script>
    <script src="{{ asset('plugins/bower_components/toast-master/js/jquery.toast.js') }}?{{CURRENT_VERSION}}"></script>
   <script>
        $(document).on('click', '.card-persona', function() {
            
            const id = $(this).data('id')
            let url = '{{ route("personaDetail", [':id']) }}'
            url = url.replace(':id', id)

            $.ajax({
                type: 'GET',
                url: url,
                success: function (response) {
                    $('.personaData').html(response)
                    $('#modalPersona').modal('show');
                }
            });

        })

        $(document).on('click', '.card-category', function() {
            const id = $(this).data('id')
            let url = '{{ route("categoryPersonas", [':id']) }}'
            url = url.replace(':id', id)
            
            $.ajax({
                type: 'GET',
                url: url,
                success: function (response) {
                    $('.persona-result').html(response)
                    document.querySelector('.personaInput').scrollIntoView({behavior: 'smooth'});
                }
            });
        })

        $(document).on('click', '.copy', function() {
            var textContent = $(this).closest('div').find('textarea').val();

            navigator.clipboard.writeText(textContent).then(function() {
                $.toast({
                    text: '@lang('modules.personas.copied')! ',
                    position: 'top-right',
                    stack: false,
                    icon: 'success'
                });
            }).catch(function(err) {
                console.error('Failed to copy text: ', err);
            });

        })

        $(document).on('click', '.close-modal', function() {
            $('#modalPersona').modal('hide');
        })

        $(document).on('keyup', '.personaInput', function() {
            const inputVal = $(this).val()

            setTimeout(() => {
                let url = '{{ route("personaSearch", [':search']) }}'
                url = url.replace(':search', inputVal)
                $.ajax({
                    type: 'GET',
                    url: url,
                    success: function (response) {
                        $('.persona-result').html(response)
                    }
                });

            }, 300);

        })

   </script>
@endpush