@extends('layouts.administrator.master')

@section('title')
    Form Keanggotaan Partner
@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 Partner Pertapindo') }}</h3>
                    <p>{{ __('Kelola data keanggotaan Contributor') }}</p>
                </div>
            </div>
        </div>
        <div class="nk-block nk-block-lg">
            <div class="card card-preview">
                <div class="card-inner">
                    @include('pages.registration.partner._navbar')
                    <div class="tab-content">
                        <form
                            action="{{ route('services.membership.registration.partner.experience.store', ['no_reg' => Helper::noRegPartnerData()]) }}"
                            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/partner/' . $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/partner/' . $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