@extends('merchant.app')

@section('title', panel_setting_title("Ödeme Linki Oluştur"))

@section('content')
    <main class="mt-120 " id="main">
        <h6 class="my-lg-4 my-0 mb-lg-0 ">Ödeme Linki Oluştur</h6>
        <div class="row mt-4">
            @include("merchant.Components.statistics")
        </div>
        <div class="row mt-4">
            <div class="col-12 p-0">
                <!--=============== CARD ===============-->
                <div class="card__container-all-page p-3 border-color-custom ">
                    <p class="h5">Ödeme Linki Bilgisi</p>
                    <form action="">
                        <div class="row">
                            <div class="col-lg-3 my-2">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control border-color-custom" id="tutar">
                                    <label for="tutar">0</label>
                                </div>
                                <div class="form-check form-switch ">
                                    <input class="form-check-input border-color-custom" type="checkbox" role="switch"
                                        id="tutar-kullanici-karar-ver">
                                    <label class="form-check-label" for="tutar-kullanici-karar-ver">Tutara
                                        kullanıcı karar versin</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control border-color-custom" id="tutar">
                                    <label for="tutar">0</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <select class="form-select border-color-custom" id="floatingSelect"
                                        aria-label="Floating label select example">
                                        <option selected>Çok Kullanımlık</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                    </select>
                                    <label for="floatingSelect">Link Türü *</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <select class="form-select border-color-custom" id="floatingSelect"
                                        aria-label="Floating label select example">
                                        <option selected>Limit Yok</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                    </select>
                                    <label for="floatingSelect">Taksit Limiti</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating pt-0">
                                    <input type="date" class="form-control border-color-custom py-0">
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <select class="form-select border-color-custom" id="son-kullanim"
                                        aria-label="Floating label select example">
                                        <option selected>01:00</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                    </select>
                                    <label for="son-kullanim">Son Kullanım Saati</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control border-color-custom" id="maksimum-kullanim">
                                    <label for="maksimum-kullanim">Maksimum Kullanım Sayısı</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <select class="form-select border-color-custom" id="floatingSelect"
                                        aria-label="Floating label select example">
                                        <option selected>3D'siz Ödeme</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                    </select>
                                    <label for="floatingSelect">Ödeme Türü / Tipi</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <input type="number" class="form-control border-color-custom" id="phone-number">
                                    <label for="phone-numberı">Telefon Numarası</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <input type="email" class="form-control border-color-custom" id="email-address">
                                    <label for="email-addressı">Alıcı E-psota Adresi</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control border-color-custom" id="product-name">
                                    <label for="product-nameı">Ürün Adı</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <textarea class="form-control border-color-custom" id="description"></textarea>
                                    <label for="description">Açıklama</label>
                                </div>
                            </div>
                            <div class="col-lg-3 col-12  mt-lg-4 my-lg-0 my-2">
                                <div class="form-check form-switch ">
                                    <input class="form-check-input border-color-custom " type="checkbox" role="switch"
                                        id="komisyon" onchange="toggleSelect('komisyon', 'selectContainer')">
                                    <label class="form-check-label" for="komisyon">Komisyonu Son
                                        Kullanıcı Ödesin</label>
                                </div>

                                <div class="my-3 d-none" id="selectContainer">
                                    <div class="form-floating">
                                        <select class="form-select border-color-custom" id="komisyon-son"
                                            aria-label="Floating label select example">
                                            <option selected>1</option>
                                            <option value="1">2</option>
                                            <option value="2">3</option>
                                        </select>
                                        <label for="komisyon-son">Taksit Seçenekleri</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-12  mt-lg-4 my-lg-0 my-2">
                                <div class="form-check form-switch ">
                                    <input class="form-check-input border-color-custom" type="checkbox" role="switch"
                                        id="yinelenen" onchange="toggleSelect('yinelenen', 'selectContainer2')">
                                    <label class="form-check-label" for="yinelenen">Yinelenen
                                        Ödeme</label>
                                </div>

                                <div>
                                    <div class="row">
                                        <div class="my-3 d-none" id="selectContainer2">
                                            <div class="col mb-2">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control border-color-custom"
                                                        id="yinelenen-odeme">
                                                    <label for="yinelenen-odeme">Yinelenen Ödeme</label>
                                                </div>
                                            </div>
                                            <div class="col mb-2">
                                                <div class="form-floating">
                                                    <select class="form-select border-color-custom" id="floatingSelect"
                                                        aria-label="Floating label select example">
                                                        <option selected>Günlük</option>
                                                        <option value="1">2</option>
                                                        <option value="2">3</option>
                                                    </select>
                                                    <label for="floatingSelect">Sipariş Döngü
                                                        Sıklığı</label>
                                                </div>
                                            </div>
                                            <div class="col mb-2">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control border-color-custom"
                                                        id="siparis-dongu-araligi">
                                                    <label for="siparis-dongu-araligi">Sipariş Döngü
                                                        Aralığı</label>
                                                </div>
                                            </div>
                                            <div class="col mb-2">
                                                <div class="form-floating mb-3">
                                                    <input type="text" class="form-control border-color-custom"
                                                        id="yenilenen-web">
                                                    <label for="yenilenen-web">Yenilenen Web Kancası
                                                        Anahtar Adı</label>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                                <div class="my-3 d-none" id="selectContainer2">
                                    <select class="form-select border-color-custom">
                                        <option value="" selected>Ödeme Aralığını Seçin</option>
                                        <option value="haftalık">Haftalık</option>
                                        <option value="aylık">Aylık</option>
                                        <option value="yıllık">Yıllık</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-12  mt-lg-4 my-lg-0 my-2">
                                <div class="form-check form-switch ">
                                    <input class="form-check-input border-color-custom" type="checkbox" role="switch"
                                        id="on-provizyon">
                                    <label class="form-check-label" for="on-provizyon">Ön
                                        Provizyon</label>
                                </div>
                            </div>
                            <div class="col-lg-3 my-2">
                                <div class="form-floating">
                                    <input type="file" class=" form-control border-color-custom" id="file-select">
                                    <input type="file" id="download4" style=" display: none;">
                                    <label for="file-select">Ürün Adı</label>
                                </div>
                            </div>
                            <div class="row align-items-end justify-content-lg-end justify-content-center  m-0 p-0 mt-3">
                                <div class="col-lg-2 col-12 mb-2  ">
                                    <button class="btn btn-primary py-3 w-100 w-md-auto fw-500">Ödeme
                                        Linki
                                        Oluştur</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>

                <div class="card__container-all-page mt-4 p-3 border-color-custom">
                    <div class="col-12 mt-lg-4 mt-3">
                        <h5 class="mb-4">Ödeme Linki Detayları</h5>
                        <table id="myTable" class="display ">
                            <thead>
                                <tr>
                                    <th class="fs-12 text-start">Eylemler</th>
                                    <th class="fs-12 text-start">Id</th>
                                    <th class="fs-12 text-start">Durum</th>
                                    <th class="fs-12 text-start">Ödeme Link Tipi</th>
                                    <th class="fs-12 text-start">Oluşturulma Zamanı</th>
                                    <th class="fs-12 text-start">Son Kullanım Tarihi</th>
                                    <th class="fs-12 text-start">Tutar</th>
                                    <th class="fs-12 text-start">Kopyala</th>
                                    <th class="fs-12 text-start">Ürün Açıklaması</th>
                                    <th class="fs-12 text-start">Telefon</th>
                                    <th class="fs-12 text-start">E-Posta</th>
                                    <th class="fs-12 text-start">Maks. Kullanım Sayısı</th>
                                    <th class="fs-12 text-start">Kullanım Sayısı</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="bg-none">
                                        <div class="d-flex align-items-center gap-2">
                                            <button type="button" class="btn border-0 p-0 m-0" data-bs-toggle="modal"
                                                data-bs-target="#editmodal">
                                                <i class="ri-edit-box-line fs-20 text-custom-color"></i>
                                            </button>
                                            <div class="modal fade" id="editmodal" tabindex="-1"
                                                aria-labelledby="editmodalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h1 class="modal-title fs-5" id="editmodalLabel">Düzenle</h1>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            ...
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">Close</button>
                                                            <button type="button" class="btn btn-primary">Save
                                                                changes</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn border-0 p-0 m-0" data-bs-toggle="modal"
                                                data-bs-target="#detailModal">
                                                <i class="ri-article-line fs-20 text-custom-color"></i>
                                            </button>
                                            <div class="modal fade" id="detailModal" tabindex="-1"
                                                aria-labelledby="detailModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h1 class="modal-title fs-5" id="detailModalLabel">Detaylar
                                                            </h1>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            ...
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">Close</button>
                                                            <button type="button" class="btn btn-primary">Save
                                                                changes</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn border-0 p-0 m-0" data-bs-toggle="modal"
                                                data-bs-target="#trashModal">
                                                <i class="ri-delete-bin-line fs-20 text-custom-color"></i>
                                            </button>
                                            <div class="modal fade" id="trashModal" tabindex="-1"
                                                aria-labelledby="trashModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h1 class="modal-title fs-5" id="trashModalLabel">Sil</h1>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            ...
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">Close</button>
                                                            <button type="button" class="btn btn-primary">Save
                                                                changes</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </td>
                                    <td class="bg-none fs-14">15981</td>
                                    <td class="bg-none ">
                                        <span class="text-white bg-success rounded p-2">Aktif</span>
                                        <span class="text-white bg-danger rounded p-2">Pasif</span>
                                    </td>
                                    <td class="bg-none">Tek Sayfa Ödeme</td>
                                    <td class="bg-none">27.11.2024 - 13:37</td>
                                    <td class="bg-none">27.11.2024 - 13:37</td>
                                    <td class="bg-none">1.00₺</td>
                                    <td class="bg-none"><button></button></td>
                                    <td class="bg-none">Lorem, ipsum dolor.</td>
                                    <td class="bg-none">+9005322192345</td>
                                    <td class="bg-none">burakalbayrk@gmail.com</td>
                                    <td class="bg-none">2</td>
                                    <td class="bg-none">-</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </main>

@endsection