@extends('dashboard.layouts.main')

@section('PageContent')
<div class="dashboard-main-body">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Editar perfil de: <span class="fw-bold"> {{ $user->name }} </span></h6>
        @include('dashboard.notifications.flash')
    </div>

    <div class="row gy-4">
        <div class="col-lg-4">
            <div class="user-grid-card position-relative border radius-16 overflow-hidden bg-base h-100">
                <br><br><br>
                <img src="assets/images/user-grid/user-grid-bg1.png" alt="" class="w-100 object-fit-cover">
                <div class="pb-24 ms-16 mb-24 me-16  mt--100">
                    <div class="text-center border border-top-0 border-start-0 border-end-0">
                        <div class="upload-image-wrapper d-flex align-items-center gap-3">
                            <div
                                class="uploaded-img d-none position-relative h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50">
                                <button type="button"
                                    class="uploaded-img__remove position-absolute top-0 end-0 z-1 text-2xxl line-height-1 me-8 mt-8 d-flex">
                                    <iconify-icon icon="radix-icons:cross-2" class="text-xl text-danger-600"></iconify-icon>
                                </button>
                                <img id="uploaded-img__preview" class="w-100 h-100 object-fit-cover"
                                    src="assets/images/user.png" alt="image">
                            </div>

                            &larr;

                            <div class="card h-100 p-0">
                                <div class="card-body p-24 d-flex justify-content-center">
                                    @if ($user->image)
                                        <img src="{{ asset($user->image) }}" alt="Foto de Perfil" class="w-120-px h-120-px rounded">
                                    @else
                                        <p class="text-muted">Sem foto</p>
                                    @endif
                                </div>
                            </div>

                            <label
                                class="upload-file h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1"
                                for="upload-file">
                                <iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
                                <span class="fw-semibold text-secondary-light">Definir</span>
                                <input id="upload-file" type="file" name="image" hidden>
                            </label>
                        </div>

                        <br>
                        <button type="button" class="btn rounded-pill btn-outline-primary-600 radius-8 px-20 py-11">Atualizar foto</button>

                        <h6 class="mb-0 mt-16">{{ $user->name }}</h6>
                        <span class="text-secondary-light mb-16">{{ $user->email }}</span>

                    </div>
                    <div class="mt-24">
                        <h6 class="text-xl mb-16">Informação pessoal</h6>
                        <ul>
                            <li class="d-flex align-items-center gap-1 mb-12">
                                <span class="w-30 text-md fw-semibold text-primary-light">Nome</span>
                                <input type="text" class="form-control radius-8" id="name" name="name" value="{{ $user->name }}">
                            </li>
                            <li class="d-flex align-items-center gap-1 mb-12">
                                <span class="w-30 text-md fw-semibold text-primary-light">Email</span>
                                <input type="email" class="form-control radius-8" id="email" name="email" value="{{ $user->email }}">
                            </li>
                            <li class="d-flex align-items-center gap-1 mb-12">
                                <span class="w-30 text-md fw-semibold text-primary-light">Telefone</span>
                                <input type="text" class="form-control radius-8" id="phone" name="phone" value="{{ $user->phone }}">
                            </li>
                            <li class="d-flex align-items-center gap-1 mb-12">
                                <span class="w-30 text-md fw-semibold text-primary-light">Cargo</span>
                                <select class="form-control radius-8 form-select" id="role" name="role">
                                    <option value="user" {{ $user->role == 'user' ? 'selected' : '' }}>Acesso a App</option>
                                    <option value="admin" {{ $user->role == 'admin' ? 'selected' : '' }}>Acesso a App e Painel</option>
                                </select>
                            </li>
                            <li class="d-flex align-items-center gap-1 mb-12">
                                <span class="w-30 text-md fw-semibold text-primary-light">Tipo</span>
                                <select class="form-control radius-8 form-select" id="user_type_id" name="user_type_id">
                                    @foreach ($userTypes as $type)
                                        <option value="{{ $type->id }}" {{ $user->user_type_id == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </li>
                            
                            <li class="d-flex align-items-center gap-1 mb-12">
                               Registou-se em: <strong>{{ $user->created_at->format('d/m/Y H:i') }}</strong>
                            </li>
                            <li class="d-flex align-items-center gap-1">
                               Atualizado em: <strong>{{ $user->updated_at->format('d/m/Y H:i') }}</strong>
                            </li>
                            <li class="d-flex align-items-center gap-1">
                                <br><br><br>
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <button type="button" class="border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-40 py-8 radius-8"> Desativar </button>
                                    <button type="button" class="btn btn-primary border border-primary-600 text-md px-40 py-8 radius-8"> Atualizar </button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-body p-24">
                    <ul class="nav border-gradient-tab nav-pills mb-20 d-inline-flex" id="pills-tab"
                        role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link d-flex align-items-center px-24 active"
                                id="pills-edit-profile-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-edit-profile" type="button" role="tab"
                                aria-controls="pills-edit-profile" aria-selected="true">
                                Dados Pessoais
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link d-flex align-items-center px-24"
                                id="pills-change-passwork-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-change-passwork" type="button" role="tab"
                                aria-controls="pills-change-passwork" aria-selected="false" tabindex="-1">
                                Dados da Empresa
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link d-flex align-items-center px-24"
                                id="pills-notification-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-notification" type="button" role="tab"
                                aria-controls="pills-notification" aria-selected="false" tabindex="-1">
                                Detalhes de Nogócio
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-edit-profile" role="tabpanel"
                            aria-labelledby="pills-edit-profile-tab" tabindex="0">

                            <div class="d-flex align-items-center justify-content-center ">
                                <div class="mb-24 mt-16">
                                    <div class="avatar-upload">
                                        <div
                                            class="avatar-edit position-absolute bottom-0 end-0 me-24 mt-16 z-1 cursor-pointer">
                                            <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg"
                                                hidden>
                                            <label for="imageUpload"
                                                class="w-32-px h-32-px d-flex justify-content-center align-items-center bg-primary-50 text-primary-600 border border-primary-600 bg-hover-primary-100 text-lg rounded-circle">
                                                <iconify-icon icon="solar:camera-outline"
                                                    class="icon"></iconify-icon>
                                            </label>
                                        </div>
                                        <div class="avatar-preview">
                                            <div id="imagePreview">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <form action="#">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Nome Completo</label>
                                            <input type="text" class="form-control radius-8" value="{{ $user->personalData->full_name }}">
                                        </div>
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">NIF Pessoal</label>
                                            <input type="text" class="form-control radius-8" value="{{ $user->personalData->nif_bi }}">
                                        </div>
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Telefone</label>
                                            <input type="text" class="form-control radius-8" value="{{ $user->personalData->phone }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <button type="button"
                                        class="btn btn-primary border border-primary-600 text-md px-56 py-12 radius-8">
                                        Atualizar
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane fade" id="pills-change-passwork" role="tabpanel"
                            aria-labelledby="pills-change-passwork-tab" tabindex="0">

                            <form action="#">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Nome da Empresa </label>
                                            <input type="text" class="form-control radius-8" value="{{ $user->companyData->name }}">
                                        </div>
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">NIF</label>
                                            <input type="text" class="form-control radius-8" value="{{ $user->companyData->nif }}">
                                        </div>
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Localização</label>
                                            <input type="text" class="form-control radius-8" value="{{ $user->companyData->location }}">
                                        </div>
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Certidão Comercial</label>
                                            <input type="text" class="form-control radius-8" id="name">
                                            <p>Baixar: <a href="#" class="text-primary text-sm">{{ $user->companyData->certification }}</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <button type="button"
                                        class="btn btn-primary border border-primary-600 text-md px-56 py-12 radius-8">
                                        Atualizar
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane fade" id="pills-notification" role="tabpanel"
                            aria-labelledby="pills-notification-tab" tabindex="0">

                            <form action="#">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="mb-20">
                                            <label for="Language" class="form-label fw-semibold text-primary-light text-sm mb-8">Categoria do negocio <span class="text-danger-600">*</span> </label>
                                            <select class="form-control radius-8 form-select">
                                                @foreach($category as $categories)
                                                    <option value="">{{ $categories->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-20">
                                            <label for="Language" class="form-label fw-semibold text-primary-light text-sm mb-8">Como prefere ser contatado? <span class="text-danger-600">*</span> </label>
                                            <select class="form-control radius-8 form-select">
                                                <option> Telefone</option>
                                                <option> Email </option>
                                                <option> WhatsApp</option>
                                            </select>
                                        </div>
                                        <div class="mb-20">
                                            <label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Telefone</label>
                                            <input type="text" class="form-control radius-8" id="name">
                                        </div>
                                        <div class="mb-20">
                                            <label for="Language" class="form-label fw-semibold text-primary-light text-sm mb-8">Faz vendas no site <span class="text-danger-600">*</span> </label>
                                            <select class="form-control radius-8 form-select">
                                                <option> Sim</option>
                                                <option> Nåo </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <button type="button"
                                        class="btn btn-primary border border-primary-600 text-md px-56 py-12 radius-8">
                                        Atualizar
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection