@extends('layouts.master')
@section('page-title') 
    Admin | {{ $page_title }}
@endsection
@section('page-css')
	<link rel="stylesheet" href="{{ url('public/assets/libs/select2/dist/css/select2.css') }}">
    <link rel="stylesheet" href="{{ url('public/assets/css/params.css') }}">

@endsection
@section('page-content')

@include('layouts.partials.navbar')


<div class="container py-4">
  <div class="row">
    <div class="mb-4">
        <h1 class="h3 mb-1">District Parameters</h1>
        <p class="text-muted">Update the parameters as needed</p>
    </div>
     <div class="settings-section mb-5">
        <div class="mb-4">
          <h2
            class="mb-2"
            style="font-size: 1.5rem; font-weight: 600; color: #2c3e50"
          >
            General Settings
          </h2>
          <p class="text-muted mb-0" style="font-size: 0.95rem">
            <!-- <a href="#" class="text-decoration-none" style="color: #3b7fb3">Profile Settings</a> -->
          </p>
        </div>

        <!-- Settings Cards Grid -->
        <div class="row g-3 settings-grid">
          <!-- General Settings Card -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="settings-card">
              <div class="card-icon mb-3">
                <i class="fas fa-cog"></i>
              </div>
              <h3 class="card-title mb-2">District Settings</h3>
              <p class="card-description mb-0">
                View and update district details
              </p>
            </div>
          </div>

          <!-- Billing Plan Settings Card -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="settings-card">
              <div class="card-icon mb-3">
                <i class="fas fa-credit-card"></i>
              </div>
              <h3 class="card-title mb-2">Fee Fixing</h3>
              <p class="card-description mb-0">View current fees</p>
            </div>
          </div>

          <!-- Team Settings Card -->
          <div class="col-12 col-md-6 col-lg-4 userGroupMatrix">
            <div class="settings-card">
              <div class="card-icon mb-3">
                <i class="fas fa-users"></i>
              </div>
              <h3 class="card-title mb-2">User Group Matrix</h3>
              <p class="card-description mb-0">View user groups and permissions</p>
            </div>
          </div>

          
        </div>
      </div>

      <!-- Integrations Section -->
      <div class="integrations-section mb-5">
        <div class="mb-4">
          <h2 class="mb-2" style="font-size: 1.5rem; font-weight: 600; color: #2c3e50">
            Stakeholders
          </h2>
          <p class="text-muted mb-0" style="font-size: 0.95rem">
            Data sharing organisations 
          </p>
        </div>

        <!-- Integration Cards Grid -->
        <div class="row g-3 integrations-grid">
          <!-- Shopify Integration Card -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="integration-card">
              <div class="integration-logo mb-3">
                <!-- <i class="fab fa-shopify" style="font-size: 3.5rem; color: #96bf48"></i> -->
                <img src="{{ url('public/assets/images/logos/landscommission-logo.jpg') }}" width="80">
              </div>
              <h4 class="integration-name mb-2">Lands Commission</h4>
              <p class="integration-description mb-3">
                View Available Data
              </p>
              <button class="btn connect-btn">
                Open <i class="fas fa-arrow-right ms-2"></i>
              </button>
            </div>
          </div>

          <!-- Klaviyo Integration Card -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="integration-card">
              <div class="integration-logo mb-3">
                <!-- <i class="fas fa-envelope" style="font-size: 3.5rem; color: #000000"></i> -->
                <img src="{{ url('public/assets/images/logos/epa-logo.png') }}" width="80">
              </div>
              <h4 class="integration-name mb-2">Environmental Protection Agency (EPA)</h4>
              <p class="integration-description mb-3">
                View Available Data
              </p>
              <button class="btn connect-btn">
                Open <i class="fas fa-arrow-right ms-2"></i>
              </button>
            </div>
          </div>

          <!-- Stripe Integration Card -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="integration-card">
              <div class="integration-logo mb-3">
                <!-- <i class="fab fa-stripe" style="font-size: 3.5rem; color: #635bff"></i> -->
                <img src="{{ url('public/assets/images/logos/geology.png') }}" width="80">
              </div>
              <h4 class="integration-name mb-2">Ghana Geological Survey Authority</h4>
              <p class="integration-description mb-3">
                View Available Data
              </p>
              <button class="btn connect-btn">
                Open <i class="fas fa-arrow-right ms-2"></i>
              </button>
            </div>
          </div>

          <!-- Instagram Integration Card -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="integration-card">
              <div class="integration-logo mb-3">
                <!-- <i class="fab fa-instagram" style="font-size: 3.5rem; color: #e4405f"></i> -->
                <img src="{{ url('public/assets/images/logos/nadmo.png') }}" width="80">
              </div>
              <h4 class="integration-name mb-2">National Disaster Management Organisation</h4>
              <p class="integration-description mb-3">
                View Available Data
              </p>
              <button class="btn connect-btn">
                Open <i class="fas fa-arrow-right ms-2"></i>
              </button>
            </div>
          </div>

          <!-- Facebook Integration Card -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="integration-card">
              <div class="integration-logo mb-3">
                <!-- <i class="fab fa-facebook" style="font-size: 3.5rem; color: #1877f2"></i> -->
                <img src="{{ url('public/assets/images/logos/mlgrd-logo.jpeg') }}" width="80">
              </div>
              <h4 class="integration-name mb-2">Local Government</h4>
              <p class="integration-description mb-3">
                View Available Data
              </p>
              <button class="btn connect-btn">
                Open <i class="fas fa-arrow-right ms-2"></i>
              </button>
            </div>
          </div>

          <!-- Google Integration Card (Connected) -->
          <div class="col-12 col-md-6 col-lg-4">
            <div class="integration-card">
              <div class="integration-logo mb-3">
                <!-- <i class="fab fa-google" style="font-size: 3.5rem; color: #4285f4"></i> -->
                <img src="{{ url('public/assets/images/logos/gss-logo.png') }}" width="80">
              </div>
              <h4 class="integration-name mb-2">GSS</h4>
              <p class="integration-description mb-3">
                View Available Data
              </p>
              <!-- <div class="connected-status">
                <span class="badge connected-badge mb-2">
                  <i class="fas fa-circle me-1" style="font-size: 0.5rem"></i>Connected
                </span>
                <button class="btn disconnect-btn">Disconnect</button>
              </div> -->
              <button class="btn connect-btn">
                Open <i class="fas fa-arrow-right ms-2"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

  </div>
</div>

@endsection
@section('page-js')
	<script src="{{ url('public/assets/libs/select2/dist/js/select2.full.min.js') }}" type="text/javascript" ></script>
	<script src="{{ url('public/assets/js/params.js') }}" type="text/javascript" ></script>



@endsection