@extends('library-app.layout')

@section('header')
<div class="page-header page-header-default">
    <div class="page-header-content">
        <div class="page-title">
            <h4><span class="text-semibold">Products</span></h4>
        </div>
    </div>
    <div class="breadcrumb-line">
        <ul class="breadcrumb">
            <li><a href="{{route("app.products.index")}}"><i class="icon-lab position-left"></i>Products</a></li>
            <li class="active">Product 
                @if (isset($data->id))
                    Edit
                @else
                    Add
                @endif
            </li>
        </ul>
    </div>
</div>
@endsection

@section('content')
@csrf
<form id="form-data" name="form-data" method="post" class="form-horizontal form-validate-jquery" >
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-flat ">
                <div class="panel-heading">
                    <h5 class="panel-title">Product 
                    @if (isset($data->id))
                        Edit
                    @else
                        Add
                    @endif
                    </h5>
                </div>
                <div class="panel-body">
                    <fieldset class="content-group">
                        <input type="hidden" class="form-control" name="txt_id" id="txt_id" value="{{ $data->id or '' }}">
                        
                        @if (isset($data->id))
                        <div class="form-group">
                            <label class="control-label col-lg-3">ID Product :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" disabled value="{{ $data->id or '' }}">
                            </div>
                        </div>
                        @endif

                        <div class="form-group">
                            <label class="control-label col-lg-3">Name <span style="color:red;">*</span> :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="Name" name="name" id="name" value="{{ $data->name or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Catalogue Number <span style="color:red;">*</span> :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="Catalogue Number" name="catalogue_number" id="catalogue_number" value="{{ $data->catalogue_number or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">CAS Number <span style="color:red;">*</span> :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="CAS Number" name="cas_number" id="cas_number" value="{{ $data->cas_number or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Molar Mass <span style="color:red;">*</span> :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="Molar Mass" name="molar_mass" id="molar_mass" value="{{ $data->molar_mass or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Chemical Formula
                                @if (isset($data->chemical_formula))
                                @php
                                    $replaceWithSubscript = function($matches) {
                                        $element = $matches[1];
                                        $subscript = '';
                                        for ($i = 2; $i < count($matches); $i++) {
                                            $subscript .= '<sub>' . $matches[$i] . '</sub>';
                                        }
                                        return $element . $subscript;
                                    };

                                    $pattern = '/([A-Za-z\(\)]+)\|(\d+)/';
                                    $result_chemical_formula = preg_replace_callback($pattern, $replaceWithSubscript, $data->chemical_formula);
                                    $result_chemical_formula = preg_replace('/\|(\d+)/', '<sub>$1</sub>', $data->chemical_formula);
                                @endphp
                                (Example=>{!! $result_chemical_formula ?? "-" !!})
                                @endif
                                 :
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="Chemical Formula" name="chemical_formula" id="chemical_formula" value="{{ $data->chemical_formula or '' }}">
                                <p>Remark : The symbol "|" placed in front of the number will move the number downwards instead ( A|1 => A<sub>1</sub> ). But if it is a two-digit number, use A|1|1 will be A<sub>11</sub> and if you don't want the number to be moved downwards, just don't use the symbol at all.<br>[ ex. "A|1B|1|1C2D|1|12E" => A<sub>1</sub>B<sub>11</sub>C2D<sub>11</sub>2E ]</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">HS Code :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="HS Code" name="hs_code" id="hs_code" value="{{ $data->hs_code or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Assay :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="Assay" name="assay" id="assay" value="{{ $data->assay or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Grade :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="Grade" name="grade" id="grade" value="{{ $data->grade or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">EC Index :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="EC Index" name="ec_index" id="ec_index" value="{{ $data->ec_index or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">EC No. :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" placeholder="EC No." name="ec_number" id="ec_number" value="{{ $data->ec_number or '' }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Image Chemical Formula:</label>
                            <div class="col-lg-9">
                                <div id="wrap_preview_chemical_formula">
                                    @if(isset($data->image1) && $data->image1 != "")
                                        <img style="width: 200px; margin: 10px;" src="{{ asset('assets/products/' . $data->image1) }}"/>
                                    @endif
                                </div>
                                <input type="file" class="" id="file_chemical_formula" name="file_chemical_formula" style="display: none;" accept=".jpg, .jpeg, .png" onchange="return fileValidation('chemical_formula')"/>
                                <input type="hidden" class="form-control" name="path_chemical_formula" id="path_chemical_formula" value="{{ $data->image1 or '' }}">
                                <a class="btn btn-default" id="custom-upload-btn-chemical_formula" href="javascript: clickUpload('chemical_formula')"><i class="icon-image2 position-left"></i>Upload</a>
                                <a class="btn btn-default custom-delete-btn-chemical_formula" id="custom-delete-btn-chemical_formula" href="javascript: clickDelete('chemical_formula')"><i class="icon-bin position-left"></i>Remove</a>
                                <p>Remark : Upload images type (.jpg), (.jpeg) or (.png) only </p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Image Thumbnail:</label>
                            <div class="col-lg-9">
                                <div id="wrap_preview_thumbnail">
                                    @if(isset($data->image2) && $data->image2 != "")
                                        <img style="width: 200px; margin: 10px;" src="{{ asset('assets/products/' . $data->image2) }}"/>
                                    @endif
                                </div>
                                <input type="file" class="" id="file_thumbnail" name="file_thumbnail" style="display: none;" accept=".jpg, .jpeg, .png" onchange="return fileValidation('thumbnail')"/>
                                <input type="hidden" class="form-control" name="path_thumbnail" id="path_thumbnail" value="{{ $data->image2 or '' }}">
                                <a class="btn btn-default" id="custom-upload-btn-thumbnail" href="javascript: clickUpload('thumbnail')"><i class="icon-image2 position-left"></i>Upload</a>
                                <a class="btn btn-default custom-delete-btn-thumbnail" id="custom-delete-btn-thumbnail" href="javascript: clickDelete('thumbnail')"><i class="icon-bin position-left"></i>Remove</a>
                                <p>Remark : Upload images type (.jpg), (.jpeg) or (.png) only </p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Image Package:</label>
                            <div class="col-lg-9">
                                <div id="wrap_preview_package">
                                    @if(isset($data->image3) && $data->image3 != "")
                                        <img style="width: 200px; margin: 10px;" src="{{ asset('assets/products/' . $data->image3) }}"/>
                                    @endif
                                </div>
                                <input type="file" class="" id="file_package" name="file_package" style="display: none;" accept=".jpg, .jpeg, .png" onchange="return fileValidation('package')"/>
                                <input type="hidden" class="form-control" name="path_package" id="path_package" value="{{ $data->image3 or '' }}">
                                <a class="btn btn-default" id="custom-upload-btn-package" href="javascript: clickUpload('package')"><i class="icon-image2 position-left"></i>Upload</a>
                                <a class="btn btn-default custom-delete-btn-package" id="custom-delete-btn-package" href="javascript: clickDelete('package')"><i class="icon-bin position-left"></i>Remove</a>
                                <p>Remark : Upload images type (.jpg), (.jpeg) or (.png) only </p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Document TDS:</label>
                            <div class="col-lg-9">
                                <div id="wrap_preview_tds">
                                    @if(isset($data->file_tds) && $data->file_tds != "")
                                        <a href="{{asset('assets/tds/' . $data->file_tds)}}" download>
                                            <img style="width: 100px; margin: 10px;" src="{{ asset('assets/images/logo_pdf.png') }}"/>
                                            <br>
                                            <i class="icon-download position-left"></i>download old file
                                        </a>
                                        <br>
                                        <br>
                                    @endif
                                </div>
                                <input type="file" class="" id="file_tds" name="file_tds" style="display: none;" accept=".pdf" onchange="return fileValidation('tds')"/>
                                <input type="hidden" class="form-control" name="path_tds" id="path_tds" value="{{ $data->file_tds or '' }}">
                                <a class="btn btn-default" id="custom-upload-btn-tds" href="javascript: clickUpload('tds')"><i class="icon-upload position-left"></i>Upload</a>
                                <a class="btn btn-default custom-delete-btn-tds" id="custom-delete-btn-tds" href="javascript: clickDelete('tds')"><i class="icon-bin position-left"></i>Remove</a>
                                <p>Remark : Upload file type (.pdf) only </p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-3">Document SDS:</label>
                            <div class="col-lg-9">
                                <div id="wrap_preview_sds">
                                    @if(isset($data->file_sds) && $data->file_sds != "")
                                        <a href="{{asset('assets/sds/' . $data->file_sds)}}" download>
                                            <img style="width: 100px; margin: 10px;" src="{{ asset('assets/images/logo_pdf.png') }}"/>
                                            <br>
                                            <i class="icon-download position-left"></i>download old file
                                        </a>
                                        <br>
                                        <br>
                                    @endif
                                </div>
                                <input type="file" class="" id="file_sds" name="file_sds" style="display: none;" accept=".pdf" onchange="return fileValidation('sds')"/>
                                <input type="hidden" class="form-control" name="path_sds" id="path_sds" value="{{ $data->file_sds or '' }}">
                                <a class="btn btn-default" id="custom-upload-btn-sds" href="javascript: clickUpload('sds')"><i class="icon-upload position-left"></i>Upload</a>
                                <a class="btn btn-default custom-delete-btn-sds" id="custom-delete-btn-sds" href="javascript: clickDelete('sds')"><i class="icon-bin position-left"></i>Remove</a>
                                <p>Remark : Upload file type (.pdf) only </p>
                            </div>
                        </div>

                    </fieldset>

                    <div class="text-center">
                        <a class="btn btn-default" id="back_btn" href="{{route("app.products.index")}}">Back</a>
                        <a type="button" id="btn_save" class="btn btn-primary" href="javascript: save()">Save</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@section('script')
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    (function($) {
        'use strict';
    })(jQuery);


    $(document).ready(function(){
        checkPathNullOrEmtpy('chemical_formula');
        checkPathNullOrEmtpy('thumbnail');
        checkPathNullOrEmtpy('package');
        checkPathNullOrEmtpy('tds');
        checkPathNullOrEmtpy('sds');
    });

    function save() {
        var msg = '';
        if($('#name').val().trim() == '')
            msg = 'Please enter "Name"';
        else if($('#catalogue_number').val().trim() == '')
            msg = 'Please enter "Catalogue Number"';
        else if($('#cas_number').val().trim() == '')
            msg = 'Please enter "CAS Number"';
        else if($('#molar_mass').val().trim() == '')
            msg = 'Please enter "Molar mass"';

        if(msg != ''){
            swal({
                title: msg,
                confirmButtonColor: "#EF5350",
                allowOutsideClick: false,
                type: "info"
            });
        }else{
            saveCreate();
        }
        return false;
    }

    function saveCreate() {
        var formData = new FormData($('#form-data')[0]);
        $.ajax({
            type: 'POST',
            url: "{{ route('app.products.save') }}",
            data: formData,
            dataType: 'json',
            processData: false,  // tell jQuery not to process the data
            contentType: false,   // tell jQuery not to set contentType
            success: function (data) {
                status_submit = false;
                if(data.status){
                    swal({
                        title: data.message,
                        confirmButtonColor: "#66BB6A",
                        type: "success",
                        confirmButtonText: "ตกลง",
                    }).then(function () {
                        window.location.href = "{{ route('app.products.index') }}";
                    }, function (dismiss) {});
                }else{
                    swal({
                        title: data.message,
                        confirmButtonColor: "#EF5350",
                        type: "error"
                    }).then(function (dismiss) {});
                }
            },
            error: function (xhr, type) {
               status_submit = false;
                swal({
                    title: "An error occurred, please try again.",
                    confirmButtonColor: "#EF5350",
                    type: "error"
                }).then(function (dismiss) {});
            }
        });
    }

    function checkPathNullOrEmtpy(text){
        if ($('#path_' + text).val() == "" || $('#path_' + text).val() == null )
        {
            $('#custom-delete-btn-' + text).hide();
        }
    }

    function clickUpload (text){
        var fileInput = document.getElementById('file_' + text);
        fileInput.click();
    }

    function clickDelete (text){
        $('#file_' + text).val('');
        $('#path_' + text).val('');
        document.getElementById('wrap_preview_' + text).innerHTML = '';
        $('#custom-delete-btn-' + text).hide();
    }

    function fileValidation(text) {
        var fileInput = document.getElementById('file_' + text );
        
        var filePath = fileInput.value;
    
        // Allowing file type
        var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;

        if (text == "tds" || text == "sds" || text == "coa"){
            allowedExtensions = /(\.pdf)$/i;
        }
        
        if (!allowedExtensions.exec(filePath)) {
            swal({
                title: "An error occurred, please try again.",
                confirmButtonColor: "#EF5350",
                type: "error"
            }).then(function () {
                $('#file_' + text).val('');
                $('#path_' + text).val('');
                $('#wrap_preview_' + text).html('');
                $('#custom-delete-btn-' + text).hide();
                return false;
            });
        }
        else
        {
            // Image preview
            if (text == "tds" || text == "sds" || text == "coa"){
                document.getElementById('wrap_preview_' + text).innerHTML = "<img style=\"width: 100px; margin: 10px;\" src=\"{{ asset('assets/images/logo_pdf.png') }}\"/>";
                $('#custom-delete-btn-' + text).show();
                $('#path_' + text).val('uploaded');
            } else {
                if (fileInput.files && fileInput.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('wrap_preview_' + text).innerHTML = '<img style="width: 200px; margin: 10px;" src="' + e.target.result + '"/>';
                    };
                    
                    reader.readAsDataURL(fileInput.files[0]);
                    $('#custom-delete-btn-' + text).show();
                    $('#path_' + text).val('uploaded');
                }
            }
            return true;
        }
    }
</script>
@endsection