@include('admin.includes.header')
@include('admin.includes.sidebar')

<!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container">
        <div class="nxl-content">
            <!-- [ page-header ] start -->
            <div class="page-header">
                <div class="page-header-left d-flex align-items-center">
                    <div class="page-header-title">
                        <h5 class="m-b-10">Variants List</h5>
                    </div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                        <li class="breadcrumb-item">Tables</li>
                    </ul>
                </div>
                <div class="page-header-right ms-auto">
                    <div class="page-header-right-items">
                        <div class="d-flex d-md-none">
                            <a href="javascript:void(0)" class="page-header-right-close-toggle">
                                <i class="feather-arrow-left me-2"></i>
                                <span>Back</span>
                            </a>
                        </div>
                        <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                            <div class="dropdown filter-dropdown">
                                {{-- <a class="btn btn-md btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10" data-bs-auto-close="outside">
                                    <i class="feather-filter me-2"></i>
                                    <span>Filter</span>
                                </a> --}}
                                <div class="dropdown-menu dropdown-menu-end">
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Role" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Role">Role</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Team" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Team">Team</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Email" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Email">Email</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Member" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Member">Member</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Recommendation" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Recommendation">Recommendation</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-divider"></div>
                                    <a href="javascript:void(0);" class="dropdown-item">
                                        <i class="feather-plus me-3"></i>
                                        <span>Create New</span>
                                    </a>
                                    <a href="javascript:void(0);" class="dropdown-item">
                                        <i class="feather-filter me-3"></i>
                                        <span>Manage Filter</span>
                                    </a>
                                </div>
                            </div>
                            <a href="{{url('admin/variants')}}" class="btn btn-md btn-primary">
                                <i class="feather-plus me-2"></i>
                                <span>Add Variant</span>
                            </a>
                        </div>
                    </div>
                    <div class="d-md-none d-flex align-items-center">
                        <a href="javascript:void(0)" class="page-header-right-open-toggle">
                            <i class="feather-align-right fs-20"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- [ page-header ] end -->
            <!-- [ Main Content ] start -->
            <div class="main-content">
                <div class="row">
                    <!-- [Leads] start -->
                    <div class="col-xxl-12">
                        <div class="card stretch stretch-full">
                            <div class="card-header">
                                <h5 class="card-title">Variants</h5>
                                {{-- <div class="card-header-action">
                                    <div class="card-header-btn">
                                        <div data-bs-toggle="tooltip" title="Delete">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-danger" data-bs-toggle="remove"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Refresh">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-warning" data-bs-toggle="refresh"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Maximize/Minimize">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-success" data-bs-toggle="expand"> </a>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <a href="javascript:void(0);" class="avatar-text avatar-sm" data-bs-toggle="dropdown" data-bs-offset="25, 25">
                                            <div data-bs-toggle="tooltip" title="Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-at-sign"></i>New</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-calendar"></i>Event</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-bell"></i>Snoozed</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-trash-2"></i>Deleted</a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-settings"></i>Settings</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-life-buoy"></i>Tips & Tricks</a>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                            <div class="card-body custom-card-action p-0">
                                <div class="table-responsive">
                                    @include('frontend.includes.msg')
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr class="border-b">
                                                <th>Image</th>
                                                <th>Title / ID</th>
                                                <th>Category</th>
                                                <th>Size</th>
                                                <th>Dimensions / Height</th>
                                                <th>Price</th>
                                                <th>Status</th>
                                                <th>Uploaded on</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <form method="GET">
                                                    <td><input value="{{ request('data_id') }}" type="number" name="data_id" placeholder="ID" class="form-control"></td>
                                                    <td>
                                                        @php
                                                        $category=DB::table('products')->get();
                                                        @endphp
                                                        <select name="data_product" class="form-control" >
                                                            <option value="" {{ request('data_product') == '' ? 'selected' : '' }}>All</option>
                                                            @foreach($products as $product)
                                                            <option value="{{$product->id}}" {{ request('data_product') == $product->id ? 'selected' : '' }}>{{$product->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        @php
                                                        $category=DB::table('categories')->get();
                                                        @endphp
                                                        <select name="data_category" class="form-control" >
                                                            <option value="" {{ request('data_category') == '' ? 'selected' : '' }}>All</option>
                                                            @foreach($category as $cat)
                                                            <option value="{{$cat->id}}" {{ request('data_category') == $cat->id ? 'selected' : '' }}>{{$cat->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td></td>
                                                    <td></td>
                                                    <td>
                                                        <input type="number" name="data_price" id="" placeholder="Price" value="{{ request('data_price') }}" class="form-control" />
                                                    </td>
                                                    <td>
                                                        <select name="data_status" class="form-control" >
                                                            <option value="" {{ request('data_status') == '' ? 'selected' : '' }}>All</option>
                                                            <option value="1" {{ request('data_status') == '1' ? 'selected' : '' }}>Active</option>
                                                            <option value="0" {{ request('data_status') == '0' ? 'selected' : '' }}>Inactive</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="text" name="date_range" id="dateRange" placeholder="Date range" value="{{ request('date_range') }}" class="form-control" autocomplete="off" />
                                                    </td>
                                                    <td><button type="submit" class="btn btn-sm btn-primary">Filter</button></td>
                                                </form>
                                            </tr>
                                            @if (!function_exists('formatIndianNumber'))
                                                @php
                                                function formatIndianNumber($number)
                                                {
                                                    $number = (string)$number;
                                                    $lastThree = substr($number, -3);
                                                    $restUnits = substr($number, 0, -3);
                                                    if ($restUnits != '') {
                                                        $lastThree = ',' . $lastThree;
                                                    }
                                                    $formatted = preg_replace("/\B(?=(\d{2})+(?!\d))/", ",", $restUnits) . $lastThree;
                                                    return $formatted;
                                                }
                                                @endphp
                                            @endif
                                            @foreach($variants as $key=>$variant)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            @php
                                                            $images = $variant->product->images ? explode(',', $variant->product->images) : [];
                                                            $firstImage = isset($images[0]) ? $images[0] : 'default.png';
                                                            @endphp
                                                            <img src="{{url('')}}/frontend/custom/uploads/products/{{$firstImage}}" alt="" class="img-fluid">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <a href="{{url('admin/variants?id='.$variant->id)}}">
                                                        <span class="d-block">{{$variant->product->name}} <span class="text-muted text-xs">/ #{{$variant->id}}</span></span>
                                                        <span class="fs-12 d-block fw-normal text-muted">{{$variant->product->description ? Str::limit($variant->product->description, 20) : ''}}</span>
                                                    </a>
                                                </td>
                                                <td>
                                                    @if(isset($variant->product->category->name))
                                                     <span class="badge bg-gray-200 text-dark">{{$variant->product->category->name}}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    {{$variant->size->size}}
                                                </td>
                                                <td>
                                                    @php
                                                    $d_arr=explode(',',$variant->dimensions->dimension)
                                                    @endphp
                                                    {{ $d_arr[0] . '" x ' . $d_arr[1] . '"' }} / {{ $variant->height->height }}" 
                                                </td>
                                                <td>
                                                    @if($variant->product->price)
                                                    <span class="badge bg-primary "><a class="text-white"  >₹ {{formatIndianNumber($variant->price)}}</a></span>
                                                    @else
                                                    <span class="badge bg-gray-200 text-dark">Not provided</span>
                                                    @endif
                                                </td>
                                                <td class="variantStatus" data-id="{{$variant->id}}">
                                                    @if($variant->status == 0)
                                                    <span class="badge bg-soft-success text-danger variantStatusText">Inactive</span>
                                                    @else
                                                    <span class="badge bg-soft-success text-success variantStatusText">Active</span>
                                                    @endif
                                                </td>
                                                <td>{{date("F j, Y", strtotime($variant->created_at))}}</td>
                                                <td class="">
                                                    <a href="{{url('admin/variants?id='.$variant->id)}}"><i class="bi bi-pen mx-1 text-primary"></i></a>
                                                    <a href="{{url('admin/variantsDelete?id='.$variant->id)}}"><i class="bi bi-trash3 text-danger mx-1"></i></a>
                                                </td>
                                                {{-- <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td> --}}
                                            </tr>
                                            @endforeach
                                            {{-- <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/3.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Holmes Cherryman</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">golms.chan@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">New</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-primary text-primary">In Progress </span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/4.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Malanie Hanvey</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">lanie.nveyn@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">Sent</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-success text-success">Completed</span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/5.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Kenneth Hune</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">nneth.une@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">Returning</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-warning text-warning">Not Interested</span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/6.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Valentine Maton</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">alenine.aton@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">Sent</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-success text-success">Completed</span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr> --}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer">
                                {{$variants->appends(request()->all())->links('pagination::bootstrap-5')}}
                                {{-- <ul class="list-unstyled d-flex align-items-center gap-2 mb-0 pagination-common-style">
                                    <li>
                                        <a href="javascript:void(0);"><i class="bi bi-arrow-left"></i></a>
                                    </li>
                                    <li><a href="javascript:void(0);" class="active">1</a></li>
                                    <li><a href="javascript:void(0);">2</a></li>
                                    <li>
                                        <a href="javascript:void(0);"><i class="bi bi-dot"></i></a>
                                    </li>
                                    <li><a href="javascript:void(0);">8</a></li>
                                    <li><a href="javascript:void(0);">9</a></li>
                                    <li>
                                        <a href="javascript:void(0);"><i class="bi bi-arrow-right"></i></a>
                                    </li>
                                </ul> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ Main Content ] end -->
        </div>
        <!-- [ Footer ] start -->
        <footer class="footer">
            <p class="fs-11 text-muted fw-medium text-uppercase mb-0 copyright">
                <span>Copyright ©</span>
                <script>
                    document.write(new Date().getFullYear());
                </script>
            </p>
            <div class="d-flex align-items-center gap-4">
                {{-- <a href="javascript:void(0);" class="fs-11 fw-semibold text-uppercase">Help</a>
                <a href="javascript:void(0);" class="fs-11 fw-semibold text-uppercase">Terms</a>
                <a href="javascript:void(0);" class="fs-11 fw-semibold text-uppercase">Privacy</a> --}}
            </div>
        </footer>
        <!-- [ Footer ] end -->
    </main>
    <!--! ================================================================ !-->
    <!--! [End] Main Content !-->
    <!--! ================================================================ !-->

@include('admin.includes.footer')

<script>
    $(".variantStatus").on("click", function(e) {
        var id=$(this).attr('data-id');
        var currentElement=$(this);
        $.ajax({
            url: "{{url('admin/variantsStatusToggle')}}",
            type: "GET",
            data: {
                "id": id
            },
            success: function(response) {
                if(response.status == 1){
                    currentElement.find(".variantStatusText").text("Active");
                    currentElement.find(".variantStatusText").removeClass("text-danger").addClass("text-success");
                }else{
                    currentElement.find(".variantStatusText").text("Inactive");
                    currentElement.find(".variantStatusText").removeClass("text-success").addClass("text-danger");

                }
            }
        })
    });
    $(function() {
        $('#dateRange').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoUpdateInput: false,
        });

        $('#dateRange').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
        });

        $('#dateRange').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>