@extends('dashboard.admin.layouts.master')
@section('content')
    <section class="section">
        <div class="section-header">
            <h1>{{ $title }}</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('admin.dashboard') }}">Dashboard</a></div>
                <div class="breadcrumb-item">{{ $title }}</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>{{ $title }}</h4>
                            <div class="card-header-action">
                                <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                                    <i class="fa fa-plus" aria-hidden="true"></i> New
                                </a>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped" id="table-1">
                                    <thead>
                                        <tr>
                                            <th>
                                                #
                                            </th>
                                            <th>Name</th>
                                            <th>Image</th>
                                            <th>Category</th>
                                            <th>Quantity</th>
                                            <th>Price</th>
                                            <th>Type</th>
                                            <th>Status</th>
                                            <th width="150">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($products as $key => $product)
                                            <tr>
                                                <td>
                                                    {{ $key + 1 }}
                                                </td>
                                                <td>
                                                    {{ $product->name }}
                                                </td>
                                                <td>
                                                    <img width="100"
                                                        src="{{ asset('uploads/products/' . $product->image) }}"
                                                        alt="{{ $product->name }}">
                                                </td>
                                                <td>
                                                    {{ $product->productCategory->name }}
                                                </td>
                                                <td>
                                                    {{ $product->quantity }}
                                                </td>
                                                <td>
                                                    {{ formatAmount($product->price, $settings) }}
                                                </td>
                                                <td>
                                                    @if ($product->product_type == 'new_arrival')
                                                        <i class="badge badge-success">New Arrival</i>
                                                    @elseif($product->product_type == 'featured')
                                                        <i class="badge badge-warning">Featured</i>
                                                    @elseif($product->product_type == 'top_product')
                                                        <i class="badge badge-info">Top Product</i>
                                                    @elseif($product->product_type == 'best_product')
                                                        <i class="badge badge-secondary">Best Product</i>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($product->status == 1)
                                                        <label class="custom-switch mt-2">
                                                            <input type="checkbox" checked name="custom-switch-checkbox"
                                                                data-id="{{ $product->id }}"
                                                                class="custom-switch-input change-status">
                                                            <span class="custom-switch-indicator"></span>
                                                        </label>
                                                    @else
                                                        <label class="custom-switch mt-2">
                                                            <input type="checkbox" name="custom-switch-checkbox"
                                                                data-id="{{ $product->id }}"
                                                                class="custom-switch-input change-status">
                                                            <span class="custom-switch-indicator"></span>
                                                        </label>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="dropdown dropleft d-inline">
                                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                                            id="dropdownMenuButton2" data-toggle="dropdown"
                                                            aria-haspopup="true" aria-expanded="false">
                                                            <i class="fas fa-cog"></i>
                                                        </button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item has-icon"
                                                                href="{{ route('admin.product-image-galleries.index', ['product' => $product->id]) }}"><i
                                                                    class="far fa-images"></i> Image Gallery</a>
                                                        </div>
                                                    </div>
                                                    <a href="{{ route('admin.products.edit', $product->id) }}"
                                                        class="btn btn-primary"><i class="fa fa-edit"
                                                            aria-hidden="true"></i></a>
                                                    <a href="{{ route('admin.products.destroy', $product->id) }}"
                                                        class="btn btn-danger delete-item"><i class="fa fa-trash"
                                                            aria-hidden="true"></i></a>
                                                </td>
                                            </tr>
                                        @empty
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    @push('scripts')
        <script>
            $(document).ready(function() {

                $('body').on('click', '.change-status', function() {

                    let isChecked = $(this).is(':checked');

                    let id = $(this).data('id');

                    $.ajax({
                        url: "{{ route('admin.products.change.status') }}",
                        method: 'PUT',
                        data: {
                            status: isChecked,
                            id: id
                        },

                        success: function(data) {
                            toastr.success(data.message);
                        },
                        error: function(xr, status, error) {
                            console.log(error);
                        }
                    })
                })
            })
        </script>
    @endpush
@endsection