@extends('adminlte::page')

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


@section('css')
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">

    <!-- tam boyutta fotoğraf önizleme için lightbox -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('build/assets/datatable-B_fUXaNs.css') }}">
    
    <link rel="stylesheet" href="{{ asset('build/assets/form-CQWj5XmD.css') }}">


@endsection


@section('js')

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Bootstrap JS (opsiyonel ama layout için gerekebilir) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables Core -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <!-- DataTables Bootstrap 5 Style -->
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <!-- tam boyutta fotoğraf önizleme için lightbox -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
    
    <script src="{{ asset('build/assets/datatable-RX_jKVpA.js') }}"></script>

    <script src="{{ asset('build/assets/form-SgYMX6OZ.js') }}"></script>

@endsection

@section('content')
<div class="container-fluid pt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold">Ürün Listesi</h2>
        <button type="button" class="btn btn-success shadow-sm" data-bs-toggle="modal" data-bs-target="#productModal">
            <i class="fas fa-plus me-2"></i> Yeni Ürün Ekle
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0 table-responsive">
            <table id="productsTable" class="table table-striped table-hover mb-0 datatable" style="width:100%">
                <thead class="table-success">
                    <tr>
                        <th class="text-center">Resim</th>
                        <th>Adı</th>
                        <th>Materyal</th>
                        <th>Baskı Süresi</th>
                        <th>Kategori</th>
                        <th>Yazıcı</th>
                        <th>Açıklama</th>
                        <th>Fiyat</th>
                        <th class="text-center">İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $product)
                        <tr>
                            <td class="text-center align-middle">
                            @if($product->image_path)
                                <a href="{{ asset('storage/' . $product->image_path) }}" data-lightbox="product-{{ $product->id }}" data-title="{{ $product->name }}">
                                    <img src="{{ asset('storage/' . $product->image_path) }}"
                                        alt="Ürün Görseli"
                                        class="rounded img-fluid"
                                        style="max-height: 60px; cursor: zoom-in;">
                                </a>
                            @else
                                <span>Görsel yok</span>
                            @endif
                        </td>

                            <td class="align-middle">{{ $product->name }}</td>
                            <td class="align-middle">{{ $product->material }}</td>
                            <td class="align-middle">{{ $product->print_time }} dk</td>
                            <td class="align-middle">{{ $product->category }}</td>
                            <td class="align-middle">{{ $product->printer_model }}</td>
                            <td class="align-middle text-truncate" style="max-width: 200px;">{{ $product->description }}</td>
                            <td class="align-middle fw-semibold">{{ number_format($product->price, 2) }} ₺</td>
                            <td class="text-center align-middle">

                                <button type="button" class="btn btn-sm btn-outline-info me-1" data-bs-toggle="modal" data-bs-target="#showModal{{ $product->id }}" title="Görüntüle">
                                    <i class="fas fa-eye"></i>
                                </button>

                                <button type="button" class="btn btn-sm btn-outline-warning me-1" data-bs-toggle="modal" data-bs-target="#editModal{{ $product->id }}" title="Düzenle">
                                    <i class="fas fa-edit"></i>
                                </button>

                                <!-- Sil -->
                                <form action="{{ route('products.destroy', $product->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Silmek istediğine emin misin?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Sil">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>

                        @include('staff.products.edit', ['product' => $product])

                        @include('staff.products.show', ['product' => $product])
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@include('staff.products.create')

@endsection