@extends('layouts.landingPage.master')

@section('title')
    {{ __('message.Personal Detail') }}
@endsection

@section('content')
    <section class="relative pb-10 pt-20 lg:pt-48">
        <picture class="pointer-events-none absolute inset-x-0 top-0 -z-10 dark:hidden h-full">
            <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSetting('heroBg')) }}" alt="gradient"
                class="w-full h-full object-cover" />
        </picture>
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Detail Anggota') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
        </div>
    </section>
    <section class="relative py-16">
        <div class="container">
            <div class="flex ">
                <div class="w-1/2">
                    <div class="flex justify-center items-center px-10">
                        <div class="flex justify-center items-center max-w-4xl rounded-2xl">
                            @if ($membershipPersonal->photo)
                                <img class="object-cover overflow-hidden  justify-center rounded-3xl"
                                    src="{{ asset('/uploads/membership/photo/' . $membershipPersonal->photo) }}"
                                    alt="">
                            @else
                                <img id="logoOutput" class="rounded-t-lg w-full object-cover"
                                    src="{{ asset('') }}landing/img/noimage.png" alt="">
                            @endif
                        </div>
                    </div>
                </div>
                <div class="w-1/2">
                    <div class="container px-10">
                        <p class="font-display text-2xl text-jacarta-700 px-2 mb-5">
                            {{ isset($membershipPersonal->full_name) ? $membershipPersonal->full_name : '-' }}</p>
                        <div class="flex">
                            <div class="w-1/2">
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-envelope px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">
                                            {{ isset($membershipPersonal->email) ? $membershipPersonal->email : '-' }}
                                        </p>
                                    </div>
                                </div>
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-map-marker-alt px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">
                                            {{ isset($membershipPersonal->address) ? $membershipPersonal->address : '-' }}
                                        </p>
                                    </div>
                                </div>
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-mobile px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">
                                            {{ isset($membershipPersonal->contact) ? $membershipPersonal->contact : '-' }}
                                        </p>
                                    </div>
                                </div>
                                <div class="flex py-2">
                                    <div>
                                        <i class="fas fa-globe px-2" style="color: #BA3C3C"></i>
                                    </div>
                                    <div>
                                        <p style="color: #BA3C3C">
                                            {{ isset($membershipPersonal->url_company) ? $membershipPersonal->url_company : '-' }}
                                        </p>
                                    </div>
                                </div>


                            </div>
                            <div class="w-1/2">
                                <div class="flex justify-center items-center max-w-4xl ">
                                    <img class="object-cover overflow-hidden px-5 justify-center"
                                        src="https://seeklogo.com/images/Q/qr-code-logo-27ADB92152-seeklogo.com.png"
                                        alt="">
                                </div>
                            </div>
                        </div>
                        {{-- <div class="w-full py-5" style="text-align: justify">
                            <p></p>

                        </div>
                        <a href="#"
                            class="rounded-full bg-accent py-2 px-4 text-center font-semibold text-white  hover:bg-accent-dark">
                            Selengkapnya
                        </a> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="relative py-16 bg-white">
        <div class="container">
            <div class="flex">
                <div class="w-1/2">
                    <div class="container">
                        <div class="border rounded-md px-10">
                            <p class="font-display text-2xl px-5 py-5" style="color: #BA3C3C">
                                {{ __('message.Sertifikasi') }}</p>
                            @if (isset($membershipPersonal->experience))
                                @foreach (json_decode($membershipPersonal->experience) as $key => $value)
                                    @if (isset($value->title_experience))
                                        <div class="flex px-5 py-5 {{ $value->title_experience == null ? 'hidden' : '' }}">
                                            <div class="pt-2 px-2">
                                                <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                            </div>
                                            <div style="text-align: justify">
                                                <p class="font-display text-lg text-jacarta-700 pb-2">
                                                    {{ isset($value->title_experience) ? $value->title_experience : '-' }}
                                                </p>
                                                <p class="py-2 text-jacarta-700">
                                                    {{ isset($value->date) ? $value->date : '-' }} -
                                                    {{ isset($value->location) ? $value->location : '-' }}
                                                </p>
                                                {{-- <p>PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance
                                            of a
                                            Port
                                            Facility berdasarkan aturan The International Ship and Port Facility
                                            Security
                                            Code
                                            (ISPS
                                            Code)
                                            di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.</p> --}}
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            @else
                                -
                            @endif
                            {{-- <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        Sertifikat
                                        ISPS (International Ship and
                                        Port Facility Security) Code</p>
                                    <p class="py-2 text-jacarta-700">October 12, 2022</p>
                                    <p>PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a
                                        Port
                                        Facility berdasarkan aturan The International Ship and Port Facility Security Code
                                        (ISPS
                                        Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.</p>
                                </div>
                            </div>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        Sertifikat
                                        ISPS (International Ship and
                                        Port Facility Security) Code</p>
                                    <p class="py-2 text-jacarta-700">October 12, 2022</p>
                                    <p>PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a
                                        Port
                                        Facility berdasarkan aturan The International Ship and Port Facility Security Code
                                        (ISPS
                                        Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.</p>
                                </div>
                            </div>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        Sertifikat
                                        ISPS (International Ship and
                                        Port Facility Security) Code</p>
                                    <p class="py-2 text-jacarta-700">October 12, 2022</p>
                                    <p>PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a
                                        Port
                                        Facility berdasarkan aturan The International Ship and Port Facility Security Code
                                        (ISPS
                                        Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.</p>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
                <div class="w-1/2">
                    <div class="container">
                        <div class="border rounded-md px-10">
                            <p class="font-display text-2xl px-5 py-5" style="color: #BA3C3C">
                                {{ __('message.Penghargaan') }}</p>
                            @if (isset($membershipPersonal->performance))
                                @foreach (json_decode($membershipPersonal->performance) as $key => $value)
                                    @if (isset($value->title_performance))
                                        <div
                                            class="flex px-5 py-5 {{ $value->title_performance == null ? 'hidden' : '' }}">
                                            <div class="pt-2 px-2">
                                                <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                            </div>
                                            <div style="text-align: justify">
                                                <p class="font-display text-lg text-jacarta-700 pb-2">
                                                    {{ isset($value->name_performance) ? $value->name_performance : '-' }}
                                                </p>
                                                <p class="py-2 text-jacarta-700">
                                                    {{ isset($value->date) ? $value->date : '-' }} -
                                                    {{ isset($value->location) ? $value->location : '-' }}</p>
                                                {{-- <p>PTBA dalam menjamin rantai pasok produknya, memiliki Statement of
                                                    Compliance
                                                    of a
                                                    Port
                                                    Facility berdasarkan aturan The International Ship and Port Facility
                                                    Security
                                                    Code
                                                    (ISPS
                                                    Code)
                                                    di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.</p> --}}
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                            {{-- <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        Sertifikat
                                        ISPS (International Ship and
                                        Port Facility Security) Code</p>
                                    <p class="py-2 text-jacarta-700">October 12, 2022</p>
                                    <p>PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a
                                        Port
                                        Facility berdasarkan aturan The International Ship and Port Facility Security Code
                                        (ISPS
                                        Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.</p>
                                </div>
                            </div>
                            <div class="flex px-5 py-5">
                                <div class="pt-2 px-2">
                                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                </div>
                                <div style="text-align: justify">
                                    <p class="font-display text-lg text-jacarta-700 pb-2">
                                        Sertifikat
                                        ISPS (International Ship and
                                        Port Facility Security) Code</p>
                                    <p class="py-2 text-jacarta-700">October 12, 2022</p>
                                    <p>PTBA dalam menjamin rantai pasok produknya, memiliki Statement of Compliance of a
                                        Port
                                        Facility berdasarkan aturan The International Ship and Port Facility Security Code
                                        (ISPS
                                        Code) di 3 lokasi yakni Tarahan, Kertapati, dan Teluk Bayur.</p>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16">
        <div class="container">
            <h2 class="mb-4 mt-2 font-display text-3xl text-jacarta-700 dark:text-white"style="text-align: justify">
                {{ __('message.Experience') }}
            </h2>
            <hr style="max-width: 10%; color:#BA3C3C; padding:10px;">
            @if (isset($membershipPersonal->position))
                @foreach (json_decode($membershipPersonal->position) as $key => $value)
                    <div class="flex px-5 py-5 {{ $value->name_position == null ? 'hidden' : '' }}">
                        <div class=" px-2">
                            @if (isset($value->logo_company))
                                <img src="{{ asset('uploads/membership/personal/' . $membershipPersonal->no_reg . '/position/logo_company/' . $value->logo_company) }}"
                                    alt="">
                            @else
                                <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                            @endif
                        </div>
                        <div style="text-align: justify">
                            <p class="font-display text-lg text-jacarta-700 pt-2">
                                {{ isset($value->name_position) ? $value->name_position : '-' }}</p>
                            <p class="py-2 text-jacarta-700">
                                {{ isset($value->start_date) ? date('M Y', strtotime($value->start_date)) : '-' }}
                                -
                                {{ isset($value->end_date) ? date('M Y', strtotime($value->end_date)) : 'Sekarang' }}
                                {{ Helper::countDateRange($value->start_date, $value->end_date == null ? Carbon\Carbon::now() : $value->end_date) }}
                            </p>
                            <p>
                                {{-- <ul class="list-disc">
                                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit
                                    amet
                                    aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni
                                    nemo
                                    sequi provident inventore.</li>
                                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit
                                    amet
                                    aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni
                                    nemo
                                    sequi provident inventore.</li>
                                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit
                                    amet
                                    aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni
                                    nemo
                                    sequi provident inventore.</li>
                            </ul> --}}
                            </p>
                        </div>
                    </div>
                @endforeach
            @else
                -
            @endif

            {{-- <div class="flex px-5 py-5">
                <div class=" px-2">
                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                </div>
                <div style="text-align: justify">
                    <p class="font-display text-lg text-jacarta-700 pt-2">
                        Lorem ipsum dolor sit amet consectetur. Semper quis blandit quam quis morbi nec sem sagittis
                        pellentesque.</p>
                    <p class="py-2 text-jacarta-700">October 12, 2022</p>
                    <p>
                    <ul class="list-disc">
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit amet
                            aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni nemo
                            sequi provident inventore.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit amet
                            aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni nemo
                            sequi provident inventore.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit amet
                            aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni nemo
                            sequi provident inventore.</li>
                    </ul>
                    </p>
                </div>
            </div>
            <div class="flex px-5 py-5">
                <div class=" px-2">
                    <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                </div>
                <div style="text-align: justify">
                    <p class="font-display text-lg text-jacarta-700 pt-2">
                        Lorem ipsum dolor sit amet consectetur. Semper quis blandit quam quis morbi nec sem sagittis
                        pellentesque.</p>
                    <p class="py-2 text-jacarta-700">October 12, 2022</p>
                    <p>
                    <ul class="list-disc">
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit amet
                            aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni nemo
                            sequi provident inventore.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit amet
                            aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni nemo
                            sequi provident inventore.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptates voluptatum velit amet
                            aut id voluptate placeat quasi numquam rerum odit culpa commodi aspernatur, esse magni nemo
                            sequi provident inventore.</li>
                    </ul>
                    </p>
                </div>
            </div>
        </div> --}}
    </section>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
@endsection