@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="container-user pb-5 pt-5">
        <div class="bg-theme_secondary_black text-gray-300 rounded-lg">
            <div class="p-4">
                <div class="mb-6">
                    <h2 class="text-lg font-bold text-gray-300">
                        Belgelerinizi Tamamlayınız
                    </h2>
                    <p class="mt-1 text-sm text-gray-400">
                        Profilinizi Tamamlamak İçin Gerekli Belgeleri Yükleyiniz.
                    </p>
                </div>
                <div id="section_1">
                    <div class="grid grid-cols-1 gap-6">
                        <form action="{{ route('user.userImageFileUpload') }}#section_1" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->identification_front) text-green-700 @endif">
                                        Kimlik Belgesi (Ön)
                                    </label>
                                    @if ($files->identification_front)
                                        <button type="button" id="identification_front"
                                            value="{{ getCdnFile($files->identification_front) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->identification_front_original_name)
                                    <span
                                        class="file-input line-clamp-4">{{ $files->identification_front_original_name }}</span>
                                    <button type="button" value="identification_front"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="identification_front">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                        <form action="{{ route('user.userImageFileUpload') }}#section_1" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->identification_back) text-green-700 @endif">
                                        Kimlik Belgesi (Arka)
                                    </label>
                                    @if ($files->identification_back)
                                        <button type="button" id="identification_back"
                                            value="{{ getCdnFile($files->identification_back) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->identification_back_original_name)
                                    <span
                                        class="file-input line-clamp-4">{{ $files->identification_back_original_name }}</span>
                                    <button type="button" value="identification_back"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="identification_back">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                        <form action="{{ route('user.userPdfFileUpload') }}#section_1" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->place_of_residence) text-green-700 @endif">
                                        İkametgah Belgesi
                                    </label>
                                    @if ($files->place_of_residence)
                                        <button type="button" id="place_of_residence"
                                            value="{{ getCdnFile($files->place_of_residence) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->place_of_residence_original_name)
                                    <span
                                        class="file-input line-clamp-4">{{ $files->place_of_residence_original_name }}</span>
                                    <button type="button" value="place_of_residence"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="place_of_residence">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                        <form action="{{ route('user.userPdfFileUpload') }}#section_1" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->criminal_record) text-green-700 @endif">
                                        Adli Sicil Belgesi
                                    </label>
                                    @if ($files->criminal_record)
                                        <button type="button" id="criminal_record"
                                            value="{{ getCdnFile($files->criminal_record) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->criminal_record_original_name)
                                    <span
                                        class="file-input line-clamp-4">{{ $files->criminal_record_original_name }}</span>
                                    <button type="button" value="criminal_record"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="criminal_record">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                    </div>
                    <div class="w-full flex items-end justify-end mt-4 text-sm">
                        <button type="button" id="next"
                            class="text-gray-300 px-4 inline-flex justify-center items-center gap-3 border rounded-[10px] hover:bg-theme_gray transition-all delay-100 hover:text-theme_black font-bold h-[42px]">
                            Sonraki Adım
                            <i class="fa-solid fa-circle-right"></i>
                        </button>
                    </div>
                </div>
                <div id="section_2" class="hidden">
                    <div class="grid gap-6">
                        <form action="{{ route('user.userPdfFileUpload') }}#section_2" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->diploma) text-green-700 @endif">
                                        Diploma Belgesi (Opsiyonel)
                                    </label>
                                    @if ($files->diploma)
                                        <button type="button" id="diploma" value="{{ getCdnFile($files->diploma) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->diploma_original_name)
                                    <span class="file-input line-clamp-4">{{ $files->diploma_original_name }}</span>
                                    <button type="button" value="diploma"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="diploma">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                        <form action="{{ route('user.userPdfFileUpload') }}#section_2" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->health_report) text-green-700 @endif">
                                        Sağlık Raporu Belgesi (Opsiyonel)
                                    </label>
                                    @if ($files->health_report)
                                        <button type="button" id="health_report"
                                            value="{{ getCdnFile($files->health_report) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->health_report_original_name)
                                    <span class="file-input line-clamp-4">{{ $files->health_report_original_name }}</span>
                                    <button type="button" value="health_report"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="health_report">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                        <form action="{{ route('user.userPdfFileUpload') }}#section_2" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->iskur_file) text-green-700 @endif">
                                        İşkur Kaydı ve İş Arayışı Aktiflik Belgesi (Opsiyonel)
                                    </label>
                                    @if ($files->iskur_file)
                                        <button type="button" id="iskur_file"
                                            value="{{ getCdnFile($files->iskur_file) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->iskur_file_original_name)
                                    <span class="file-input line-clamp-4">{{ $files->iskur_file_original_name }}</span>
                                    <button type="button" value="iskur_file"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="iskur_file">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                        <form action="{{ route('user.userPdfFileUpload') }}#section_2" method="POST"
                            onsubmit="showLoading()" enctype="multipart/form-data">
                            @csrf
                            <div class="file-input-container">
                                <div class="mb-2 flex justify-between">
                                    <label class="font-semibold @if ($files->sgk_file) text-green-700 @endif">
                                        SGK Hizmet Listesi Belgesi (Opsiyonel)
                                    </label>

                                    @if ($files->sgk_file)
                                        <button type="button" id="sgk_file"
                                            value="{{ getCdnFile($files->sgk_file) }}">
                                            <i class="fa-solid fa-mountain-sun"></i>
                                        </button>
                                    @endif
                                </div>
                                @if ($files->sgk_file_original_name)
                                    <span class="file-input line-clamp-4">{{ $files->sgk_file_original_name }}</span>
                                    <button type="button" value="sgk_file"
                                        class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                @else
                                    <input class="file-input" type="file" name="sgk_file">
                                    <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                @endif
                            </div>
                        </form>
                        @php
                            $workingStatus = json_decode(Auth::user()->personelUser->working_status) ?? [];
                        @endphp
                        @if (in_array('Engelli', $workingStatus))
                            <form action="{{ route('user.userPdfFileUpload') }}#section_2" method="POST"
                                onsubmit="showLoading()" enctype="multipart/form-data">
                                @csrf
                                <div class="file-input-container">
                                    <div class="mb-2 flex justify-between">
                                        <label
                                            class="font-semibold @if ($files->disability_file) text-green-700 @endif">
                                            Engelli Raporu
                                        </label>

                                        @if ($files->disability_file)
                                            <button type="button" id="disability_file"
                                                value="{{ getCdnFile($files->disability_file) }}">
                                                <i class="fa-solid fa-mountain-sun"></i>
                                            </button>
                                        @endif
                                    </div>
                                    @if ($files->disability_file_original_name)
                                        <span
                                            class="file-input line-clamp-4">{{ $files->disability_file_original_name }}</span>
                                        <button type="button" value="disability_file"
                                            class="button-2 hover:bg-red-800 hover:text-white deleteFile mt-3 text-gray-300">Sil</button>
                                    @else
                                        <input class="file-input" type="file" name="disability_file">
                                        <button class="button-2 file-upload mt-3 text-gray-300" disabled>Kaydet</button>
                                    @endif
                                </div>
                            </form>
                        @endif
                    </div>
                    <div class="flex items-end mt-4 text-sm">
                        <div class="w-full flex items-end justify-start">
                            <button type="button" id="prev" class="button-2 h-[42px]">
                                <i class="fa-solid fa-circle-left"></i>
                                Önceki Adım
                            </button>
                        </div>
                        <form action="{{ route('user.fileUploadCheck') }}#section_2" method="POST"
                            onsubmit="showLoading()" class="w-full">
                            @csrf
                            <div class="w-full flex items-end justify-end">
                                <button type="submit" class="button-2 h-[42px]">
                                    Sonraki Adım
                                    <i class="fa-solid fa-circle-right"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('components.pdfViewer')
    @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>
        $('.file-input').change(function() {
            var $fileInput = $(this);
            var $fileUpload = $fileInput.siblings('.file-upload');

            if ($fileInput[0].files && $fileInput[0].files[0]) {
                $fileUpload.prop('disabled', false);
            } else {
                $fileUpload.prop('disabled', true);
            }
        });

        $('#next').click(function() {
            $('#section_1').slideUp('slow');
            $('#section_2').slideDown('slow');
        });

        $('#prev').click(function() {
            $('#section_1').slideDown('slow');
            $('#section_2').slideUp('slow');
        });

        $('#closeModalButton').click(function() {
            $('#popup-modal').hide(); // Modalin gizlenmesi
        });

        $('#image_input').change(function() {
            if (this.files && this.files[0]) {
                $('#image_upload').prop('disabled', false); // Dosya seçildiğinde buton aktif olsun
            } else {
                $('#image_upload').prop('disabled', true); // Dosya seçilmediğinde buton pasif olsun
            }
        });

        $('#pdf_input').change(function() {
            if (this.files && this.files[0]) {
                $('#pdf_upload').prop('disabled', false); // Dosya seçildiğinde buton aktif olsun
            } else {
                $('#pdf_upload').prop('disabled', true); // Dosya seçilmediğinde buton pasif olsun
            }
        });

        $('.close-pdf-popup').click(function() {
            $('#pdf-popup').fadeOut('slow');
        })

        $('#identification_front').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<img class="w-full rounded-lg h-full object-contain" src="' + $(this).val() + '">'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#identification_back').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<img class="w-full rounded-lg h-full object-contain" src="' + $(this).val() + '">'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#place_of_residence').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#criminal_record').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#criminal_record').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#diploma').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#health_report').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#execution').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#iskur_file').click(function() {
            $('#filePath').empty();
            var filePath = $(this).val();

            if (filePath !== '') {
                var fileExtension = filePath.split('.').pop().toLowerCase();

                if (['jpg', 'jpeg', 'png'].indexOf(fileExtension) !== -1) {
                    $('#filePath').append('<img class="w-full rounded-lg h-full object-contain" src="' + filePath +
                        '">');
                } else if (fileExtension === 'pdf') {
                    $('#filePath').append('<iframe src="' + filePath +
                        '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>');
                }
            }
            $('#pdf-popup').fadeIn('slow');
        });

        $('#sgk_file').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $('#disability_file').click(function() {
            $('#filePath').empty();
            $('#filePath').append(
                '<iframe src="' + $(this).val() +
                '" style="width:100%; height:500px; border-radius:8px;" frameborder="0"></iframe>'
            );
            $('#pdf-popup').fadeIn('slow');
        })

        $(document).ready(function() {
            var currentFragment = window.location.hash;
            if (currentFragment === '#section_2') {
                $('#section_1').addClass('hidden');
                $('#section_2').removeClass('hidden');
            } else {
                $('#section_1').removeClass('hidden');
                $('#section_2').addClass('hidden');
            }
        });
        // dosyalari silme islemini gerceklestiren fonksiyon
        $('.deleteFile').click(function() {
            var file = $(this).val();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                url: '/user/delete/file/' + file,
                method: 'POST',
                data: {
                    _token: csrfToken,
                    file: file,
                },
                success: function(response) {
                    location.reload();
                },
                error: function(response) {
                    console.log('error', response);
                }
            });
        })

        $('.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