@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">
                        @if($service)
                            نمونه کار‌های {{$service->title}}
                        @else
                            تمام نمونه کار ها
                        @endif
                    </h3>
                    <a href="{{ route('admin.services.index')}}"
                       class="btn btn-set-task rounded-custom d-flex align-items-center w-fit shadow-sm">
                        <i class="bi bi-skip-backward-circle d-flex h5 my-0 me-2"></i>
                        رفتن به خدمات
                    </a>
                    @if($service)
                        <a href="{{ route('admin.work-samples.create',['service_id'=>$service->id])}}"
                           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>
                    @else
                        <span>
                            <a href="{{ route('admin.services.index')}}"
                               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>
                        </span>
                    @endif
                </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="100">تصویر</th>
                            <th class="text-start">عنوان نمونه کار</th>
                            <th class="text-start">نام نمونه کار</th>
                            <th>وضعیت</th>
                            <th width="150">عملیات</th>
                        </tr>
                        </thead>
                        <tbody id="sortable-list" class="sortable-list">
                        @forelse($work_samples 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="icon-wrapper">
                                        <img src="{{ $item->getImageFile() }}"
                                             alt="{{ $item->title }}"
                                             style="width: 25px; height: 25px; object-fit: contain;">
                                    </div>
                                </td>
                                <td class="text-start">
                                    <span class="fw-bold text-dark">{{ $item->title }}</span>
                                </td>
                                <td class="text-start">
                                    <span class="fw-bold text-dark">{{ $item->name }}</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.work-samples.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.work-samples.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="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>--}}

    {{--    <script>--}}
    {{--        document.addEventListener('DOMContentLoaded', function () {--}}
    {{--            if (typeof Sortable === 'undefined') return;--}}

    {{--            const el = document.getElementById('sortable-list');--}}

    {{--            if (el) {--}}
    {{--                Sortable.create(el, {--}}
    {{--                    animation: 200,--}}
    {{--                    handle: '.drag-handle',--}}
    {{--                    ghostClass: 'sortable-ghost',--}}
    {{--                    chosenClass: 'sortable-chosen',--}}
    {{--                    onEnd: function (evt) {--}}
    {{--                        let order = [];--}}
    {{--                        const rows = document.querySelectorAll('#sortable-list tr');--}}
    {{--                        rows.forEach((row, index) => {--}}
    {{--                            order.push({--}}
    {{--                                id: row.getAttribute('data-id'),--}}
    {{--                                position: index + 1--}}
    {{--                            });--}}
    {{--                            const numCell = row.querySelector('.row-number');--}}
    {{--                            if (numCell) numCell.innerText = index + 1;--}}
    {{--                        });--}}

    {{--                        fetch("{{ route('admin.profit.updateOrder') }}", {--}}
    {{--                            method: 'POST',--}}
    {{--                            headers: {--}}
    {{--                                'Content-Type': 'application/json',--}}
    {{--                                'X-CSRF-TOKEN': '{{ csrf_token() }}'--}}
    {{--                            },--}}
    {{--                            body: JSON.stringify({ order: order })--}}
    {{--                        })--}}
    {{--                            .then(res => res.json())--}}
    {{--                            .then(data => {--}}
    {{--                                if(typeof Swal !== 'undefined') {--}}
    {{--                                    Swal.fire({--}}
    {{--                                        icon: 'success',--}}
    {{--                                        title: 'بروزرسانی',--}}
    {{--                                        text: 'چیدمان با موفقیت ذخیره شد',--}}
    {{--                                        timer: 1500,--}}
    {{--                                        showConfirmButton: false,--}}
    {{--                                        toast: true,--}}
    {{--                                        position: 'top-end'--}}
    {{--                                    });--}}
    {{--                                }--}}
    {{--                            })--}}
    {{--                            .catch(err => console.error('Error:', err));--}}
    {{--                    }--}}
    {{--                });--}}
    {{--            }--}}
    {{--        });--}}
    {{--    </script>--}}
@endpush