@extends('welcome.welcome-layout')
@section('style')
<style type="text/css" data-hse-inline-css="true">
    .company_agreement input.form-check-input {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .8rem;
    }

    .banner-sec-hero-document {
        background: url('{{ asset("images/welcome-images/documents-bg.jpg")}}') center center / cover no-repeat;
        width: 100%;
        height: 45vh;
    }
</style>
@endsection

@section('content')
<section class="banner-sec-hero-document d-flex align-items-center justify-content-center ">
    <div class="container">
        <div class="row banner-content-about">
            <div class="col-md-12 text-center">
                <h2 class="text-white text-uppercase fw-bold mb-4">Job Offers</h2>
            </div>
        </div>
    </div>
</section>
<section class="company_agreement">
    <div class="container">
        <div class="row pt-5 pb-4 mt-4">
            <div class="col-md-10">
                <div class="documents_content">
                    <h3>Job Offers</h3>
                    <p class="pb-4">Please review each document below. Once you have read each Job Offer, please tick the checkbox to confirm your acceptance of the terms.</p>
                </div>
            </div>
        </div>
        <div class="row pb-5">
            @foreach ($jobOfferDetails as $jobOffer)
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-4">
                <div class="document_card">
                    <!-- @if (isset($employee_pic) && $employee_pic != '')
                        <img src="{{ url('crm/employee', $employee_pic) }}" class="border border-rounded bg-white document-doc">
                        @endif -->
                    <img src="{{ asset('images/welcome-images/document.svg') }}" class="bg-white document-doc">
                    <h5 class="d-flex my-jobOffer['title'] }}">
                        {{-- <span class="ml-1">{{ $i }}</span> --}}
                    </h5>
                    <a href="{{ url('welcome/job/offer/deatils', $jobOffer['id']) }}"
                        class="dark_btn w-100 text-white d-flex align-items-center justify-content-center py-2">View</a>
                    <div class="checkbox pt-3">
                        <div class="form-check form-check-inline document_checkbox m-0 p-0">
                            @if (isset($jobOffer['check_status']) && !empty($jobOffer['check_status']))
                                <input class="form-check-input h2 me-3 m-0" type="checkbox" id="{{ $jobOffer['id'] }}"
                                    checked>
                                <label>Agreed On
                                    @if (isset($jobOffer['check_status']) && !empty($jobOffer['check_status']))
                                    {{ date(config('choicescrm.date_format_forms'), strtotime($jobOffer['created_at_date'])) }}
                                    @endif
                                </label>
                            @else
                                <input class="form-check-input h2 me-3 m-0" type="checkbox" id="{{ $jobOffer['id'] }}"
                                    disabled>
                                <label>Read & Agree
                                </label>
                            @endif
                        </div>
                        <p>
                        </p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
</section>
@endsection

@section('script')
<script type="text/javascript">
    jQuery(document).ready(function() {
        $("input[type='checkbox']").each(function() {
            if ($(this).is(":checked")) {
                $(this).prop("disabled", true);
            }
        });
    });

    const realFileBtn = document.getElementById("real-file");
    const customBtn = document.getElementById("custom-button");
    const customTxt = document.getElementById("custom-text");

    customBtn.addEventListener("click", function() {
        realFileBtn.click();
    });

    realFileBtn.addEventListener("change", function() {
        if (realFileBtn.value) {
            customTxt.innerHTML = realFileBtn.value.match(
                /[\/\\]([\w\d\s\.\-\(\)]+)$/
            )[1];
        } else {
            customTxt.innerHTML = "No file chosen, yet.";
        }
    });
</script>
<script type="text/javascript">
    toastr.options = {
        "closeButton": true,
        "progressBar": true
    }
    @if(Session::has('message'))
    toastr.success("{{ session('message') }}", "Success");
    @endif

    @if(Session::has('error'))
    toastr.error("{{ session('error') }}", "Error");
    @endif

    @if(Session::has('info'))
    toastr.info("{{ session('info') }}", "Info");
    @endif

    @if(Session::has('warning'))
    toastr.warning("{{ session('warning') }}", "Warning");
    @endif
</script>
@endsection