@extends('admin.layouts.app')
@section('panel')
<div class="row">
    <div class="col-lg-12">
        <form method="POST" action="{{ route('admin.plan.save',@$plan->id) }}">
        @csrf
        <div class="card b-radius--10 ">
            <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>@lang('Name')</label>
                                <input class="form-control" type="text" name="name" value="{{ old('name',@$plan->name) }}" required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>@lang('Price')</label>
                                <div class="input-group">
                                    @php
                                        $price=@$plan->price ? getAmount(@$plan->price) : '';
                                    @endphp
                                    <input class="form-control" type="number" name="price" value="{{old('price',$price)}}" step="any" required>
                                    <span class="input-group-text">{{ __($general->cur_text) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>@lang('Duration')</label>
                                <div class="input-group">
                                    <input class="form-control" type="number" name="duration" value="{{ old('duration',@$plan->duration) }}" required>
                                    <span class="input-group-text">@lang('Months')</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>@lang('Number Of Job Post')</label>
                                <input class="form-control" type="number" name="job_post" value="{{ old('job_post',@$plan->job_post) }}" required>
                            </div>
                        </div>
                        <div class="col-lg-8 col-xl-10">
                            <div class="form-group">
                                <label>@lang('Icon')</label>
                                <div class="input-group">
                                    <input class="form-control iconPicker" type="text" autocomplete="off" name="icon" value="{{ old('icon',@$plan->icon) }}" required>
                                    <span class="input-group-text">
                                        <i class="las la-code"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl-2">
                            <div class="form-group">
                                <label>@lang('Select All Services')</label>
                                <input type="checkbox" data-width="100%" data-size="large" data-onstyle="-success" data-offstyle="-danger" data-bs-toggle="toggle" data-height="35" data-on="@lang('YES')" data-off="@lang('NO')" class="select-all-service" name="select_all_service" @checked(old('select_all_service'))>
                            </div>
                        </div>
                    </div>
                    <div class="border-line-area">
                        <h6 class="border-line-title">@lang('Add Service To Plan')</h6>
                    </div>
                    <div class="row">
                        @php
                            $serviceId=@$plan->services ? $plan->services->pluck('service_id')->toArray() : [];
                        @endphp
                        @foreach($services->chunk(1) as $service)
                            <div class="col-lg-6 col-xl-4 col-md-6">
                                <div class="form-group form-check">
                                    @foreach($service as $value)
                                        <input type="checkbox"  name="service[]" class="service" value="{{$value->id}}" id="{{$value->id}}"
                                            @checked(in_array($value->id,$serviceId))>
                                        <label class="form-check-label" for="{{$value->id}}">{{ucwords($value->name)}}</label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn--primary w-100 h-45">@lang('Submit')</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('breadcrumb-plugins')
<x-back route="{{ route('admin.plan.index') }}" />
@endpush

@push('style-lib')
<link href="{{ asset('assets/admin/css/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/admin/js/fontawesome-iconpicker.js') }}"></script>
@endpush
@push('script')
    <script>
        "use strict";
        (function ($) {
            $('.iconPicker').iconpicker().on('iconpickerSelected', function (e) {
                $(this).closest('.form-group').find('.iconpicker-input').val(`<i class="${e.iconpickerValue}"></i>`);
            });
            $('.select-all-service').on('change',function(e){
               if(this.checked){
                    $('.service').attr('checked',true);
                }else{
                    $('.service').attr('checked',false);
                }
            });
            @if(old('service'))
                let serviceIds=@json(old('service'));
                $.each(serviceIds, function (i, serviceId) {
                    $(`input[type=checkbox][value=${serviceId}]`).attr('checked',true)
                });
            @endif
        })(jQuery);

    </script>
@endpush

@push('style')
<style>
    .border-line-area {
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .border-line-area::before {
        position: absolute;
        content: '';
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #e5e5e5;
        z-index: -1;
    }

    .border-line-title {
        display: inline-block;
        padding: 3px 10px;
        background-color: #fff;
    }
</style>
@endpush