@extends('template.master')
@section('title', 'Add/Edit Group Subscription')
@push('styles')
<style>
    .img_pre {
        width: 200px;
        height: 200px;
        padding: 10px;
    }

    .note-editable {
        min-height: 300px !important;
    }

    .modal-content>.modal-body>p>img {
        object-fit: contain;
        width: 100% !important;
        height: 100% !important;
    }

    .error {
        color: red;
    }
</style>
@endpush
@section('content')
<div class="mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                    <h4 class="card-title" style="color: #f0ac63 !important;"><strong>Add/Edit Group Subscription</strong></h4>
                    <a href="{{ route('group.subscription.index') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
                </div>
                <div class="card-body">
                    <form class="form" id="taxo-form" action="{{ isset($groupSubscription) && !empty($groupSubscription->group_subscription_id) ? route('group.subscription.update',$groupSubscription->group_subscription_id) :  route('group.subscription.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @if(isset($groupSubscription) && !empty($groupSubscription->group_subscription_id))
                        <input type="hidden" name="_method" value="PUT" />
                        <input type="hidden" name="group_subscription_id" value="{{$groupSubscription->group_subscription_id}}" />
                        @endif
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="assistant_phone_no" class="mt-2">Company <span class="text-danger">*</span></label>
                                    <select id='company_name' name="company_name" class="form-control">
                                        <option value="">--Select Company--</option>
                                        @foreach($company as $company_id => $company_name)
                                        <option value="{{$company_id}}" {{ $company_id ==  @$groupSubscription->company_name ?  'selected' : ''}}>{{$company_name}}</option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('subscription_id'))
                                    <div class="error">{{ $errors->first('subscription_id') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contact_name" class="mt-2">Contact Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="contact_name" name="contact_name" placeholder="Contact Name" required value="{{ (isset($groupSubscription) && !empty($groupSubscription->contact_name)) ? $groupSubscription->contact_name : old('contact_name') }}" maxlength="255">
                                    @if($errors->has('contact_name'))
                                    <div class="error">{{ $errors->first('contact_name') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="title" class="mt-2">Job Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" placeholder="Job Title" required value="{{ (isset($groupSubscription) && !empty($groupSubscription->title)) ? $groupSubscription->title : old('title') }}" maxlength="255">
                                    @if($errors->has('title'))
                                    <div class="error">{{ $errors->first('title') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="mt-2">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="email" name="email" placeholder="Email" required value="{{ (isset($groupSubscription) && !empty($groupSubscription->email)) ? $groupSubscription->email : old('email') }}" maxlength="255">
                                    @if($errors->has('email'))
                                    <div class="error">{{ $errors->first('email') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="country_code" class="mt-2">Country Code <span class="text-danger">Default considered as US (+1)</span></label>
                                    <select id='country_code' name="country_code" class="form-control">
                                        @foreach($country as $short_code => $short_name)
                                        <option value="{{$short_code}}" {{ $short_code ==  ((isset($groupSubscription) && !empty($groupSubscription->country_code)) ? $groupSubscription->country_code : 'US') ?  'selected' : ''}}>{{$short_name}}</option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('country_code'))
                                    <div class="error">{{ $errors->first('country_code') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone_no" class="mt-2">Phone <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="phone_no" name="phone_no" placeholder="Phone" required value="{{ (isset($groupSubscription) && !empty($groupSubscription->phone_no)) ? $groupSubscription->phone_no : old('phone_no') }}">
                                    @if($errors->has('phone_no'))
                                    <div class="error">{{ $errors->first('phone_no') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="number_of_subscription" class="mt-2">Subscription # <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="number_of_subscription" name="number_of_subscription" placeholder="Subscription #" required value="{{ (isset($groupSubscription) && !empty($groupSubscription->number_of_subscription)) ? $groupSubscription->number_of_subscription : old('number_of_subscription') }}" max="1000">
                                    @if($errors->has('number_of_subscription'))
                                    <div class="error">{{ $errors->first('number_of_subscription') }}</div>
                                    @endif
                                </div>
                            </div>
                            @php
                            $status = 0;
                            if((isset($groupSubscription->group_subscription_status)) && @$groupSubscription->group_subscription_status == 1){
                            $status = 1;
                            }
                            @endphp
                            <div class="col-sm-6">
                                <label for="group_subscription_status" class="mt-2">Status</label>
                                <div class="form-group clearfix">
                                    <div class="icheck-success d-inline">
                                        <input type="radio" name="group_subscription_status" value="1" id="radioSuccess3" {{  $status == 1? "checked" : "" }}>
                                        <label for="radioSuccess3">
                                            Active
                                        </label>
                                    </div>
                                    <div class="icheck-danger d-inline">
                                        <input type="radio" name="group_subscription_status" value="0" id="radioDanger4" {{ $status == 0? "checked" : "" }}>
                                        <label for="radioDanger4">
                                            Inactive
                                        </label>
                                    </div>
                                    @if($errors->has('group_subscription_status'))
                                    <div class="error">{{ $errors->first('group_subscription_status') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn mr-2 mt-5" id="submitTaxo" style="background: #000000;color: #f0ac63 !important;">Submit</button>
                        <a href="{{ route('group.subscription.index') }}" class="btn btn-light mt-5">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('child-scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2();
        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4',
        });
        $("#taxo-form").validate({
            errorElement: "span",
            errorClass: "error",
            ignore: '.note-editor *',
            rules: {
                company_name: {
                    required: true,
                    maxlength: 255
                },
                contact_name: {
                    required: true,
                    maxlength: 255
                },
                title: {
                    required: true,
                    maxlength: 255
                },
                email: {
                    required: true,
                    maxlength: 255,
                    email: 255
                },
                phone_no: {
                    required: true,
                    minlength: 10,
                    maxlength: 10
                },
                number_of_subscription: {
                    required: true,
                    max: 1000
                },
                country_code: {
                    required: true,
                }
            },
            messages: {
                company_name: {
                    required: 'Company required.',
                },
                contact_name: {
                    required: 'Contact name required.',
                },
                title: {
                    required: 'Job Title required.',
                },
                email: {
                    required: 'Email required.',
                },
                phone_no: {
                    required: 'Phone required.',
                },
                number_of_subscription: {
                    required: 'Subscription # required.',
                }
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == 'day') {
                    error.insertAfter(element.parent().find('.select2-container'));
                } else {
                    element.after(error); // default error placement
                }
            }
        });
    });
</script>
@endpush