@extends('admin.layouts.app')

@section('title', 'Ürünler')
@section('header', 'Ürünler')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="card-tools">
            <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus mr-1"></i> Yeni Ürün
            </a>
        </div>
    </div>

    <!-- Filtreler -->
    <div class="card-body">
        <form action="{{ route('admin.products.index') }}" method="GET">
            <div class="row">
                <div class="col-md">
                    <div class="form-group">
                        <label for="search">Arama</label>
                        <input type="text" class="form-control" id="search" name="search"
                            value="{{ request('search') }}" placeholder="Ürün adı, açıklama...">
                    </div>
                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="category">Kategori</label>
                        <select class="form-control" id="category" name="category">
                            <option value="">Tüm Kategoriler</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="is_available">Durum</label>
                        <select class="form-control" id="is_available" name="is_available">
                            <option value="">Tüm Durumlar</option>
                            <option value="1" {{ request('is_available') === '1' ? 'selected' : '' }}>Aktif</option>
                            <option value="0" {{ request('is_available') === '0' ? 'selected' : '' }}>Pasif</option>
                        </select>
                    </div>
                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="is_featured">Öne Çıkan</label>
                        <select class="form-control" id="is_featured" name="is_featured">
                            <option value="">Tümü</option>
                            <option value="1" {{ request('is_featured') === '1' ? 'selected' : '' }}>Öne Çıkanlar</option>
                            <option value="0" {{ request('is_featured') === '0' ? 'selected' : '' }}>Öne Çıkmayanlar</option>
                        </select>
                    </div>
                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="is_online_orderable">Online Sipariş</label>
                        <select class="form-control" id="is_online_orderable" name="is_online_orderable">
                            <option value="">Tümü</option>
                            <option value="1" {{ request('is_online_orderable') === '1' ? 'selected' : '' }}>Açık</option>
                            <option value="0" {{ request('is_online_orderable') === '0' ? 'selected' : '' }}>Kapalı</option>
                        </select>
                    </div>
                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="has_free_delivery">Ücretsiz Teslimat</label>
                        <select class="form-control" id="has_free_delivery" name="has_free_delivery">
                            <option value="">Tümü</option>
                            <option value="1" {{ request('has_free_delivery') === '1' ? 'selected' : '' }}>Evet</option>
                            <option value="0" {{ request('has_free_delivery') === '0' ? 'selected' : '' }}>Hayır</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md">
                    <div class="form-group">
                        <label for="price_min">Min. Fiyat</label>
                        <input type="number" class="form-control" id="price_min" name="price_min"
                            value="{{ request('price_min') }}" min="0" step="0.01">
                    </div>
                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="price_max">Max. Fiyat</label>
                        <input type="number" class="form-control" id="price_max" name="price_max"
                            value="{{ request('price_max') }}" min="0" step="0.01">
                    </div>
                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="sort">Sıralama</label>
                        <select class="form-control" id="sort" name="sort">
                            <option value="latest" {{ request('sort', 'latest') === 'latest' ? 'selected' : '' }}>En Yeni</option>
                            <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>En Eski</option>
                            <option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Fiyat (Düşük > Yüksek)</option>
                            <option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Fiyat (Yüksek > Düşük)</option>
                            <option value="name_asc" {{ request('sort') === 'name_asc' ? 'selected' : '' }}>İsim (A-Z)</option>
                            <option value="name_desc" {{ request('sort') === 'name_desc' ? 'selected' : '' }}>İsim (Z-A)</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter mr-1"></i> Filtrele
                    </button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-default">
                        <i class="fas fa-times mr-1"></i> Temizle
                    </a>
                </div>
            </div>
        </form>
    </div>

    <div class="card-body table-responsive p-0">
        <table class="table table-hover text-nowrap">
            <thead>
                <tr>
                    <th>Ürün</th>
                    <th>Kategori</th>
                    <th>Fiyat</th>
                    <th>Durum</th>
                    <th>Öne Çıkan</th>
                    <th>Online Sipariş</th>
                    <th>Ücretsiz Teslimat</th>
                    <th style="width: 120px"></th>
                </tr>
            </thead>
            <tbody id="sortable">
                @forelse($products as $product)
                    <tr data-id="{{ $product->id }}" class="{{ !App\View\Components\Helper::isMobile() ? 'cursor-move' : '' }}">
                        <td>
                            <div class="d-flex align-items-center">
                                <div>
                                    <div class="font-weight-bold">{{ $product->name }}</div>
                                    <small class="text-muted">{{ Str::limit(strip_tags($product->description), 50) }}</small>
                                    @if($product->sub_description)
                                        <br>
                                        <small class="text-muted">{{ Str::limit(strip_tags($product->sub_description), 50) }}</small>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-info">{{ $product->category->name }}</span>
                        </td>
                        <td>
                            <span>₺{{ number_format($product->price, 2) }}</span>
                        </td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input availability-switch"
                                    id="availability_{{ $product->id }}"
                                    {{ $product->is_available ? 'checked' : '' }}
                                    data-url="{{ route('admin.products.toggle-availability', $product) }}">
                                <label class="custom-control-label" for="availability_{{ $product->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input featured-switch"
                                    id="featured_{{ $product->id }}"
                                    {{ $product->is_featured ? 'checked' : '' }}
                                    data-url="{{ route('admin.products.toggle-featured', $product) }}">
                                <label class="custom-control-label" for="featured_{{ $product->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input online-orderable-switch"
                                    id="online_orderable_{{ $product->id }}"
                                    {{ $product->is_online_orderable ? 'checked' : '' }}
                                    data-url="{{ route('admin.products.toggle-online-orderable', $product) }}">
                                <label class="custom-control-label" for="online_orderable_{{ $product->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input has_free_delivery-switch"
                                    id="has_free_delivery_{{ $product->id }}"
                                    {{ $product->has_free_delivery ? 'checked' : '' }}
                                    data-url="{{ route('admin.products.toggle-has-free-delivery', $product) }}">
                                <label class="custom-control-label" for="has_free_delivery_{{ $product->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('admin.products.show', $product) }}"
                                   class="btn btn-primary btn-sm mr-2">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.products.edit', $product) }}"
                                   class="btn btn-info btn-sm mr-2">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.products.destroy', $product) }}"
                                      method="POST"
                                      class="d-inline delete-form"
                                      id="delete-form-{{ $product->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-danger btn-sm"
                                            onclick="confirmDelete('delete-form-{{ $product->id }}', 'Bu ürünü 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="6" class="text-center">Henüz ürün bulunmuyor</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($products->hasPages())
        <div class="card-footer clearfix">
            <div class="float-right">
                {{ $products->onEachSide(1)->links('admin.layouts.pagination') }}
            </div>
            <div class="float-left text-muted">
                {{ $products->total() }} sonuçtan {{ $products->firstItem() }} - {{ $products->lastItem() }} arası gösteriliyor
            </div>
        </div>
    @endif
</div>
@endsection

@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() {
    @if(!App\View\Components\Helper::isMobile())
    const sortable = Sortable.create(document.getElementById('sortable'), {
        animation: 150,
        ghostClass: 'sortable-ghost',
        onEnd: function() {
            const rows = document.querySelectorAll('#sortable tr');
            const order = Array.from(rows).map((row, index) => ({
                id: row.dataset.id,
                order: index + 1
            }));

            fetch('{{ route("admin.products.update-order-bulk") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ 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

    // Availability switch handler
    document.querySelectorAll('.availability-switch').forEach(function(switchEl) {
        switchEl.addEventListener('change', function() {
            const url = this.dataset.url;
            fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .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;
            });
        });
    });

    // Featured switch handler
    document.querySelectorAll('.featured-switch').forEach(function(switchEl) {
        switchEl.addEventListener('change', function() {
            const url = this.dataset.url;
            fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Öne çıkan durumu güncellendi');
                } else {
                    toastr.error('Öne çıkan durumu güncellenirken bir hata oluştu');
                    this.checked = !this.checked;
                }
            })
            .catch(error => {
                toastr.error('Öne çıkan durumu güncellenirken bir hata oluştu');
                this.checked = !this.checked;
            });
        });
    });

    // Online orderable switch handler
    document.querySelectorAll('.online-orderable-switch').forEach(function(switchEl) {
        switchEl.addEventListener('change', function() {
            const url = this.dataset.url;
            fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Online sipariş durumu güncellendi');
                } else {
                    toastr.error('Online sipariş durumu güncellenirken bir hata oluştu');
                    this.checked = !this.checked;
                }
            })
            .catch(error => {
                toastr.error('Online sipariş durumu güncellenirken bir hata oluştu');
                this.checked = !this.checked;
            });
        });
    });

    // Has free delivery switch handler
    document.querySelectorAll('.has_free_delivery-switch').forEach(function(switchEl) {
        switchEl.addEventListener('change', function() {
            const url = this.dataset.url;
            fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Ücretsiz teslimat durumu güncellendi');
                } else {
                    toastr.error('Ücretsiz teslimat durumu güncellenirken bir hata oluştu');
                    this.checked = !this.checked;
                }
            })
            .catch(error => {
                toastr.error('Ücretsiz teslimat durumu güncellenirken bir hata oluştu');
                this.checked = !this.checked;
            });
        });
    });

    // Delete confirmation
    document.querySelectorAll('.delete-form').forEach(function(form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (confirm('Bu ürünü silmek istediğinize emin misiniz?')) {
                this.submit();
            }
        });
    });
});
</script>
@endpush