@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">Product Documents</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><a href="{{route("app.products.documents.index",[$product_id])}}"><i class="icon-lab position-left"></i>Product Documents</a></li>
            <li><a href="{{route("app.products.documents.index",[$product_id])}}">{!! nl2br($product_name) ?? ' - '!!} [ {!! nl2br($product_catalogue_number) ?? ' - '!!} ]</a></li>
            <li class="active"> 
                @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 Documents
                    @if (isset($data->id))
                        Edit
                    @else
                        Add
                    @endif
                     : {!! nl2br($product_name) ?? ' - '!!} [ {!! nl2br($product_catalogue_number) ?? ' - '!!} ]
                    </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">Product Name :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" disabled value="{{ $data->name or '' }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">Product Catalogue Number :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" disabled value="{{ $data->catalogue_number or '' }}">
                            </div>
                        </div>
                        @endif

                        <div class="form-group" style="display:none;">
                            <label class="control-label col-lg-3">Product Catalogue Number :</label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" disabled value="">
                            </div>
                        </div>

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

                        <div class="form-group">
                            <label class="control-label col-lg-3">Document COA <span style="color:red;">*</span> :</label>
                            <div class="col-lg-9">
                                <div id="wrap_preview_coa">
                                    @if(isset($data->file_coa) && $data->file_coa != "")
                                        <a href="{{asset('assets/coa/' . $data->file_coa)}}" 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_coa" name="file_coa" style="display: none;" accept=".pdf" onchange="return fileValidation('coa')"/>
                                <input type="hidden" class="form-control" name="path_coa" id="path_coa" value="{{ $data->file_coa or '' }}">
                                <a class="btn btn-default" id="custom-upload-btn-coa" href="javascript: clickUpload('coa')"><i class="icon-upload position-left"></i>Upload</a>
                                <a class="btn btn-default custom-delete-btn-coa" id="custom-delete-btn-coa" href="javascript: clickDelete('coa')"><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.documents.index",[$product_id])}}">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('coa');
    });

    function save() {
        var msg = '';
        if($('#lot_number').val().trim() == '')
            msg = 'Please enter "Lot Number"';
        else if($('#path_coa').val().trim() == '')
            msg = 'Please enter "File PDF Document COA"';

        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.documents.save',[$product_id]) }}",
            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.documents.index',[$product_id]) }}";
                    }, 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 = /(\.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
        {
            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');
        }
    }
</script>
@endsection