@extends('layouts.user.usercas')
@section('content')
<style type="text/css">
    .display{display: none}.td{border-right: 1px solid rgb(82 63 105 / 15%);}
</style>
<form id="myform" class="form"  method="post" action="/sip"  enctype="multipart/form-data" >
    @csrf @method('post')
<div class="text-center">
    <h5>SUBSTANCE IDENTIFICATION PROFILE (SIP)</h5>
    <h6>{{$data->susbstance_name}}(CAS No: {{$data->cas_no}}; EC No: {{$data->ec_no}})</h6>
    <p>Lead Registrant(LR):Global Product Compliance(GPC)</p>
</div>
<div>
    <table class="table" style="border:1px solid rgb(82 63 105 / 15%)">
        <tr>
            <td class="td">CAS:</td>
            <td>
                {{$data->cas_no}}
                <input type="hidden" name="cas_no" value="{{$data->cas_no}}">
            </td>
        </tr> 
            <tr>
            <td class="td">EC NO:</td>
            <td>
                {{$data->ec_no}}
                <input type="hidden" name="ec_no" value="{{$data->ec_no}}">
            </td>
        </tr>
            <tr>
            <td class="td">Substance Formula:</td>
            <td>{{$data->susbstance_name}}
                <input type="hidden" name="substance" value="{{$data->susbstance_name}}">
            </td>
        </tr>
            <tr>
            <td class="td">Molecular Formula:</td>
            <td>{{$data->molecular_formula}}</td>
        </tr>
            <tr>
            <td class="td">Structural Formula:</td>
            <td>
                <img src="{{$data->structural_formula}}">
            </td>
        </tr>
        <tr>
            <td class="td">Purity:</td>
            <td>
                <input type="text" name="purity" readonly value="{{$data->purity}}"></td>
        </tr>
        <tr>
            <td class="td">Boundry Condition:</td>
            <td>{{$data->bondary}}</td>
        </tr>
        <tr>
            <td class="td">Impurities which have impact on the classification of the substance</td>
            <td><input type="text" name="impact_classification" readonly value="{{$data->impurity}}"></td>
        </tr>
    </table>
</div>
<div class="form-group" style="display: flex;">
    <input id="agree" type="radio" name="check1" >&nbsp;&nbsp;
    <p>I agree to the above described substance definition as proposed by the LR</p>
</div>
<input type="hidden" name="uuid" value="Auth::user()->uuid">
<div class="form-group" style="display: flex;">
    <input id="check2" type="radio" name="check2">&nbsp;&nbsp;
    <p>I have the suggestions to the sameness proposed by the LR.<b>(Please use the template below for suggestion)</b></p>
</div>
<div class="form-group" style="display: flex;">
    Name of your Company: 
    <input type="text" name="company_name" data-validate-field="company_name" value="{{$companyData->company_name}}">
</div>
<div class="form-group" style="display: flex;">
    Pre-reg.No:
    <input type="text" name="pre_reg" data-validate-field="pre_reg">
</div>
<div id="constituent" class="constituent">
    <div class="form-group">
    <p><b>(Fill in the following <span class="text-danger">Only if you have additional comments</span>/suggestion)</b></p>
    </div>
    <div class="form-group">
    <p><b>Comments/Suggeestions Partaining To The {{$data->susbstance_name}} (CAS No:{{$data->cas_no}};EC No:{{$data->ec_no}})</b></p>
    </div>
    <div class="form-group">
        Degree of Purity:<input type="text" name="purity2">%(w/w)
    </div>
    <p>
        <b> Table1:Main Constituents</b>
    </p>
    <div class="form-group">
        <table style="border: 1px solid grey;">
            <thead style="background: #172e43;color: white;">
                <TH>Constituent</TH>
                <TH>CAS No</TH>
                <TH>Typical Concentration</TH>
                <TH>Concentration Range</TH>
                <TH>Remarks</TH>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="constituent"></td>
                    <td><input type="text" name="cas_concen"></td>
                    <td><input type="text" name="constituent_concen"></td>
                    <td><input type="text" name="concen_range"></td>
                    <td><input type="text" name="constituent_remark"></td>
                </tr>
                <tr>
                    <td><input type="text" name="constituent2"></td>
                    <td><input type="text" name="cas_concen1"></td>
                    <td><input type="text" name="constituent_concen2"></td>
                    <td><input type="text" name="concen_range2"></td>
                    <td><input type="text" name="constituent_remark2"></td>
                </tr>
                <tr>
                    <td><input type="text" name="constituent3"></td>
                    <td><input type="text" name="cas_concen2"></td>
                    <td><input type="text" name="constituent_concen3"></td>
                    <td><input type="text" name="concen_range3"></td>
                    <td><input type="text" name="constituent_remark3"></td>
                </tr>
                <tr>
                    <td><input type="text" name="constituent4"></td>
                    <td><input type="text" name="cas_concen3"></td>
                    <td><input type="text" name="constituent_concen4"></td>
                    <td><input type="text" name="concen_range4"></td>
                    <td><input type="text" name="constituent_remark4"></td>
                </tr>
            </tbody>
        </table>
    </div>   
    <p>
        <b> Table 2: Impurities</b>
        <br><p>All impurity above 1%</p>
        <br><p>1% or lower impurity if CMR, PBT and vPVB</p>
    </p>
    <div class="form-group">
        <table style="border: 1px solid grey;">
            <thead  style="background: #172e43;color: white;">
                <TH>Impurity</TH>
                <TH>CAS No</TH>
                <TH>Typical Concentration</TH>
                <TH>Concentration Range</TH>
                <TH>Remarks</TH>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="impurity"></td>
                    <td><input type="text" name="cas_impurity"></td>
                    <td><input type="text" name="typical_impurity"></td>
                    <td><input type="text" name="impurity_concen"></td>
                    <td><input type="text" name="impurity_remark"></td>
                </tr>
                <tr>
                    <td><input type="text" name="impurity2"></td>
                    <td><input type="text" name="cas_impurity2"></td>
                    <td><input type="text" name="typical_impurity2"></td>
                    <td><input type="text" name="impurity_concen2"></td>
                    <td><input type="text" name="impurity_remark2"></td>
                </tr>
                <tr>
                    <td><input type="text" name="impurity3"></td>
                    <td><input type="text" name="cas_impurity3"></td>
                    <td><input type="text" name="typical_impurity3"></td>
                    <td><input type="text" name="impurity_concen3"></td>
                    <td><input type="text" name="impurity_remark3"></td>
                </tr>
                <tr>
                    <td><input type="text" name="impurity4"></td>
                    <td><input type="text" name="cas_impurity4"></td>
                    <td><input type="text" name="typical_impurity4"></td>
                    <td><input type="text" name="impurity_concen4"></td>
                    <td><input type="text" name="impurity_remark4"></td>
                </tr>
            </tbody>
        </table>
    </div>  
    <p>CMR: carcinogenic, Mutagenic or toxic to reproduction <br>
PBT:Persistent, Bio-accumulative,<br>
ToxicvPVB:very Persistent, Very Bio-accumulative</p> 
</div>
<button id="submit" type="submit" class="btn btn-info display" >Submit</button>   
</form>     
@endsection
@section('scripts')
<script type="text/javascript">
    $('#agree').on('click', function(){
        $('#submit').removeClass('display');
        $("#constituent").hide();
    })
     $('#check2').on('click', function(){
        $('#submit').removeClass('display');
        $("#constituent").show();
    })
    new window.JustValidate('.form', { 
    rules: 
    {
        company_name:{required: true},
        pre_reg:{required: true},
    },

    messages:{
        company_name:{
        remote: 'Field is required',
        },
        pre_reg:{
        remote: 'Field is required',
        },
    },

    submitHandler: function(form) { 
        Swal.fire({
        title: 'Are you sure?',
        text: "Are you sure you want to submit SIP!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, submit it!'
        }).then((result) => {
        if (result.isConfirmed) {
            $("#exampleModal").modal({backdrop: 'static', keyboard: false}); $('#myform').submit();
        }
        })
        },
    });
</script>
@endsection