@extends('admin.layouts.app')
@section('title')
    {{ __('plan_list') }}
@endsection
@section('content')
    <div class="container-fluid">


        <div class="row justify-content-between align-items-center">
            <div class="col-sm-12 col-md-4">
                @if (userCan('plan.update') && $plans->count())
                    <form action="{{ route('module.plan.recommended') }}" method="POST">
                        @csrf
                        <div>
                            <label class="" for="">{{ __('set_recommended_package') }}</label>
                        </div>
                        <div class="d-flex">
                            <select name="plan_id" class="form-control" id="">
                                <option value="" hidden>{{ __('select_one') }}</option>
                                @foreach (@$plans as $plan)
                                    <option {{ @$plan->recommended ? 'selected' : '' }} value="{{ @$plan->id }}">
                                        {{ @$plan->title }}
                                    </option>
                                @endforeach
                            </select>
                            <button type="submit" class="btn btn-primary ml-2">{{ __('update') }}</button>
                        </div>
                    </form>
                @endif
            </div>
            <div class="col-sm-12 col-md-4 text-md-right">
                <div>
                    <label class="" for=""></label>
                </div>
                @if (userCan('plan.create'))
                    <a href="{{ route('module.plan.create') }}" class="btn bg-primary rounded mt-2"><i
                            class="fas fa-plus"></i>&nbsp;
                        {{ __('create') }}
                    </a>
                @endif
            </div>
        </div>
        <div class="row h-100 mt-4">
            <div>
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col" class="text-center">Plan Id</th>
                        <th scope="col" class="text-center">Package Name</th>
                        <th scope="col" class="text-center">Price</th>
                        <th scope="col" class="text-center">Code</th>
                        {{-- <th scope="col" class="text-center">Description</th> --}}
                        <th scope="col" class="text-center">Country</th>
                        <th scope="col" class="text-center">Edit Plan</th>
                        {{-- <th scope="col">Delete Plan</th> --}}
                      </tr>
                    </thead>
                    <tbody>
                        @if(@$plans->count() > 0)
                            @foreach (@$plans as $plan)
                                <tr>
                                    <th class="text-center">{{@$plan->id}}</th>
                                    <td class="text-center">{{@$plan->title}}</td>
                                    <td class="text-center">{{@$plan->currency}} {{$plan->price}}</td>
                                    <td class="text-center">{{@$plan->code}}</td>
                                    {{-- <td class="text-center">
                                        @php
                                            $description=@$plan->description;
                                            $firstPart = substr(@$description, 0, 45);
                                            $remainingPart = substr(@$description, 45);
                                        @endphp
                                        <div class="d-flex justify-content-center align-items-center">
                                            <div class="onHover">
                                                {!! @$firstPart !!}
                                            </div>
                                            @if(strlen(@$remainingPart) > 0)
                                                <div class="hover-trigger">
                                                    <i class="fa fa-eye ml-3 pb-3" aria-hidden="true"></i>
                                                    <div class="popup-content">
                                                        {!! @$remainingPart !!}
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </td> --}}
                                    <td class="text-center">{{ @$plan->country->name }}</td>
                                    <td class="text-center">
                                        @if (userCan('plan.update'))
                                            <a href="{{ route('module.plan.edit', @$plan->id) }}" class="btn btn-primary">
                                            <i class="fas fa-edit"></i>
                                            </a>
                                        @endif
                                    </td>
                                    {{-- <td>
                                        <form action="{{ route('module.plan.delete', $plan->id) }}" class=""
                                            method="POST"
                                            onclick="return confirm('{{ __('are_you_sure_you_want_to_delete_this_item') }}')">
                                            @csrf
                                            @method('delete')
                                            <button type="submit" class="btn btn-danger w-100-p">
                                                <i class="fas fa-trash"></i>
                                                {{ __('delete') }}
                                            </button>
                                        </form>
                                    </td>                                                                                     --}}
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="10">
                                    <div class="container text-center">
                                        <x-not-found message="{{ __('no_data_found') }}" />
                                        @if (userCan('plan.create'))
                                            <a href="{{ route('module.plan.create') }}" class="plan-btn btn btn-primary">
                                                {{ __('add_your_first_plan') }}
                                            </a>
                                        @endif
                                    </div>                                    
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('style')
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style>
    .popup-content {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border: 3px solid #ccc;
        padding: 10px;
        z-index: 1;
    }

    .icon {
        height: 25px;
        width: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #007bff;
        border-radius: 50%;
        color: white;
    }
    .line-break{
        word-wrap: break-word; 
            max-width: 10em;
    }
</style>
@endsection

@section('script')   
    <script>
        function MonthlyPrice(plan) {

            if ($('#customSwitch' + plan.id).is(":checked")) {
                $('#price' + plan.id).html("$" + plan.monthly_price);
                $('#monthoryear' + plan.id).html("{{ __('/monthly') }}");
            } else {
                $('#price' + plan.id).html("$" + plan.yearly_price);
                $('#monthoryear' + plan.id).html("{{ __('/yearly') }}");
            }
        }
        $('.hover-trigger').hover(
        function () {
            // Mouse over
            $(this).find('.popup-content').show();
        },
        function () {
            // Mouse out
            $(this).find('.popup-content').hide();
        }
    );
    </script>
@endsection