@extends('admin.layouts.app')

@section('title', 'İçindekiler')
@section('header', 'İçindekiler')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="card-tools">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#allergenModal" id="createAllergenBtn">
                <i class="fas fa-plus mr-1"></i> Yeni
            </button>
        </div>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover text-nowrap">
            <thead>
                <tr>
                    <th>İçindekiler Bilgisi</th>
                    <th>Ürün Sayısı</th>
                    <th>Durum</th>
                    <th style="width: 120px"></th>
                </tr>
            </thead>
            <tbody id="sortable">
                @forelse($allergens as $allergen)
                    <tr data-id="{{ $allergen->id }}" class="{{ !App\View\Components\Helper::isMobile() ? 'cursor-move' : '' }}">
                        <td>
                            <div class="font-weight-bold">{{ $allergen->name }}</div>
                        </td>
                        <td>
                            <span class="badge badge-info">{{ $allergen->products_count }} ürün</span>
                        </td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input"
                                    id="status_{{ $allergen->id }}"
                                    {{ $allergen->is_active ? 'checked' : '' }}
                                    data-url="{{ route('admin.allergens.toggle-status', $allergen) }}">
                                <label class="custom-control-label" for="status_{{ $allergen->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-info btn-sm mr-2 edit-allergen" 
                                        data-id="{{ $allergen->id }}"
                                        data-name="{{ $allergen->name }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <form action="{{ route('admin.allergens.destroy', $allergen) }}"
                                      method="POST"
                                      class="d-inline delete-form"
                                      id="delete-form-{{ $allergen->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm"
                                            onclick="confirmDelete('delete-form-{{ $allergen->id }}', 'Bu içindekiler bilgisini silmek istediğinize emin misiniz?', 'Bu işlem geri alınamaz!')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center">Henüz alerjen bulunmuyor</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($allergens->hasPages())
        <div class="card-footer clearfix">
            <div class="float-right">
                {{ $allergens->onEachSide(1)->links('admin.layouts.pagination') }}
            </div>
            <div class="float-left text-muted">
                {{ $allergens->total() }} sonuçtan {{ $allergens->firstItem() }} - {{ $allergens->lastItem() }} arası gösteriliyor
            </div>
        </div>
    @endif
</div>

<!-- Allergen Modal -->
<div class="modal fade" id="allergenModal" tabindex="-1" role="dialog" aria-labelledby="allergenModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="allergenModalLabel">Yeni</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="allergenForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Adı <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <div class="invalid-feedback" id="nameError"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                    <button type="submit" class="btn btn-primary">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
    .page-item.active .page-link {
        background-color: #17a2b8;
        border-color: #17a2b8;
    }
    .page-link {
        color: #17a2b8;
    }
    .cursor-move {
        cursor: move;
    }
    tr.sortable-ghost {
        background-color: #f8f9fa;
        opacity: 0.5;
    }
    .gap-2 > * {
        margin-right: 0.5rem;
    }
    .gap-2 > *:last-child {
        margin-right: 0;
    }
    .delete-form {
        margin: 0;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Modal işlemleri
    const allergenModal = $('#allergenModal');
    const allergenForm = $('#allergenForm');
    
    // Modal kapandığında formu sıfırla
    allergenModal.on('hidden.bs.modal', function () {
        allergenForm.trigger('reset');
        allergenForm.attr('method', 'POST');
        allergenForm.attr('action', '{{ route("admin.allergens.store") }}');
        $('.invalid-feedback').hide();
        $('.is-invalid').removeClass('is-invalid');
        $('#allergenModalLabel').text('Yeni');
    });

    // Yeni içindekiler butonu tıklandığında
    $('#createAllergenBtn').on('click', function() {
        allergenForm.attr('method', 'POST');
        allergenForm.attr('action', '{{ route("admin.allergens.store") }}');
        $('#allergenModalLabel').text('Yeni');
        allergenModal.modal('show');
    });

    // Düzenle butonu tıklandığında
    $('.edit-allergen').on('click', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        
        allergenForm.attr('method', 'POST');
        allergenForm.attr('action', `/admin/allergens/${id}`);
        allergenForm.append('<input type="hidden" name="_method" value="PUT">');
        $('#allergenModalLabel').text('Düzenle');
        $('#name').val(name);
        allergenModal.modal('show');
    });

    // Form submit
    allergenForm.on('submit', function(e) {
        e.preventDefault();
        const form = $(this);
        const url = form.attr('action');
        const method = form.attr('method');

        $.ajax({
            url: url,
            method: method,
            data: form.serialize(),
            success: function(response) {
                allergenModal.modal('hide');
                window.location.reload();
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(field => {
                        $(`#${field}`).addClass('is-invalid');
                        $(`#${field}Error`).text(errors[field][0]).show();
                    });
                } else {
                    toastr.error('Bir hata oluştu. Lütfen tekrar deneyin.');
                }
            }
        });
    });

    // Sıralama için Sortable.js
    @if(!App\View\Components\Helper::isMobile())
    var el = document.getElementById('sortable');
    var sortable = new Sortable(el, {
        animation: 150,
        ghostClass: 'sortable-ghost',
        onEnd: function(evt) {
            var order = [];
            document.querySelectorAll('#sortable tr').forEach(function(el, index) {
                order.push({
                    id: el.dataset.id,
                    order: index + 1
                });
            });

            fetch('{{ route("admin.allergens.update-order-bulk") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ order: order })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Sıralama güncellendi');
                } else {
                    toastr.error('Sıralama güncellenirken bir hata oluştu');
                }
            })
            .catch(error => {
                toastr.error('Sıralama güncellenirken bir hata oluştu');
            });
        }
    });
    @endif

    // Durum değiştirme için AJAX
    document.querySelectorAll('.custom-control-input').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            fetch(this.dataset.url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    _method: 'PATCH'
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Durum güncellendi');
                } else {
                    toastr.error('Durum güncellenirken bir hata oluştu');
                    this.checked = !this.checked;
                }
            })
            .catch(error => {
                toastr.error('Durum güncellenirken bir hata oluştu');
                this.checked = !this.checked;
            });
        });
    });
});
</script>
@endpush
@endsection