@extends('layouts.frontend-master')
@section('title', 'Home')
@push('style')
    <style>

    </style>
@endpush
@php
    $user = auth()->user()->member;
@endphp
@section('content')

<div class="max-w-lg mx-auto mt-4">
    <h1 class="text-2xl mb-4 bg-primary-linear text-white px-2 py-2 rounded-lg font-bold">
        Fill your information
    </h1>
    <form class="arco-form arco-form-layout-vertical arco-form-size-medium"
        action="{{ route('update-info', [auth()->id(), App\Enums\UpdateAction::IDENTIFY]) }}" method="POST"
        enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label"><!--v-if-->Actual Name<!--v-if--><!--v-if-->
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="name">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-input-wrapper"><!----><input name="actual_name"
                                class="arco-input arco-input-size-medium" type="text" @disabled(!empty($user->actual_name))
                                value="{{ $user->actual_name ?? '' }}" /><!----><!----></span>
                    </div>
                </div>
                <!--v-if--><!--v-if-->
            </div>
        </div>
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label"><!--v-if-->Identification Card No.<!--v-if--><!--v-if-->
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="id_no">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-input-wrapper"><!----><input name="id_card_number"
                                class="arco-input arco-input-size-medium" type="text" @disabled(!empty($user->id_card_number))
                                value="{{ $user->id_card_number ?? '' }}" /><!----><!----></span>
                    </div>
                </div>
                <!--v-if--><!--v-if-->
            </div>
        </div>
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label"><!--v-if-->Front ID Card<!--v-if--><!--v-if-->
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="front_id">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-upload"><input class="img" name="id_card_front" type="file" accept="image/*"
                                style="display: none" /><span><!---->
                                <img src="{{$user->id_card_front?asset($user->id_card_front): asset('frontid.png') }}" class="{{empty($user->id_card_front)?'img-placeholder':''}}" alt="">
                                <div class="flex items-center space-x-1 ">
                                    <button
                                        class="arco-btn arco-btn-primary-linear arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal {{empty($user->id_card_front)?'img-placeholder':''}}"
                                        type="button">
                                        <!--v-if--><svg viewBox="0 0 48 48" fill="none"
                                            xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
                                            class="arco-icon arco-icon-upload mr-2" stroke-width="4"
                                            stroke-linecap="butt" stroke-linejoin="miter">
                                            <path d="M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6">
                                            </path>
                                        </svg>
                                        Upload</button><!---->
                                </div>
                            </span></span>
                    </div>
                </div>
                <!--v-if--><!--v-if-->
            </div>
        </div>
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label"><!--v-if-->Back ID Card<!--v-if--><!--v-if-->
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="back_id">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-upload">
                            <input name="id_card_back" class="img" type="file" accept="image/*"
                                style="display: none" /><span><!---->
                                <img src="{{$user->id_card_back?asset($user->id_card_back): asset('backid.png') }}" class="{{empty($user->id_card_front)?'img-placeholder':''}}" alt="">
                                <div class="flex items-center space-x-1">
                                    <button
                                        class="arco-btn arco-btn-primary-linear arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal {{empty($user->id_card_front)?'img-placeholder':''}}"
                                        type="button">
                                        <!--v-if--><svg viewBox="0 0 48 48" fill="none"
                                            xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
                                            class="arco-icon arco-icon-upload mr-2" stroke-width="4"
                                            stroke-linecap="butt" stroke-linejoin="miter">
                                            <path d="M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6">
                                            </path>
                                        </svg>
                                        Upload</button><!---->
                                </div>
                            </span></span>
                    </div>
                </div>
                <!--v-if--><!--v-if-->
            </div>
        </div>
        <div class="arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-vertical">
            <div class="arco-form-item-label-col">
                <label class="arco-form-item-label">Selfie With ID Card
                </label>
            </div>
            <div class="arco-form-item-wrapper-col" id="selfie_id">
                <div class="arco-form-item-content-wrapper">
                    <div class="arco-form-item-content arco-form-item-content-flex">
                        <span class="arco-upload">
                            <input name="selfie_photo" type="file" class="img" accept="image/*"
                                style="display: none" /><span><!---->
                                <img src="{{$user->selfie_photo?asset($user->selfie_photo): asset('selfie.png') }}" class="{{empty($user->id_card_front)?'img-placeholder':''}}" alt="">
                                <div class="flex items-center space-x-1">
                                    <button
                                        class="arco-btn arco-btn-primary-linear arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal {{empty($user->id_card_front)?'img-placeholder':''}}"
                                        type="button">
                                        <svg viewBox="0 0 48 48" fill="none"
                                            xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
                                            class="arco-icon arco-icon-upload mr-2" stroke-width="4"
                                            stroke-linecap="butt" stroke-linejoin="miter">
                                            <path d="M14.93 17.071 24.001 8l9.071 9.071m-9.07 16.071v-25M40 35v6H8v-6">
                                            </path>
                                        </svg>
                                        Upload</button><!---->
                                </div>
                            </span></span>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="arco-space arco-space-vertical arco-space-fill">
            <!---->
            <div class="arco-space-item">
                <button
                    class="arco-btn arco-btn-primary-linear arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal w-full"
                    type="submit">
                    Submit
                </button>
            </div>
        </div>
    </form>
</div>
{{-- @endif --}}
@endsection
@push('script')
    <script>
        $(function() {
            $('.img-placeholder').on('click', function() {
                var imgplaceholder = $(this);
                var imgElement = $(this).closest('div').find('.img'); // Cache a reference to .img
                if(imgElement.length==0){
                    imgElement=$(this).parent().parent().parent().find('.img')
                    imgplaceholder=$(this).parent().parent().find('img')
                }
                imgElement.trigger('click'); // Trigger click on the img element

                imgElement.on('change', function() {
                    var file = this.files[0];
                    var myreader = new FileReader();

                    myreader.readAsDataURL(file);

                    myreader.onload = function() {
                        var dataURL = myreader.result;
                        imgplaceholder.attr('src', dataURL); // Use imgplaceholder to set src
                    };
                });
            });
        });
    </script>
@endpush