@extends('layouts.app')

@section('contents')
    <style>
        #sidebar-nav{

            font-family: "Poppins Medium";
            background: #4b4b4b !important;
        }
        .list-group-item{
            color: white !important;
            background: #4b4b4b !important;
            border: 1px solid rgb(255 255 255 / 13%);
        }

        .list-group-item.active {
            /* z-index: 2; */
            color: #fff;
            border: 0px !important;
            border-color:  #0a0a0a;
            background: #fab900 !important;
        }
        .card-header{
            background: white !important;
            border-bottom: 0px solid rgba(0,0,0,.125);

        }
        .page-item.active .page-link {
            z-index: 3;
            color: #fff;
            background-color: #fab900;
            border-color: #fab900;
        }
        .page-link {
            position: relative;
            display: block;
            color: #4b4b4b;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #dee2e6;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }

        tr{

            vertical-align: baseline !important;
        }


        .app {
            width: 100%;
            text-align: center;
            margin: 0 auto;
        }
        .app .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .item {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
        }
        .radio {
            display: none;
        }
        .radio ~ span {
            font-size: 2rem;
            filter: grayscale(100);
            cursor: pointer;
            transition: 0.3s;
        }

        .radio:checked ~ span {
            filter: grayscale(0);
            font-size: 3rem;
        }
        h1{

            font-size: 16px !important;
        }.heading{
             font-size: 22px !important;

         }
    </style>
    <div class="container ">
        <div class="row flex-nowrap">
            @include('layouts.common.left_bar')
            <div class="col-md-9  pt-2  ">
                <div class="page-header pt-3 mb-4">
                    <h2>Order History</h2>
                </div>


                <form class="row gx-3 gy-2 align-items-center" method="get" action="">
@csrf
                    <div class="col-sm-4">
                        <label class="visually-hidden" for="specificSizeInputName">Name</label>
                        <input type="text" class="form-control form-control-sm " name="order_number" id="specificSizeInputName" placeholder="Order Number">
                    </div>
                    <div class="col-sm-4">
                        <label class="visually-hidden" for="specificSizeInputName">Name</label>
                        <input type="date" class="form-control form-control-sm " name="start_date" id="specificSizeInputName" placeholder="Jane Doe">
                    </div>
                    <div class="col-sm-3">
                        <label class="visually-hidden" for="specificSizeInputName">Name</label>
                        <input type="date" class="form-control form-control-sm " name="end_date" id="specificSizeInputName" placeholder="Jane Doe">
                    </div>

                    <div class="col-sm-1">
                        <button type="submit" class="btn  btn-sm  btn-warning ">Submit</button>
                    </div>
                </form>
<br>
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                    <br>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                    <br>
                @endif

                <table class="table rounded">
                    <thead>
                    <tr class="table-dark ">
                        <th scope="col">#</th>

                        <th scope="col">Order Number</th>
                        <th scope="col">Order Date</th>
                        <th scope="col">Amount </th>
                        <th scope="col">Rewards </th>
                        <th scope="col">Status</th>
                        <th scope="col">Action</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>

                </table>