@extends('web.sections.profile.layout')
@section('content')
    <section id="create_business">
        <div class="grid grid-cols-12 relative pb-20">
            <header class="mb-5 col-span-12">
                <h2 class="text-2xl font-medium text-gray-900 dark:text-gray-100">
                    Mis Oficios tradicionales
                </h2>
                <!--Breadcrumb-->
                <nav class="w-full rounded-md">
                    <ol class="list-reset flex">
                        <li>
                            <x-link href="#" class="text-neutral-500">Inicio</x-link>
                        </li>
                        <li>
                            <span class="mx-2 text-neutral-500 dark:text-neutral-400">/</span>
                        </li>
                        <li>
                            <x-link href="#" class="text-rose-700">Mis Oficios</x-link>
                        </li>
                    </ol>
                </nav>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    Aqui se encuentra el listado de los Oficios tradiciones que ha creado, además de ver, editar y borrar cada uno de ellos.
                </p>
            </header>

            @if (count($trades) == 0)
                <div class="col-span-12 mb-5">
                    <div
                        class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 md:flex-row">
                        <p class="p-10">No tiene Oficios creados en su perfil. Si desea agregar uno, haga <x-link href="{{ route('trade.create') }}#create_business">click aquí</x-link>
                        </p>
                    </div>
                </div>
            @else
                @for ($i = 0; $i < count($trades); $i++)
                    @php
                        $avatar = get_images_from_folder('trades',$trades[$i]->id,'avatar');
                    @endphp

                    <div class="col-span-12 md:col-span-10 mb-5">

                        <div class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 md:flex-row">

                            <img class="rounded-t-lg object-cover md:h-auto md:w-60 md:rounded-none md:rounded-l-lg"
                                src="{{ asset('uploads/trades/'.$avatar) }}" alt="" />

                            <div class="flex flex-col justify-start p-6 pb-0 w-full">
                                <h5 class="text-xl font-medium text-neutral-900 dark:text-neutral-50">
                                    {{ $trades[$i]->name }}
                                </h5>
                                <span class="mb-4">
                                    <i class="text-rose-500 fas fa-hammer"></i> {{ $trades[$i]->trade_categories->name }}
                                </span>
                                <div class="dark:border-neutral-600 dark:text-neutral-50 mb-4">
                                    <div class="flex flex-row content-center">
                                        <div class="pr-3">
                                            <div id="score"
                                                class="bg-green-700 w-fit font-bold text-white p-3 rounded-xl">
                                                {{ $trades[$i]->score }}
                                            </div>
                                        </div>
                                        <div>
                                            <div id="stars" class="inline">