@extends('layouts.user_type.auth')

@section('packages')
    <div class="row">
        <div class="col-12">

            @include('components.alert')

            <div class="card mb-4 mx-4">
                <div class="card p-3">
                    <div class="d-flex flex-row justify-content-between">

                        <h5 class="mb-0">Manage Subscription Packages</h5>

                        <button class="btn btn-success mb-0" data-bs-toggle="modal" data-bs-target="#createEditPackageModal"
                            id="createButton">Create Package</button>

                    </div>

                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No
                                        </th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Package Name</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Pricing</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Duration (Months)</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Billing Cycle</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            User Limit</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Support Level</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($packages as $index => $package)
                                        <tr>
                                            <td class="ps-4">
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $packages->firstItem() + $index }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $package->package_name }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $package->pricing }} Rupees</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $package->duration }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $package->billing_cycle }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $package->user_limit }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $package->support_level }}</p>
                                            </td>
                                            <td class="text-center">

                                                <a href="#" class="mx-3" data-bs-toggle="modal"
                                                    data-bs-target="#createEditPackageModal"
                                                    onclick="openEditModal({{ $package }})">
                                                    <i class="fas fa-user-edit text-secondary"></i>
                                                </a>

                                                @if ($package->package_status !== 'deleted')
                                                    <form method="POST"
                                                        action="{{ route('packages.delete', $package->id) }}"
                                                        style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="delete_package_id"
                                                            value="{{ $package->id }}">
                                                        <button type="submit" title="Delete package"
                                                            style="background: none; border: none; padding: 0; cursor: pointer;"
                                                            onclick="return confirm('Are you sure you want to delete this package?');">
                                                            <i class="fas fa-trash text-secondary"
                                                                data-bs-toggle="tooltip"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center py-5">
                                                <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                    style="width: 200px; opacity: 0.6;">
                                                <p class="mt-2 text-muted">No data Found</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            @include('components.pagination', ['paginator' => $packages])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <div class="modal fade" id="createEditPackageModal" tabindex="-1" role="dialog"
        aria-labelledby="createEditPackageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="packageModalLable">Create Package</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="packageForm" action="{{ route('packages.storeOrUpdate') }}" method="POST">
                        @csrf
                        <input type="hidden" id="package_id" name="id">

                        <div class="row">
                            <!-- Left Side -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="package_name">Package Name<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="package_name" name="package_name"
                                        required>
                                </div>
                                <div class="form-group">
                                    <label for="pricing">Pricing<span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="pricing" name="pricing" required>
                                </div>
                                <div class="form-group">
                                    <label for="description">Description<span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="description" name="description" required></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="billing_cycle">Billing Cycle<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="billing_cycle" name="billing_cycle"
                                        required>
                                </div>
                                <div class="form-group">
                                    <label for="included_features">Included Features (comma-separated)<span
                                            class="text-danger">*</span></label>
                                    <textarea class="form-control" id="included_features" name="included_features" required></textarea>
                                </div>
                            </div>

                            <!-- Right Side -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="duration">Duration (Months)<span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="duration" name="duration" required>
                                </div>
                                <div class="form-group">
                                    <label for="user_limit">User Limit<span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="user_limit" name="user_limit"
                                        required>
                                </div>
                                <div class="form-group">
                                    <label for="support_level">Support Level</label>
                                    <input type="text" class="form-control" id="support_level" name="support_level">
                                </div>
                                <div class="form-group">
                                    <label for="package_status">Package Status<span class="text-danger">*</span></label>
                                    <select class="form-control" id="package_status" name="package_status" required>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="submitButton" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <script>
        function openEditModal(package) {
            document.getElementById('packageModalLable').innerText = 'Update Package';
            document.getElementById('submitButton').innerText = 'Update';
            document.getElementById('package_id').value = package.id;
            document.getElementById('package_name').value = package.package_name;
            document.getElementById('description').value = package.description;
            document.getElementById('pricing').value = package.pricing;
            document.getElementById('billing_cycle').value = package.billing_cycle;
            document.getElementById('duration').value = package.duration;
            document.getElementById('included_features').value = package.included_features;
            document.getElementById('user_limit').value = package.user_limit;
            document.getElementById('support_level').value = package.support_level;
            document.getElementById('package_status').value = package.package_status;

            if (package.package_status === 'deleted') {
                document.getElementById('package_status').innerHTML += '<option value="deleted" selected>Deleted</option>';
            }
        }


        document.addEventListener("DOMContentLoaded", function() {

            document.getElementById('createButton').addEventListener('click', function() {

                document.getElementById('packageForm').reset();

                document.getElementById('package_status').value = 'active';
            });

        });
    </script>
@endsection