@extends('layouts.user.main')
@section('content')

@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<div class="post d-flex flex-column-fluid" id="kt_post">
		<div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-column gap-7 gap-lg-10">
            <form class="form" method="POST" action="{{route('billingGroupUpdate')}}" id="edit_billing_group">
                @csrf
                <div class="card card-flush py-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h2>Edit Billing Group</h2>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap gap-5 mb-10">
                            <div class="fv-row flex-md-root">
                                <label class="required form-label">Group</label>
                                <input type="text" class="form-control form-control-solid mb-2" name="group" placeholder="Group" value="{{$billingGroup->group}}" readonly/>
                            </div>
                            <div class="fv-row flex-md-root">
                                <label class="required form-label">Remove from Billing</label>
                                <div class="row g-9" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                                    <div class="col-md-6 col-lg-12 col-xxl-12">
                                        <label class="btn btn-outline btn-outline-dashed btn-outline-default d-flex text-start p-6 active" data-kt-button="true">
                                            <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                <input class="form-check-input" type="radio" name="billingStatus" 
                                                value="{{CommonConstants::BILLING_GROUP['EXCLUDE_USER']}}" 
                                                {{ isset($billingGroup) && $billingGroup->billingStatus == 2 ? 'checked' : '' }}>
                                            </span>
                                            <span class="ms-5">
                                                <span class="fs-4 fw-bolder text-gray-800 mb-2 d-block">Yes</span>
                                                <span class="fw-bold fs-7 text-gray-600">This group users will remove from the billing process</span>
                                            </span>
                                        </label>
                                    <div class="fv-plugins-message-container invalid-feedback"></div></div>
                                    {{-- <div class="col-md-6 col-lg-12 col-xxl-6">
                                        <label class="btn btn-outline btn-outline-dashed btn-outline-default d-flex text-start p-6" data-kt-button="true">
                                            <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                                <input class="form-check-input" type="radio" name="billingStatus" 
                                                value="{{CommonConstants::BILLING_GROUP['INCLUDE_USER']}}" 
                                                {{ isset($billingGroup) && $billingGroup->billingStatus == 1 ? 'checked' : '' }}>
                                            </span>
                                            <span class="ms-5">
                                                <span class="fs-4 fw-bolder text-gray-800 mb-2 d-block">No</span>
                                                <span class="fw-bold fs-7 text-gray-600">This group users will added to the billing process</span>
                                            </span>
                                        </label>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <input type="hidden" name="id" value="{{$billingGroup->id}}"/>
                            <a href="{{ route('billingGroup') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                            <button type="submit" class="btn btn-primary me-3">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
            </div>
		</div>
	</div>
</div>
<script>
$(document).ready(function () {

    $('#edit_billing_group').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            "group": {
                required: true
            },
            "billingStatus": {
                required: true
            }
        },
        messages: {
            "group": {
                required: "Please select group"
            },
            "billingStatus": {
                required: "Please select billing status"
            }
        },
        invalidHandler: function (event, validator) {
            $('.alert-danger', $('.form-horizontal')).show();
        },
        highlight: function (element) {
            if ($(element).hasClass("select2-hidden-accessible")) {
                $("#select2-" + $(element).attr("id") + "-container").parent().addClass('has-error');
            }  else if ($(element).hasClass("form-check-input") && element.name === 'billingStatus') {
                $(element).closest('.row[data-kt-buttons="true"]').addClass('has-error');
            } else {
                $(element).closest('.form-group').addClass('has-error');
            }
        },
        unhighlight: function (element) {
            if ($(element).hasClass("select2-hidden-accessible")) {
                $("#select2-" + $(element).attr("id") + "-container").parent().removeClass('has-error');
            } else if ($(element).hasClass("form-check-input") && element.name === 'billingStatus') {
                $(element).closest('.row[data-kt-buttons="true"]').removeClass('has-error');
            } else {
                $(element).closest('.form-group').removeClass('has-error');
            }
        },
        onfocusout: function (element) {
            $(element).valid();
        },
        success: function (label) {
            label.closest('.form-note').removeClass('has-error');
            label.remove();
        },
        errorPlacement: function (error, element) {
            if (element.hasClass('m_selectpicker')) {
                error.insertAfter(element.next('.dropdown-toggle'));
            } else if ($(element).hasClass("select2-hidden-accessible")) {
                element = $("#select2-" + $(element).attr("id") + "-container").parent();
                error.insertAfter(element);
            } else if (element.hasClass("form-check-input") && element.attr('name') === 'billingStatus') {
                error.insertAfter(element.closest('.row[data-kt-buttons="true"]'));
            } else if ($(element).hasClass("form-check-input")) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element.closest('.form-control,.file'));
            }
        },
        submitHandler: function (form) {
            $(form).find('button[type="submit"]').prop('disabled', true);
            $("html, body").animate({ scrollTop: 0 }, "slow");
            form.submit();
        }
    });
});
</script>
@endsection