@extends('admin.template.layout')

@section('title', $vacancy->name)

@section('conteudo')
    @if ($vacancy->image)
        <div class="container">
            <img src="{{ asset("storage/vacancy/banner/{$vacancy->image}") }}" id="img-vacancy" class=" card-img-top"
                alt="{{ $vacancy->name }}">
        </div>
    @endif

    <div class="w-100 border-0 mt-3 ">
        <div class="container shadow-sm border-0 py-3 bg-white mb-3">
            <div class="d-flex gap-3 align-items-center">
                <div>
                    <a class="btn btn-link text-decoration-none text-black fw-semibold" href="{{ route('dashboard') }}">
                        <i class="fa-solid fa-angles-left fa-xl"></i>
                    </a>
                </div>
                <div class="flex-shrink-0">
                    @if ($vacancy->enterprise->logo)
                        <img class="rounded-circle border" src="{{ asset("storage/enterprise/logo/{$vacancy->enterprise->logo}") }}"
                            alt="Logo da empresa {{ $vacancy->enterprise->first_name }}" ::asset('') style="width: 45px; height: 45px; object-fit: cover;">
                    @else
                        <span><i class="fa-regular fa-building fa-xl"></i></span>
                    @endif
                </div>
                <div class="d-flex flex-column">
                    <h1 id="vaga-titulo" class="mb-0 fw-semibold ">
                        {{ $vacancy->name }}
                    </h1>
                    <small class="text-muted">
                        {{ $vacancy->enterprise->name }}
                    </small>
                </div>
            </div>
        </div>


        <div class="container-cards d-flex justify-content-center mt-5 mb-5 ">
            <section class="section-info shadow-sm">
                <div class="text-muted">
                    Prazo para as candidaturas: <strong>{{ \Carbon\Carbon::parse($vacancy->deadline)->format('d-m-Y \à\s H\hi') }}</strong>
                </div>
                <ul class="list-unstyled d-flex flex-wrap gap-3 mb-3">
                    @foreach ($vacancy['cities'] as $city)
                        <li class="d-flex align-items-center">
                            <i class="fa-solid fa-location-dot me-1 text-secondary"></i>
                            {{ $city->name }} - ({{ $city->state->uf }})
                        </li>
                    @endforeach
                </ul>

                <ul class="list-unstyled d-flex flex-wrap gap-3 mb-3">
                    <li class="badge bg-primary-subtle text-primary">{{ $vacancy->hiringType->name }}</li>
                    <li class="badge bg-primary-subtle text-primary">{{ $vacancy->vacancy_model }}</li>
                    <li class="badge bg-primary-subtle text-primary">{{ $vacancy->quantity }} vaga(s)</li>
                    @if ($vacancy->vacancy_pcd)
                        <li class="badge bg-primary-subtle text-primary">{{ $vacancy->vacancy_pcd }}</li>
                    @endif
                </ul>

                <p class="fs-6 mb-3 mt-3">{!! $vacancy->description !!}</p>

            </section>

        </div>

        <div class="container-cards d-flex justify-content-center mt-5 mb-5">
            <section class="section-info shadow-sm">
                <p class="fs-6 mb-3 mt-3">{!! $vacancy->responsibilities !!}</p>
            </section>

        </div>

        <div class="container-cards d-flex justify-content-center mt-5 mb-5">
            <section class="section-info shadow-sm">
                <p class="fs-6 mb-3 mt-3">{!! $vacancy->pre_requisite !!}</p>
            </section>
        </div>


        @if ($vacancy->additional_information)
            <div class="container-cards d-flex justify-content-center mt-5 mb-5">
                <section class="section-info shadow-sm">
                    <p class="fs-6 mb-3 mt-3">{!! $vacancy->additional_information !!}</p>
                </section>
            </div>
        @endif

        @if ($vacancy->process_steps)
            <div class="container-cards d-flex justify-content-center mt-5 mb-5">
                <section class="section-info shadow-sm">
                    <p class="fs-6 mb-3 mt-3">{!! $vacancy->process_steps !!}</p>
                </section>
            </div>
        @endif


    </div>

    @auth
            @if (!$user->candidates()->where('vacancy_id', $vacancy->id)->exists())
                <div class="apply-bar">


                    <button type="submit" class="btn btn-primary btn-lg text-sm" data-bs-toggle="modal"
                        data-bs-target="#modalCandidatar">
                        <i class="fa-solid fa-paper-plane me-2"></i>
                        Candidatar-se
                    </button>

                </div>
            @else
                <div class="apply-bar applied">
                    <span>
                        <i class="fa-solid fa-circle-check me-2"></i>
                        Você já se candidatou a esta vaga
                    </span>
                </div>
            @endif
        


        <!-- Modal -->
        <div class="modal fade" id="modalCandidatar" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" >
                    <form id="uploadCurriculumForm" action="{{ route('candidaty', $vacancy->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">

                            <div class="shadow-sm px-4 p-4 rounded-bottom-2">
                                <div class="mb-3">
                                    <h5>Selecione a cidade para se candidatar:</h5>
                                    <label for="city_id" class="form-label">Cidades</label>
                                    <select class="form-select text-center" id="city_id" name="city_id" required>
                                        <option value="">--- Selecione ---</option>
                                        @foreach ($cityVacancy as $value)
                                            <option value="{{ $value->id }}"
                                                {{ old('city_id') == $value->id ? 'selected' : '' }}>
                                                {{ $value->city->name }} - ({{ $value->city->state->uf }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @if (!$user->curriculum)
                                <div class="shadow-sm px-4 p-4 rounded-bottom-2">
                                    <div class="mb-3 text-center">
                                        <h5 class="fw-bold">Envie seu Currículo</h5>
                                    </div>

                                    <div class="mb-3 text-center">
                                        <label for="curriculum" class="form-label">
                                            <strong><i class="fa-solid fa-image"></i> Currículo: <span
                                                    class="text-danger">*</span></strong>
                                        </label>
                                        <div class="input-group mb-3">
                                            <input type="file" class="form-control" name="curriculum" id="file_curriculum"
                                                required accept=".pdf,.png,jpg">
                                        </div>

                                        <small class="fw-semibold mt-3">Selecione imagem ou pdf. Max: 2MB</small>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-success text-center">
                                    <i class="fa-solid fa-circle-check me-2"></i> Currículo já cadastrado
                                    <br>
                                    <a href="{{ asset('storage/' . $user->curriculum) }}" target="_blank">
                                        Visualizar currículo
                                    </a>
                                </div>
                            @endif
                            @if (!$user->phone)
                                <div class="shadow-sm px-4 p-4 rounded-bottom-2">
                                    <div class="mb-3">
                                        <label for="phone" class="form-label"><strong><i class="fas fa-phone-alt"></i>
                                                WhatsApp:
                                                <span class="text-danger">*</span></strong></label>
                                        <input id="phone" type="text" class="form-control" name="phone"
                                            placeholder="(00) 00000-0000" value="{{ $user->phone ?? old('phone') }}"
                                            required>
                                        <small class=" fw-semibold mt-3">Informe seu número de WhatsApp para contato.</small>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-success text-center">
                                    <i class="fa-solid fa-circle-check me-2"></i> WhatsApp já cadastrado
                                    <br>
                                    <p class="text-muted">{{ $user->phone }}</p>
                                </div>
                            @endif
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                            <button type="submit" class="btn btn-primary">Candidatar</button>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endauth
    @guest

        <div class="apply-bar">

            <a href="{{ route('login', ['redirect' => url()->current()]) }}"
                class="btn btn-primary btn-lg text-sm">
                Quero me candidatar
            </a>
        </div>
    @endguest

@endsection

<style scoped>
    #card-vaga {
        width: 100%;

    }

    #vaga-titulo {
        font-size: 17px;
    }

    .section-info {
        width: 1200px;
        padding: 10px;
    }

    .apply-bar {
        display: flex;
        justify-content: center;
        position: sticky;
        bottom: 0;
        width: 100%;
        background: #ffffff;
        padding: 16px;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        z-index: 1050;
    }

    .apply-bar.applied {
        text-align: center;
        font-weight: 600;
        color: #198754;
    }
</style>


<script>
    document.addEventListener('DOMContentLoaded', function() {

        $('#phone').mask('(00) 00000-0000');

    })
</script>