@extends('admin.dashboard.layout', ['title' => 'Coupons'])
@section('content')
    <main class="body-wrapper">
        <div class="page-wrapper">
            <!-- Page-Title -->
            <div class="pt-3 mb-3 row justify-content-between align-items-center gy-4">
                <div class="col-md-4 col-12">
                    <h1 class="m-0">Coupons</h1>
                </div>
                <div class="col-md-8 col-12">
                    <div class="flex-wrap gap-2 d-flex justify-content-start justify-content-md-end">
                        <!-- search-input -->
                        <div class="field flex-sm-100">
                            <div class="input-prepend">
                                <span class="iconify" data-icon="mdi:search"></span>
                                <input type="text" id="search" name="search" placeholder="Search by Coupon title,Coupon code"
                                    class="form-control">
                            </div>
                        </div>
                        @include('admin.coupon.filter')
                        <a href="{{ route('coupon.create') }}" class="btn btn-secondary with-icon formDataCreate">Create
                            Coupon
                            <span class="iconify" data-icon="mdi:plus-circle-outline" data-inline="false"></span></a>
                    </div>
                </div>
            </div>
            <!-- Inner-wrapper -->
            <x-admin.table>
                <x-slot:head>
                    <th>
                        <div class="heading">
                            <h6>Coupon Title
                                <x-admin.sort-icon order="asc" orderBy="title" />
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Coupon Code</h6>
                            <x-admin.sort-icon order="asc" orderBy="code" />
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Coupon Type</h6>
                            <x-admin.sort-icon order="asc" orderBy="type" />
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Coupon Value</h6>
                            <x-admin.sort-icon order="asc" orderBy="value" />
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Start Date</h6>
                            <x-admin.sort-icon order="asc" orderBy="start_date" />
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>End Date</h6>
                            <x-admin.sort-icon order="asc" orderBy="end_date" />
                        </div>
                    </th>
                    <th>
                        <div class="heading">
                            <h6>Status</h6>
                            <x-admin.sort-icon order="asc" orderBy="status" />
                        </div>
                    </th>
                    <th>
                        Created At
                        <x-admin.sort-icon order-by="created_at" order="asc" />
                    </th>
                </x-slot:head>
            </x-admin.table>
    </main>
@endsection

@section('scripts')
    <script src="{{ asset('admin/assets/js/view-scripts/common.js') }}"></script>
    <script src="{{ asset('admin/assets/js/view-scripts/coupons.js') }}"></script>
@endsection