@extends('layouts.landing')

@section('title')
    Subscription Package
@endsection

@section('content')
    @if (Auth::user()->isTenant())
        @php
         $package = App\Models\Package::where("id", Auth::user()->package_id)->first();
        @endphp
      
        <div class="row mobile-mt-10 mb-4">
            @if($package)
            <div class="col">
                <h5>Tenant Package: <span style="color: #5151ff">{{ $package->name}}</span></h5>
            </div>
            @else
            <div class="col">
                <h5>Tenant Package: <span style="color: #5151ff">Free Plan</span></h5>
            </div>
            @endif
            <div class="col-auto">
            
                <a href="/platform-packages" class="menu-btn custom-btn-outline mx-2 mb-4 rounded-5">
                    Upgrade Plan
                </a>
            </div>
        </div>
        <hr class="mb-3"/>
    @endif
    <div class="row mobile-mt-10">
        <div class="col">
            <h4>Subscription Packages</h4>
        </div>
        <div class="col-auto">
            <a data-toggle="modal" data-target="#packageModal" class="btn custom-btn text-white">
                <i class="fe fe-plus"></i> Add Package
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3"
                data-list='{"valueNames": ["name"], "page": 10, "pagination": {"paginationClass": "list-pagination"}}'
                id="contactsList">
                <div class="card-header">
                    <form>
                        <div class="input-group input-group-flush input-group-merge input-group-reverse">
                            <input class="form-control list-search" type="search" placeholder="Search">
                            <span class="input-group-text">
                                <i class="fe fe-search"></i>
                            </span>
                        </div>
                    </form>
                </div>
                <div class="table-responsive custom-overflow-x">
                                        @if (count($packages) > 0)
                        <table class="table">
                            <thead>
                                <tr class="my-2">
                                    <th><a href="#" class="text-muted list-sort" data-sort="orders-order">s/n</a></th>
                                    <th><a href="#" class="text-muted list-sort" data-sort="orders-product">Name</a>
                                    </th>
                                    <th><a href="#" class="text-muted list-sort" data-sort="orders-product">Price</a>
                                    </th>
                                    <th><a href="#" class="text-muted list-sort"
                                            data-sort="orders-product">Validity</a></th>
                                    <th><a href="#" class="text-muted list-sort"
                                            data-sort="orders-product">Duration</a></th>
                                    <th><a href="#" class="text-muted list-sort" data-sort="orders-product">Package
                                            Category</a></th>
                                    <th><a href="#" class="text-muted list-sort" data-sort="orders-date">Date
                                            Created</a></th>
                                    <th><a href="#" class="text-muted list-sort" data-sort="orders-total">Package
                                            Link</a></th>
                                    <th><a href="#" class="text-muted list-sort"
                                            data-sort="orders-product">Recommended</a></th>
                                    <th><a href="#" class="text-muted list-sort" data-sort="orders-status">Action</a>
                                    </th>
                                </tr>
                            </thead>
                            @foreach ($packages as $package)
                                <tbody class="list">
                                    <tr>
                                        <td class="orders-order font-xsss">{{ $package_no }}</td>
                                                                                <td class="orders-product name font-xsss">{{ $package->name }}</td>
                                        <td class="orders-total font-xsss">₦{{ number_format($package->price, 2) }}</td>
                                        <td class="orders-total font-xsss">
                                            @if ($package->validity == 'Days')
                                                @if ($package->recur_date > 1)
                                                    {{ $package->recur_date }} {{ $package->validity }}
                                                @else
                                                    {{ $package->recur_date }} Day
                                                @endif
                                            @elseif($package->validity == 'Months')
                                                @if ($package->recur_date > 1)
                                                    {{ $package->recur_date }} {{ $package->validity }}
                                                @else
                                                    {{ $package->recur_date }} Month
                                                @endif
                                            @elseif($package->validity == 'Years')
                                                @if ($package->recur_date > 1)
                                                    {{ $package->recur_date }} {{ $package->validity }}
                                                @else
                                                    {{ $package->recur_date }} Year
                                                @endif
                                            @endif
                                        </td>
                                        <td class="orders-total font-xsss">{{ $package->duration }}</td>

                                        <td class="orders-total font-xsss">
                                            {{ $package->feature_category }}
                                        </td>
                                        <td class="orders-total font-xsss">
                                            {{ \Carbon\Carbon::parse($package->created_at)->toFormattedDateString() }}</td>
                                        @if ($package->slug)
                                            <td class="orders-total font-xsss"><a
                                                    href="{{ route('checkout', $package->id) }}"
                                                    target="_blank">{{ $package->slug }}</a></td>
                                        @else
                                            <td class="orders-total font-xsss"><a href="" target="_blank"></a></td>
                                        @endif
                                        <td class="orders-total font-xsss">
                                            <form id="recommendPackage">
                                                <div class="form-check form-switch ml-5">
                                                    <input type="hidden" name="recommended" id="recommended">
                                                    <input type="checkbox" name="recommend" class="form-check-input"
                                                        onclick="recommendPackage('recommended', '{{ $package->id }}', this)"
                                                        {{ $package->recommended == 1 ? 'checked' : '' }}>
                                                    <label for="recommended" id="recommended_label"
                                                        class="form-check-label text-dark"></label>
                                                </div>
                                            </form>
                                        </td>
                                        <td class="text-end">
                                            <div class="dropdown user-drop">
                                                <a class="dropdown-togle" data-toggle="dropdown" role="button"
                                                    aria-haspopup="true" aria-expanded="false">
                                                    <i class="fe fe-more-vertical"></i>
                                                </a>
                                                <div
                                                    class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                                    <div class="card-body p-0 d-flex">
                                                        {{-- <a onclick="editPackage('{{$package->name}}', '{{$package->description}}', '{{$package->price}}', '{{$package->validity}}', '{{$package->duration}}', '{{$package->package_type}}', '{{$package->package_category}}', '{{$package->is_active}}', '{{$package->id}}')" class="dropdown-item">
                                                        <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                        Edit
                                                    </a> --}}
                                                        <a href="{{ route('sub.edit-package', $package->id) }}"
                                                            class="dropdown-item text-dark">
                                                            <i class="mdi mdi-pencil text-dark me-3 font-xss"
                                                                aria-hidden="true"></i>
                                                            Edit
                                                        </a>
                                                    </div>
                                                    <div class="card-body p-0 d-flex">
                                                        <form action="/subscription/delete-package/{{ $package->id }}"
                                                            method="POST">
                                                            {{ csrf_field() }}
                                                            {{ method_field('DELETE') }}
                                                            <button type="submit" name="submit"
                                                                onclick="return removePackage();"
                                                                class="dropdown-item text-dark">
                                                                <i class="fe fe-trash mr-2"></i>Delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            @endforeach
                        </table>
                    @else
                        <div class="text-center my-4">
                            <p class="pt-2">There are no packages</p>
                        </div>
                    @endif
                </div>
                <!-- Pagination -->
                <div class="row g-0">
                    <!-- Pagination (prev) -->
                    <ul class="col list-pagination-prev pagination pagination-tabs justify-content-start">
                        <li class="page-item">
                            <a class="page-link" href="#">
                                <i class="fe fe-arrow-left me-1"></i> Prev
                            </a>
                        </li>
                    </ul>
                    <!-- Pagination -->
                    <ul class="col list-pagination pagination pagination-tabs justify-content-center"></ul>
                    <!-- Pagination (next) -->
                    <ul class="col list-pagination-next pagination pagination-tabs justify-content-end">
                        <li class="page-item">
                            <a class="page-link" href="#">
                                Next <i class="fe fe-arrow-right ms-1"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    @include('elements.package')
    @include('elements.add-package-category')
    <script>
        function removePackage() {
            if (!confirm("Are you sure you want to delete this Package?"))
                event.preventDefault();
        }

        function editPackage(name, description, price, validity, duration, packageType, packageCategory, isAtive,
        packageId) {
            document.getElementById("name").value = name;
            document.getElementById("description").value = description;
            document.getElementById("price").value = price;
            document.getElementById("validity").value = validity;
            document.getElementById("duration").value = duration;
            document.getElementById("package-type").value = duration;
            document.getElementById("package-category").value = duration;
            document.getElementById("is_active").value = duration;
            document.getElementById("package-id").value = packageId;
            $('#editPackage').modal('show')
        }

        function recommendPackage(divId, packageId, event) {
            if (event.checked == true) {
                $("#" + divId).val(1);
                var recommended = 1;
                $.ajax({
                    type: 'POST',
                    url: "/subscription/save-recommended/" + packageId,
                    data: {
                        "_token": "{{ csrf_token() }}",
                        recommended: recommended,
                    },
                    success: function(data) {
                        toastr.success("Package reommended", "", defaultSetting);
                        window.location.href = "{{ url('/subscription') }}";
                    },
                    error: function(error) {
                        toastr.error("There was a problem recommended this package", "", defaultSetting)
                    }
                });
            } else {
                $("#" + divId).val(0);
                var recommended = 0;
                $.ajax({
                    type: 'POST',
                    url: "/subscription/save-recommended/" + packageId,
                    data: {
                        "_token": "{{ csrf_token() }}",
                        recommended: recommended,
                    },
                    success: function(data) {
                        toastr.success("Package not recommended", "", defaultSetting);
                        window.location.href = "{{ url('/subscription') }}";
                    },
                    error: function(error) {
                        toastr.error("There was a problem not recommending this package", "", defaultSetting)
                    }
                });
            }
        }
    </script>
@endsection