@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>
                    <span>
                        توجه : تنها 5 مرحله ی فعال آخر نمایش داده می شوند.
                    </span>
                    <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)
                        <button type="button"
                                class="btn btn-custom-b rounded-custom d-flex align-items-center w-fit shadow-sm"
                                data-bs-toggle="modal" data-bs-target="#addStepModal">
                            <i class="bi bi-plus-circle me-2"></i> افزودن مرحله جدید
                        </button>
                    @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>
    </div>
    <div class="row mx-0 mt-5 w-100" id="app34534567">
        <div class="col-lg-6 col-12 mx-auto py-1 px-0">
            <h3 class="bg-white py-2 px-4 rounded-lg">
                اضافه کردن
            </h3>
            <div class="card rounded-lg border-0 p-3">
                <form method="post" action="{{route('admin.steps.store')}}"
                      enctype="multipart/form-data">
                    <div class="card rounded-lg border-0 p-3 m-0">
                        <div class="row w-100 m-0">
                            @csrf

                            <input type="hidden" name="service_id" value="{{ $service->id }}">

                            <div class="row w-100 m-0 p-2 border" v-for="me in number">

                                <div class="col-md-12 col-12 p-2">
                                    <label for="title" class="fw-bold mb-2 col-form-label">عنوان مرحله</label>
                                    <span style="color: red;">*</span>
                                    <input type="text" class="form-control bg-light rounded-custom" id="title"
                                           name="title[]" data-required="true">
                                </div>

                                <div class="col-12 p-2">
                                    <label for="description" class="fw-bold mb-2 col-form-label">توضیحات</label>
                                    <span style="color: red;">*</span>
                                    <div class="ckeditor-div">
                                        <textarea id="description" name="description[]" data-required="true"
                                                  class="form-control bg-light rounded-custom"></textarea>
                                    </div>
                                </div>

                                {{--                                                        TODO: ahora_fix - fix is_active saving as array  --}}
                                {{--                                                <div class="col-md-3 col-6 p-2">--}}
                                {{--                                                    <div class="form-check form-switch">--}}
                                {{--                                                        <input type="hidden" name="is_active" value="0">--}}
                                {{--                                                        <input class="form-check-input" type="checkbox"--}}
                                {{--                                                               id="is_active" name="is_active[]" multiple--}}
                                {{--                                                               value="1"--}}
                                {{--                                                            {{ (old('is_active', $item->is_active ?? true)) ? 'checked' : '' }}--}}
                                {{--                                                        >--}}
                                {{--                                                        <label class="form-check-label"--}}
                                {{--                                                               for="is_active">فعال</label>--}}
                                {{--                                                    </div>--}}
                                {{--                                                </div>--}}
                            </div>
                            <div class="col-lg-6 px-0 pt-3">
                                <div class="form-group m-0">
                                    <button type="submit" class="btn btn-success">ذخیره</button>
                                </div>
                            </div>
                            <div class="col-lg-6 text-end px-0 pt-3">
                                <a @click="plusMe()" class="btn btn-default btn-primary">
                                    <span class="fa fa-plus">اضافه کردن چندتایی</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-lg-6 col-12 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 class="text-start">عنوان مرحله</th>
                        <th>وضعیت</th>
                        <th width="150">عملیات</th>
                    </tr>
                    </thead>
                    <tbody id="sortable-list" class="sortable-list">
                    @forelse($steps as $item)

                        <tr data-id="{{ $item->id }}" class="text-center bg-light-primary">
                            <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 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">
                                    {{--                                    <button type="button" class="btn-action btn-edit-soft"--}}
                                    {{--                                            data-bs-toggle="modal"--}}
                                    {{--                                            data-bs-target="#editStepModal{{ $item->id }}">--}}
                                    {{--                                        <i class="bi bi-pen"></i>--}}
                                    {{--                                    </button>--}}

                                    <div data-bs-toggle="tooltip" title="ویرایش">
                                        <a href="{{ route('admin.steps.edit', $item)  }}"
                                           class="btn-action btn-edit-soft">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                    </div>

                                    <div data-bs-toggle="tooltip" title="حذف">
                                        <form action="{{ route('admin.steps.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>

                        <div class="modal fade" id="editStepModal{{ $item->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <form action="{{ route('admin.steps.update', $item) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <div class="container-fluid">
                                            <div class="card-block row w-100 m-0">
                                                <input type="hidden" name="service_id" value="{{ $service->id }}">

                                                <div class="col-md-12 col-12 p-2">
                                                    <div class="form-group">
                                                        <label for="title" class="fw-bold mb-2">عنوان مرحله</label><span
                                                            style="color: red;">*</span>
                                                        <input type="text" class="form-control bg-light rounded-custom"
                                                               id="title" name="title[]"
                                                               value="{{ old('title', $item->title ?? '') }}"
                                                               data-required="true">
                                                    </div>
                                                </div>

                                                <div class="col-12 p-2">
                                                    <div class="form-group">
                                                        <label for="description">توضیحات</label>
                                                        <div class="ckeditor-div">
                                                            <textarea id="description" name="description[]"
                                                                      class="form-control bg-light rounded-custom">{{ old('description', $item->description ?? '') }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-3 col-6 p-2 mt-4">
                                                    <div class="form-check form-switch">
                                                        <input type="hidden" name="is_active" value="0">
                                                        <input class="form-check-input" type="checkbox" id="is_active"
                                                               name="is_active"
                                                               value="1"{{ old('is_active', $item->is_active ?? true) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="is_active">فعال</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{--                                        @include('admin.step.form', ['step'=>$item])--}}
                                        <div class="modal-footer border-0">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                لغو
                                            </button>
                                            <button type="submit" class="btn btn-primary d-flex align-items-center">
                                                <i class="bi bi-save me-2"></i> ذخیره
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    @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>

@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.steps.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>

    <script>
        var app = new Vue({
            el: '#app34534567',
            data: {
                number: 1
            },
            methods: {
                plusMe: function () {
                    this.number = this.number + 1;
                }
            }
        })
    </script>
    <script type="text/javascript">
        $(function () {
            var opts = $('#optlist option').map(function () {
                return [[this.value, $(this).text()]];
            });

            $('#someinput').keyup(function () {
                var rxp = new RegExp($('#someinput').val(), 'i');
                var optlist = $('#optlist').empty();
                opts.each(function () {
                    if (rxp.test(this[1])) {
                        optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
                    }
                });
            });
        });
    </script>
@endpush