@extends('layouts.layout-2')

@section('content')
    @include('admin.inventory.partials.wawi-ui')
    <div class="wawi-page">
        <div class="wawi-page-head">
            <div>
                <h1 class="wawi-page-head__title">{{ __('Lieferanten') }}</h1>
                <p class="wawi-page-head__subtitle">{{ __('Lieferanten, Kategorien und Bestellkanäle') }}</p>
            </div>
            <div class="wawi-page-head__actions">
                <a href="{{ route('admin.inventory.suppliers.create') }}" class="btn btn-sm btn-primary">
                    <span class="fas fa-plus mr-1"></span>{{ __('Neu anlegen') }}
                </a>
            </div>
        </div>
    <div class="wawi-card">
        <div class="card-datatable table-responsive p-2">
            <table class="datatables-style table wawi-table">
                <thead>
                <tr>
                    <th style="max-width: 60px;">&nbsp;</th>
                    <th>{{ __('Name') }}</th>
                    <th>{{ __('Land') }}</th>
                    <th>{{ __('Kategorien') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @foreach($values as $value)
                    <tr>
                        <td class="text-nowrap">
                            <button type="button" class="btn icon-btn btn-sm btn-info js-show-supplier"
                                data-url="{{ route('admin.inventory.suppliers.show', $value) }}"
                                data-name="{{ $value->name }}" title="{{ __('Ansicht') }}">
                                <span class="far fa-eye"></span>
                            </button>
                            <a href="{{ route('admin.inventory.suppliers.edit', $value) }}" class="btn icon-btn btn-sm btn-primary" title="{{ __('Bearbeiten') }}">
                                <span class="far fa-edit"></span>
                            </a>
                        </td>
                        <td>{{ $value->name }}</td>
                        <td>{{ $value->country?->de ?? '—' }}</td>
                        <td>
                            @foreach($value->supplierCategories as $cat)
                                <span class="badge badge-secondary">{{ $cat->name }}</span>
                            @endforeach
                        </td>
                        <td data-sort="{{ $value->active ? 1 : 0 }}">
                            @if($value->active)
                                <span class="wawi-pill wawi-pill--ok">{{ __('Aktiv') }}</span>
                            @else
                                <span class="wawi-pill wawi-pill--danger">{{ __('Inaktiv') }}</span>
                            @endif
                        </td>
                        <td>
                            <form action="{{ route('admin.inventory.suppliers.destroy', $value) }}" method="post" class="d-inline"
                                  onsubmit="return confirm('{{ __('Really delete entry?') }}');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-link text-danger p-0"><i class="far fa-trash-alt"></i></button>
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    </div>
    <div class="modal fade" id="supplierShowModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Lieferant') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="supplierShowBody">
                    <div class="text-center text-muted py-4">{{ __('Lädt …') }}</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('.datatables-style').dataTable({
                "bLengthChange": false,
                "iDisplayLength": 100,
                "order": [[1, "asc"]],
                "language": {"url": "/js/German.json"}
            });

            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var $modal = $('#supplierShowModal');
            var $body = $('#supplierShowBody');

            function loadDetails(url, method) {
                $.ajax({
                    url: url,
                    method: method || 'GET',
                    headers: {'X-CSRF-TOKEN': csrfToken},
                    data: method && method !== 'GET' ? arguments[2] : undefined
                }).done(function (html) {
                    $body.html(html);
                }).fail(function () {
                    $body.html('<div class="alert alert-danger mb-0">{{ __('Fehler beim Laden.') }}</div>');
                });
            }

            $(document).on('click', '.js-show-supplier', function () {
                $modal.find('.modal-title').text($(this).data('name'));
                $body.html('<div class="text-center text-muted py-4">{{ __('Lädt …') }}</div>');
                loadDetails($(this).data('url'), 'GET');
                $modal.modal('show');
            });

            $(document).on('click', '.js-attach-ingredient, .js-attach-packaging', function () {
                var $btn = $(this);
                var value = $($btn.data('select')).val();
                if (!value) {
                    return;
                }
                var payload = $btn.hasClass('js-attach-ingredient')
                    ? {ingredient_id: value}
                    : {packaging_item_id: value};
                loadDetails($btn.data('url'), 'POST', payload);
            });

            $(document).on('click', '.js-detach-ingredient, .js-detach-packaging', function () {
                loadDetails($(this).data('url'), 'DELETE');
            });
        });
    </script>
@endsection