@extends('adminlte::page')

@section('title', 'Kategoriler')



@section('css')
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <style>
        .custom-form-style .form-control,
        .custom-form-style .form-select,
        .custom-form-style textarea {
            border-radius: 0.375rem;
            border: 1px solid #ced4da;
            padding: 0.5rem 0.75rem;
            font-size: 1rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .custom-form-style .form-control:focus,
        .custom-form-style .form-select:focus,
        .custom-form-style textarea:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            outline: none;
        }

        .custom-form-style .form-select {
            height: calc(2.5rem + 2px);
            padding-right: 2.5rem;
        }

        .custom-form-style label {
            font-weight: 600;
            margin-bottom: 0.3rem;
            display: block;
        }

        .custom-form-style .col-md-6 {
            margin-bottom: 1rem;
        }

        .custom-form-style textarea.form-control {
            resize: vertical;
            min-height: 80px;
        }

    </style>
@endsection


@section('js')
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

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

    <script src="{{ asset('build/assets/datatable-RX_jKVpA.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">Kategori Listesi</h2>
        <button type="button" class="btn btn-success shadow-sm" data-bs-toggle="modal" data-bs-target="#categoryModal">
            <i class="fas fa-plus me-2"></i> Yeni Kategori Ekle
        </button>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0 table-responsive">
            <table id="categoriesTable" class="table table-striped table-hover mb-0" style="width:100%">
                <thead class="table-success">
                    <tr>
                        <th>Adı</th>
                        <th>Url</th>
                        <th>Açıklama</th>
                        <th>parent_id</th>
                        <th class="text-center">İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($categories as $category)
                        <tr>
                            <td class="align-middle">{{ $category->name }}</td>
                            <td class="align-middle">{{ $category->slug }}</td>
                            <td class="align-middle">{{ $category->parent_id }} dk</td>
                            <td class="align-middle text-truncate" style="max-width: 200px;">{{ $category->description }}</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{{ $category->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{{ $category->id }}" title="Düzenle">
                                    <i class="fas fa-edit"></i>
                                </button>

                                <!-- Sil -->
                                <form action="{{ route('categories.destroy', $category->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>

                        <!-- DÜZENLE MODAL -->
                        <div class="modal fade" id="editModal{{ $category->id }}" tabindex="-1" aria-labelledby="editModalLabel{{ $category->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                <form action="{{ route('categories.update', $category->id) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-header bg-warning text-dark">
                                    <h5 class="modal-title" id="editModalLabel{{ $category->id }}">Ürünü Düzenle</h5>
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" aria-label="Kapat">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    </div>

                                    <div class="modal-body custom-form-style row g-3 p-4">
                                    <div class="col-md-6">
                                        <label>Kategori Adı</label>
                                        <input type="text" name="name" class="form-control" value="{{ $category->name }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Url</label>
                                        <input type="text" step="0.01" name="slug" class="form-control" value="{{ $category->slug }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Üst Kategori</label>
                                        <input type="number" name="print_time" class="form-control" value="{{ $category->parent_id }}">
                                    </div>
                                    <div class="col-12">
                                        <label>Açıklama</label>
                                        <textarea name="description" class="form-control" rows="3">{{ $category->description }}</textarea>
                                    </div>
                                    </div>

                                    <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
                                    <button type="submit" class="btn btn-warning">Güncelle</button>
                                    </div>
                                </form>
                                </div>
                            </div>
                        </div>

                        <!-- Show Modal -->
                        <div class="modal fade" id="showModal{{ $category->id }}" tabindex="-1" aria-labelledby="showModalLabel{{ $category->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                <div class="modal-header bg-info text-white">
                                    <h5 class="modal-title" id="showModalLabel{{ $category->id }}">Ürün Detayları</h5>
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" aria-label="Kapat">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="row g-3">
                                        <div class="col-md-8">
                                            <p><strong>Kategori Id:</strong> {{ $category->id }}</p>
                                            <p><strong>Kategori Adı:</strong> {{ $category->name }}</p>
                                            <p><strong>Uzantı:</strong> {{ $category->slug }}</p>
                                            <p><strong>Üst Kategori :</strong> {{ $category->parent_id }} </p>
                                            <p><strong>Açıklama:</strong> {{ $category->description }}</p>
                                            <p><strong>Oluşturulma Tarihi:</strong> {{ $category->created_at }}</p>
                                            <p><strong>Güncellenme Tarihi:</strong> {{ $category->updated_at }}</p>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>

                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>

<div class="modal-body category-modal-body row g-3 p-4">
        <!--Kayetmek için modal-->
        <div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                <form action="{{ route('categories.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                    <h5 class="modal-title w-100 text-center" id="categoryModalLabel">Yeni Ürün Ekle</h5>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" aria-label="Kapat">
                        <i class="fas fa-times"></i>
                    </button>

                    </div>

                    <div class="modal-body custom-form-style row g-3 p-4">
                    <div class="col-md-6">
                        <label>Kategori Adı</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label>Uzantı</label>
                        <input type="text" name="slug" class="form-control" required>
                    </div>


                    <div class="col-md-6">
                        <label>Parent_id</label>
                        <input type="number" name="parent_id" class="form-control">
                    </div>
                    

                    <div class="col-12">
                        <label>Açıklama</label>
                        <textarea name="description" class="form-control" rows="3"></textarea>
                    </div>
                    </div>

                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
                    <button type="submit" class="btn btn-success">Kaydet</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
</div>






@endsection