@extends('layouts.administrator.master')

@section('title')
    Form Keanggotaan Contributor
@endsection

@section('content')
    <div class="nk-content-body">
        <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">{{ __('Formulir Keanggotaan Collaborator Pertapindo') }}</h3>
                    <p>{{ __('Kelola data keanggotaan collaborator') }}</p>
                </div>
            </div>
        </div>
        <div class="nk-block nk-block-lg">
            <div class="card card-preview">
                <div class="card-inner">
                    @include('pages.registration.collaborator._navbar')
                    <div class="tab-content">
                        <form
                            action="{{ route('services.membership.registration.collaborator.experience.store', ['no_reg' => Helper::noRegCollaboratorData()]) }}"
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                
                                <div class="form-group ">
                                    <div class="control-group increment">
                                        
                                        <div class="row">
                                            <input type="hidden" name="index[]" value="utama">                                      
                                            <div class="col-9">
                                                <div class="form-group mb-3">
                                                    <label class="mb-1">{{ __('Pengalaman') }}</label>
                                                    <input type="text" class="form-control" name="name_experience_utama">
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label class="mb-1">Tanggal</label>
                                                    <input type="date" name="date_experience_utama" class="form-control">
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label class="mb-1">{{ __('Deskripsi') }}</label>
                                                    <textarea type="text" name="description_experience_utama" class="form-control" placeholder="Deskripsi Perusahaan"></textarea>
                                                </div>
                                            </div>
                                            
                                            <div class="col-sm-3">
                                                <div class="form-group mb-3 form-control-wrap text-center">
                                                    <label class="form-label">File  Pengalaman (PDF : :
                                                        <span class="text-primary">Max 2048KB</span>)
                                                    </label>
                                                        
                                                        <div style="height: 305px;">
                                                            <iframe id="pdfViewerKategori" 
                                                                src="{{ asset('src/file/empty_file.pdf') }}" 
                                                                width="250" height="300" frameborder="0">
                                                            </iframe>
                                                        </div>

                                                        <div class="form-control-wrap">
                                                            <input type="file"
                                                            accept="application/pdf"
                                                            id="customFile"
                                                            onchange="document.getElementById('pdfViewerKategori').src = window.URL.createObjectURL(this.files[0])"
                                                            name="file_experience_utama"
                                                            style="display: none"
                                                            >
                                                            <label for="customFile" class="form-label" style="margin-top: 5px;">
                                                                <span class="btn btn-lg btn-info btn-sm px-5">Select File</span>
                                                            </label>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <div class="form-control-wrap">
                                                    <button class="btn btn-success px-2" type="button"><i
                                                            class="glyphicon glyphicon-plus"></i>Tambah</button>
                                                </div>
                                            </div>
                                        </div>

                                        @if (isset($registration->experience))
                                            @foreach (json_decode($registration->experience) as $key => $value)
                                            <div class="control-group">
                                                <hr>
                                                <div class="row">
                                                    <input type="hidden" name="index[]" value="{{$key}}">   
                                                    <div class="col-9">
                                                        <div class="form-group mb-3">
                                                            <label class="mb-1">{{ __('Pengalaman') }}</label>
                                                            <input type="text" class="form-control" name="name_experience_{{$key}}"
                                                                value="{{(isset($value->name_experience)) ? $value->name_experience : ""}}">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                            <label class="mb-1">Tanggal</label>
                                                            <input type="date" name="date_experience_{{$key}}" class="form-control"
                                                            value="{{(isset($value->date_experience)) ? $value->date_experience : ""}}">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                            <label class="mb-1">{{ __('Deskripsi') }}</label>
                                                            <textarea type="text" name="description_experience_{{$key}}" class="form-control" placeholder="Deskripsi Perusahaan">{{(isset($value->description_experience)) ? $value->description_experience : ""}}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <div class="form-group mb-3 form-control-wrap text-center">
                                                            <label class="form-label">File Sertifikat (PDF :
                                                                <span class="text-primary">Max 2048KB</span>)
                                                            </label>
                                                            
                                                            <div style="height: 305px;">
                                                                <iframe id="pdfViewerKategori{{$key}}" 
                                                                    src="{{ asset('uploads/membership/collaborator/' . $registration->no_reg . '/experience/file_experience/' . $value->file_experience) }}" 
                                                                    width="250" height="300" frameborder="0">
                                                                </iframe>
                                                            </div>

                                                            <label for="customFile{{$key}}" class="form-label" style="margin-top: 5px;">
                                                                <span class="btn btn-info btn-sm">Select File</span>
                                                            </label>
                                                            <a class="btn btn-success btn-sm" target="_blank" href="{{ asset('uploads/membership/collaborator/' . $registration->no_reg . '/experience/file_experience/' . $value->file_experience) }}">Lihat
                                                                File</a>
                                                            
                                                            <div class="form-control-wrap">
                                                                <input type="file"
                                                                    accept="application/pdf"
                                                                    id="customFile{{$key}}"
                                                                    onchange="document.getElementById('pdfViewerKategori{{$key}}').src = window.URL.createObjectURL(this.files[0])"
                                                                    name="file_experience_{{$key}}"
                                                                    style="display: none"
                                                                >
                                                                <input type="hidden" name="val_file_experience_{{$key}}" value="{{ $value->file_experience }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="form-group">
                                                            <div class="form-control-wrap">
                                                                <button class="btn btn-danger" type="button"><i
                                                                        class="glyphicon glyphicon-remove"></i>
                                                                    Hapus</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <hr>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="control-group">
                                            <hr>
                                            <div class="row">
                                                <input type="hidden" name="index[]" value="copy">  
                                                <div class="col-9">
                                                    <div class="form-group mb-3">
                                                        <label class="mb-1">{{ __('Pengalaman') }}</label>
                                                        <input type="text" class="form-control" name="name_experience_copy"
                                                            value="">
                                                    </div>
                                                    <div class="form-group mb-3">
                                                        <label class="mb-1">Tanggal</label>
                                                        <input type="date" name="date_experience_copy" class="form-control">
                                                    </div>
                                                    <div class="form-group mb-3">
                                                        <label class="mb-1">{{ __('Deskripsi') }}</label>
                                                        <textarea type="text" name="description_experience_copy" class="form-control" placeholder="Deskripsi Perusahaan"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-sm-3">
                                                    <div class="form-group mb-3 form-control-wrap text-center">
                                                        <label class="form-label">File  Pengalaman (PDF : :
                                                            <span class="text-primary">Max 2048KB</span>)
                                                        </label>

                                                        <div style="height: 305px;">
                                                            <iframe id="pdfViewerKategoriCopy" 
                                                                src="{{ asset('src/file/empty_file.pdf') }}" 
                                                                width="250" height="300" frameborder="0">
                                                            </iframe>
                                                        </div>
                                                        
                                                        <label for="customFileCopy" class="form-label" style="margin-top: 5px;">
                                                            <span class="btn btn-lg btn-info btn-sm px-5">Select File</span>
                                                        </label>
                                                        
                                                        <div class="form-control-wrap">
                                                            <input type="file"
                                                                accept="application/pdf"
                                                                id="customFileCopy"
                                                                onchange="document.getElementById('pdfViewerKategoriCopy').src = window.URL.createObjectURL(this.files[0])"
                                                                name="file_experience_copy"
                                                                style="display: none"
                                                            >
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="form-group">
                                                        <div class="form-control-wrap">
                                                            <button class="btn btn-danger" type="button"><i
                                                                    class="glyphicon glyphicon-remove"></i>
                                                                Hapus</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                        </div>

                                    @endif
                                    </div>
                                </div>
                            </div>
                            <div class="mx-auto mt-4 text-end">
                                <button class="btn btn-primary me-2">{{ __('Selanjutnya') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
     {{-- Clone --}}
    <div hidden>
        <div class="clone hide" id="clone-hide">

            <div class="control-group">
                <hr>
                <div class="row">
                    <input class="input-index" type="hidden" name="index[]" value="">
                    <div class="col-9">
                        <div class="form-group mb-3">
                            <label class="mb-1">{{ __('Pengalaman') }}</label>
                            <input type="text" class="form-control name-experience" name=""
                                value="">
                        </div>
                        <div class="form-group mb-3">
                            <label class="mb-1">Tanggal</label>
                            <input type="date" name="" class="form-control date-experience">
                        </div>
                        <div class="form-group mb-3">
                            <label class="mb-1">{{ __('Deskripsi') }}</label>
                            <textarea type="text" name="" class="form-control description-experience" placeholder="Deskripsi Perusahaan"></textarea>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group mb-3 form-control-wrap text-center">
                            <label class="form-label">File  Pengalaman (PDF : :
                                <span class="text-primary">Max 2048KB</span>)
                            </label>

                            <div style="height: 305px;">
                                <iframe class="form-file-image" id="pdfViewerKategori" 
                                    src="{{ asset('src/file/empty_file.pdf') }}" 
                                    width="250" height="300" frameborder="0">
                                </iframe>
                            </div>
                            
                            <label for="customFile" class="form-label select-file-button" style="margin-top: 5px;">
                                <span class="btn btn-lg btn-info btn-sm px-5">Select File</span>
                            </label>

                            <div class="form-control-wrap">
                                <input type="file"
                                    class="form-file-input"
                                    accept="application/pdf"
                                    id="customFile"
                                    name=""
                                    style="display: none;"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <div class="form-control-wrap">
                                <button class="btn btn-danger" type="button"><i
                                        class="glyphicon glyphicon-remove"></i>
                                    Hapus</button>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
            </div>

        </div>
    </div>

@endsection

@push('script')
    <script type="text/javascript">
        $(document).ready(function() {

            $(".btn-success").click(function() {
                var clone = $("#clone-hide:first").clone(true, true);
                var newDate = new Date().getTime();
                var uniqueName = 'customFile' + newDate;
                clone.find('.input-index').attr('value', uniqueName);
                clone.find('.name-experience').attr('name', 'name_experience_'+uniqueName);
                clone.find('.date-experience').attr('name', 'date_experience_'+uniqueName);
                clone.find('.description-experience').attr('name', 'description_experience_'+uniqueName);
                clone.find('.form-file-input').attr('name', 'file_experience_'+uniqueName);

                var newId = 'customFile' + newDate;
                clone.attr('id', newDate);
                clone.find('.form-file-input').attr('id', newId);
                clone.find('.select-file-button').attr('for', newId);
                

                var imageId = 'pdfViewerKategori' + newDate;
                clone.find('.form-file-image').attr('id', imageId);

                clone.find('.form-file-input').on('change', function () {
                    var input = this;
                    var imgElement = document.getElementById(imageId);

                    if (input.files && input.files[0]) {
                        imgElement.src = window.URL.createObjectURL(input.files[0]);
                    }
                });

                $(".increment").append(clone);
            });

            $("body").on("click", ".btn-danger", function() {
                $(this).closest(".control-group").remove();
            });

        });
    </script>
@endpush