@extends('layout._default')
@section('title')
    Subscription Plans
@endsection
@section('body-con')

<div class="card">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <!--begin::Card title-->
        <div class="card-title">
            <!--begin::Search-->
            {{-- <div class="d-flex align-items-center position-relative my-1">
                {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!}
                <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search Message" id="mySearchInput"/>

            </div> --}}
            <!--end::Search-->
        </div>
        <!--begin::Card title-->

        <!--begin::Card toolbar-->
        <div class="card-toolbar">
            <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                <!--begin::Add user-->
                {{-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_message">
                    {!! getIcon('plus', 'fs-2', '', 'i') !!}
                    New Subscription
                </button> --}}
                <!--end::Add user-->
            </div>

        </div>
        <!--end::Card toolbar-->
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body py-4">
        <!--begin::Table-->
        <div>

            <table class="table table-striped">
                <thead style="font-weight: 700;">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Plan Name</th>
                    <th scope="col">Monthly Price</th>
                    <th scope="col">Yearly Price</th>
                    <th scope="col">Type</th>
                    <th scope="col">Device</th>
                    {{-- <th scope="col">Action</th> --}}
                  </tr>
                </thead>
                <tbody>
                    @foreach ($subscriptionPlans as $value)
                        <tr>
                            <th scope="row">{{$value->id}}</th>
                            <th scope="row">{{$value->name}}</th>
                            <td>{{$value->monthly_price}}</td>
                            <td>{{$value->yearly_price}}</td>
                            <td>{{$value->subscription_for}}</td>
                            <td>{{$value->map_version}}</td>
                            {{-- <td> @if($value->type != 'free')<a href="javascript:void(0)"  onclick="editPrice('{{$value->id}}')" >Edit Price</a> @endif</td> --}}
                        </tr>
                    @endforeach
                </tbody>
              </table>

        </div>
        <!--end::Table-->
    </div>
    <!--end::Card body-->
</div>

<div class="modal fade" id="kt_modal_edit_subscription" tabindex="-1" aria-hidden="true" wire:ignore.self>
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content">
            <!--begin::Modal header-->
            <div class="modal-header" id="kt_modal_add_user_header">
                <!--begin::Modal title-->
                <h2 class="fw-bold">Edit Subscription Plan Price</h2>
                <!--end::Modal title-->
                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal" aria-label="Close">
                    {!! getIcon('cross','fs-1') !!}
                </div>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body px-5 my-7" id="edit-subscription-modal-body">
                
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>

{{-- @include('livewire.user.add-user-modal') --}}
@push('scripts')

    <script>
        KTMenu.init();
        $('#kt_modal_add_user_form').on('submit', function(e) {
            e.preventDefault();

            if(validateForm()) {
                this.submit();
            }
        });

        function editPrice(id)
        {
            $.ajax({
                type: "GET",
                url: "/admin/subscriptions/edit/"+id,
                success: function(response)
                {
                    if(response.status == 1)
                    {
                        $("#edit-subscription-modal-body").empty();
                        $("#edit-subscription-modal-body").append(response.html);
                        $("#kt_modal_edit_subscription").modal("show");
                    }
                    
                }
            })
        }
    </script>
@endpush


@endsection