@extends('layouts.admin')
@section('content')
    <section class="section">
        <div class="section-body"> 
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header custom-cart-header">
                            <h4>Plans</h4>
                          @if($type == 'member')
                            <div class="new-card-header-form custom-search-form">
                                <a class="btn btn-primary btn-lg float-end" href="{{ route('admin.plan.create',['type' => $type]) }}">Add Plan</a>
                            </div>
                          @endif
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="sortable-table" class="table table-striped table-md">
                                    <thead>
                                    <tr>
                                        <th>Plan Name</th>
                                        @if($type == 'member')
                                            <th>Membership Type</th>
                                            <th>Time Type</th>
                                        @endif
                                        <th>Price</th>
                                        <th>Created at</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse ($plans as $plan)
                                        <tr data-id="{{ $plan->id }}">
                                            <td>{{ $plan->name  }}</td>
                                           @if ($type =='member')
                                            <th>
                                                @if($plan->type === 'basic')
                                                    W/O Targets
                                                @elseif($plan->type === 'premium')
                                                    W Targets
                                                @else
                                                    N/A
                                                @endif
                                            </th>
                                            <td>
                                                @if($plan->time_type == 'monthly')
                                                    Monthly
                                                @elseif($plan->time_type == 'quarterly')
                                                    Quarterly
                                                @elseif($plan->time_type == 'halfly')
                                                    Half-yearly
                                                @elseif($plan->time_type == 'yearly')
                                                    Annually
                                                @else
                                                    {{ Str::ucfirst($plan->time_type) }}
                                                @endif
                                            </td>
                                           @endif
                                            <td>{{ $plan->price }}</td>
                                            <td>{{ $plan->created_at ? $plan->created_at->format('m/d/Y') : '' }}</td>
                                            <td>
                                                <div class="db-comman-acton-btns">
                                                <a class="btn btn-success icon-font-size"
                                                    href="{{ route('admin.plan.create', ['type' => $type ,'id'=>jsencode_userdata($plan->id)]) }}"
                                                    title="Edit">
                                                    <i class="fa-solid fa-pen-to-square fa-2xl" style="color: #0453d2;"></i>
                                                </a> 
                                                @if($type == 'member')
                                                <a class="btn btn-danger delete-category confirm-delete" href="{{ route('admin.plan.delete', [jsencode_userdata($plan->id)]) }}" title="Delete">
                                                    <i class="fa-solid fa-trash fa-2xl" style="color: #ff0019;"></i>
                                                </a>
                                                @endif
                                            </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td class="no-record-found" colspan="8">
                                                <center>Did not found any plan</center>
                                            </td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('pagespecificscripts')
    <script>
        $(document).ready(function() {
            // Set CSRF token for all AJAX requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#sortable-table tbody").sortable({
                axis: "y",
                handle: "td", // or add a specific handle class
                helper: function(e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function(index) {
                        $(this).width($originals.eq(index).width());
                    });
                    return $helper;
                },
                update: function(event, ui) {
                    var order = [];
                    $('#sortable-table tbody tr').each(function(index) {
                        order.push({
                            id: $(this).data('id'),
                            order: index + 1
                        });
                    });

                    $.ajax({
                        url: "{{ route('admin.plan.order.update') }}",
                        method: "POST",
                        data: {
                            order: order
                        },
                        success: function(response) {
                            // const queryString = window.location.search;
                            // const urlParams = new URLSearchParams(queryString);

                            // // Get a specific parameter
                            // const page = urlParams.get('page') ? urlParams.get('page') *
                            //     10 - 10 : 0;
                            if (response.status) {
                                // Optional: Update order numbers visually
                                $('#sortable-table tbody tr').each(function(index) {
                                    // $(this).find('td:eq(2)').text(index + 1);
                                    $(this).find('span.row-index').text( index + 1);
                                });
                            }
                        },
                        error: function(xhr) {
                            console.error('Error:', xhr.responseText);
                        }
                    });
                }
            }).disableSelection();
        });
    </script>
@endpush