@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp
<style>
    /* Custom CSS styles */
    .customer-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }

    .customer-image {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: 10px;
    }

    table.subscrible_model_table {
        table-layout: fixed;
        /* Ensures consistent column widths */
        width: 100%;
    }

    table.subscrible_model_table thead {
        width: calc(100% - 1em);
        /* Adjust for scrollbar width */
    }

    table.subscrible_model_table tbody {
        display: block;
        /* Allows scrolling inside tbody */
        height: 420px;
        /* Set the height for scrollable area */
        overflow-y: auto;
        /* Vertical scroll */
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    table.subscrible_model_table thead,
    table.subscrible_model_table tbody tr {
        display: table;
        /* Forces rows to behave like table rows */
        width: 100%;
        table-layout: fixed;
        /* Ensures columns stay aligned */
    }

    table.subscrible_model_table td {
        vertical-align: middle;
        /* Vertically center content */
        padding: 8px;
        /* Add padding for better readability */
    }

    table.subscrible_model_table td i {
        cursor: pointer;
        margin-left: 5px;
        /* Add a bit of space on the left */
        font-size: 1.2em;
        /* Adjust the icon size */
    }
</style>
<!-- Page Inner Start -->
<!--================================-->
<div class="page-inner">
    <!--================================-->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pd-t-25 pd-b-35">
        <div class="d-flex justify-content-between">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Membership Plans') }}</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin"><i class="icon ion-ios-home-outline"></i>
                        Dashboard</a>
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin/memberships">Membership Plans</a>
                    <span class="breadcrumb-item active">List</span>
                </div>
            </div>
            @if (Session::has('permissions') && in_array('Create a Plan', Session::get('permissions')))
                <div class="d-flex align-items-center">
                    <button type="button" onclick="window.location = '{{ url('/') }}/admin/memberships/create'"
                        class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                        <i data-feather="user-check" class="wd-16 mr-2"></i>Create Plan</button>
                </div>
            @endif
        </div>
    </div>
    <!--/ Breadcrumb End -->
    <div class="col-md-12 col-lg-12 px-0">
        <div class="card mg-b-30">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-header-title tx-13 mb-0">{{ __('Plans List') }}</h6>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success mt-2">
                        {{ session('success') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-2">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if ($membershipPlans->isEmpty())
                    <p>No membership plans available.</p>
                @else
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Plan Name</th>
                                    <th>Discount Percentage</th>
                                    <th>Duration</th>
                                    <th>Price</th>
                                    <th>Badge Text</th>
                                    <th>Description</th>
                                    <th>Default Signup</th>
                                    @if (Session::has('permissions') && (in_array('Plan Edit', Session::get('permissions')) || in_array('Plan Delete', Session::get('permissions')) || in_array('Subscribers', Session::get('permissions'))))
                                    <th>Actions</th>@endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($membershipPlans as $plan)
                                    <tr>
                                        <td>{{ $plan->plan_name }}</td>
                                        <td>{{ $plan->discount_percentage }}%</td>
                                        <td>{{ $plan->duration }}</td>
                                        <td>${{ $plan->price }}</td>
                                        <td>{{ $plan->badge_text }}</td>
                                        <td>{{ $plan->description }}</td>
                                        <td>
                                            <input type="checkbox" plan-id="{{ $plan->id }}" onclick="changeDefaultSignup(this)"
                                                name="default_signup" class="mx-2 checkbox plan_checkbox" @if ($plan->signup)
                                                checked @endif>
                                        </td>
                                        @if (Session::has('permissions') && (in_array('Plan Edit', Session::get('permissions')) || in_array('Plan Delete', Session::get('permissions')) || in_array('Subscribers', Session::get('permissions'))))
                                            <td>
                                                @if (Session::has('permissions') && in_array('Plan Edit', Session::get('permissions')))
                                                    <a href="{{ route('memberships.edit', ['membership' => $plan->id]) }}"
                                                        class="btn badge btn-primary">Edit</a>
                                                @endif
                                                <form action="{{ route('memberships.destroy', ['membership' => $plan->id]) }}"
                                                    method="POST" style="display: inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    @if (Session::has('permissions') && in_array('Plan Delete', Session::get('permissions')))
                                                        <button type="submit" class="btn badge btn-danger"
                                                            onclick="return confirm('Are you sure you want to delete this plan?')">Delete</button>
                                                    @endif
                                                </form>
                                                @if (Session::has('permissions') && in_array('Subscribers', Session::get('permissions')))
                                                    <button class="btn badge btn-info subscriber_model_btn"
                                                        plan-id="{{ $plan->id }}">Subscribers</button>
                                                @endif
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
<!--/ Page Inner End -->
<div class="modal fade" id="subscriber_model" tabindex="-1" aria-labelledby="subscriber_modelLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <input type="hidden" id="plan_id_input" value="">
                <h5 class="modal-title" id="subscriber_modelLabel">Plan Members List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row p-0">
                    <div class="col-md-4 border-right">
                        <div class="form-group">
                            <label for="search_customer">Search Customer</label>
                            <input type="text" class="form-control form-control-sm" oninput="searchCustomer(this)"
                                placeholder="John...">
                        </div>
                        <div class="border" id="customer_list_SEction"
                            style="height: 400px; max-height:400px;max-width:100%;overflow-x:hidden;overflow-y:scroll !important;">
                            <div class="my-5 text-secondary text-center">No Customer Found!</div>
                        </div>
                    </div>
                    <div class="col-md-8 p-0">
                        <table class="w-100 table subscrible_model_table">
                            <thead>
                                <tr>
                                    <td class="w-40">Name</td>
                                    <td class="w-20">Subscribed Date</td>
                                    <td class="w-20">Expired Date</td>
                                    <td class="w-10">Status</td>
                                    <td class="w-10">Action</td>
                                </tr>
                            </thead>
                            <tbody id="subscriber_section"
                                style="height:420px;max-height:420px;overflow-y:auto;display:block;">
                                <tr>
                                    <td colspan='5' class='text-center'>
                                        <div class="spinner-border spinner-border-sm" role="status">
                                            <span class="visually-hidden"></span>
                                        </div>
                                        <div class="spinner-grow spinner-grow-sm" role="status">
                                            <span class="visually-hidden"></span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>


                </div>
            </div>
            <div class="modal-footer">
                <span class="response_Section"></span>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="save_changes">Save changes</button>
            </div>
        </div>
    </div>
</div>



@include('Admin.Includes.footer')
<script>
    $(document).ready(function () {
        $('.subscriber_model_btn').click(function () {
            var plan_id = $(this).attr('plan-id');
            $('#plan_id_input').val(plan_id);
            $('.response_Section').html('');
            var subscriberList = document.getElementById('subscriber_section');
            subscriberList.innerHTML = `<tr><td colspan='4' class='text-center'><div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden"></span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden"></span>
</div></td></tr>`;
            subscriber_list(plan_id);
            $('#subscriber_model').modal('show');
        });
        $('#save_changes').click(function () {
            var plan_id = $('#plan_id_input').val();
            var customerids = [];
            $('.customer_checkbox:checked').each(function () {
                customerids.push($(this).val());
            });
            if (customerids.length > 0) {
                subscriber_add(plan_id, customerids);
            } else {
                alert('There are no changes to save!');
            }

        });
    });

    function subscriber_add(plan_id, customerids) {

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                subscriber_list(plan_id);
                $('.response_Section').html('<div class="alert alert-success py-1 my-0">' + response.message +
                    '</div>');
            }
        };

        xhr.open('GET', '/admin/memberships/plans/add_subscriber?plan_id=' + plan_id + '&subscriber_ids=' + customerids,
            true);
        xhr.send();
        subscriber_list(plan_id);
    }

    function subscriber_list(plan_id) {

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                displaySubscriber(response.subscribers);
            }
        };

        xhr.open('GET', '/admin/memberships/plans/subscriber_list?plan_id=' + plan_id, true);
        xhr.send();
    }

    function searchCustomer(obj_) {

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                displayCustomers(response.customers);
            }
        };

        xhr.open('GET', '/admin/memberships/customers/search?customer-search=' + obj_.value, true);
        xhr.send();
    }

    function displaySubscriber(subscribers) {
        var subscriberList = document.getElementById('subscriber_section');
        subscriberList.innerHTML = ''; // Clear previous results

        if (subscribers.length === 0) {
            subscriberList.innerHTML =
                "<tr><td colspan='5' class='text-center'>This plan doesn't have any subscribers!</td></tr>";
            return;
        }

        var rows = '';

        subscribers.forEach(function (subscriber) {
            var subscription = '<span class="badge bg-success text-light">Valid</span>';
            if (subscriber.expired == 1) {
                subscription = '<span class="badge bg-secondary text-light">Expired</span>';
            }
            rows += `<tr>
                    <td class="w-40">${subscriber.name}</td>
                    <td class="w-20">${subscriber.starting_date}</td>
                    <td class="w-20">${subscriber.ending_date}</td>
                    <td class="w-10">${subscription}</td>
                    <td class="w-10">
                        <a href="javascript:void(0);" onclick="removeSubscriber(${subscriber.id}, ${subscriber.plan_id})">
                            <i class="fas fa-trash text-danger"></i>
                        </a>
                    </td>
                </tr>`;
        });
        $(subscriberList).append(rows);
    }



    function removeSubscriber(subscriber_id, plan_id) {
        if (confirm("Are you sure you want to remove this subscriber?")) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    subscriber_list(plan_id); // Refresh the subscriber list
                    $('.response_Section').html('<div class="alert alert-success py-1 my-0">' + response.message +
                        '</div>');
                }
            };

            xhr.open('GET', '/admin/memberships/plans/remove_subscriber?subscriber_id=' + subscriber_id + '&plan_id=' +
                plan_id, true);
            xhr.send();
        }
    }
    function displayCustomers(customers) {
        var customerList = document.getElementById('customer_list_SEction');
        customerList.innerHTML = ''; // Clear previous results

        if (customers.length === 0) {
            customerList.innerHTML = '<div class="my-5 text-secondary text-center">No Customer Found!</div>';
            return;
        }

        var ul = '<ul class="m-0 p-0" style="list-style:none">';

        customers.forEach(function (customer) {

            ul = ul + `<li class="customer-item">
                <img src="${customer.profile_image}" alt="${customer.name}" class="customer-image">
                <div>
                    <div>${customer.name}</div>
                    <small class="text-secondary">${customer.email}</small>
                </div>
                <div class="custom-control custom-checkbox ml-auto">
                    <input type="checkbox" class="custom-control-input customer_checkbox" value="${customer.id}" id="customer${customer.id}">
                    <label class="custom-control-label" for="customer${customer.id}"></label>
                </div>
            </li>`;

        });
        ul = ul + '</ul>';
        $(customerList).append(ul);
    }
    function changeDefaultSignup(btnObj) {

        var id = btnObj.getAttribute('plan-id');

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.message) {
                    $('.plan_checkbox').prop('checked', false);
                    btnObj.checked = true;
                    alert(response.message);
                }
            }
        };
        xhr.open('GET', '/admin/memberships/plans/change_default_signup/' + id, true);
        xhr.send();
    }
</script>