@extends('merchant.app')

@section('title', panel_setting_title("Yinelenen Ödemeler"))

@section('content')
    <main class="mt-120  " id="main">
        <h6 class="my-lg-4 my-0 mb-lg-0 ">Yenilenen Ödemeler</h6>
        @include("merchant.Components.statistics")
        <div class="row mt-4 ">
            <div class="col-12 ">
                <!--=============== CARD ===============-->
                <div class="card__container-all-page p-3 border-color-custom ">
                    <div class="my-lg-4 my-0 d-flex justify-content-between align-items-center">
                        <h6 class=" mb-lg-0">Yenilenen Ödemeler</h6>
                        <button class="btn text-color fw-500 border-0" type="button" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Filtrele <i
                                class="ri-equalizer-2-line"></i></button>
                    </div>

                    <div class="row mt-3 align-items-center justify-content-start">
                        <div class="offcanvas offcanvas-end " tabindex="-1" id="offcanvasRight"
                            aria-labelledby="offcanvasRightLabel">
                            <div class="offcanvas-header">
                                <h5 class="offcanvas-title" id="offcanvasRightLabel">Filtrele
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                    aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body">
                                <div class="row">
                                    <div class="col-lg-12 ">
                                        <div class="form-floating mb-3">
                                            <input type="date" class="form-control border-color-custom" id="date">
                                            <label for="date">Tarih</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 mb-3">
                                        <div class="form-floating">
                                            <select class="form-select border-color-custom" id="floatingSelect"
                                                aria-label="Floating label select example">
                                                <option selected>1</option>
                                                <option value="1">2</option>
                                                <option value="2">3</option>
                                            </select>
                                            <label for="floatingSelect">Durum</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 ">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control border-color-custom" id="para-birimi">
                                            <label for="para-birimi">Para Birimi</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 mb-3">
                                        <div class="form-floating ">
                                            <input type="text" class="form-control border-color-custom" id="text">
                                            <label for="text">Ara</label>
                                        </div>
                                    </div>
                                    <div class=" col-6 mb-2">
                                        <button class="btn btn-primary px-4 py-3 w-100 fw-500">Ara</button>
                                    </div>

                                    <div class=" col-6 mb-2 ">
                                        <button class="btn btn-outline-primary px-4 py-3 w-100 fw-500">Temizle</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="row align-items-end justify-content-lg-start justify-content-center  m-0 p-0 ">
                                <div class="col-lg-3 col-12 mb-2  px-0">
                                    <button type="button" data-bs-toggle="modal" data-bs-target="#yenilenen-odeme-modal"
                                        class="fw-500 d-flex align-items-center justify-content-center gap-2  btn btn-primary py-3 w-100 w-md-auto">
                                        <i class="ri-add-circle-line fs-20"></i>Yenilenen Ödeme
                                        Ekle</button>
                                    <div class="modal fade modal-lg" id="yenilenen-odeme-modal" tabindex="-1"
                                        aria-labelledby="yenilenen-odeme-modalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5" id="yenilenen-odeme-modalLabel">Modal
                                                        title</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div>
                                                        <div class="row">
                                                            <div class="col-lg-4 col-12 ">
                                                                <div class="form-floating mb-3">
                                                                    <input type="text"
                                                                        class="form-control border-color-custom"
                                                                        id="tutar">
                                                                    <label for="tutar">Tutar</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-12 mb-3 ">
                                                                <div class="form-floating">
                                                                    <select class="form-select border-color-custom"
                                                                        id="floatingSelect"
                                                                        aria-label="Floating label select example">
                                                                        <option selected>TRY</option>
                                                                        <option value="1">Dolar</option>
                                                                        <option value="2">Euro</option>
                                                                    </select>
                                                                    <label for="floatingSelect">Para
                                                                        Birimi</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-12 ">
                                                                <div class="form-floating mb-3">
                                                                    <input type="text"
                                                                        class="form-control border-color-custom"
                                                                        id="isim-soyisim">
                                                                    <label for="isim-soyisim">İsim
                                                                        Soyisim</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-12 ">
                                                                <div class="form-floating mb-3">
                                                                    <input type="text"
                                                                        class="form-control border-color-custom"
                                                                        id="kimlik-no">
                                                                    <label for="kimlik-no">Kimlik Numarası
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-12 ">
                                                                <div class="form-floating mb-3">
                                                                    <input type="email"
                                                                        class="form-control border-color-custom"
                                                                        id="email">
                                                                    <label for="email">E-Posta
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-12 ">
                                                                <div class="form-floating mb-3">
                                                                    <input type="phone"
                                                                        class="form-control border-color-custom"
                                                                        id="phone">
                                                                    <label for="phone">Telefon Numarası
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12 ">
                                                                <div class="form-floating mb-3">
                                                                    <input type="address"
                                                                        class="form-control border-color-custom"
                                                                        id="address">
                                                                    <label for="address">Adres
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="form-floating">
                                                                    <textarea class="form-control border-color-custom" id="floatingTextarea" style="height: 100px"></textarea>
                                                                    <label for="floatingTextarea">Açıklama</label>
                                                                </div>
                                                            </div>
                                                            <div class=" col-lg-12  my-2 mt-4">
                                                                <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>

                                                                <!-- Başlangıçta gizli select menü -->
                                                                <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-12 my-2">
                                                                <div class=" col-12  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 class="my-3 d-none" id="selectContainer2">
                                                                        <div class="row">

                                                                            <div class="col-lg-6 col-12 ">
                                                                                <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-lg-6 col-12 ">
                                                                                <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-lg-6 col-12 ">
                                                                                <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-lg-6 col-12 ">
                                                                                <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 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>
                                                            <div class="col-lg-12  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-12  my-2">
                                                                <div class="form-check form-switch">
                                                                    <input class="form-check-input border-color-custom"
                                                                        type="checkbox" role="switch" id="uc-d-odeme">
                                                                    <label class="form-check-label" for="uc-d-odeme">3D
                                                                        Ödeme</label>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-primary fw-500">Sonraki</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <p class="mt-3">Tablo Gelecek</p>
                    </div>
                </div>
            </div>

    </main>
@endsection