@extends('layouts.admin')

@section('css')
    <style>
        .permission_card {
            width: 200px;
            background: #fff;
            /*border: 1px solid #000;*/
            border-radius: 4px;
            height: 100px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Add a box shadow */
        }
    </style>
@endsection

@section('content')
    <div class="page-header text-uppercase">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ $data->id ?  __('subscriptions.edit') :  __('subscriptions.add') }}</p>

            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{__('common.home') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{route('master-admin.subscriptions.index')}}">{{ __('subscriptions.title') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page"> {{ $data->id ?  __('subscriptions.edit') :  __('subscriptions.add') }}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col">
        <div class="row employee-list-view">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 employee-list-full">
                <div class="round-white-bg box-shadow">
                    <div class="d-block">
                        <div class="error-msg font-14"></div>
                    </div>
                    {{ Form::open(array('route' => $routes, 'method' => 'POST', 'id' => 'ajaxSave'))}}
                    @if($data->id) @method('PUT') @endif
                    <div class="row mt-2">
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div class="custom-input-group colored-field-group col-12">
                                <div class="custom-input-group colored-field-group">
                                    {{Form::label('name', __('company.name'), array('class' => 'control-label'))}}
                                    {{ Form::select('master_company_id',['' => __('subscriptions.select_company')]+$companies,$data->master_company_id ?? '', array('class' => 'form-control'))}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mx-2 mb-5">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <label class="font-bold">{!! __('company.choose_plan') !!}</label>
                            <div class="row">
                                @foreach($subscriptionPlans as $subscriptionPlan)
                                    @php $checked = ($data->plan_id == $subscriptionPlan['id']); @endphp
                                    <div class="col-xs-3 col-md-3 mt-3 __plan">
                                        <div class="card __select_plan" style="border: 2px solid {!! $checked ? '#e26314' :'#b1a5a5' !!};background: #fff;cursor: pointer;min-height: 150px;">
                                            <div class="image-preview-container" style="width: 100%">
                                                <img src="{{ getImagePath($subscriptionPlan['image'])}}" class="img-fluid" alt="" style="padding: 3px 25px;border-radius: 50%;"/>
                                            </div>
                                            <div class="text-center p-2 ">
                                                <h6 class="mt-2">{!! $subscriptionPlan['plan_name'] !!}</h6>
                                                <span class="font-11" style="font-size: 12px;">{!! numberFormat($subscriptionPlan['regular_price']) !!}</span>
                                                {!! Form::radio('plan_id',$subscriptionPlan['id'],$checked,['class' => '' , 'style' => 'display:none', 'data-reguler_price' => $subscriptionPlan['regular_price'] , 'data-offer_price' => $subscriptionPlan['offer_price']]) !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="row mx-2 mb-3">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <label class="font-bold">{!! __('company.add_on') !!}</label>
                            <div class="row ml-2 mb-4">
                                <div class="col-md-12" style="display: contents;">
                                    @foreach($modules as $m)
                                        <div class="permission_card px-2 py-2 mb-4 mr-4 __add_on_module">
                                            <div class="d-flex ">
                                                <div class="col-md-2 d-flex text-align-center align-self-center pl-1">
                                                    {!! Form::checkbox('allowed_modules[]',$m->id ,in_array($m->id,$activeModules),['data-price' => $m->price ,'class'=> '']) !!}
                                                </div>
                                                <div class="col-md-10">
                                                    <p>{!! $m->title !!}</p>
                                                    <p>{!! numberFormat($m->price) !!}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="custom-input-group colored-field-group col-12">
                        <label for="">{!! __('company.total_price') !!}</label>
                        <span class="__subscription_total"></span>
                    </div>
                    <div class="custom-input-group colored-field-group col-12">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                {{ Form::submit( __('common.save'), array('class' => 'btn btn-primary width80'))}}
                            </li>
                        </ul>
                    </div>
                </div>
                {{ Form::close()}}
            </div>
        </div>

    </div>
    </div>

@endsection

@section('script')
    <script>
        let currency = '{!! currency() !!}';
        $(document).on('click','.__select_plan',function(){
            let $elem = $(this).children().find('input[name="plan_id"]').prop('checked',true);
            $('.__select_plan').css('border','2px solid #b1a5a5');
            $elem.closest('.__select_plan').css('border','2px solid #e26314');
        });
    </script>
    <script type="text/javascript">

        $(document).on('click','.permission_card',function(){
            let elem = $(this).find('[name="allowed_modules[]"]');
            elem.prop('checked',!elem.is(':checked'));
        });

        $(document).on('click click', '.__plan,.__add_on_module', calculatePlanPricing);

        function calculatePlanPricing() {
            const planPrice = parseFloat($('input[name="plan_id"]:checked').data('reguler_price')) || 0;
            const selectedModulePrices = $('[name="allowed_modules[]"]:checked').map(function() {
                return parseFloat($(this).data('price')) || 0;
            }).get();

            const addOnModuleTotal = selectedModulePrices.reduce((acc, currentValue) => acc + currentValue, 0);
            const totalPrice = (addOnModuleTotal + planPrice).toFixed(2).replace(".", ",");

            console.log(currency+totalPrice);
            $('.__subscription_total').html(currency+totalPrice);
        }

        $(function () {
            calculatePlanPricing();
        })

    </script>
@endsection