<!DOCTYPE html>
<html lang="en">
<!-- [Head] start -->

<head>
  <title>Classic Ckeditor | Mantis Bootstrap 5 Admin Template</title>
  <!-- [Meta] -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description"
    content="Mantis is made using Bootstrap 5 design framework. Download the free admin template & use it for your project.">
  <meta name="keywords"
    content="Mantis, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Bootstrap Admin Template">
  <meta name="author" content="CodedThemes">

  <!-- [Favicon] icon -->
  <link rel="icon" href="../aractakip/dist/assets/images/favicon.svg" type="image/x-icon"> <!-- [Google Font] Family -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap"
    id="main-font-link">
  <!-- [Tabler Icons] https://tablericons.com -->
  <link rel="stylesheet" href="../aractakip/dist/assets/fonts/tabler-icons.min.css">
  <!-- [Feather Icons] https://feathericons.com -->
  <link rel="stylesheet" href="../aractakip/dist/assets/fonts/feather.css">
  <!-- [Font Awesome Icons] https://fontawesome.com/icons -->
  <link rel="stylesheet" href="../aractakip/dist/assets/fonts/fontawesome.css">
  <!-- [Material Icons] https://fonts.google.com/icons -->
  <link rel="stylesheet" href="../aractakip/dist/assets/fonts/material.css">
  <!-- [Template CSS Files] -->
  <link rel="stylesheet" href="../aractakip/dist/assets/css/style.css" id="main-style-link">
  <link rel="stylesheet" href="../aractakip/dist/assets/css/style-preset.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

</head>
<!-- [Head] end -->
<!-- [Body] Start -->

<body data-pc-preset="preset-1" data-pc-direction="ltr" data-pc-theme="light">
  <!-- [ Pre-loader ] start -->
  <div class="loader-bg">
    <div class="loader-track">
      <div class="loader-fill"></div>
    </div>
  </div>
  <!-- [ Pre-loader ] End -->
  <!-- [ Sidebar Menu ] start -->
  <nav class="pc-sidebar">
    <div class="navbar-wrapper">
      <div class="m-header">
        <a href="../aractakip/index.php" class="b-brand text-primary">
          <!-- ========   Change your logo from here   ============ -->
          AKMERCAN
        </a>
      </div>
      <div class="navbar-content">
        <ul class="pc-navbar">
          <li class="pc-item">
            <a href="../aractakip/index.php" class="pc-link">
              <span class="pc-micon"><i class="ti ti-dashboard"></i></span>
              <span class="pc-mtext">Ana sayfa</span>
            </a>
          </li>

          <li class="pc-item pc-hasmenu"> <a href="#!" class="pc-link "><span class="pc-micon"><i
                  class="ti ti-dashboard"></i></span><span class="pc-mtext">Araç takibi</span> <span
                class="pc-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-chevron-right">
                  <polyline points="9 18 15 12 9 6"></polyline>
                </svg></span> </a>
            <ul class="pc-submenu">
              <li class="pc-item">
                <a href="../aractakip/yakit-bildirim.php" class="pc-link">
                  <span class="pc-micon"><i class="ti ti-typography"></i></span>
                  <span class="pc-mtext">Yakıt bildirimi</span>
                </a>
              </li>
              <li class="pc-item">
                <a href="../aractakip/km-bildirim.php" class="pc-link">
                  <span class="pc-micon"><i class="ti ti-color-swatch"></i></span>
                  <span class="pc-mtext">Km bildirimi</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- [ Sidebar Menu ] end --> <!-- [ Header Topbar ] start -->
  <header class="pc-header">
    <div class="header-wrapper"> <!-- [Mobile Media Block] start -->
      <div class="me-auto pc-mob-drp">
        <ul class="list-unstyled">
          <!-- ======= Menu collapse Icon ===== -->
          <li class="pc-h-item pc-sidebar-collapse">
            <a href="#" class="pc-head-link ms-0" id="sidebar-hide">
              <i class="ti ti-menu-2"></i>
            </a>
          </li>
          <li class="pc-h-item pc-sidebar-popup">
            <a href="#" class="pc-head-link ms-0" id="mobile-collapse">
              <i class="ti ti-menu-2"></i>
            </a>
          </li>
          <li class="dropdown pc-h-item d-inline-flex d-md-none">
            <a class="pc-head-link dropdown-toggle arrow-none m-0" data-bs-toggle="dropdown" href="#" role="button"
              aria-haspopup="false" aria-expanded="false">
              <i class="ti ti-search"></i>
            </a>
            <div class="dropdown-menu pc-h-dropdown drp-search">
              <form class="px-3">
                <div class="form-group mb-0 d-flex align-items-center">
                  <i data-feather="search"></i>
                  <input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . .">
                </div>
              </form>
            </div>
          </li>
          <li class="pc-h-item d-none d-md-inline-flex">
            <form class="header-search">
              <i data-feather="search" class="icon-search"></i>
              <input type="search" class="form-control" placeholder="Search here. . .">
            </form>
          </li>
        </ul>
      </div>
      <!-- [Mobile Media Block end] -->
      <div class="ms-auto">
        <ul class="list-unstyled">
          <li class="dropdown pc-h-item pc-mega-menu">
            <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button"
              aria-haspopup="false" aria-expanded="false">
              <i class="ti ti-layout-grid"></i>
            </a>
            <div class="dropdown-menu pc-h-dropdown pc-mega-dmenu">
              <div class="row g-0">
                <div class="col image-block">
                  <h2 class="text-white">Explore Components</h2>
                  <p class="text-white my-4">Try our pre made component pages to check how it feels and suits as per
                    your need.</p>
                  <div class="row align-items-end">
                    <div class="col-auto">
                      <div class="btn btn btn-light">View All <i class="ti ti-arrow-narrow-right"></i></div>
                    </div>
                    <div class="col">
                      <img src="../aractakip/dist/assets/images/mega-menu/chart.svg" alt="image" class="img-fluid img-charts">
                    </div>
                  </div>
                </div>
                <div class="col">
                  <h6 class="mega-title">UI Components</h6>
                  <ul class="pc-mega-list">
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Alerts</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Accordions</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Avatars</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Badges</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Breadcrumbs</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Button</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Buttons Groups</a></li>
                  </ul>
                </div>
                <div class="col">
                  <h6 class="mega-title">UI Components</h6>
                  <ul class="pc-mega-list">
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Menus</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Media Sliders / Carousel</a>
                    </li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Modals</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Pagination</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Progress Bars &amp; Graphs</a>
                    </li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Search Bar</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Tabs</a></li>
                  </ul>
                </div>
                <div class="col">
                  <h6 class="mega-title">Advance Components</h6>
                  <ul class="pc-mega-list">
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Advanced Stats</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Advanced Cards</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Lightbox</a></li>
                    <li><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Notification</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li class="dropdown pc-h-item">
            <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button"
              aria-haspopup="false" aria-expanded="false">
              <i class="ti ti-language"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
              <a href="#!" class="dropdown-item">
                <i class="ti ti-user"></i>
                <span>My Account</span>
              </a>
              <a href="#!" class="dropdown-item">
                <i class="ti ti-settings"></i>
                <span>Settings</span>
              </a>
              <a href="#!" class="dropdown-item">
                <i class="ti ti-headset"></i>
                <span>Support</span>
              </a>
              <a href="#!" class="dropdown-item">
                <i class="ti ti-lock"></i>
                <span>Lock Screen</span>
              </a>
              <a href="#!" class="dropdown-item">
                <i class="ti ti-power"></i>
                <span>Logout</span>
              </a>
            </div>
          </li>
          <li class="dropdown pc-h-item">
            <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button"
              aria-haspopup="false" aria-expanded="false">
              <i class="ti ti-bell"></i>
              <span class="badge bg-success pc-h-badge">3</span>
            </a>
            <div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
              <div class="dropdown-header d-flex align-items-center justify-content-between">
                <h5 class="m-0">Notification</h5>
                <a href="#!" class="pc-head-link bg-transparent"><i class="ti ti-circle-check text-success"></i></a>
              </div>
              <div class="dropdown-divider"></div>
              <div class="dropdown-header px-0 text-wrap header-notification-scroll position-relative"
                style="max-height: calc(100vh - 215px)">
                <div class="list-group list-group-flush w-100">
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <div class="user-avtar bg-light-success"><i class="ti ti-gift"></i></div>
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">3:00 AM</span>
                        <p class="text-body mb-1">It's <b>Cristina danny's</b> birthday today.</p>
                        <span class="text-muted">2 min ago</span>
                      </div>
                    </div>
                  </a>
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <div class="user-avtar bg-light-primary"><i class="ti ti-message-circle"></i></div>
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">6:00 PM</span>
                        <p class="text-body mb-1"><b>Aida Burg</b> commented your post.</p>
                        <span class="text-muted">5 August</span>
                      </div>
                    </div>
                  </a>
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <div class="user-avtar bg-light-danger"><i class="ti ti-settings"></i></div>
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">2:45 PM</span>
                        <p class="text-body mb-1">Your Profile is Complete &nbsp;<b>60%</b></p>
                        <span class="text-muted">7 hours ago</span>
                      </div>
                    </div>
                  </a>
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <div class="user-avtar bg-light-primary"><i class="ti ti-headset"></i></div>
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">9:10 PM</span>
                        <p class="text-body mb-1"><b>Cristina Danny </b> invited to join <b> Meeting.</b></p>
                        <span class="text-muted">Daily scrum meeting time</span>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="dropdown-divider"></div>
              <div class="text-center py-2">
                <a href="#!" class="link-primary">View all</a>
              </div>
            </div>
          </li>
          <li class="dropdown pc-h-item">
            <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button"
              aria-haspopup="false" aria-expanded="false">
              <i class="ti ti-mail"></i>
            </a>
            <div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
              <div class="dropdown-header d-flex align-items-center justify-content-between">
                <h5 class="m-0">Message</h5>
                <a href="#!" class="pc-head-link bg-transparent"><i class="ti ti-x text-danger"></i></a>
              </div>
              <div class="dropdown-divider"></div>
              <div class="dropdown-header px-0 text-wrap header-notification-scroll position-relative"
                style="max-height: calc(100vh - 215px)">
                <div class="list-group list-group-flush w-100">
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img src="../aractakip/dist/assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">3:00 AM</span>
                        <p class="text-body mb-1">It's <b>Cristina danny's</b> birthday today.</p>
                        <span class="text-muted">2 min ago</span>
                      </div>
                    </div>
                  </a>
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img src="../aractakip/dist/assets/images/user/avatar-1.jpg" alt="user-image" class="user-avtar">
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">6:00 PM</span>
                        <p class="text-body mb-1"><b>Aida Burg</b> commented your post.</p>
                        <span class="text-muted">5 August</span>
                      </div>
                    </div>
                  </a>
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img src="../aractakip/dist/assets/images/user/avatar-3.jpg" alt="user-image" class="user-avtar">
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">2:45 PM</span>
                        <p class="text-body mb-1"><b>There was a failure to your setup.</b></p>
                        <span class="text-muted">7 hours ago</span>
                      </div>
                    </div>
                  </a>
                  <a class="list-group-item list-group-item-action">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img src="../aractakip/dist/assets/images/user/avatar-4.jpg" alt="user-image" class="user-avtar">
                      </div>
                      <div class="flex-grow-1 ms-1">
                        <span class="float-end text-muted">9:10 PM</span>
                        <p class="text-body mb-1"><b>Cristina Danny </b> invited to join <b> Meeting.</b></p>
                        <span class="text-muted">Daily scrum meeting time</span>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="dropdown-divider"></div>
              <div class="text-center py-2">
                <a href="#!" class="link-primary">View all</a>
              </div>
            </div>
          </li>
          <li class="dropdown pc-h-item">
            <a class="pc-head-link me-0" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
              <i class="ti ti-settings"></i>
            </a>
          </li>
          <li class="dropdown pc-h-item header-user-profile">
            <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button"
              aria-haspopup="false" data-bs-auto-close="outside" aria-expanded="false">
              <img src="../aractakip/dist/assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
              <span>Stebin Ben</span>
            </a>
            <div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown">
              <div class="dropdown-header">
                <div class="d-flex mb-1">
                  <div class="flex-shrink-0">
                    <img src="../aractakip/dist/assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar wid-35">
                  </div>
                  <div class="flex-grow-1 ms-3">
                    <h6 class="mb-1">Stebin Ben</h6>
                    <span>UI/UX Designer</span>
                  </div>
                  <a href="#!" class="pc-head-link bg-transparent"><i class="ti ti-power text-danger"></i></a>
                </div>
              </div>
              <ul class="nav drp-tabs nav-fill nav-tabs" id="mydrpTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="drp-t1" data-bs-toggle="tab" data-bs-target="#drp-tab-1"
                    type="button" role="tab" aria-controls="drp-tab-1" aria-selected="true"><i class="ti ti-user"></i>
                    Profile</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="drp-t2" data-bs-toggle="tab" data-bs-target="#drp-tab-2" type="button"
                    role="tab" aria-controls="drp-tab-2" aria-selected="false"><i class="ti ti-settings"></i>
                    Setting</button>
                </li>
              </ul>
              <div class="tab-content" id="mysrpTabContent">
                <div class="tab-pane fade show active" id="drp-tab-1" role="tabpanel" aria-labelledby="drp-t1"
                  tabindex="0">
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-edit-circle"></i>
                    <span>Edit Profile</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-user"></i>
                    <span>View Profile</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-clipboard-list"></i>
                    <span>Social Profile</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-wallet"></i>
                    <span>Billing</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-power"></i>
                    <span>Logout</span>
                  </a>
                </div>
                <div class="tab-pane fade" id="drp-tab-2" role="tabpanel" aria-labelledby="drp-t2" tabindex="0">
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-help"></i>
                    <span>Support</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-user"></i>
                    <span>Account Settings</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-lock"></i>
                    <span>Privacy Center</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-messages"></i>
                    <span>Feedback</span>
                  </a>
                  <a href="#!" class="dropdown-item">
                    <i class="ti ti-list"></i>
                    <span>History</span>
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </header>
  <!-- [ Header ] end -->



  <!-- [ Main Content ] start -->
  <div class="pc-container">
    <div class="pc-content">
      <!-- [ breadcrumb ] start -->
      <div class="page-header">
        <div class="page-block">
          <div class="row align-items-center">
            <div class="col-md-12">
              <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="../dashboard/index.html">Ana sayfa</a></li>
                <li class="breadcrumb-item"><a href="javascript: void(0)">Araç takibi</a></li>
                <li class="breadcrumb-item" aria-current="page">Yakıt bildirimi</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- [ breadcrumb ] end -->

      <!-- [ Main Content ] start -->
      <div class="row">
        <!-- [ Classic-editor ] start -->
        <div class="col-sm-12">
          <div class="card">

            <div class="card-body">
              <h5>Araç yakıt bildirim formu</h5>
              <hr>

              <div class="alert alert-primary">
                <div class="media align-items-center">
                  <i class="ti ti-info-circle h2 f-w-400 mb-0"></i>
                  <div class="media-body ms-3">Lütfen bilgilerinizi dikkatli doldurunuz.</div>
                </div>
              </div>

              <form id="kmForm" method="POST" action="">
                  <div class="row g-4">
                    <div class="col-md-6">
                      <div class="form-floating mb-0 input-group date">
                        <input type="text" name="date" class="form-control" placeholder="Select date" id="pc-date_range_picker-1" required>
                        <label for="floatingInputValue">Tarih seçiniz</label>
                        <span class="input-group-text">
                          <i class="feather icon-calendar"></i>
                        </span>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-floating">
                      <select class="form-select" name="plake" id="floatingSelect" aria-label="Floating label select example" required>
                        <option selected="">Plaka seçiniz</option>
                        <option value="1">34 GGK 311</option>
                        <option value="2">34 GMH 981</option>
                        <option value="3">34 NKE 151</option>
                      </select>
                      <label for="floatingSelect">Lütfen plaka seçiniz</label>
                    </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-floating mb-0">
                        <input type="text" name="alinanyakit" class="form-control" id="floatingPassword" placeholder="Plaka" required>
                        <label for="floatingInputValue">Km bilgisi</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-floating mb-0">
                        <input type="text" name="alinanyakit" class="form-control" id="floatingPassword" placeholder="Plaka" required>
                        <label for="floatingInputValue">Alınan yakıt</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-floating mb-0">
                        <input type="text" name="toplamtutar" class="form-control" id="floatingPassword" placeholder="Plaka" required>
                        <label for="floatingInputValue">Toplam tutar</label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6 mt-3">
                  <button type="submit" class="btn btn-primary mb-4">Gönder</button>
                </div>
                </form>
                <!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.getElementById('kmForm').addEventListener('submit', async function(e) {
    e.preventDefault(); // Sayfa yenilenmesin

    const formData = new FormData(this);

    try {
        const response = await fetch('includes/insert_yakit.php', {
            method: 'POST',
            body: formData
        });
        const result = await response.json(); // PHP JSON döndürecek

        if (result.status === 'success') {
            Swal.fire({
                title: 'Başarılı!',
                text: result.message,
                icon: 'success',
                confirmButtonText: 'Tamam'
            });
            this.reset();
        } else {
            Swal.fire({
                title: 'Hata!',
                text: result.message,
                icon: 'error',
                confirmButtonText: 'Tekrar Dene'
            });
        }

    } catch (error) {
        Swal.fire({
            title: 'Sunucu hatası!',
            text: 'Bir hata oluştu, lütfen tekrar deneyin.',
            icon: 'error'
        });
    }
});
</script>
              </div>
            </div>
          </div>
        </div>
        <!-- [ Classic-editor ] end -->
      </div>
      <!-- [ Main Content ] end -->
    </div>
  </div>
  <!-- [ Main Content ] end -->
  <footer class="pc-footer">
    <div class="footer-wrapper container-fluid">
      <div class="row">
        <div class="col-sm my-1">
          <p class="m-0">Mantis &#9829; crafted by Team <a href="https://themeforest.net/user/codedthemes"
              target="_blank">Codedthemes</a> Distributed by <a href="https://themewagon.com/">ThemeWagon</a>.</p>
        </div>
        <div class="col-auto my-1">
          <ul class="list-inline footer-link mb-0">
            <li class="list-inline-item"><a href="../index.html">Home</a></li>
            <li class="list-inline-item"><a href="https://codedthemes.gitbook.io/mantis-bootstrap"
                target="_blank">Documentation</a></li>
            <li class="list-inline-item"><a href="https://codedthemes.authordesk.app/" target="_blank">Support</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer> <!-- Required Js -->
  <script src="../aractakip/dist/assets/js/plugins/popper.min.js"></script>
  <script src="../aractakip/dist/assets/js/plugins/simplebar.min.js"></script>
  <script src="../aractakip/dist/assets/js/plugins/bootstrap.min.js"></script>
  <script src="../aractakip/dist/assets/js/fonts/custom-font.js"></script>
  <script src="../aractakip/dist/assets/js/pcoded.js"></script>
  <script src="../aractakip/dist/assets/js/plugins/feather.min.js"></script>





  <script>layout_change('light');</script>




  <script>change_box_container('false');</script>



  <script>layout_rtl_change('false');</script>


  <script>preset_change("preset-1");</script>


  <script>font_change("Public-Sans");</script>


  <div class="offcanvas pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
    <div class="offcanvas-header bg-primary">
      <h5 class="offcanvas-title text-white">Mantis Customizer</h5>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="pct-body" style="height: calc(100% - 60px)">
      <div class="offcanvas-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse1">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div class="avtar avtar-xs bg-light-primary">
                    <i class="ti ti-layout-sidebar f-18"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">Theme Layout</h6>
                  <span>Choose your layout</span>
                </div>
                <i class="ti ti-chevron-down"></i>
              </div>
            </a>
            <div class="collapse show" id="pctcustcollapse1">
              <div class="pct-content">
                <div class="pc-rtl">
                  <p class="mb-1">Direction</p>
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="layoutmodertl">
                    <label class="form-check-label" for="layoutmodertl">RTL</label>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse2">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div class="avtar avtar-xs bg-light-primary">
                    <i class="ti ti-brush f-18"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">Theme Mode</h6>
                  <span>Choose light or dark mode</span>
                </div>
                <i class="ti ti-chevron-down"></i>
              </div>
            </a>
            <div class="collapse show" id="pctcustcollapse2">
              <div class="pct-content">
                <div class="theme-color themepreset-color theme-layout">
                  <a href="#!" class="active" onclick="layout_change('light')" data-value="false"><span><img
                        src="../aractakip/dist/assets/images/customization/default.svg" alt="img"></span><span>Light</span></a>
                  <a href="#!" class="" onclick="layout_change('dark')" data-value="true"><span><img
                        src="../aractakip/dist/assets/images/customization/dark.svg" alt="img"></span><span>Dark</span></a>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse3">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div class="avtar avtar-xs bg-light-primary">
                    <i class="ti ti-color-swatch f-18"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">Color Scheme</h6>
                  <span>Choose your primary theme color</span>
                </div>
                <i class="ti ti-chevron-down"></i>
              </div>
            </a>
            <div class="collapse show" id="pctcustcollapse3">
              <div class="pct-content">
                <div class="theme-color preset-color">
                  <a href="#!" class="active" data-value="preset-1"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 1</span></a>
                  <a href="#!" class="" data-value="preset-2"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 2</span></a>
                  <a href="#!" class="" data-value="preset-3"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 3</span></a>
                  <a href="#!" class="" data-value="preset-4"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 4</span></a>
                  <a href="#!" class="" data-value="preset-5"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 5</span></a>
                  <a href="#!" class="" data-value="preset-6"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 6</span></a>
                  <a href="#!" class="" data-value="preset-7"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 7</span></a>
                  <a href="#!" class="" data-value="preset-8"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 8</span></a>
                  <a href="#!" class="" data-value="preset-9"><span><img
                        src="../aractakip/dist/assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 9</span></a>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item pc-boxcontainer">
            <a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse4">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div class="avtar avtar-xs bg-light-primary">
                    <i class="ti ti-border-inner f-18"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">Layout Width</h6>
                  <span>Choose fluid or container layout</span>
                </div>
                <i class="ti ti-chevron-down"></i>
              </div>
            </a>
            <div class="collapse show" id="pctcustcollapse4">
              <div class="pct-content">
                <div class="theme-color themepreset-color boxwidthpreset theme-container">
                  <a href="#!" class="active" onclick="change_box_container('false')" data-value="false"><span><img
                        src="../aractakip/dist/assets/images/customization/default.svg" alt="img"></span><span>Fluid</span></a>
                  <a href="#!" class="" onclick="change_box_container('true')" data-value="true"><span><img
                        src="../aractakip/dist/assets/images/customization/container.svg" alt="img"></span><span>Container</span></a>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse5">
              <div class="d-flex align-items-center">
                <div class="flex-shrink-0">
                  <div class="avtar avtar-xs bg-light-primary">
                    <i class="ti ti-typography f-18"></i>
                  </div>
                </div>
                <div class="flex-grow-1 ms-3">
                  <h6 class="mb-1">Font Family</h6>
                  <span>Choose your font family.</span>
                </div>
                <i class="ti ti-chevron-down"></i>
              </div>
            </a>
            <div class="collapse show" id="pctcustcollapse5">
              <div class="pct-content">
                <div class="theme-color fontpreset-color">
                  <a href="#!" class="active" onclick="font_change('Public-Sans')"
                    data-value="Public-Sans"><span>Aa</span><span>Public Sans</span></a>
                  <a href="#!" class="" onclick="font_change('Roboto')"
                    data-value="Roboto"><span>Aa</span><span>Roboto</span></a>
                  <a href="#!" class="" onclick="font_change('Poppins')"
                    data-value="Poppins"><span>Aa</span><span>Poppins</span></a>
                  <a href="#!" class="" onclick="font_change('Inter')"
                    data-value="Inter"><span>Aa</span><span>Inter</span></a>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="collapse show">
              <div class="pct-content">
                <div class="d-grid">
                  <button class="btn btn-light-danger" id="layoutreset">Reset Layout</button>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- [Page Specific JS] start -->
  <!-- Ckeditor js -->
  <script src="../aractakip/dist/assets/js/plugins/ckeditor/classic/ckeditor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script>
    (function () {
      ClassicEditor.create(document.querySelector('#classic-editor')).catch((error) => {
        console.error(error);
      });
    })();
  </script>
  <script>
      // minimum setup
      flatpickr(document.querySelector('#pc-date_range_picker-1'),{
        mode: 'range'
      });
      flatpickr(document.querySelector('#pc-date_range_picker-2'),{
        mode: 'range'
      });
      flatpickr(document.querySelector('#pc-date_range_picker-3'),{
        mode: 'range',
        minDate: 'today',
        dateFormat: 'Y-m-d',
        locale: 'tr',
        disable: [
          function (date) {
            return !(date.getDate() % 8);
          }
        ]
      });
      flatpickr(document.querySelector('#pc-date_range_picker-4'),{
        mode: 'range',
        dateFormat: 'Y-m-d',
        defaultDate: ['2016-10-10', '2016-10-20']
      });
    </script>
  <!-- [Page Specific JS] end -->
</body>
<!-- [Body] end -->

</html>