@extends('layouts.landing-page.index', ['title' => 'Tentang Kami'])

@section('main')
    <!-- About Section -->
    <section id="about" class="about section mt-5">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="container section-title pb-0 ps-0" data-aos="fade-up">
                <h2>Profil</h2>
                <p>Tentang Kami</p>
            </div>

            <div class="row mb-5 mt-3">
                {{-- <div class="col-md-5">
                    <div class="img-about">
                        <img src="{{ asset('storage') }}/{{ $profile->office_photo ?? '' }}" class="img-fluid"
                            alt="">
                    </div>
                </div> --}}

                <div class="col-md-12">
                    <h3 class="notranslate">{{ $profile->company_name ?? 'Nama Perusaaan' }}</h3>
                    <p class="fst-italic">
                        {!! $profile->description ?? 'Deskripsi Perusahaan' !!}
                    </p>
                    <div class="form-group">
                        <h5>Jam Operasional</h5>
                        <table>
                            @foreach ($profile->operational_hours ?? [] as $op)
                                <tr>
                                    <td><B> {{ $op['day'] }} </B></td>
                                    <td>&emsp; : &emsp;</td>
                                    <td>{{ $op['time'] }} WIB</td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card card-body rounded border-0 shadow-sm border-left">
                        <h4>Visi</h4>
                        {!! $profile->vision ?? 'Visi Perusahaan' !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-body rounded border-0 shadow-sm border-left">
                        <h4>Misi</h4>
                        {!! $profile->mission ?? 'Misi Perusahaan' !!}
                    </div>
                </div>
            </div>

        </div>

    </section><!-- /About Section -->

    <section class="mb-3 bg-light document-number">
        <div class="container section-title pb-0 mb-5" data-aos="fade-up">
            <h2>Dokumen</h2>
            <p>Dokumen Legalitas Perusahaan</p>
            <small>{!! $profile->company_name ?? 'Nama Perusahaan' !!} memiliki beberapa dokumen legalitas yang dirilis resmi oleh instansi pemerintah,
                diantaranya:</small>
        </div>

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row">
                @foreach ($profile->legality ?? [] as $legality)
                    @if ($legality['name'] == null || $legality['number'] == null)
                        @continue;
                    @endif
                    <div class="col-md-3">
                        <h6><b>{{ $legality['name'] }} :</b></h6>
                        <p>{{ $legality['number'] }}</p>
                    </div>
                @endforeach

            </div>

        </div>
    </section>

    <section class="mb-3 team">
        <div class="container section-title pb-0 mb-5" data-aos="fade-up">
            <h2>Tim</h2>
            <p>Jajaran Komisaris & Direksi</p>
        </div>

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            @foreach ($team ?? [] as $level => $members)
                <div class="row g-4 justify-content-center mb-4">

                    @foreach ($members as $member)
                        <div class="col-sm-6 col-md-3">
                            <div class="board-card">
                                <img src="{{ asset('storage/' . $member->photo_path) }}" alt="">
                                <div class="board-info text-white">
                                    <h5>{{ $member->name }}</h5>
                                    <p>{{ $member->position }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            @endforeach

        </div>
    </section>


    {{-- <section id="stats" class="stats section bg-light">

  <div class="container" data-aos="fade-up" data-aos-delay="100">

    <div class="row gy-4 align-items-center justify-content-between">

      <div class="col-lg-5">
        <div class="img-stars">
          <img src="https://images.unsplash.com/photo-1634922951973-14d86310b542?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&  ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHRvYmFjY298ZW58MHx8MHx8fDA%3D" alt="" class="img-fluid">
        </div>
      </div>

      <div class="col-lg-6">

        <h3 class="fw-bold fs-2 mb-3">Kenapa Harus <span class="notranslate"> Indo Jaya Tobacco </span> ?</h3>
        <p>
          Indo Jaya Tobacco adalah mitra terpercaya dalam pengolahan tembakau berkualitas. Dengan pengalaman bertahun-tahun, kami memastikan setiap proses mulai dari pemilihan daun, pengeringan, hingga penyimpanan dilakukan secara teliti dan sesuai standar. Komitmen kami adalah menghadirkan produk tembakau terbaik dengan kualitas yang konsisten dan dapat diandalkan.
        </p>

        <div class="row gy-4">

          <div class="col-lg-6">
            <div class="stats-item d-flex">
              <i class="bi bi-emoji-smile flex-shrink-0"></i>
              <div>
                <span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
                <p><strong>Klien & Mitra</strong> <span>Kepercayaan dari para petani dan pelanggan adalah bukti kualitas dan konsistensi produk kami. </span></p>
              </div>
            </div>
          </div><!-- End Stats Item -->

          <div class="col-lg-6">
            <div class="stats-item d-flex">
              <i class="bi bi-journal-richtext flex-shrink-0"></i>
              <div>
                <span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1" class="purecounter"></span>
                <p><strong>Pengiriman Tembakau Setiap Tahun</strong> <span>Setiap tahun kami mendistribusikan tembakau berkualitas ke berbagai wilayah dan industri.</span></p>
              </div>
            </div>
          </div><!-- End Stats Item -->

          <div class="col-lg-6">
            <div class="stats-item d-flex">
              <i class="bi bi-headset flex-shrink-0"></i>
              <div>
                <span data-purecounter-start="0" data-purecounter-end="24" data-purecounter-duration="1" class="purecounter"></span>
                <p><strong>Jam Dukungan Operasional</strong> <span>Tim kami selalu siap membantu dan memastikan kelancaran proses produksi dan pengiriman.</span></p>
              </div>
            </div>
          </div><!-- End Stats Item -->

          <div class="col-lg-6">
            <div class="stats-item d-flex">
              <i class="bi bi-people flex-shrink-0"></i>
              <div>
                <span data-purecounter-start="0" data-purecounter-end="32" data-purecounter-duration="1" class="purecounter"></span>
                <p><strong>Tenaga Ahli Berpengalaman</strong> <span>Didukung oleh pekerja berpengalaman yang memahami standar pengolahan tembakau dari awal hingga akhir.</span></p>
              </div>
            </div>
          </div><!-- End Stats Item -->

        </div>

      </div>

    </div>

  </div>

</section> --}}
@endsection

@push('styles')
    <style>
        .img-about {
            width: 100%;
            height: 400px;
            overflow: hidden;
            border-radius: 20px
        }

        .img-about img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        @media (max-width: 576px) {
            .img-about {
                height: 300px !important;
            }
        }

        .border-left {
            border-left: 3px solid #CE9F34 !important;
        }

        .board-section {
            background: #f7f7f7;
        }

        /* CARD */
        .board-card {
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 25px 40px rgba(0, 0, 0, 0.15);
            transition: transform .3s ease;
            height: 100%;
        }

        .board-card:hover {
            transform: translateY(-8px);
        }

        /* IMAGE */
        .board-card img {
            width: 100%;
            height: 360px;
            object-fit: cover;
        }

        /* INFO */
        .board-info {
            padding: 20px;
            text-align: center;
        }

        .board-info h5 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .board-info p {
            font-size: 13px;
            color: #777;
            margin: 0;
        }

        /* PRIMARY CARD (BIRU) */
        .board-card-primary {
            background: #1f2b6c;
        }

        .board-card-primary img {
            background: #1f2b6c;
        }

        .board-card-primary .board-info {
            background: #1f2b6c;
        }

        .board-card-primary p {
            color: #cfd6ff;
        }
    </style>
@endpush

@push('scripts')
@endpush