@extends('layouts.app')
@section('content')

    <!-- MAIN SECTION -->
    <article class="container mt-28">
      <h1
        class="text-xneutral-400 font-montserrat text-xl sm:text-2xl font-semibold"
      >
        Visi Misi Universitas Ichsan Sidrap
      </h1>
      <p
        class="text-xneutral-200 text-sm sm:text-base font-montserrat font-semibold"
      >
        Quality is our target
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
        <div class="space-y-3">
          <h3
            class="font-montserrat text-base sm:text-lg font-semibold text-primary-200 text-center"
          >
            VISI
          </h3>
          <p
            class="text-lg sm:text-xl font-semibold font-montserrat text-xneutral-200 text-center uppercase"
          >
           {!! $visi ?? "No data available" !!}
          </p>
        </div>
        <div class="space-y-3">
          <h2
            class="font-montserrat text-base sm:text-lg font-semibold text-primary-200 text-center"
          >
            MISI
          </h2>
          <ol
            class="list-decimal pl-4 font-montserrat font-semibold text-xneutral-200 text-sm sm:text-base text-justify"
          >
          {!! isset($misi) ? str_replace(['<span style="white-space-collapse: preserve;">','</span>'], '', $misi) : '<li>No data available</li>' !!}
          </ol>
        </div>
      </div>

      <div
        class="grid grid-cols-1 sm:grid-cols-3 mt-10 border border-xneutral-100 rounded-2xl overflow-hidden"
      >
        <div class="p-[30px]">
          <h2
            class="text-base sm:text-lg font-semibold text-xneutral-400 font-montserrat"
          >
            Lorem, ipsum dolor.
          </h2>
          <p
            class="font-montserrat font-medium mt-4 text-xneutral-200 text-xs sm:text-sm"
          >
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic recusandae nesciunt nihil mollitia, quae sapiente modi, corrupti harum magni reiciendis, fugiat beatae praesentium reprehenderit sit ex quidem explicabo natus. Aliquam.
          </p>
        </div>
        <div>
          @if (isset($visimisiImg->Image[0]))
           <img src="{{ asset('storage/' . $visimisiImg->Image[0]) }}" alt="Inovatif" />
          @endif
        </div>
        <div class="p-[30px]">
          <h2
            class="text-base sm:text-lg font-semibold text-xneutral-400 font-montserrat"
          >
            Lorem, ipsum dolor.
          </h2>
          <p
            class="font-montserrat font-medium mt-4 text-xneutral-200 text-xs sm:text-sm"
          >
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ad ipsum sit. Porro, vel inventore illum natus velit voluptas atque sunt vero sapiente, at iusto! Nemo debitis voluptatum enim quasi.
          </p>
        </div>
        <div>
          @if (isset($visimisiImg->Image[1]))
           <img src="{{ asset('storage/' . $visimisiImg->Image[1]) }}" alt="Profesional" />
          @endif
        </div>
        <div class="p-[30px]">
          <h2
            class="text-base sm:text-lg font-semibold text-xneutral-400 font-montserrat"
          >
            Lorem, ipsum.
          </h2>
          <p
            class="font-montserrat font-medium mt-4 text-xneutral-200 text-xs sm:text-sm"
          >
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque aperiam, explicabo non atque itaque nesciunt adipisci molestiae sit, necessitatibus perspiciatis blanditiis omnis dignissimos voluptatibus facere porro ea a, delectus consequatur.
          </p>
        </div>
        <div>
          @if (isset($visimisiImg->Image[2]))
           <img src="{{ asset('storage/' . $visimisiImg->Image[2]) }}" alt="Teknologi" />
          @endif
        </div>
      </div>
    </article>
@endsection