@extends('admin.layouts.main')

@section('title')
@if($edit)
Edit Asset
@else
Add Asset
@endif

@endsection

@section('content')
<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">
            <div class="form-sec">
                <div class="container">
                    <div class="row">



                        <div class="col-lg-6">
                            <h2 class="medium-font semibold gray mb-3">
                                @if($edit)
                                Edit Asset
                                @else
                                Add Asset
                                @endif
                            </h2>
                            <div class="step-box border shadow-none">

                                <form action="{{ route('admin.assets.store',['panel' => Session::get('panel')]) }}"
                                    id="frmUploadAsset" method="post" enctype="multipart/form-data">
                                    @csrf

                                    <div class="tab">
                                        <div class="row">
                                            <div class="col-md-12">

                                                <div class="form-group file-upload">
                                                    <label class="control-label">Upload</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" id="filename"
                                                            name="filename">
                                                        <label class="custom-file-label" for="filename"><img
                                                                src="{{ asset('img/file-upload.svg') }}"
                                                                alt="upload">Upload</label>
                                                    </div>
                                                </div>
                                                @if(isset($upload))
                                                <input type="hidden" name="uploadId" id="uploadId"
                                                    value="{{ $upload->id }}" />
                                                <span class="filename">
                                                    <a href="{{ $upload->asset_link }}" target="_blank"
                                                        class="text-underlined">
                                                        {{ $upload->orig_file_name }}
                                                    </a>
                                                    <input type="hidden" name="uploaded" id="uploaded" value="1" />
                                                </span>
                                                @else
                                                <span class="filename"></span>
                                                <input type="hidden" name="uploaded" id="uploaded" value="0" />
                                                @endif

                                                <div class="form-group">
                                                    <label class="control-label">Asset name</label>
                                                    <input id="title" name="title" type="text" class="form-control"
                                                        placeholder="Asset Name"
                                                        value="@if(isset($upload)){{ $upload->title }}@endif" />
                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label">Type</label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="fixed"
                                                            name="type" value="assetfixed" @if((isset($upload) &&
                                                            $upload->type ==
                                                        'assetfixed') || !isset($upload)) checked="checked" @endif />
                                                        <label class="custom-control-label" for="fixed">Fixed</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="variable"
                                                            name="type" value="assetvariable" @if(isset($upload) &&
                                                            $upload->type ==
                                                        'assetvariable') checked="checked" @endif />
                                                        <label class="custom-control-label"
                                                            for="variable">Variable</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-btn">
                                        <input type="submit" class="btn step-btn" value="Upload Asset" id="btnUpload">
                                    </div>

                                </form>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection


@push('pageJs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#btnUpload').click(function(e) {
            e.preventDefault();
            if ($("#frmUploadAsset").valid()) {
                $('#btnUpload').attr('disabled', true);
                $('#btnUpload').val('Please Wait...');
                $("#frmUploadAsset").submit();
            }
        });

        $(document).on('change', '#frmUploadAsset input[type="file"]', function(e) {
            $('.filename').text(e.target.files[0].name);
        });

    })

    $("#frmUploadAsset").validate({
        rules: {
            'filename': {
                required: {
                    depends: function(element) {
                        return ($("#uploaded").val() == 0)
                    }
                },
                extension: function(element) {
                    return 'doc|docx|odt|pdf|xls|xlsx|jpeg|jpg|png';
                },
                filesize: 25
            },
            'title': {
                required: true
            }
        },
        messages: {
            'filename': {
                required: "This field is required.",
                extension: function(element) {
                    return 'Valid files are PDF, Word, Excel, Images (png/jpg)';
                },
            },
            title: {
                required: 'This field is required.'
            }
        },
        ignore: [],
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            if (element.hasClass('langRatingClass')) {
                error.css({
                    'display': 'inline-block'
                });
                error.insertAfter(element.parents('.radio-img'));
            } else if (element.hasClass('custom-file-input')) {
                error.insertAfter(element.parents('.file-upload')[0]);
            } else if (element.type == 'input') {
                error.insertAfter(element.sibling(a));
            } else {
                if (element.hasClass('select-two')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    if (element.is('#fb-userId')) {
                        el = $(".name-opt .dropdown-menu").parent();
                        error.insertAfter(el);
                    } else {
                        error.insertAfter(element);
                    }
                }
            }
        },
        invalidHandler: function(event, validator) {
            var offset = $(validator.errorList[0].element).offset().top;
            $('html, body').animate({
                scrollTop: offset - 100
            }, 100);
        }
    });
</script>

@endpush