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

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

        <div class="card-body">
            <table id="brands-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.status') }}</th> -->
                        <th class="text-center">{{ __('dashboard.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($brands as $brand)
                        <tr>
                            <td class="text-center">{{ $loop->iteration }}</td>
                            <td class="text-center">
                                @if ($brand->image)
                                    <img src="{{ getPath('brands', $brand->id, $brand->image->path) }}"
                                        width="80" class="rounded">
                                @else
                                    —
                                @endif
                            </td>
                            <td class="text-center">{{ $brand->getTranslation('name', app()->getLocale()) }}</td>
                            <!-- <td class="text-center d-flex justify-content-center align-items-center">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input toggle-status" type="checkbox"
                                            data-id="{{ $brand->id }}" {{ $brand->is_active ? 'checked' : '' }}>
                                    </div>
                                </td> -->
                            <td>
                                <a href="{{ route('brands.edit', $brand->id) }}" class="btn btn-warning btn-sm">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form id="delete-form-{{ $brand->id }}"
                                        action="{{ route('brands.destroy', $brand->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-{{ $brand->id }}"
                                            title="{{ __('dashboard.delete') }}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">{{ __('dashboard.no_brands') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="mt-2">
                {{ $brands->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 ($brands->count())
        <script>
            $(document).ready(function() {
                $('#brands-table').DataTable({
                    "paging": false,
                    "info": false,
                    language: {
                        search: "{{ __('dashboard.search') }}",
                    }
                });

                $('.toggle-status').change(function() {
                    let id = $(this).data('id');
                    let isChecked = $(this).is(':checked') ? 1 : 0;

                    $.ajax({
                        url: "{{ url('/admin/brands') }}/" + id + "/toggle-status",
                        type: 'PATCH',
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(data) {
                            Swal.fire({
                                title: "{{ __('dashboard.success') }}",
                                text: data.message,
                                icon: "success",
                                timer: 2000,
                                showConfirmButton: false
                            });
                        },
                        error: function() {
                            Swal.fire("{{ __('dashboard.error') }}",
                                "{{ __('dashboard.error_occurred') }}", "error");
                        }
                    });
                });
            });
        </script>
    @endif
@endpush