@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">Company Agreement</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>Agreement Documents</h3>
                    <p class="pb-4">Please click on each agreement below. Once you have read each short agreement,
                        please kindly tick the checkbox to confirm you agree to the terms. </p>
                </div>
            </div>
        </div>

        <div class="row pb-5">
            @foreach ($data as $agrement)
            <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-3">{{ $agrement['title'] }}
                        {{-- <span class="ml-1">{{ $i }}</span> --}}
                    </h5>
                    <a href="{{ url('welcome/agreements/deatils', $agrement['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($agrement['check_status']) && !empty($agrement['check_status']))
                            <input class="form-check-input h2 me-3 m-0" type="checkbox" id="{{ $agrement['id'] }}"
                                checked>
                            <label>Agreed On
                                @if (isset($agrement['check_status']) && !empty($agrement['check_status']))
                                {{ date(config('choicescrm.date_format_forms'), strtotime($agrement['created_at_date'])) }}
                                @endif
                            </label>
                            @else
                            <input class="form-check-input h2 me-3 m-0" type="checkbox" id="{{ $agrement['id'] }}"
                                disabled>
                            <label>Yet to be agreed
                            </label>
                            @endif
                        </div>
                        <p>
                        </p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="row pt-5 pb-5">
            <div class="col-md-10">
                <div class="col-md-12 text-center">
                    <!-- <p class="h4 pt-4 text-dark">Thank you for accepting the terms and completing your onboarding process.</p> -->
                    <!-- <form method="POST" action="{{ route('update.employeepic') }}" enctype="multipart/form-data" accept-charset="UTF-8" class="mt-5">
              <input type="hidden" name="_token" value="{{ csrf_token() }}" />
              <div class="mb-3 row">
                <div class="col-md-7 col-sm-12 text-left">
                  <label for="inputPassword" class="h5">Please upload a photo that we can use for your company ID badge </label>
                </div>
                <div class="col-md-4 col-sm-12 text-left">
                  <div class="upload_file_wrapper">
                    <input type="text" name="user_id" hidden="hidden" value="{{ $auth['user_id'] }}">
                    <input type="file" name="employee_pic" class="real-file" id="real-file" hidden="hidden" accept="image">
                    <button type="button" id="custom-button" class="custom-button btn-primary">CHOOSE IMAGE</button>
                    <span id="custom-text" class="custom-text">No file chosen, yet.</span>
                  </div>
                </div>
                <div class="col-md-1 col-sm-12 text-left">
                  <button type="submit" class="btn custom-button btn-primary">SAVE</button>
                </div>
                <div class="col-md-7 col-sm-12 text-left"></div>
                <div class="col-md-5 col-sm-12 text-left">
                </div>
              </div>
            </form> -->
                </div>
            </div>
        </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