@extends('layout.admin')

@section('styles')

@endsection
<style>
    .w-px-50{
     width:70px;
     height:70px;
    }
</style>
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        @if(session('success'))
            <div id="success" class="alert alert-primary alert-dismissible" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div id="error" class="alert alert-danger alert-dismissible" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <h4 class="py-3 mb-2">
            <span class="text-muted fw-light">Pages /</span> List
        </h4>
        <div class="row mb-2">
            <div class="col-lg-12">
                <a href="{{ route('createPage') }}" class="btn btn-primary float-end">Add Page</a>
            </div>
        </div>
        <div class="card p-3">
            <div class="table-responsive text-nowrap">
                <table width="100%" class="table table-striped table-bordered table-hover" id="Pages_table">
                    <thead>
                        <tr>
                            <th>Sr. No</th>
                            <th>Title</th>
                            <th>Page Url</th>
                            <th>Sort Order</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                     <tbody class="table-border-bottom-0">
                        @php
                            $serial = 1;
                            // Recursive function to render pages
                            function renderPages($pages, $parentId = 0, $level = 0, &$serial = 1) {
                                foreach ($pages->where('parent_id', $parentId) as $page) {
                                    // Row Style
                                    $rowStyle = $level == 0 ? "font-weight:bold;" : "background-color:#f9f9f9;";

                                    echo '<tr class="odd gradeX" style="'.$rowStyle.'">';
                                    
                                    // Serial Number
                                    echo '<td>'. $serial++ .'</td>';

                                    // Title with Indentation & Badge
                                    echo '<td style="padding-left: '.($level * 40).'px;">';
                                    if ($level == 0) {
                                        echo '<span class="badge bg-primary">Parent</span> ';
                                    } elseif ($level == 1) {
                                        echo '<span class="badge bg-success">Child</span> ';
                                    } else {
                                        echo '<span class="badge bg-warning">Sub-child</span> ';
                                    }
                                    echo $page->title.'</td>';

                                    // Page URL
                                    echo '<td>'.getFrontendUrl().$page->page_url.' 
                                            <a href="'.getFrontendUrl().$page->page_url.'" target="_blank">
                                                <i class="bx bx-link"></i>
                                            </a>
                                        </td>';


                                    // Sort Order Input
                                    echo '<td>';
                                        if ($page->url_type == 0) {
                                            echo '<input type="number"
                                                class="form-control sort-order-input"
                                                value="'.$page->sort_order.'"
                                                data-id="'.$page->id.'"
                                                data-type="page"
                                                style="width:70px;display:inline-block;margin-right:5px;">';
                                        } else {
                                            echo '<span class="text-muted">—</span>'; // Show dash when hidden
                                        }
                                        echo '</td>';
                                    // Status Badge
                                    echo '<td class="text-center">';
                                    if ($page->status == 1) {
                                        echo '<a href="javascript:void(0);" onclick="PageChangeStatus(\'0\','.$page->id.');"
                                                class="badge bg-label-primary me-1"> Activated </a>';
                                    } else {
                                        echo '<a href="javascript:void(0);" onclick="PageChangeStatus(\'1\','.$page->id.');"
                                                class="badge bg-label-danger me-1"> Deactivated </a>';
                                    }
                                    echo '</td>';

                                    // Edit Button
                                    echo '<td>
                                            <a class="dropdown-item" href="'.route('editPage', $page->id).'">
                                                <i class="bx bx-edit-alt me-1"></i> Edit
                                            </a>
                                        </td>';

                                    echo '</tr>';

                                    // Recursive call for child pages
                                    renderPages($pages, $page->id, $level + 1, $serial);
                                }
                            }
                        @endphp
                        {{-- Render All Pages --}}
                        {!! renderPages($pages, 0, 0, $serial) !!}
                     </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('#Pages_table').DataTable({
                responsive: true,
                "order": [],
                "pageLength": 100, 
                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [4]
                },
                    {
                        "bSearchable": false,
                        "aTargets": [4]
                    }
                ]
            });
        });
    </script>

    <script>
        function PageChangeStatus(status, PageId) {
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to change Page status?",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes!'
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        method: "POST",
                        url: "{{ route('PageChangeStatus') }}",
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            'status': status,
                            'page_id': PageId
                        },
                        success: function (response) {
                            notifyBlackToast(response.message);
                            setTimeout(function () {
                                location.reload();
                            }, 2000);

                        }
                    });


                }
            })

        }
    </script>

    <script>
        setTimeout(function(){
            document.getElementById('success').style.display = 'none';
        }, 2000);

        setTimeout(function(){
            document.getElementById('error').style.display = 'none';
        }, 2000);
    </script>
    
    <script>
        $(document).ready(function () {
            $(".sort-order-input").on("change", function () {
                let id = $(this).data("id");
                let type = $(this).data("type");
                let value = $(this).val();

                $.ajax({
                    url: "{{ route('updateSortOrder') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: id,
                        type: type,
                        sort_order: value
                    },
                    success: function (res) {
                        if (res.success) {
                            notifyBlackToast.success(res.message ?? "Sort order updated successfully!");
                            setTimeout(() => {
                                location.reload();
                            }, 1500);
                        } else {
                            notifyBlackToast.error(res.message ?? "Failed to update sort order!");
                        }
                    },
                    error: function () {
                        notifyBlackToast.error("Something went wrong!");
                    }
                });
            });
        });
    </script>
@endsection