@section('title', 'ارسال رزومه')
@section('style')
    <link rel="stylesheet" href="{{ asset('home/css/select2.min.css') }}">
@endsection
<div>
    <div class="container">
        <div class="row d-flex justify-content-center">
            <main class="col-11 mt-5">

                @include('livewire.send-resume-partials.head-bar')

                <section class="recruitment-process d-flex align-items-center justify-content-between mb-3 mt-3">

                    <div class="text-center pe-4 recruitment-process-none-in-mobile">
                        <div class="recruitment-process-title">فرایند استخدام برای این موقعیت شغلی به این صورت خواهد بود</div>
                    </div>

                    <div class="text-center" style="display: flex;overflow: auto;">
                        <ul class="pt-3 recruitment-process-items" style="display: contents">
                            @if(isset($this->details['employmenttProcess']['steps']))
                                @forelse($this->details['employmenttProcess']['steps'] as $item)
                                    <li>
                                        <div>
                                            <svg width="40" height="41" viewBox="0 0 40 41" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0 20.5C0 9.45431 8.95431 0.5 20 0.5C31.0457 0.5 40 9.45431 40 20.5C40 31.5457 31.0457 40.5 20 40.5C8.95431 40.5 0 31.5457 0 20.5Z"
                                                      fill="white"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M18.0476 22.369C16.8776 21.199 15.9956 19.889 15.4096 18.56C15.2856 18.279 15.3586 17.95 15.5756 17.733L16.3946 16.914C17.0656 16.243 17.0656 15.294 16.4796 14.708L15.3056 13.535C14.5246 12.754 13.2586 12.754 12.4776 13.535L11.8256 14.186C11.0846 14.927 10.7756 15.996 10.9756 17.056C11.4696 19.669 12.9876 22.53 15.4366 24.979C17.8856 27.428 20.7466 28.946 23.3596 29.44C24.4196 29.64 25.4886 29.331 26.2296 28.59L26.8806 27.939C27.6616 27.158 27.6616 25.892 26.8806 25.111L25.7076 23.938C25.1216 23.352 24.1716 23.352 23.5866 23.938L22.6836 24.842C22.4666 25.059 22.1376 25.132 21.8566 25.008C20.5276 24.421 19.2176 23.538 18.0476 22.369Z"
                                                      stroke="#23675D" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M20.9199 13.6701V11.3301" stroke="#23675D" stroke-linecap="round"
                                                      stroke-linejoin="round"/>
                                                <path d="M25.0898 15.3197L26.7398 13.6797" stroke="#23675D"
                                                      stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M26.75 19.5H29.08" stroke="#23675D" stroke-linecap="round"
                                                      stroke-linejoin="round"/>
                                            </svg>

                                        </div>
                                        <p>{{ $item['name'] }}</p>
                                    </li>
                                @empty
                                    <p>پیدا نشد</p>
                                @endforelse
                            @endif

                        </ul>

                    </div>
                </section>


                @include('livewire.send-resume-partials.upload-image')

                @include('livewire.send-resume-partials.fields')

                @include('livewire.send-resume-partials.upload-resume')

{{--                @if($this->details['requestedInfo']['motivationLetter'] !== 3)--}}
{{--                    <section class="desc pe-3">--}}
{{--                        <p>انگیزه نامه--}}
{{--                            @if($this->details['requestedInfo']['motivationLetter'] == 1)--}}
{{--                                <span class="text-danger">*</span>--}}
{{--                            @endif--}}
{{--                        </p>--}}
{{--                        <textarea wire:model="motivationLetter" class="form-control" id="" cols="30" rows="10" style="resize: none" placeholder="توضیحات خود را اینجا بنویسید"></textarea>--}}
{{--                    </section>--}}
{{--                @endif--}}

                @if(isset($this->details['requestedInfo']['smoking']))
                    @if($this->details['requestedInfo']['smoking'] !== 3)
                        <section class="learning mt-4">
                            <div class="row">
                                <div class="col-12 position-relative mb-3">
                                    <label class="d-flex label-input pb-3">
                                        آیا دخانیات مصرف میکنید؟

                                        @if($this->details['requestedInfo']['smoking'] == 1)
                                            <span class="text-danger">*</span>
                                        @endif

                                    </label>

                                    <div class="select-smoke d-flex justify-end" style="text-align: right">

                                        <div class="radio ms-3 d-flex">
                                            <label for="smoke" class="ms-2"> بله </label>
                                            <input type="radio" style="width:24px; height:24px;" name="smoke" wire:model="smoking" value="true">
                                        </div>

                                        <div class="radio d-flex">
                                            <label for="smoke" class="ms-2"> خیر</label>
                                            <input type="radio" style="width:24px; height:24px;" name="smoke" wire:model="smoking" value="false">
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </section>
                    @endif
                @endif

                @if(isset($this->details['requestedInfo']['coverLetter']))
                    @if($this->details['requestedInfo']['coverLetter'] !== 3)

                        <section class="cover-letter mt-4">
                            <div class="col-12 text-center position-relative mb-3">

                                <label class="d-flex label-input pb-2">
                                    کاور لتر
                                    @if($this->details['requestedInfo']['coverLetter'] == 1)
                                        <span class="text-danger">*</span>
                                    @endif
                                </label>
                                <textarea class="field-input form-control pe-2 cover-letter-input" rows="6" style="resize: none" wire:model="coverLetter" placeholder="کارجویان معمولاً به‌منظور معرفی خودشان و شرح مناسب بودنشان برای شغل مورد نظر، یک نامه توصیفی، همراه با رزومه خود ارائه می‌کنند"></textarea>
                            </div>
                        </section>

                    @endif
                @endif


                @if(isset($this->details['requestedInfo']['healthStatus']))
                    @if($this->details['requestedInfo']['healthStatus'] !== 3)
                        <section class="maladie mt-4">
                            <label class="d-flex label-input pb-3">
                                آیا بیماری خاصی دارید؟
                                @if($this->details['requestedInfo']['healthStatus'] == 1)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>
                            <div class="row d-flex" style="align-items: center">
                                <div class="maladie-mobile d-flex">
                                    <div class="col-lg-1 col-sm-12">
                                        <div class="select-smoke d-flex justify-end" style="text-align: right">

                                            <div class="radio ms-3 d-flex">
                                                <label for="smoke" class="ms-2"> بله </label>
                                                <input type="radio" style="width:24px; height:24px;" name="healthStatus" wire:model="healthStatus" value="true">
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-1 col-sm-12">
                                        <div class="select-smoke d-flex justify-end" style="text-align: right">
                                            <div class="radio d-flex">
                                                <label for="smoke" class="ms-2"> خیر</label>
                                                <input type="radio" style="width:24px; height:24px;" name="healthStatus_text" wire:model="healthStatus" value="false">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-10 position-relative mt-3">
                                   <span class="position-absolute" style="top: 6px; right: 23px;">
                                       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M20 20V5.778C20 4.796 19.204 4 18.222 4H5.778C4.796 4 4 4.796 4 5.778V16.445C4 17.427 4.796 18.223 5.778 18.223H16.667L20 20Z" stroke="#CECFD2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M11.997 14.7908C11.901 14.7908 11.823 14.8688 11.824 14.9648C11.824 15.0608 11.902 15.1388 11.998 15.1388C12.094 15.1388 12.172 15.0608 12.172 14.9648C12.173 14.8688 12.095 14.7908 11.997 14.7908" stroke="#CECFD2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M11.9983 12.0763V11.8363C11.9983 11.0493 12.4843 10.6233 12.9723 10.2963C13.4483 9.97633 13.9253 9.55833 13.9253 8.78733C13.9253 7.72333 13.0633 6.86133 11.9993 6.86133C10.9353 6.86133 10.0723 7.72133 10.0723 8.78533" stroke="#CECFD2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </span>
                                    <input type="text" class="field-input form-control pe-5" wire:model="maladie_text" placeholder="پاسخ خود را بنویسید">
                                </div>
                            </div>
                        </section>
                    @endif
                @endif

                @if(isset($this->details['requestedInfo']['workRecords']))
                    @if($this->details['requestedInfo']['workRecords'] !== 3)

                        <section class="work-records mt-3">

                            <label class="d-flex label-input pb-3 mt-5">
                                سوابق کاری
                                @if($this->details['requestedInfo']['workRecords'] == 1)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            @if(empty($workList))
                                <div class="work-not-found">
                                    هیچ سابقه کاری ثبت نشده است
                                </div>
                            @endif

                            @foreach ($workList as $key => $work)
                                <div class="added_work mb-3">
                                    <div class="row work-items">
                                        <div class="col-lg-2 col-sm-12">
                                            <p>نام شرکت: {{ $work['companyName'] }}</p>
                                        </div>
                                        <div class="col-lg-2 col-sm-12">
                                            <p>عنوان: {{ $work['jobTitle'] }}</p>
                                        </div>
                                        <div class="col-lg-3 start-day">
                                            <p>تاریخ شروع: {{ verta()->instance($work['fromDate'])->format('Y/m/d') }}</p>
                                        </div>
                                        <div class="col-lg-3 end-day">
                                            <p>تاریخ پایان: {{ $work['isStillWorking'] ? 'هنوز مشغولم' : verta()->instance($work['toDate'])->format('Y/m/d') }}</p>
                                        </div>
                                        <div class="col-lg-2 text-right manage-works">
                                        <span wire:ckick="editWork('{{ $key }}')">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect width="24" height="24" rx="4" fill="#F5F5F6"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.41018 15.0157L15.0152 6.41074C15.3402 6.08574 15.8677 6.08574 16.1927 6.41074L17.5893 7.80741C17.9143 8.13241 17.9143 8.65991 17.5893 8.98491L8.98352 17.5891C8.82768 17.7457 8.61602 17.8332 8.39518 17.8332H6.16602V15.6041C6.16602 15.3832 6.25352 15.1716 6.41018 15.0157Z" stroke="#23675D" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M13.459 7.9668L16.034 10.5418" stroke="#23675D" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </span>
                                        <span wire:click="deleteWork('{{ $key }}')">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect width="24" height="24" rx="4" fill="#F5F5F6"/>
                                                <path d="M8.49846 9.99972C8.49846 9.72357 8.27461 9.49972 7.99846 9.49972C7.72232 9.49972 7.49846 9.72357 7.49846 9.99972H8.49846ZM16.5018 9.99972C16.5018 9.72357 16.2779 9.49972 16.0018 9.49972C15.7257 9.49972 15.5018 9.72357 15.5018 9.99972H16.5018ZM13.834 10.6667C13.834 10.3905 13.6102 10.1667 13.334 10.1667C13.0579 10.1667 12.834 10.3905 12.834 10.6667H13.834ZM12.834 15.3353C12.834 15.6114 13.0579 15.8353 13.334 15.8353C13.6102 15.8353 13.834 15.6114 13.834 15.3353H12.834ZM11.1662 10.6667C11.1662 10.3905 10.9424 10.1667 10.6662 10.1667C10.3901 10.1667 10.1662 10.3905 10.1662 10.6667H11.1662ZM10.1662 15.3353C10.1662 15.6114 10.3901 15.8353 10.6662 15.8353C10.9424 15.8353 11.1662 15.6114 11.1662 15.3353H10.1662ZM6.99805 7.49888C6.7219 7.49888 6.49805 7.72274 6.49805 7.99888C6.49805 8.27502 6.7219 8.49888 6.99805 8.49888V7.49888ZM17.0022 8.49888C17.2784 8.49888 17.5022 8.27502 17.5022 7.99888C17.5022 7.72274 17.2784 7.49888 17.0022 7.49888V8.49888ZM8.85801 7.84077C8.77069 8.10274 8.91227 8.3859 9.17424 8.47322C9.43621 8.56055 9.71937 8.41897 9.80669 8.157L8.85801 7.84077ZM9.69517 6.91043L10.1695 7.06854L10.1695 7.06843L9.69517 6.91043ZM10.961 5.99805L10.9609 6.49805H10.961V5.99805ZM13.0392 5.99805V6.49805L13.0398 6.49805L13.0392 5.99805ZM14.3064 6.91043L14.7809 6.75284L14.7808 6.75243L14.3064 6.91043ZM14.1934 8.15647C14.2804 8.41854 14.5634 8.56043 14.8255 8.4734C15.0876 8.38636 15.2295 8.10336 15.1424 7.84129L14.1934 8.15647ZM7.49846 9.99972V16.6692H8.49846V9.99972H7.49846ZM7.49846 16.6692C7.49846 17.682 8.31952 18.503 9.33235 18.503V17.503C8.87181 17.503 8.49846 17.1297 8.49846 16.6692H7.49846ZM9.33235 18.503H14.6679V17.503H9.33235V18.503ZM14.6679 18.503C15.6807 18.503 16.5018 17.682 16.5018 16.6692H15.5018C15.5018 17.1297 15.1285 17.503 14.6679 17.503V18.503ZM16.5018 16.6692V9.99972H15.5018V16.6692H16.5018ZM12.834 10.6667V15.3353H13.834V10.6667H12.834ZM10.1662 10.6667V15.3353H11.1662V10.6667H10.1662ZM6.99805 8.49888H17.0022V7.49888H6.99805V8.49888ZM9.80669 8.157L10.1695 7.06854L9.22083 6.75231L8.85801 7.84077L9.80669 8.157ZM10.1695 7.06843C10.283 6.72775 10.6018 6.49796 10.9609 6.49805L10.9612 5.49805C10.1715 5.49786 9.47033 6.00321 9.22079 6.75243L10.1695 7.06843ZM10.961 6.49805H13.0392V5.49805H10.961V6.49805ZM13.0398 6.49805C13.3992 6.4976 13.7185 6.72746 13.832 7.06843L14.7808 6.75243C14.5311 6.00257 13.829 5.49707 13.0386 5.49805L13.0398 6.49805ZM13.8319 7.06802L14.1934 8.15647L15.1424 7.84129L14.7809 6.75284L13.8319 7.06802Z" fill="#F04438"/>
                                            </svg>
                                        </span>
                                        </div>
                                    </div>
                                    <hr style="background: #CECFD2;width: 86%;">
                                    <p style="width: 87%;">
                                        توضیح: {{ $work['description'] }}
                                    </p>
                                </div>
                            @endforeach

                            <div class="mt-2" style="text-align: end;">
                                <button class="btn add-btn" wire:click="addWorkBtn">
                                    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M13.8327 4.33398L6.49935 11.6673L3.16602 8.33398" stroke="#FAFAFA" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    ایجاد سابقه جدید
                                </button>
                            </div>


                                <div id="formWork" style="@if($this->add_work_form === true) display: block; @else display: none; @endif ">
                                    <label class="d-flex label-input pb-3 mt-5">
                                        سابقه کاری جدید
                                        <span class="text-danger me-1">*</span>
                                    </label>

                                    <div class="add-work-form">
                                        <div class="row">

                                            <div class="col-lg-4 col-sm-12">
                                                <label for="">نام شرکت</label>
                                                <input type="text" wire:model="workRecords.companyName" class="form-control mt-2" placeholder="پاسخ خود را بنویسید">
                                            </div>
                                            <div class="col-lg-4 col-sm-12">
                                                <label for="">عنوان شغل</label>
                                                <input type="text" wire:model="workRecords.jobTitle" class="form-control mt-2" placeholder="پاسخ خود را بنویسید">
                                            </div>

                                        </div>

                                        <div class="row d-flex mt-4" style="align-items: center">

                                            <div class="col-lg-4 col-sm-12">
                                                <label for="">تاریخ شروع فعالیت</label>
                                                <input type="text" id="fromDate" wire:change="updateWorkRecordsFromDate($event.target.value)" wire:model.lazy="fromDate_field" class="form-control" placeholder="پاسخ خود را بنویسید">
                                                {{--                                            <input type="text" wire:model="workRecords.fromDate" class="form-control mt-2" placeholder="پاسخ خود را بنویسید">--}}
                                            </div>

                                            <div class="col-lg-4 col-sm-12">
                                                <label for="">تاریخ پایان فعالیت</label>
                                                <input type="text" id="toDate" wire:change="updateWorkRecordsToDate($event.target.value)" wire:model.lazy="toDate_field" class="form-control" placeholder="پاسخ خود را بنویسید">
                                                {{--                                            <input type="text" wire:model="workRecords.toDate" class="form-control mt-2" placeholder="پاسخ خود را بنویسید">--}}
                                            </div>

                                            <div class="col-lg-4 col-sm-12 mt-4 d-flex">
                                                <input id="isStillWorkingCheckbox" style="width: 20px; height: 20px" class="ms-2" wire:model="workRecords.isStillWorking" type="checkbox" value="1">
                                                <label for="">هنوز مشغولم</label>
                                            </div>

                                        </div>

                                        <div class="col-lg-12 col-sm-12 mt-3">
                                            <label for="">توضیحات</label>
                                            <textarea wire:model="workRecords.description" class="form-control mt-2" style="resize: none" cols="30" rows="10"></textarea>
                                        </div>

                                        <div class="btns mt-3">
                                            <button class="btn btn-cancel" wire:click="closeWorkForm">انصراف</button>
                                            <button class="btn btn-add" id="addWorkForm" wire:click="addWorkToForm">ذخیره</button>
                                        </div>
                                    </div>
                                </div>

                        </section>

                    @endif
                @endif


                <div wire:loading wire:target="resume" class="spinner-overlay text-center">
                    @include('livewire.include.spinner')
                </div>

                <button wire:click="processAndSendData" class="btn btn-send-resume mt-4 me-3">
                    ارسال رزومه
                </button>
            </main>
        </div>

    </div>
</div>

@section('script')
    <script src="{{ asset('home/js/sweetalert2.js') }}"></script>
    <script src="{{ asset('home/js/jquery.min.js') }}"></script>
    <script src="{{ asset('home/js/select2.min.js') }}"></script>

    <x-livewire-alert::scripts />
    <script>
        $(document).ready(function() {
            $('#Place').select2();
            $('#Place').on('change', function (event){
                console.log(event.target.value)
                @this.set('livingPlace', event.target.value);
            })
        });

        $(document).ready(function() {
            $('#birthPlace').select2();
            $('#birthPlace').on('change', function (event){
                console.log(event.target.value)
                @this.set('birthPlace', event.target.value);
            })
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const svgClickable = document.querySelector('#svg-clickable');
            const resumeClickable = document.querySelector('#resume-clickable');

            if (svgClickable) {
                svgClickable.addEventListener('click', function () {
                    const fileInput = document.getElementById('file-input');
                    fileInput.value = '';
                    fileInput.click();
                });
            }

            if (resumeClickable) {
                resumeClickable.addEventListener('click', function () {
                    console.log('clicked')
                    const fileInput = document.getElementById('file-input-resume');
                    fileInput.value = '';
                    fileInput.click();
                });
            }
        });
    </script>

    <script>
        const showFormButton = document.getElementById('showForm');
        const formWork = document.getElementById('formWork');

        showFormButton.addEventListener('click', function() {

            if (formWork.style.display === 'none') {
                formWork.style.display = 'block';
            } else {
                formWork.style.display = 'none';
            }

        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var datePickerMyDate = new Pikaday({
                field: document.getElementById('myDate'),
                yearRange: [1300, 1411],
                format: 'YYYY/MM/DD',
                onSelect: function(date) {
                    var jalaaliDate = moment.jalali(date).format('jYYYY/jMM/jDD');
                    document.getElementById('myDate').value = jalaaliDate;
                    document.getElementById('myDate').dispatchEvent(new Event('change'));
                },
            });

            var datePickerFromDate = new Pikaday({
                field: document.getElementById('fromDate'),
                yearRange: [1300, 1411],
                format: 'YYYY/MM/DD',
                onSelect: function(date) {
                    var jalaaliDate2 = moment.jalali(date).format('jYYYY/jMM/jDD');
                    document.getElementById('fromDate').value = jalaaliDate2;
                    document.getElementById('fromDate').dispatchEvent(new Event('change'));
                },
            });

            var datePickertoDate = new Pikaday({
                field: document.getElementById('toDate'),
                yearRange: [1300, 1411],
                format: 'YYYY/MM/DD',
                onSelect: function(date) {
                    var jalaaliDate2 = moment.jalali(date).format('jYYYY/jMM/jDD');
                    document.getElementById('toDate').value = jalaaliDate2;
                    document.getElementById('toDate').dispatchEvent(new Event('change'));
                },
            });
        });

    </script>

    <script>
        $(document).ready(function () {
            $('#gender').on('change', function (event) {
                console.log(event.target.value);
                if (event.target.value === '0') {
                    @this.set('militaryStatus', '2');
                    console.log('disabled')
                    $('#militaryStatus').attr('disabled', true);
                } else {
                    console.log('enabled')
                    $('#militaryStatus').removeAttr('disabled');
                }
            });


            $('#isStillWorkingCheckbox').change(function() {
                if ($(this).is(':checked')) {
                    $('#toDate').attr('disabled', true);
                } else {
                    $('#toDate').removeAttr('disabled', false);
                }
            });

            $('#addWorkForm').click(function (){
                setTimeout(function () {
                    document.getElementById('toDate').value = '';
                    document.getElementById('fromDate').value = '';
                }, 2000);
            });
        });
    </script>

@endsection