<div class="card shadow-lg border-0 my-4 mt-2 overflow-hidden" style="border-radius: 15px;">
  <div class="card-header text-white text-center py-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <h2 class="mb-0" style="font-weight: bold; letter-spacing: 2px; color: #FFF;">
      <i class="bi bi-diagram-3 me-2"></i>Workflow Program PICA di Kebun Tebu
    </h2>
  </div>
  <!-- Make sure Bootstrap JS and its dependencies are loaded -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  
  <div class="card-body p-5">
    <div class="alert alert-light border-start border-5 border-danger shadow-sm mb-4" style="border-radius: 10px;">
              <span class="d-flex align-items-center mb-2">
                <i class="bi bi-question-circle-fill text-danger fs-4 me-2"></i>
                <span style="font-size: 1.15rem;">
                  <strong>Apa itu <span class="text-primary">PICA</span>?</strong>
                </span>
              </span>
      <div class="mb-3">

        <div class="mt-2" style="font-size:1.05rem;">
          <p class="mb-0" style="font-size: 1.1rem; line-height: 1.8;">
            <strong class="text-danger fs-5">PICA</strong> adalah kepanjangan dari 
            <span class="badge bg-info text-white px-3 py-2 ms-1">Problem Identification Corrective Action</span> 
            yang menjadi bagian tak terpisahkan dalam pelaksanaan siklus 
            <span class="badge bg-warning text-dark px-3 py-2">PDCA</span> 
            <small class="text-muted">(Plan, Do, Check, Act)</small> agar mencapai tujuan yang telah ditetapkan.
          </p>
        </div>
      </div>
      
    </div>

    <div class="mb-4 p-4" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px;">
      <h3 class="text-success mb-3" style="font-weight: 600;">
        <i class="bi bi-bullseye me-2"></i>Tujuan Pelaksanaan Program PICA
      </h3>
      <div class="row g-3">
        <div class="col-12 mb-2">
          <div class="card border-0 shadow-sm h-100" style="border-radius: 10px; border-left: 4px solid #28a745;">
            <div class="card-body">
              <div class="d-flex align-items-start">
                <span class="badge bg-success rounded-circle me-3" style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 1rem;">1</span>
                <p class="mb-0  mt-2 ml-2">Memberikan pedoman kepada seluruh region untuk melaksanakan identifikasi masalah yang terjadi dengan menggunakan metode PICA.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 mb-2">
          <div class="card border-0 shadow-sm h-100" style="border-radius: 10px; border-left: 4px solid #17a2b8;">
            <div class="card-body">
              <div class="d-flex align-items-start">
                <span class="badge bg-info rounded-circle me-3" style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 1rem;">2</span>
                <p class="mb-0  mt-2 ml-2">Pelaksanaan PDCA yang baik merupakan proses Identifikasi Masalah dan Perbaikan yang baik agar proses perbaikan terlaksana berkesinambungan <span class="badge bg-info">Continuous Improvement</span>.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 mb-2">
          <div class="card border-0 shadow-sm h-100" style="border-radius: 10px; border-left: 4px solid #ffc107;">
            <div class="card-body">
              <div class="d-flex align-items-start">
                <span class="badge bg-warning text-dark rounded-circle me-3" style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 1rem;">3</span>
                <p class="mb-0  mt-2 ml-2">Tindakan lanjutan yang dilakukan adalah tindakan <span class="badge bg-warning text-dark">preventive (pencegahan)</span> untuk menghilangkan penyebab potensi ketidaksesuaian atau masalah yang sama tidak terulang kembali.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-5">
      <h2 class="mb-4 text-center" style="font-weight: bold; color: #667eea;">
      <i class="bi bi-diagram-2 me-2"></i>Diagram Kuadran & Akar Masalah PICA
      </h2>
      <ul class="nav nav-tabs justify-content-center mb-3" id="picaTab" role="tablist" style="border-bottom: 3px solid #764ba2;">
          <li class="nav-item" role="presentation">
          <button class="nav-link active" id="assesment-tab" data-bs-toggle="tab" data-bs-target="#assesment" type="button" role="tab" aria-controls="assesment" aria-selected="false" style="color: #fff; background: linear-gradient(135deg, #ff5858 0%, #f09819 100%); font-weight: 600; border-radius: 10px 10px 0 0;">
          Assesment
          </button>
        </li>
          <li class="nav-item" role="presentation">
          <button class="nav-link" id="identifikasi-tab" data-bs-toggle="tab" data-bs-target="#identifikasi" type="button" role="tab" aria-controls="identifikasi" aria-selected="false" style="color: #fff; background: linear-gradient(135deg, #36d1c4 0%, #1e90ff 100%); font-weight: 600; border-radius: 10px 10px 0 0; margin-right: 2px;">
          Identifikasi Permasalahan
          </button>
        </li>
          <li class="nav-item" role="presentation">
          <button class="nav-link" id="penyelesaian-tab" data-bs-toggle="tab" data-bs-target="#penyelesaian" type="button" role="tab" aria-controls="penyelesaian" aria-selected="false" style="color: #fff; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); font-weight: 600; border-radius: 10px 10px 0 0; margin-right: 2px;">
          Penyelesaian
          </button>
        </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="akar-tab" data-bs-toggle="tab" data-bs-target="#akar" type="button" role="tab" aria-controls="akar" aria-selected="false" style="color: #fff; background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); font-weight: 600; border-radius: 10px 10px 0 0; margin-right: 2px;">
        Akar Masalah
        </button>
      </li>
        <li class="nav-item" role="presentation">
        <button class="nav-link" id="kuadran-tab" data-bs-toggle="tab" data-bs-target="#kuadran" type="button" role="tab" aria-controls="kuadran" aria-selected="true" style="color: #fff; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-weight: 600; border-radius: 10px 10px 0 0; margin-right: 2px;">
        Kuadran
        </button>
      </li>
       <li class="nav-item" role="presentation">
        <button class="nav-link" id="prosesbisnispica-tab" data-bs-toggle="tab" data-bs-target="#prosesbisnispica" type="button" role="tab" aria-controls="prosesbisnispica" aria-selected="true" style="color: #fff; background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); font-weight: 600; border-radius: 10px 10px 0 0; margin-right: 2px;">
        Flowchart Proses Bisnis PICA
        </button>
      </li>
      
      
      

      </ul>
      <div class="tab-content bg-white shadow-sm p-4" id="picaTabContent" style="border-radius: 0 0 15px 15px;">
      <div class="tab-pane fade text-center" id="kuadran" role="tabpanel" aria-labelledby="kuadran-tab">
        <img src="{{ asset('assets/images/kuadran2.jpeg') }}" alt="Diagram Kuadran PICA" class="img-fluid" style="max-width: 100%; height: auto; border-radius: 10px;">
      </div>
      <div class="tab-pane fade text-center" id="akar" role="tabpanel" aria-labelledby="akar-tab">
        <img src="{{ asset('assets/images/akarmasalah2.jpeg') }}" alt="Diagram Akar Masalah PICA" class="img-fluid" style="max-width: 100%; height: auto; border-radius: 10px;">
      </div>
      <div class="tab-pane fade text-center" id="identifikasi" role="tabpanel" aria-labelledby="identifikasi-tab">
        <img src="{{ asset('assets/images/tahapindentifikasi3.jpeg') }}" alt="Identifikasi Permasalahan PICA" class="img-fluid" style="max-width: 100%; height: auto; border-radius: 10px;">
      </div>
      <div class="tab-pane fade text-center" id="penyelesaian" role="tabpanel" aria-labelledby="penyelesaian-tab">
        <img src="{{ asset('assets/images/tahappenyelesaian3.jpeg') }}" alt="Penyelesaian PICA" class="img-fluid" style="max-width: 100%; height: auto; border-radius: 10px;">
      </div>
      <div class="tab-pane fade show active text-center" id="assesment" role="tabpanel" aria-labelledby="assesment-tab">
        <img src="{{ asset('assets/images/tahapassesment2.jpeg') }}" alt="Assesment PICA" class="img-fluid" style="max-width: 100%; height: auto; border-radius: 10px;">
      </div>
      <div class="tab-pane fade text-center" id="prosesbisnispica" role="tabpanel" aria-labelledby="prosesbisnispica-tab">
        <img src="{{ asset('assets/images/prosesbisnispica2.jpeg') }}" alt="prosesbisnispica PICA" class="img-fluid" style="max-width: 100%; height: auto; border-radius: 10px;">
      </div>
      </div>
    </div>

  </div>
</div>