@extends('layouts.administrator.master')

@section('title')
    Form Keanggotaan Perusahaan
@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 Perusahaan Pertapindo') }}</h3>
                    <p>{{ __('Kelola data keanggotaan perusahaan') }}</p>
                </div>
            </div>
        </div>
        <div class="nk-block nk-block-lg">
            <div class="card card-preview">
                <div class="card-inner">
                    @include('pages.registration.company._navbar')
                    <div class="tab-content">
                        <form
                            action="{{ route('services.membership.registration.company.product.store', ['no_reg' => Helper::noRegCompanyData()]) }}"
                            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">{{ __('Nama Produk') }}</label>
                                                    <input type="text" class="form-control" name="name_product_utama"
                                                        value="">
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label class="mb-1">{{ __('Deskripsi Produk') }}</label>
                                                    <textarea type="text" name="description_product_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">Foto Produk (png/jpg/jpeg :
                                                        <span class="text-primary">Max 512KB</span>)
                                                    </label>

                                                    <img id="imageProduk" src="{{ asset('') }}landing/img/noimage.png"
                                                        alt="" class="rounded rounded-full " style="object-fit: cover;" height="170">
                                                        
                                                        <div class="form-control-wrap">
                                                            <input type="file"
                                                            accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                            id="customFile"
                                                            onchange="document.getElementById('imageProduk').src = window.URL.createObjectURL(this.files[0])"
                                                            name="photo_product_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->photo_product))
                                        @foreach (json_decode($registration->photo_product) 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">{{ __('Nama Produk') }}</label>
                                                            <input type="text" class="form-control" name="name_product_{{$key}}"
                                                                value="{{(isset($value->name)) ? $value->name : ""}}">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                            <label class="mb-1">{{ __('Deskripsi Produk') }}</label>
                                                            <textarea type="text" name="description_product_{{$key}}" class="form-control" placeholder="Deskripsi Perusahaan">{{(isset($value->description)) ? $value->description : ""}}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <div class="form-group mb-3 form-control-wrap text-center">
                                                            <label class="form-label">Foto Produk (png/jpg/jpeg :
                                                                <span class="text-primary">Max 512KB</span>)
                                                            </label>

                                                            <img id="imageProduk{{$key}}" src="{{ asset('uploads/membership/company/' . $registration->no_reg . '/product/photo/' . $value->photo) }}"
                                                                alt="" class="rounded rounded-full " style="object-fit: cover;" height="170">
                                                            
                                                            <label for="customFile{{$key}}" 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="image/png, image/gif, image/jpeg, image/svg+xml"
                                                                    id="customFile{{$key}}"
                                                                    onchange="document.getElementById('imageProduk{{$key}}').src = window.URL.createObjectURL(this.files[0])"
                                                                    name="photo_product_{{$key}}"
                                                                    style="display: none"
                                                                >
                                                                <input type="hidden" name="val_photo_product_{{$key}}" value="{{ $value->photo }}">
                                                            </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">{{ __('Nama Produk') }}</label>
                                                        <input type="text" class="form-control" name="name_product_copy"
                                                            value="">
                                                    </div>
                                                    <div class="form-group mb-3">
                                                        <label class="mb-1">{{ __('Deskripsi Produk') }}</label>
                                                        <textarea type="text" name="description_product_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">Foto Produk (png/jpg/jpeg :
                                                            <span class="text-primary">Max 512KB</span>)
                                                        </label>

                                                        <img id="imageProdukCopy" src="{{ asset('') }}landing/img/noimage.png"
                                                            alt="" class="rounded rounded-full " style="object-fit: cover;" height="170">
                                                        
                                                        <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="image/png, image/gif, image/jpeg, image/svg+xml"
                                                                id="customFileCopy"
                                                                onchange="document.getElementById('imageProdukCopy').src = window.URL.createObjectURL(this.files[0])"
                                                                name="photo_product_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">{{ __('Nama Produk') }}</label>
                            <input type="text" class="form-control name-product" name=""
                                value="">
                        </div>
                        <div class="form-group mb-3">
                            <label class="mb-1">{{ __('Deskripsi Produk') }}</label>
                            <textarea type="text" name="" class="form-control description-product" 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">Foto Produk (png/jpg/jpeg :
                                <span class="text-primary">Max 512KB</span>)
                            </label>

                            <img id="imageProduk" src="{{ asset('') }}landing/img/noimage.png"
                                alt="" class="rounded rounded-full form-file-image" style="object-fit: cover;" height="170">
                            
                            
                            <label for="customFile" class="form-label select-image-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="image/png, image/gif, image/jpeg, image/svg+xml"
                                    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-product').attr('name', 'name_product_'+uniqueName);
                clone.find('.description-product').attr('name', 'description_product_'+uniqueName);
                clone.find('.form-file-input').attr('name', 'photo_product_'+uniqueName);

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

                var imageId = 'imageProduk' + 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