@extends('merchant.app')

@section('title', panel_setting_title("Raporlar"))

@section('content')
<main class="mt-120  " id="main">
    <h6 class="my-lg-4 my-0 mb-lg-0 ">Raporlar</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">Raporlar</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 ">
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control border-color-custom"
                                            id="islemId">
                                        <label for="islemId">İşlem Id</label>
                                    </div>
                                </div>
                                <div class="col-lg-12 ">
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control border-color-custom"
                                            id="dekontId">
                                        <label for="dekontId">Dekont Id</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">Para Birimi</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">Ödeme Aracı</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="email" class="form-control border-color-custom"
                                            id="eposta">
                                        <label for="eposta">E-Posta</label>
                                    </div>
                                </div>
                                <div class="col-lg-12 ">
                                    <div class="form-floating mb-3">
                                        <input type="phone" class="form-control border-color-custom"
                                            id="phone">
                                        <label for="phone">Telefon</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 class="m-0 p-0">
                        <div
                            class="row align-items-end justify-content-lg-start justify-content-center  m-0 p-0 mt-3">
                            <!-- blokesi çözdürülen işlemler -->
                            <div class="col-lg-3 col-12 mb-2">
                                <button
                                    class="btn btn-primary py-3 fw-500 w-100 w-md-auto text-nowrap ps-1"
                                    type="button" data-bs-toggle="modal"
                                    data-bs-target="#bloke-cozdurulen-islem">
                                    <i class="ri-spam-2-line me-2"></i>Blokesi Çözdürülen İşlemler
                                </button>

                                <div class="modal fade modal-xl" id="bloke-cozdurulen-islem"
                                    tabindex="-1" aria-labelledby="bloke-cozdurulen-islemLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5"
                                                    id="bloke-cozdurulen-islemLabel">
                                                    Blokesi Çözdürülen İşlemler
                                                </h1>
                                                <button type="button" class="btn-close"
                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col">
                                                        <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">
                                                        <div class="form-floating mb-3">
                                                            <input type="text"
                                                                class="form-control border-color-custom"
                                                                id="min-tutar">
                                                            <label for="min-tutar">Minimum Tutar</label>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="form-floating mb-3">
                                                            <input type="text"
                                                                class="form-control border-color-custom"
                                                                id="max-tutar">
                                                            <label for="max-tutar">Maksimum
                                                                Tutar</label>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="form-floating">
                                                            <select
                                                                class="form-select border-color-custom"
                                                                id="floatingSelectCurrency"
                                                                aria-label="Para Birimi Seçimi">
                                                                <option selected>TRY</option>
                                                                <option value="1">Dolar</option>
                                                                <option value="2">Euro</option>
                                                            </select>
                                                            <label for="floatingSelectCurrency">Para
                                                                Birimi</label>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="form-floating">
                                                            <select
                                                                class="form-select border-color-custom"
                                                                id="floatingSelectStatus"
                                                                aria-label="Durum Seçimi">
                                                                <option>1</option>
                                                                <option value="1">2</option>
                                                                <option value="2">3</option>
                                                            </select>
                                                            <label
                                                                for="floatingSelectStatus">Durum</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr>
                                                <p class="mt-3">Tablo Gelecek</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary"
                                                    data-bs-dismiss="modal">Kapat</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- işlem dökümü -->
                            <div class="col-lg-2 col-12 mb-2  ">
                                <a href="{{route("merchant.dashboard.process-casting-detail")}}"
                                    class="border-0 box-purple  fs-14  fw-500 text-decoration-none py-3 w-100 w-md-auto text-nowrap ps-1 btn"><i
                                        class="ri-file-chart-line pe-2"></i>İşlem
                                    Dökümü</a>
                            </div>
                        </div>

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

</main>
@endsection