@extends('master', ['title' => __('dashboard.products')])

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h4>{{ __('dashboard.all_products') }}</h4>
                <a href="{{ route('products.create') }}" class="btn btn-primary">
                    <i data-feather="plus"></i> {{ __('dashboard.add_product') }}
                </a>
            </div>

            <div class="card-body">
                <table id="products-table" class="table table-bordered table-hover text-center align-middle">
                    <thead>
                        <tr>
                            <th class="text-center">{{ __('dashboard.id') }}</th>
                            <th class="text-center">{{ __('dashboard.image') }}</th>
                            <th class="text-center">{{ __('dashboard.name') }}</th>
                            <th class="text-center">{{ __('dashboard.price') }}</th>
                            <th class="text-center">{{ __('dashboard.stock') }}</th>
                            <th class="text-center">{{ __('dashboard.category') }}</th>
                            <th class="text-center">{{ __('dashboard.brand') }}</th>
                            <!-- <th class="text-center">{{ __('dashboard.status') }}</th> -->
                            <th class="text-center">{{ __('dashboard.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($products as $product)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    @if ($product->images->first())
                                        <img src="{{ getPath('products', $product->id, $product->images->first()->path) }}"
                                            width="60" class="rounded">
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>{{ $product->getTranslation('name', app()->getLocale()) }}</td>
                                <td><span class="badge bg-success">{{ $product->price }}</span></td>
                                <td><span class="badge bg-info">{{ $product->stock }}</span></td>
                                <td>{{ $product->category?->getTranslation('name', app()->getLocale()) }}</td>
                                <td>{{ $product->brand?->getTranslation('name', app()->getLocale()) }}</td>
                                <!-- <td>
                                    <div class="form-check form-switch d-flex justify-content-center">
                                        <input class="form-check-input toggle-status" type="checkbox"
                                            data-id="{{ $product->id }}" {{ $product->is_active ? 'checked' : '' }}>
                                    </div>
                                </td> -->
                                <td>
                                    <a href="{{ route('products.show', $product->id) }}" class="btn btn-info btn-sm">
                                        <i class="fas fa-eye"></i>
                                    </a>

                                    <a href="{{ route('products.edit', $product->id) }}" class="btn btn-warning btn-sm">
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    <form id="delete-form-{{ $product->id }}"
                                        action="{{ route('products.destroy', $product->id) }}" method="POST"
                                        style="display:inline-block;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-danger btn-sm" id="confirm-delete-text"
                                            data-form-id="delete-form-{{ $product->id }}" title="{{ __('dashboard.delete') }}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9">{{ __('dashboard.no_products') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="mt-2">
                    {{ $products->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    @if ($products->count())
        <script>
            $(document).ready(function () {
                $('#products-table').DataTable({
                    "paging": false,
                    "info": false,
                    "language": {
                        "search": "{{ __('dashboard.search') }}"
                    }
                });

                $('.toggle-status').change(function () {
                    let id = $(this).data('id');
                    $.ajax({
                        url: "{{ url('/admin/products') }}/" + id + "/toggle-status",
                        type: 'PATCH',
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function (data) {
                            Swal.fire({
                                title: "{{ __('dashboard.success') }}",
                                text: data.message,
                                icon: "success",
                                timer: 1500,
                                showConfirmButton: false
                            });
                        },
                        error: function () {
                            Swal.fire("{{ __('dashboard.error') }}",
                                "{{ __('dashboard.error_occurred') }}", "error");
                        }
                    });
                });

            });
        </script>
    @endif
@endpush