@extends('layouts.master')
@section('title','Add Offer To Spin')
@section('css')
@endsection
@section('content')
<!-- BEGIN: Content-->
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">Add Offer To Spin</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('spin-offers.index') }}">Spin Offers</a>
                                </li>
                                <li class="breadcrumb-item active">Add Offer To Spin
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- users edit start -->
            <section class="app-user-edit">
                @include('errormessage')
                <div class="card">
                    <div class="card-body">
                        <div class="tab-content">
                            <!-- Account Tab starts -->
                            <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
                                <!-- users edit account form start -->
                                {!! Form::open(['route' => 'spin-offers.store','name'=>'createform', 'id'=>"createform",'enctype'=>'multipart/form-data']) !!} 
                                @include('admin.spinoffers.common')
                                {!! Form::close() !!}
                                <!-- users edit account form ends -->
                            </div>
                            <!-- Account Tab ends -->
                        </div>
                    </div>
                </div>
            </section>
            <!-- users edit ends -->
        </div>
    </div>
</div>
<!-- END: Content-->
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function () {

        /* Initialize Select2 */
        $("#offer_id").select2({
            placeholder: "Select Offer",
            allowClear: true
        });

        $("select").on("select2:close", function (e) {
            $(this).valid();
        });

        $("#createform").validate({
            rules: {
                offer_id: {
                    required: true
                },
                priority: {
                    required: true,
                }
            },
            submitHandler: function (form) {
                if ($("#createform").validate().checkForm()) {
                    $('.submitbutton').attr('disabled', true);
                    $('.indicator-progress').removeClass("d-none");
                    form.submit();
                }
            },
            errorPlacement: function (error, element) {
                if (element.attr("id") == "offer_id") {
                    error.appendTo(element.parent("div"));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element, errorClass, validClass) {
                if ($(element).attr("id") == "offer_id") {
                    $($(element).parent("div")).addClass("has-error");
                } else {
                    $(element).addClass("has-error");
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                if ($(element).attr("id") == "offer_id") {
                    $($(element).parent("div")).removeClass("has-error");
                } else {
                    $(element).removeClass("has-error");
                }
            }
        });

    });
</script>
@endsection