@extends('welcome.welcome-layout')

@section('style')
    <style type="text/css" data-hse-inline-css="true">
        @media only screen and (max-width: 479.98px) {

            .dark_outline_btn,
            .dark_btn {
                width: 100%;
            }
        }

        .company_agreement input.form-check-input {
            width: 30px;
            height: 30px;
        }

        .modal .modal-header.green_border {
            border-top: 5px solid #5093c8;
        }

        .banner-sec-hero-document {
            background-color: rgba(245, 248, 251, 1);
            width: 100%;
            height: 30vh;
        }

        .banner-content-about h2 {
            color: rgba(34, 42, 46, 1);
        }

        .document_checkbox input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 1.5rem;
            height: 1.5rem;
            border: 1px solid rgba(195, 204, 208, 1);
            background-color: rgba(236, 242, 244, 1);
            border-radius: 4px;
            cursor: pointer;
            position: relative;
        }
        section.profile {
            min-height: calc(100vh - 200px);
            height: auto !important;
        }

        .profile-card {
            overflow: hidden;
        }

        .document-wrapper {
            width: 100%;
            overflow: hidden;
        }

        .document-wrapper iframe {
            display: block;
            max-width: 100%;
            width: 100%;
        }

        html, body {
            overflow-x: hidden;
            width: 100%;
        }
    </style>
@endsection

@section('content')
    <section class="banner-sec-hero-document d-flex align-items-center justify-content-center p-relative">
        <div class="container">
            <div class="row banner-content-about">
                <div class="col-md-12 text-center">
                    <h2 class="text-uppercase fw-bold mb-md-4 mb-4">Job Description</h2>
                </div>
            </div>
        </div>
    </section>
    <section class="profile">
        <div class="container">
            <div class="row pt-5 pb-5 justify-content-center">
                {{-- <div class="col-md-7 text-center"> --}}
                <div class="col-lg-8 col-md-8 mx-auto">
                    @if(!empty($document))
                        @php
                            $allowed = ['doc', 'docx'];
                            $ext = strtolower(pathinfo($document, PATHINFO_EXTENSION));
                        @endphp

                        <div class="profile-card py-2 px-4">
                            <div class="card-body">

                                <div class="document-wrapper">
                                    @if(in_array($ext, $allowed))
                                        <iframe
                                            src="https://view.officeapps.live.com/op/embed.aspx?src={{ urlencode(url('crm/company/jobdescriptions/'.$document)) }}"
                                            width="100%"
                                            height="600"
                                            frameborder="0">
                                        </iframe>
                                    @else
                                        <iframe
                                            src="{{ url('crm/company/jobdescriptions/'.$document) }}"
                                            width="100%"
                                            height="600px"
                                            frameborder="0">
                                        </iframe>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection