@extends('admin.layouts.app')

@section('content')
<div class="pagetitle">
    <!-- <h1>Add User</h1> -->
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin-dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">{{ $module['title'] }}</li>
        </ol>
    </nav>
</div><!-- End Page Title -->

<section class="section tab-form-sec">
    <div class="card">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Basic Data</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Item Properties</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Sale & Purchase Data</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="inventory-tab" data-bs-toggle="tab" data-bs-target="#inventory" type="button" role="tab" aria-controls="inventory" aria-selected="false">Inventory Data</button>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            @include('admin.materials.add.basic_data')

            @include('admin.materials.add.item_property')

            @include('admin.materials.add.sale_purchase_data')
            
            @include('admin.materials.add.inventory_data')
        </div>
    </div>
    <!-- <div class="card">
        
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Item Properties</h5>
            <div class="row g-3">
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">UoM</label>
                    <select name="" id="" class="form-control">
                        <option value="">EA</option>
                        <option value="">PCS</option>
                        <option value="">KG</option>
                        <option value="">LTR</option>
                    </select>
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Condition</label>
                    <select name="" id="" class="form-control">
                        <option value="">e.g.</option>
                        <option value="">new</option>
                        <option value="">used</option>
                        <option value="">refurbished</option>
                    </select>
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Dimension (in mm)</label>
                    <input type="text" class="form-control">
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Weight (in KG)</label>
                    <input type="text" class="form-control">
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Load Bearing Capacity (in KG)</label>
                    <input type="text" class="form-control">
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">BOM</label>
                    <ul class="list-input">
                        <li>
                            <input type="checkbox" id="yes">
                            <label for="yes">Yes</label>
                        </li>
                        <li>
                            <input type="checkbox" id="no">
                            <label for="yes">NO</label>
                        </li>
                    </ul>
                </div>
                <div class="col-md-12 col-sm-12">
                    <div class="row g-3">
                        <div class="col">
                            <label for="" class="col-form-label">S. No.</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="col">
                            <label for="" class="col-form-label">Item Code</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="col">
                            <label for="" class="col-form-label">Item Description</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="col">
                            <label for="" class="col-form-label">Qty/Unit</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="col">
                            <label for="" class="col-form-label">UOM</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="fr-row-panel mt-2">
                        <div class="main-form-pl">
                            <div class="row g-3">
                                <div class="col">
                                <label for="" class="col-form-label">S. No.</label>
                                <input type="text" class="form-control">
                            </div>
                            <div class="col">
                                <label for="" class="col-form-label">Item Code</label>
                                <input type="text" class="form-control">
                            </div>
                            <div class="col">
                                <label for="" class="col-form-label">Item Description</label>
                                <input type="text" class="form-control">
                            </div>
                            <div class="col">
                                <label for="" class="col-form-label">Qty/Unit</label>
                                <input type="text" class="form-control">
                            </div>
                            <div class="col">
                                <label for="" class="col-form-label">UOM</label>
                                <input type="text" class="form-control">
                            </div>
                            </div>
                        </div>
                        <div class="rmv-btn">
                            <label for="" class="col-form-label">&nbsp;</label>
                            <button name="remove" id="" class="btn btn-danger btn_remove_contacts">-</button>
                        </div>
                    </div>
                    <div class="add-btn-blok mt-3">
                        <button type="button" class="btn submit-btn me-3" name="btn_add_contacts" id="btn_add_contacts">
                            <i class="bi bi-plus-lg"></i> Add
                        </button>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Product Catalog</label>
                    <input class="form-control" type="file" id="formFile">
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Technical Drawing</label>
                    <input class="form-control" type="file" id="formFile">
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Test Certificates</label>
                    <input class="form-control" type="file" id="formFile">
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Inventory Data</h5>
            <div class="row g-3">
                <div class="col-md-3 col-sm-12">
                    <label for="" class="col-form-label">Managed by</label>
                    <select name="" id="" class="form-control">
                        <option value="">Serial No</option>
                        <option value="">None</option>
                        <option value="">Batch</option>
                    </select>
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Serial Number</label>
                    <input type="text" class="form-control">
                </div>
                <div class="col-md-4 col-sm-12">
                    <label for="" class="col-form-label">Min Inventory Level</label>
                    <input type="text" class="form-control">
                </div>
                <div class="col-md-3 col-sm-12">
                    <label for="" class="col-form-label">Default Bin Location</label>
                    <select name="" id="" class="form-control">
                        <option value=""></option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-12">
                    <label for="" class="col-form-label">Item Status</label>
                    <select name="" id="" class="form-control">
                        <option value="">Active</option>
                        <option value="">Inactive</option>
                        <option value="">Discontinued</option>
                    </select>
                </div>
            </div>
        </div>
    </div> -->

    
    
    <div class="text-center">
        <button type="submit" class="btn submit-btn me-3">Submit</button>
        <a class="btn back-btn" href="{{ route(sprintf('%s.index', $module['resourceful'])) }}">Back</a>
    </div>
</section>

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

    .red-mark {
        color: red;
    }

</style>
@endsection

@push('scripts_footer') 
@include('admin.materials.add.scripts')
<script>        
    jQuery.validator.addMethod("passwordFormatCheck", function(value, element) {
        return this.optional(element) || /^(?=.*\d)(?=.*[A-Z])(?=.*\W).*$/i.test(value);
    },'Password must contain one capital letter,one numerical and one special character');

    blockPage=function(unblock){
        var unblock = unblock || false;   
        
        if( unblock ){
            mApp.unblockPage();
        }else{
            mApp.blockPage({
                overlayColor: '#000000',
                type: 'loader',
                state: 'success',
                message: 'Please wait...'
            });
        }
    }

    ajaxSubmitPostMaterial=function(form){
        jQuery(form).ajaxSubmit({
            dataType: 'json',
            beforeSubmit: function(xhr){
                //
                blockPage();
            },
            success: function(res){
                //
                //unblockPage();  

                //showMessage(res);

                if( res.status == 'success' ){                                      
                    window.setTimeout(function(){
                        window.location = res.location
                    }, 3000);
                }
            },
            error: function(error){     
                unblockPage();   

                // validation error    
                if (error.status == 422) {
                    jQuery('#frm-material-create').find("label[for]").find('em').remove();
                    jQuery.each(error.responseJSON.errors, function(k, v){   
                        var em = jQuery('<em>', {class:"error"}).append(
                            v[0]
                        );

                        jQuery('#frm-material-create').find("label[for='"+k+"']").append(em);
                    })
                }                  
            }
        });

        return false;
    }


    validatePostMaterialForm=function(){
        jQuery('#frm-material-create').validate({
            submitHandler: function(form) {                 

                // form.submit();
                ajaxSubmitPostMaterial(form);
            },

            errorElement: 'span',
            focusInvalid: true,

            errorPlacement: function(error, element) {        

                var target = element.prop('name');    
                var label  = element.parent();                      

                //error.appendTo( label.find("label[for='"+target+"']") ); 
                error.appendTo(element.parent().after());         
            },
            ignore:'',
            rules: {                   
                name:{                
                    required: true,
                    maxlength: 255
                }                                                                                    
            },

            messages: {
                name: {
                    required: "Please enter name",
                    maxlength: "First name not more than 255 characters"
                }
            }
        });
    }

    jQuery(document).ready(function() {
        
        validatePostMaterialForm();        
    });
</script>
@endpush