@extends('backoffice.dashboard')

@section('title', 'إدارة أقسام الصفحة الرئيسية')

@section('content')

@if(Auth::check())

{{-- ===== CSS ===== --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

<div class="container-fluid dashboard-inner-body-container">
    <div class="row">
        <div class="col-lg-12">

            <div class="block-card dashboard-card mb-4 px-0 shadow-sm rounded-3 border-0">

                {{-- HEADER --}}
                <div class="block-card-header px-4 border-bottom-0 pb-0 d-flex justify-content-between">
                    <h2 class="widget-title m-0">إدارة أقسام الصفحة الرئيسية</h2>
                    <button type="button" class="btn btn-success btn-sm px-3" id="saveOrderBtn">
                        <i class="la la-save me-1"></i> حفظ الترتيب
                    </button>
                </div>

                {{-- SEARCH --}}
                <div class="block-card-header px-4 pb-3">
                    <form method="GET">
                        <div class="form-row align-items-center" style="direction: rtl;">
                            <div class="col-auto" style="width:250px">
                                <input type="text"
                                       class="form-control"
                                       name="search"
                                       placeholder="بحث بالعنوان أو المعرف"
                                       value="{{ request('search') }}">
                            </div>

                            <div class="col d-flex">
                                <button class="btn bg-rgb-primary1" style="width:100px">بحث</button>
                                <a href="{{ route('homepage-sections.index') }}"
                                   class="btn bg-rgb-primary1 ms-2">
                                    <i class="fa-solid fa-rotate-right"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>

                {{-- BODY --}}
                <div class="block-card-body">

                    <div class="table-responsive my-table" style="direction: rtl;">
                        <table class="table table-hover align-items-center">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>الترتيب</th>
                                    <th>المعرف</th>
                                    <th>العنوان (AR)</th>
                                    <th>العنوان (FR)</th>
                                    <th>العنوان (EN)</th>
                                    <th class="text-center">مفعل</th>
                                </tr>
                            </thead>

                            <tbody id="sortable">
                                @foreach($sections as $section)
                                <tr data-id="{{ $section->id }}" class="sortable-row">
                                    <td>{{ $loop->iteration }}</td>

                                    <td class="text-center">
                                        <i class="fas fa-arrows-alt handle text-muted"></i>
                                        <input type="number"
                                               class="form-control form-control-sm position-input d-inline-block"
                                               value="{{ $section->position }}"
                                               min="1"
                                               style="width:60px">
                                    </td>

                                    <td class="text-center">{{ $section->section_key }}</td>
                                    <td>{{ $section->title_ar ?? '—' }}</td>
                                    <td>{{ $section->title_fr ?? '—' }}</td>
                                    <td>{{ $section->title_en ?? '—' }}</td>

                                    <td class="text-center">
                                        <input type="checkbox"
                                               class="form-check-input visibility-toggle"
                                               data-id="{{ $section->id }}"
                                               {{ $section->is_visible ? 'checked' : '' }}>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

{{-- ===== JS ===== --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
$(document).ready(function () {

    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-left",
        rtl: true
    };

    /* ===== SORTABLE ===== */
    $("#sortable").sortable({
        handle: ".handle",
        update: function () {
            updatePositions();
        }
    });

    function updatePositions() {
        $('#sortable tr').each(function(index){
            $(this).find('.position-input').val(index + 1);
        });
    }

    /* ===== SAVE ORDER ===== */
    $('#saveOrderBtn').on('click', function () {

        let sections = [];

        $('#sortable tr').each(function (index) {
            sections.push({
                id: $(this).data('id'),
                position: index + 1,
                is_visible: $(this).find('.visibility-toggle').is(':checked') ? 1 : 0
            });
        });

        $.ajax({
            url: "{{ url('admin/homepage-sections/update-order') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                sections: sections
            },
            success: function (response) {
                toastr.success(response.message);
            },
            error: function (xhr) {
                console.error(xhr.responseText);
                toastr.error('فشل حفظ الترتيب');
            }
        });
    });

    /* ===== VISIBILITY ===== */
    $('.visibility-toggle').on('change', function () {

        let id = $(this).data('id');

        $.ajax({
            url: "{{ url('admin/homepage-sections') }}/" + id + "/visibility",
            type: "PUT",
            data: {
                _token: "{{ csrf_token() }}",
                is_visible: $(this).is(':checked') ? 1 : 0
            },
            success: function (res) {
                toastr.success(res.message);
            },
            error: function () {
                toastr.error('خطأ أثناء التحديث');
            }
        });
    });

});
</script>

<style>
.sortable-row { cursor: move; }
.handle { cursor: move; margin-right: 5px; }
</style>

@else
<script>window.location.href = "{{ route('admin') }}";</script>
@endif

@endsection