@extends('layouts.admin.master')
@section('tab-name','لیست تکنولوژی ها')

@section('content')
    <style>
        .table-container {
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .table thead th {
            background-color: #fcfcfd;
            border-bottom: 1px solid #f1f1f2;
            color: #6c757d;
            font-size: 0.85rem;
            font-weight: 700;
            padding: 1.2rem 1rem;
        }

        .sortable-list tr {
            transition: background 0.2s ease;
        }

        .sortable-list tr:hover {
            background-color: #f8faff !important;
        }

        /* استایل آیکون دستگیره جابجایی */
        .drag-handle {
            cursor: grab;
            color: #d1d5db;
            padding: 5px;
            transition: all 0.2s;
        }

        .drag-handle:hover {
            color: #4e73df;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        /* ظرف تصویر آیکون */
        .icon-wrapper {
            width: 42px;
            height: 42px;
            background: #f8f9fc;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* بج‌های نرم (Soft Badges) */
        .badge-soft {
            padding: 5px 12px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.75rem;
        }

        .badge-soft-success {
            background-color: #e6fffa;
            color: #047857;
        }

        .badge-soft-danger {
            background-color: #fff5f5;
            color: #c53030;
        }

        .badge-soft-info {
            background-color: #ebf8ff;
            color: #2b6cb0;
        }

        .badge-soft-secondary {
            background-color: #f7fafc;
            color: #4a5568;
        }

        /* دکمه‌های عملیات */
        .btn-action {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            margin: 0 2px;
            transition: 0.3s;
        }

        /* استایل ردیف در حال حرکت */
        .sortable-ghost {
            opacity: 0.4;
            background-color: #e0e7ff !important;
            border: 1px dashed #4e73df;
        }

        .sortable-chosen {
            background-color: #ffffff;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
    </style>

    <div class="body d-flex py-3">
        <div class="container-fluid">
            <div class="page-header">
                <div
                    class="card-header py-3 no-bg bg-transparent border-0 px-0 flex-wrap d-flex justify-content-between align-items-center border-bottom mb-4">

                    <h3 class="fw-bolder ms-1">
                        مدیریت تکنولوژی ها
                    </h3>
                    <a href="{{ route('admin.technologies.create') }}"
                       class="btn btn-custom-b rounded-custom d-flex align-items-center w-fit shadow-sm">
                        <i class="bi bi-plus-square-dotted d-flex h5 my-0 me-2"></i>
                        افزودن تکنولوژی جدید
                    </a>
                </div>
            </div>

            <div class="table-container shadow-sm border">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead>
                        <tr class="text-center">
                            <th width="60">#</th>
                             <th width="80">چیدمان</th>
                            <th width="200">تصویر</th>
                            <th class="text-start">عنوان تکنولوژی</th>
                            <th>وضعیت</th>
                            <th width="150">عملیات</th>
                        </tr>
                        </thead>
                        <tbody id="sortable-list" class="sortable-list">
                        @forelse($technologies as $item)
                            <tr data-id="{{ $item->id }}" class="text-center">
                                <td class="text-muted fw-bold row-number">{{ $loop->iteration }}</td>
                                 <td>
                                    <div class="drag-handle">
                                        <i class="bi bi-grid-3x3-gap-fill fs-5"></i>
                                    </div>
                                </td>
                                <td>
                                    <div class="items-image">
                                        <img src="{{ $item->getImageFile() }}"
                                             alt="{{ $item->title }}"
                                             style="width: 150px; height: 50px; ">
                                    </div>
                                </td>
                                <td class="text-start">
                                    <span class="fw-bold text-dark">{{ $item->title }}</span>
                                </td>
                                <td>
                                    @if($item->is_active)
                                        <span class="badge-soft badge-soft-success">فعال</span>
                                    @else
                                        <span class="badge-soft badge-soft-danger">غیرفعال</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="action-btns-wrapper">
                                        <div data-bs-toggle="tooltip" title="ویرایش">
                                            <a href="{{ route('admin.technologies.edit', $item) }}"
                                               class="btn-action btn-edit-soft">
                                                <i class="bi bi-pen"></i>
                                            </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="حذف">
                                            <form action="{{ route('admin.technologies.destroy', $item)}}" method="POST"
                                                  class="delete-form m-0">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete-soft">
                                                    <i class="bi bi-trash3"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                    هیچ تکنولوژیی یافت نشد.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@push('scripts')

    <script src="{{asset('assets/admin/js/883833bootstrap-select.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/488sortable.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/547vue-select.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/522vuedraggable.umd.min.js')}}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const el = document.getElementById('sortable-list');
            Sortable.create(el, {
                animation: 150,
                ghostClass: 'bg-light-primary',
                onEnd: function () {
                    let order = [];
                    document.querySelectorAll('#sortable-list tr').forEach((row, index) => {
                        order.push({
                            id: row.getAttribute('data-id'),
                            position: index + 1
                        });
                    });

                    fetch("{{ route('admin.technologies.sort') }}", {
                        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) {
                                document.querySelectorAll('.brand-order').forEach((td, idx) => {
                                    td.innerText = idx + 1;
                                });
                            }
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'بروزرسانی',
                                    text: 'چیدمان با موفقیت ذخیره شد',
                                    timer: 1500,
                                    showConfirmButton: false,
                                    toast: true,
                                    position: 'top-end'
                                });
                            }
                        });
                }
            });
        });
    </script>
@endpush