@extends('admin.layouts.app')
@section('title')
    {{ __('create') }}
@endsection
@section('content')
    @if (userCan('order.create'))
        <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">{{ __('create') }} {{ __('order') }}</h3>
                            <a href="{{ route('candidate.edit',$candidates->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.store') }}" method="POST">
                                        @csrf
                                        <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="">Select Plan</option>
                                                            @foreach (@$plans as $plan)
                                                                <option value="{{@$plan->id}}">{{@$plan->title}}</option>
                                                            @endforeach
                                                        </select>
                                                    @error('plan_id')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 priceToggle" style="display: none">
                                                <div class="form-group">
                                                    <label class="form-label" for="price">{{ __('price') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="number" id="price" name="price" value="{{@$plan->price}}"
                                                        class="form-control @error('price') is-invalid @enderror"
                                                        placeholder="{{ __('10') }}{{ defaultCurrencySymbol() }}">
                                                    @error('price')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <input type="hidden" name="user_id" value="{{$candidates->user_id}}">
                                            <input type="hidden" name="page" value="candidatePage">
                                        </div>
                                        <div class="row justify-content-center">
                                            <button class="btn btn-success" type="submit">
                                                <i class="fas fa-plus"></i>&nbsp; {{ __('create') }}
                                            </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>
        $('#filterForm').on('change', function() {
            $(this).submit();
        })

        $('#plan_category').on('change', function() {
            $('.priceToggle').hide();
            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();
                    }
                });   
            }
        });

        $('.select2bs4').select2({
            theme: 'bootstrap4',
            ajax: {
                url: '{{ route('order.searchCandidate') }}',
                dataType: 'json',
                type: "GET",
                quietMillis: 50,
                data: function (term) {
                    return {
                        term : term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                id: item.user_id,
                                text: `${item.name} (${item.user_id})`
                            }
                        })
                    };
                }
            }
        });
    </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