@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('customContractSizeUpdate')}}" id="edit_custom_contract_size">
                @csrf
                <div class="card card-flush py-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h2>Edit Custom Contract Size</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" id="symbols">
                                <label class="required form-label">Symbol</label>
                                <input type="text" class="form-control form-control-solid mb-2" name="symbol" placeholder="Symbol" value="{{$customContractSize->symbol}}" readonly/>
                            </div>
                            <div class="fv-row w-100 flex-md-root">
                                <label class="required form-label">Contract Size</label>
                                <input type="number" class="form-control form-control-solid mb-2" name="modifiedContractSize" placeholder="Contract Size" value="{{$customContractSize->modifiedContractSize}}" step=".01"/>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <input type="hidden" name="id" value="{{$customContractSize->id}}"/>
                            <a href="{{ route('customContractSize') }}" 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_custom_contract_size').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: {
            "symbol": {
                required: true,
            },
            "modifiedContractSize": {
                required: true,
                min: 1
            }
        },
        messages: {
            "symbol": {
                required: "Please select symbol"
            },
            "modifiedContractSize": {
                required: "Please enter contract size"
            }
        },
        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 {
                $(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 {
                $(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")) {
                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