@php

    $editando =
        isset($perfil);

    $selecionadas =
        old(
            'caracteristicas',
            $caracteristicasSelecionadas
            ?? []
        );

    $selecionadas =
        collect(
            is_array($selecionadas)
                ? $selecionadas
                : []
        )
            ->map(
                fn ($id) =>
                    (int) $id
            )
            ->all();

    $nomesTipos = [
        'cabelo' => 'Cabelo',
        'biotipo' => 'Biotipo',
        'estilo' => 'Estilo',
    ];

    $fotosExistentes =
        $editando
            ? ($perfil->fotos ?? [])
            : [];

    $videosExistentes =
        $editando
            ? ($perfil->videos ?? [])
            : [];

@endphp


@if($errors->any())

    <div
        class="
            rounded-2xl
            border
            border-red-500/20
            bg-red-500/10
            p-5
            text-red-300
        "
    >

        <div class="font-bold">
            Verifique os campos abaixo:
        </div>

        <ul
            class="
                mt-3
                list-disc
                space-y-1
                pl-5
                text-sm
            "
        >

            @foreach(
                $errors->all()
                as $erro
            )

                <li>
                    {{ $erro }}
                </li>

            @endforeach

        </ul>

    </div>

@endif


{{-- ====================================================== --}}
{{-- DADOS --}}
{{-- ====================================================== --}}

<div
    class="
        rounded-2xl
        bg-gray-800
        p-5
        shadow-xl
        md:p-6
    "
>

    <div
        class="
            mb-6
            border-b
            border-gray-700
            pb-4
        "
    >

        <h2
            class="
                text-xl
                font-bold
                text-white
            "
        >
            Dados do perfil
        </h2>

        <p
            class="
                mt-1
                text-sm
                text-gray-400
            "
        >
            Informações exibidas no site público.
        </p>

    </div>


    <div
        class="
            grid
            grid-cols-1
            gap-5
            md:grid-cols-12
        "
    >

        {{-- Nome --}}
        <div class="md:col-span-6">

            <label
                class="
                    mb-1
                    block
                    text-sm
                    font-semibold
                    text-gray-300
                "
            >
                Nome artístico *
            </label>

            <input
                type="text"
                name="nome_artistico"
                value="{{ old(
                    'nome_artistico',
                    $perfil->nome_artistico
                    ?? ''
                ) }}"
                required
                maxlength="120"
                class="
                    w-full
                    rounded-xl
                    border
                    border-gray-700
                    bg-gray-900
                    px-4
                    py-3
                    text-white
                    focus:border-pink-500
                    focus:outline-none
                "
            >

        </div>


        {{-- Data de nascimento --}}
        <div class="md:col-span-3">

            <label
                class="
                    mb-1
                    block
                    text-sm
                    font-semibold
                    text-gray-300
                "
            >
                Data de nascimento *
            </label>

            <input
                type="date"
                name="data_nascimento"
                min="{{ now()
                    ->subYears(100)
                    ->addDay()
                    ->format('Y-m-d') }}"
                max="{{ now()
                    ->subYears(18)
                    ->format('Y-m-d') }}"
                value="{{ old(
                    'data_nascimento',
                    $editando
                    && !empty(
                        $perfil->data_nascimento
                    )
                        ? \Illuminate\Support\Carbon::parse(
                            $perfil->data_nascimento
                        )->format('Y-m-d')
                        : ''
                ) }}"
                required
                class="
                    w-full
                    rounded-xl
                    border
                    border-gray-700
                    bg-gray-900
                    px-4
                    py-3
                    text-white
                    focus:border-pink-500
                    focus:outline-none
                "
            >

            <p
                class="
                    mt-1.5
                    text-xs
                    text-gray-500
                "
            >
                A idade será calculada automaticamente.
            </p>

        </div>


        {{-- Ordem --}}
        <div class="md:col-span-3">

            <label
                class="
                    mb-1
                    block
                    text-sm
                    font-semibold
                    text-gray-300
                "
            >
                Ordem
            </label>

            <input
                type="number"
                name="ordem"
                min="0"
                value="{{ old(
                    'ordem',
                    $perfil->ordem
                    ?? 0
                ) }}"
                class="
                    w-full
                    rounded-xl
                    border
                    border-gray-700
                    bg-gray-900
                    px-4
                    py-3
                    text-white
                    focus:border-pink-500
                    focus:outline-none
                "
            >

        </div>


        {{-- Chamada --}}
        <div class="md:col-span-12">

            <label
                class="
                    mb-1
                    block
                    text-sm
                    font-semibold
                    text-gray-300
                "
            >
                Chamada curta
            </label>

            <input
                type="text"
                name="chamada"
                maxlength="180"
                value="{{ old(
                    'chamada',
                    $perfil->chamada
                    ?? ''
                ) }}"
                placeholder="Pequena apresentação para o card"
                class="
                    w-full
                    rounded-xl
                    border
                    border-gray-700
                    bg-gray-900
                    px-4
                    py-3
                    text-white
                    focus:border-pink-500
                    focus:outline-none
                "
            >

        </div>


        {{-- Descrição --}}
        <div class="md:col-span-12">

            <label
                class="
                    mb-1
                    block
                    text-sm
                    font-semibold
                    text-gray-300
                "
            >
                Descrição
            </label>

            <textarea
                name="descricao"
                rows="6"
                maxlength="5000"
                class="
                    w-full
                    resize-y
                    rounded-xl
                    border
                    border-gray-700
                    bg-gray-900
                    px-4
                    py-3
                    text-white
                    focus:border-pink-500
                    focus:outline-none
                "
            >{{ old(
                'descricao',
                $perfil->descricao
                ?? ''
            ) }}</textarea>

        </div>

    </div>

</div>


{{-- ====================================================== --}}
{{-- CARACTERÍSTICAS --}}
{{-- ====================================================== --}}

<div
    class="
        rounded-2xl
        bg-gray-800
        p-5
        shadow-xl
        md:p-6
    "
>

    <h2
        class="
            text-xl
            font-bold
            text-white
        "
    >
        Características
    </h2>

    <p
        class="
            mt-1
            text-sm
            text-gray-400
        "
    >
        Essas opções também serão usadas
        nos filtros do site.
    </p>


    <div
        class="
            mt-6
            space-y-6
        "
    >

        @foreach(
            $caracteristicas
            as $tipo => $lista
        )

            <div>

                <h3
                    class="
                        mb-3
                        text-sm
                        font-bold
                        uppercase
                        tracking-wider
                        text-pink-400
                    "
                >
                    {{ $nomesTipos[$tipo]
                        ?? ucfirst($tipo)
                    }}
                </h3>


                <div
                    class="
                        grid
                        grid-cols-2
                        gap-3
                        sm:grid-cols-3
                        lg:grid-cols-4
                    "
                >

                    @foreach(
                        $lista
                        as $item
                    )

                        <label
                            class="
                                flex
                                cursor-pointer
                                items-center
                                gap-3
                                rounded-xl
                                border
                                border-gray-700
                                bg-gray-900
                                p-3
                                transition
                                hover:border-pink-500/50
                            "
                        >

                            <input
                                type="checkbox"
                                name="caracteristicas[]"
                                value="{{ $item->id }}"
                                @checked(
                                    in_array(
                                        (int) $item->id,
                                        $selecionadas,
                                        true
                                    )
                                )
                                class="
                                    h-4
                                    w-4
                                    accent-pink-600
                                "
                            >

                            <span
                                class="
                                    text-sm
                                    font-semibold
                                    text-gray-200
                                "
                            >
                                {{ $item->nome }}
                            </span>

                        </label>

                    @endforeach

                </div>

            </div>

        @endforeach

    </div>

</div>


{{-- ====================================================== --}}
{{-- STATUS --}}
{{-- ====================================================== --}}

<div
    class="
        rounded-2xl
        bg-gray-800
        p-5
        shadow-xl
        md:p-6
    "
>

    <h2
        class="
            text-xl
            font-bold
            text-white
        "
    >
        Publicação
    </h2>


    <div
        class="
            mt-5
            grid
            grid-cols-1
            gap-3
            sm:grid-cols-3
        "
    >

        <label
            class="
                flex
                cursor-pointer
                gap-3
                rounded-xl
                border
                border-gray-700
                bg-gray-900
                p-4
            "
        >

            <input
                type="checkbox"
                name="ativo"
                value="1"
                @checked(
                    old(
                        'ativo',
                        $perfil->ativo
                        ?? true
                    )
                )
                class="
                    mt-1
                    h-5
                    w-5
                    accent-blue-600
                "
            >

            <div>

                <div class="font-bold">
                    Exibir no site
                </div>

                <div
                    class="
                        mt-1
                        text-xs
                        text-gray-500
                    "
                >
                    Publica o perfil.
                </div>

            </div>

        </label>


        <label
            class="
                flex
                cursor-pointer
                gap-3
                rounded-xl
                border
                border-gray-700
                bg-gray-900
                p-4
            "
        >

            <input
                type="checkbox"
                name="disponivel"
                value="1"
                @checked(
                    old(
                        'disponivel',
                        $perfil->disponivel
                        ?? true
                    )
                )
                class="
                    mt-1
                    h-5
                    w-5
                    accent-green-600
                "
            >

            <div>

                <div class="font-bold">
                    Na casa
                </div>

                <div
                    class="
                        mt-1
                        text-xs
                        text-gray-500
                    "
                >
                    Mostra o status atual.
                </div>

            </div>

        </label>


        <label
            class="
                flex
                cursor-pointer
                gap-3
                rounded-xl
                border
                border-gray-700
                bg-gray-900
                p-4
            "
        >

            <input
                type="checkbox"
                name="destaque"
                value="1"
                @checked(
                    old(
                        'destaque',
                        $perfil->destaque
                        ?? false
                    )
                )
                class="
                    mt-1
                    h-5
                    w-5
                    accent-pink-600
                "
            >

            <div>

                <div class="font-bold">
                    Destaque
                </div>

                <div
                    class="
                        mt-1
                        text-xs
                        text-gray-500
                    "
                >
                    Prioridade no site.
                </div>

            </div>

        </label>

    </div>

</div>


{{-- ====================================================== --}}
{{-- CAPA --}}
{{-- ====================================================== --}}

<div
    class="
        rounded-2xl
        bg-gray-800
        p-5
        shadow-xl
        md:p-6
    "
>

    <h2
        class="
            text-xl
            font-bold
        "
    >
        Foto de capa
    </h2>


    @if(
        $editando
        &&
        $perfil->foto_capa_url
    )

        <div
            class="
                mt-5
                max-w-xs
            "
        >

            <img
                src="{{ $perfil->foto_capa_url }}"
                alt=""
                class="
                    aspect-[3/4]
                    w-full
                    rounded-2xl
                    object-cover
                "
            >

            <label
                class="
                    mt-3
                    flex
                    cursor-pointer
                    items-center
                    gap-2
                    text-sm
                    text-red-300
                "
            >

                <input
                    type="checkbox"
                    name="remover_foto_capa"
                    value="1"
                    class="accent-red-600"
                >

                Remover capa atual

            </label>

        </div>

    @endif


    <input
        type="file"
        name="foto_capa"
        accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
        class="
            mt-5
            block
            w-full
            rounded-xl
            border
            border-gray-700
            bg-gray-900
            px-4
            py-3
            text-sm
        "
    >

</div>


{{-- ====================================================== --}}
{{-- FOTOS --}}
{{-- ====================================================== --}}

<div
    class="
        rounded-2xl
        bg-gray-800
        p-5
        shadow-xl
        md:p-6
    "
>

    <h2
        class="
            text-xl
            font-bold
        "
    >
        Galeria de fotos
    </h2>


    @if(
        $editando
        &&
        count($fotosExistentes)
    )

        <div
            class="
                mt-5
                grid
                grid-cols-2
                gap-3
                sm:grid-cols-3
                lg:grid-cols-4
            "
        >

            @foreach(
                $fotosExistentes
                as $foto
            )

                <label
                    class="
                        relative
                        cursor-pointer
                        overflow-hidden
                        rounded-xl
                        bg-gray-900
                    "
                >

                    <img
                        src="{{ Storage::disk('public')->url($foto) }}"
                        alt=""
                        class="
                            aspect-[3/4]
                            w-full
                            object-cover
                        "
                    >

                    <div
                        class="
                            absolute
                            inset-x-0
                            bottom-0
                            bg-black/80
                            p-2
                        "
                    >

                        <span
                            class="
                                flex
                                items-center
                                gap-2
                                text-xs
                                text-red-300
                            "
                        >

                            <input
                                type="checkbox"
                                name="remover_fotos[]"
                                value="{{ $foto }}"
                                class="accent-red-600"
                            >

                            Remover

                        </span>

                    </div>

                </label>

            @endforeach

        </div>

    @endif


    <input
        type="file"
        name="fotos[]"
        multiple
        accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
        class="
            mt-5
            block
            w-full
            rounded-xl
            border
            border-gray-700
            bg-gray-900
            px-4
            py-3
            text-sm
        "
    >

</div>


{{-- ====================================================== --}}
{{-- VÍDEOS --}}
{{-- ====================================================== --}}

<div
    class="
        rounded-2xl
        bg-gray-800
        p-5
        shadow-xl
        md:p-6
    "
>

    <h2
        class="
            text-xl
            font-bold
        "
    >
        Vídeos
    </h2>


    @if(
        $editando
        &&
        count($videosExistentes)
    )

        <div
            class="
                mt-5
                grid
                grid-cols-1
                gap-4
                md:grid-cols-2
            "
        >

            @foreach(
                $videosExistentes
                as $video
            )

                <div
                    class="
                        overflow-hidden
                        rounded-xl
                        bg-gray-900
                    "
                >

                    <video
                        controls
                        preload="metadata"
                        class="
                            aspect-video
                            w-full
                            bg-black
                        "
                    >
                        <source
                            src="{{ Storage::disk('public')->url($video) }}"
                        >
                    </video>

                    <label
                        class="
                            flex
                            cursor-pointer
                            gap-2
                            p-3
                            text-sm
                            text-red-300
                        "
                    >

                        <input
                            type="checkbox"
                            name="remover_videos[]"
                            value="{{ $video }}"
                            class="accent-red-600"
                        >

                        Remover vídeo

                    </label>

                </div>

            @endforeach

        </div>

    @endif


    <input
        type="file"
        name="videos[]"
        multiple
        accept=".mp4,.mov,.webm,video/mp4,video/quicktime,video/webm"
        class="
            mt-5
            block
            w-full
            rounded-xl
            border
            border-gray-700
            bg-gray-900
            px-4
            py-3
            text-sm
        "
    >

</div>


{{-- ====================================================== --}}
{{-- BOTÕES --}}
{{-- ====================================================== --}}

<div
    class="
        flex
        flex-col-reverse
        gap-3
        sm:flex-row
        sm:justify-end
    "
>

    <a
        href="{{ route('site-perfis.index') }}"
        class="
            rounded-xl
            bg-gray-700
            px-6
            py-3
            text-center
            font-semibold
            hover:bg-gray-600
        "
    >
        Voltar
    </a>


    <button
        type="submit"
        class="
            rounded-xl
            bg-pink-600
            px-6
            py-3
            font-bold
            hover:bg-pink-700
        "
    >
        {{ $editando
            ? 'Salvar alterações'
            : 'Cadastrar perfil'
        }}
    </button>

</div>