@extends('layouts.admin_default')
    @section('content')
        <div class="content-wrapper container-xxl p-0">
            <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-start mb-0">Product</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('product.index') }}">Product</a></li>
                                    <li class="breadcrumb-item active"><a href="javascript:void(0);">Add</a></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <section>
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    {!! Form::open(['method'=>'POST','route'=>['product.store'], 'class'=>'form-first FormValidate', 'files'=>true, 'autocomplete' => 'off']) !!}
                                        <div class="row">
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Type Name<span class="error">*</span></label>
                                                    {!! Form::select('type_id', $type_list, null, ['class' => 'form-select', 'placeholder'=>'Select Type Name', 'onchange' => "displayMakeNameList(this)"]) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Make Name<span class="error">*</span></label>
                                                    {!! Form::select('make_id', array(), null, ['class' => 'form-select', 'placeholder'=>'Select Type Name', 'id' => 'make_list']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Product Name <span class="error">*</span></label>
                                                    {!! Form::text('product_name', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Volume Solids (%) </label>
                                                    {!! Form::text('volume_solid_per', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Mixing Ratio (Base : Hardner) </label>
                                                    {!! Form::text('mixing_ratio', null, ['class'=>'form-control float_numbers']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="last-name-column">Thinner</label>
                                                    {!! Form::text('thinner', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="last-name-column">Max Suggested DFT/Coat</label>
                                                    {!! Form::text('max_suggested_dft_coat', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="last-name-column">Cycle time (Over coating) @ 25% (hr)</label>
                                                    {!! Form::text('cycle_time', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="last-name-column">VOC (g/lit)</label>
                                                    {!! Form::text('voc', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="basicSelect">Status <span class="error">*</span></label>
                                                    {!! Form::select('status', status(), '', ['class' => 'form-select', 'placeholder'=>'Please Select']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                                <a href="{{ route('product.index') }}" class="btn btn-outline-secondary">Back</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Basic Floating Label Form section end -->
            </div>
        </div>

        <script src="{{ asset('admin/app-assets/vendors/js/forms/validation/jquery.validate.js') }}"></script>

        <style type="text/css">
            .error{
                color: red;
            }
        </style>

        <script type="text/javascript">
            $('.FormValidate').validate({
                rules: {
                    "type_id": {
                        required : true,
                    },
                    "make_id": {
                        required : true,
                    },
                    "product_name": {
                        required : true,
                    },                    
                    "status": {
                        required : true,
                    },
                },
                messages: {
                    "type_id": {
                        required: "Please Select Type Name",
                    },
                    "make_id": {
                        required: "Please Select Make Name",
                    },
                    "product_name": {
                        required: "Please Enter Product Name",
                    },
                    "status": {
                        required: "Please Select Status",
                    },
                }
            });
        </script>

        <script type="text/javascript">
            var token = "{{ csrf_token() }}";
            function displayMakeNameList(me)
            {
                $.ajax({
                    url: "{{ route('make.get_make_list') }}",
                    dataType: "html",
                    type: "post",
                    async: true,
                    data: {
                        "_token": token,
                        'type_id': $(me).val(),
                    },
                    success:function(result){
                        $("#make_list").html(result);
                    },
                    error: function (xhr, exception, thrownError) {
                        var msg = "";
                        if (xhr.status === 0) {
                            msg = "Not connect.\n Verify Network.";
                        } else if (xhr.status == 404) {
                            msg = "Requested page not found. [404]";
                        } else if (xhr.status == 500) {
                            msg = "Internal Server Error [500].";
                        } else if (exception === "parsererror") {
                            msg = "Requested JSON parse failed.";
                        } else if (exception === "timeout") {
                            msg = "Time out error.";
                        } else if (exception === "abort") {
                            msg = "Ajax request aborted.";
                        } else {
                            msg = "Error:" + xhr.status + " " + xhr.responseText;
                        }
                    }
                });
            }
        </script>
    @endsection