@extends('layouts.user')
@section('content')
    <div class="relative flex items-center justify-between px-12 py-2">
        <a href="#" class="flex items-center justify-center">
            <img class="w-full h-16" src="{{ asset('assets/extra-logo.svg') }}" alt="extrasistem logo">
        </a>

        <div class="relative flex items-center justify-center gap-6">
            @if (Auth::user()->profile_img)
                <img src="{{ getCdnFile(Auth::user()->profile_img) }}"
                    class="profileButton w-12 h-12 object-cover rounded-full cursor-pointer">
            @else
                <img src="{{ getDefaultImage() }}" class="profileButton w-12 h-12 object-cover rounded-full cursor-pointer">
            @endif
        </div>
        <div class="hidden absolute top-[80px] right-1 w-52 z-10" id="subMenu">
            <div
                class="sub-menu rounded-3xl backdrop-blur-sm bg-theme_secondary_black p-4 border border-theme_secondary_gray bg-opacity-75 shadow-md shadow-theme_secondary_black">
                <h1 class="text-sm font-medium text-white border-b mb-2 pb-1">
                    {{ Auth::user()->full_name }}
                </h1>
                <form action="{{ route('logout') }}" method="POST" onsubmit="showLoading()">
                    @csrf
                    <button type="submit"
                        class="hover:scale-105 duration-100 transition-all flex gap-2 items-center text-sm text-theme_gray p-2">
                        <div
                            class="text-base text-gray-700 flex items-center justify-center w-[30px] h-[30px] bg-theme_gray rounded-full p-2">
                            <i class="fa-solid fa-right-from-bracket"></i>
                        </div>
                        <p class="w-full font-semibold">Çıkış Yap</p>
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="pt-2 w-full">
        <div class="px-6 flex flex-col gap-3 overflow-y-auto )]">
            <div class="text-gray-300">
                <p class="my-3">Toc Grup şirketi tarafından uygulama üzerinden gönderilen iş sözleşmesini...„...tarihinde
                    okudum ve internet
                    üzerinden okudum/ onaylıyorum şeklinde kabul etmiş bulunmaktayım.</p>
                <p class="my-3">Ad Soyad</p>
                <p class="my-3">İmza</p>
            </div>

            <p class="text-yellow-500">Yukarıdaki metni bir A4 kağıdına yazıp imzalayınız, yazmış olduğunuz kağdın resmini
                <span class="font-bold underline">anlaşılır</span> ve <span class="font-bold underline">okunaklı</span> bir
                şekilde
                çekip sisteme
                yükleyiniz. <br><br> <span class="text-red-700 font-bold"><i
                        class="fa-solid fa-triangle-exclamation mr-2"></i> EĞER YÜKLEMİŞ OLDUĞUNUZ BELGEDEKİ YAZILAR
                    ANLAŞILIR OLMAZ İSE KAYDINIZ TAMAMLANMAYACAKTIR!</span>
            </p>

            <form method="POST" action="{{ route('worker.uploadWorkingContract') }}" enctype="multipart/form-data"
                onsubmit="showLoading()">
                @csrf
                <div class="file-input-container">
                    <div class="mb-2">
                        <label class="font-semibold">
                            Belge Yükleyiniz
                        </label>
                    </div>
                    <input type="file" class="" name="working_contract">
                    <div class="flex justify-end mt-3">
                        <button class="button-2 w-full text-gray-300">
                            <i class="fa-solid fa-floppy-disk"></i>
                            Kaydet
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        <x-toast color="red-700">
            <x-slot name="message">
                {{ session('error') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-exclamation"></i>
            </x-slot>
        </x-toast>
    @endif
    @if (session('success'))
        <x-toast color="green-700">
            <x-slot name="message">
                {{ session('success') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-check"></i>
            </x-slot>
        </x-toast>
    @endif
@endsection
@section('javascript')
    <script>
        $('.profileButton').click(function() {
            $('#subMenu').fadeToggle('300');
        })

        $(document).on('click', function(e) {
            if (!$(e.target).hasClass("profileButton") && $("#subMenu").has(e.target).length === 0) {
                $("#subMenu").fadeOut('fast');
            }
        });
    </script>
@endsection