@extends('front.layouts.app')
@section('content')

<div class="my-account-body my-orders-page">
    <section class="title-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <h2>{!! $title !!} ({!! count($orders) !!})</h2>
                </div>
            </div>
        </div>
    </section>
    <div class="container">
        <form class="myaccount-form myorder-form">
            <div class="row gx-sm-2">
                <div class="col-xxl-3 col-xl-6 col-sm-4 mb-3 mb-xxl-0">
                    <label class="form-label">Item Search</label>
                    <input type="text" name="kwd" id="kwd" value="{!! request()->get('kwd') !!}" class="form-control bg-white border" placeholder="e.g Caramel Macchiato">
                </div>
                <div class="col-xxl-3 col-xl-6 col-sm-4 mb-3 mb-xxl-0">
                    <label class="form-label">Created From</label>
                    <div class="calender-input">
                        <input type="text" name="start_at" id="start_at" value="{!! request()->get('start_at') !!}" class="form-control bg-white border" placeholder="e.g 12-15-2022">
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6 col-sm-4 mb-3 mb-xxl-0">
                    <label class="form-label">Created To</label>
                    <div class="calender-input">
                        <input type="text" name="end_at" id="end_at" value="{!! request()->get('end_at') !!}" class="form-control bg-white border" placeholder="e.g 12-31-2022">
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6 col-md-12 text-center text-sm-end text-xl-start">
                    <label class="form-label d-none d-xl-block">&nbsp;</label>
                    <button type="submit" class="btn btn-theme-blue"><i class="fa fa-search mr-1"></i> Search</button>
                    <button type="button" onclick="javascript:$('.loader').show();window.location.href='{!! route('myorders') !!}'" class="btn btn-danger"><i class="fa fa-close mr-1"></i> Reset</button>
                </div>
            </div>
        </form>
        <div class="row mt-4">
            <div class="col-md-12">
                @include('front.user.orders_html')
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
$('input[name=start_at],input[name=end_at]').datepicker({
    dateFormat:'mm-dd-yy',
    changeMonth:true,
    changeYear:true,
});
</script>
@endsection