@extends('layouts.admin')

@section('content')

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>{{ $client->name }} Plans List</h4>
                    <h6>Manage your client's plans</h6>
                    <a href="javascript:void(0);" class="btn btn-sm btn-primary mt-1" data-bs-toggle="modal" data-bs-target="#assignPlansModal">
                        <i class="fa fa-plus-circle"></i> Assign More Plans
                    </a>
                </div>
            </div>
        </div>

        <div class="card table-list-card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <a href="javascript:void(0);" class="btn btn-searchset"><i data-feather="search"
                                    class="feather-search"></i></a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive product-list">
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Plan Name</th>
                                <th>Subscription ID</th> 
                                <th>Date of Purchase</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($allPlans as $plan)
                                <tr>
                                    <td>{{ $plan['plan_name'] }}</td>
                                    <td>{{ $plan['subscription_id'] ?? 'N/A' }}</td>
                                    <td>{{ $plan['purchase_date']->format('Y-m-d') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Assign More Plans Modal -->
<div class="modal fade" id="assignPlansModal" tabindex="-1" aria-labelledby="assignPlansModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignPlansModalLabel">Assign More Plans</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="assignPlansForm">
                    <input type="hidden" name="client_id" id="client_id" value="{{ $client->id }}">

                    <div class="mb-3">
                        <label>Select Plans:</label>
                        <div class="form-check">
                            @foreach($clientAvailablePlans as $plan)
                                <div class="form-check">
                                    <input class="form-check-input plan-checkbox" type="checkbox" name="plans[]" value="{{ $plan->id }}" id="plan{{ $plan->id }}">
                                    <label class="form-check-label" for="plan{{ $plan->id }}">
                                        {{ $plan->name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Assign Plans</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        $('#assignPlansForm').submit(function (e) {
            e.preventDefault();

            let selectedPlans = [];
            $('.plan-checkbox:checked').each(function () {
                selectedPlans.push($(this).val());
            });

            if (selectedPlans.length === 0) {
                alert('Please select at least one plan.');
                return;
            }

            $.ajax({
                url: "{{ route('client.more.plans', ['id' => $client->id]) }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    plans: selectedPlans
                },
                success: function (response) {
                    if (response.status === "success") {
                        alert(response.message);
                        location.reload(); // Reload to reflect changes
                    }
                },
                error: function (xhr) {
                    let errorMessage = xhr.responseJSON?.message || 'An error occurred.';
                    alert('Error: ' + errorMessage);
                }
            });
        });
    });
</script>
@endsection