@extends('admin.layouts.app')
@section('title')
    {{ __('edit') }}
@endsection
@section('content')
    @if (userCan('plan.update'))
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title line-height-36">{{ __('edit') }} {{ __('plan') }}</h3>
                            <a href="{{ route('candidate.edit', $orders->candidate_id) }}"
                                class="btn bg-primary float-right d-flex align-items-center justify-content-center">
                                <i class="fas fa-arrow-left"></i>&nbsp; {{ __('back') }}
                            </a>
                        </div>
                        <div class="card-body">
                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <form action="{{ route('order.update', @$orders->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="user_id" value="{{@$orders->candidate->user_id}}">
                                        <input type="hidden" name="page" value="candidatePage">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="plan_category">{{ __('Plan Title') }} <small
                                                        class="text-danger">*</small></label>
                                                        <select name="plan_id" id="plan_category" class="form-control @error('plan_id') is-invalid @enderror">
                                                            <option value="{{@$orders->plan_id}}">{{@$orders->plan->title}}</option>
                                                            @foreach ($plans as $plan)
                                                                <option value="{{@$plan->id}}">{{@$plan->title}}</option>
                                                            @endforeach
                                                        </select>
                                                    @error('category')
                                                        <span class="invalid-feedback" role="alert">{{ __($message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 priceToggle">
                                                <div class="form-group">
                                                    <label class="form-label" for="price">{{ __('price') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="price" steps="0" name="price" value="{{@$orders->amount}}"
                                                        class="form-control @error('price') is-invalid @enderror"
                                                        placeholder="{{ __('10') }}{{ defaultCurrencySymbol() }}" oninput="this.value = this.value.replace(/[^0-9.]/g, '').substring(0, 10);>
                                                    @error('price')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                           
                                        </div>
                                        <div class="row justify-content-center">
                                            <button class="btn btn-success" type="submit">
                                                <i class="fas fa-sync"></i>&nbsp; {{ __('update') }}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection


@section('script')
<script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>

    <script>
        checkSubscriptionType('{{ old("subscription_type", $plan->subscription_type) }}');

        $('.plan_type_selection').on('click', function(value){
            var value = $("[name='subscription_type']:checked").val();
            checkSubscriptionType(this.value);
        });

        function checkSubscriptionType(type){
            if (type == 'recurring') {
                $('#plan_interval').removeClass('d-none');
            }else{
                $('#plan_interval').addClass('d-none');
            }
        }

        profileViewLimitation('{{ old("candidate_cv_view_limitation", $plan->candidate_cv_view_limitation) }}');

        function profileViewLimitation(status){
            if (status == 'unlimited') {
                $('#candidate_profile_view_count_field').addClass('d-none');
            }else{
                $('#candidate_profile_view_count_field').removeClass('d-none');
            }
        }

        $('.candidate_profile_view').on('click', function(value){
            var value = $("[name='candidate_cv_view_limitation']:checked").val();
            profileViewLimitation(this.value);
        });

        $('#plan_category').on('change', function() {
            var plan_category_id = $(this).find('option:selected').val();
            if(plan_category_id != '' && plan_category_id != undefined){
                $.ajax({
                    url: "{{ route('order.plan-details',['plan_category_id' => ':plan_category_id']) }}",
                    type: 'GET',
                    data: {
                        plan_category_id: plan_category_id
                    },
                    success: function(res) {
                        $('#price').val(res)
                        $('.priceToggle').show();
                    }
                });   
            }
        });
    </script>
    <script>
        $('#filterForm').on('change', function() {
            $(this).submit();
        })
    
        $('.select2bs4').select2({
            theme: 'bootstrap4',
            ajax: {
                url: '{{ route('order.searchCandidate') }}',
                dataType: 'json',
                type: "GET",
                quietMillis: 50,
                data: function (term) {
                    console.log('item',term);
                    return {
                        term : term,
                    };
                },
                processResults: function (data) {
                    console.log('data',data)
                    return {
                        results: $.map(data, function (item) {
                            return {
                                id: item.user_id,
                                text: `${item.name} (${item.user_id})`
                            }
                        })
                    };
                }
            }
        });
    
        $('.select2-search__field').on('keypress', function (e) {
            console.log('123');
            var name = $(".select2-search__field").val();
        });
    </script>
@endsection


@section('style')
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<style>
    .select2-results__option[aria-selected=true] {
        display: none;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
        color: #fff;
        border: 1px solid #fff;
        background: #007bff;
        border-radius: 30px;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
    }
</style>
@endsection