@extends('layouts.frontend')

@section('title', 'Identify')
@php
    $front = asset(empty(auth()->user()->member->id_card_front) ? '/frontid.png' : auth()->user()->member->id_card_front);
    $behind = asset(empty(auth()->user()->member->id_card_back) ? '/backid.png' : auth()->user()->member->id_card_back);
    $self = asset(empty(auth()->user()->member->selfie_photo) ? '/selfie.png' : auth()->user()->member->selfie_photo);
@endphp
@section('content')
    <form 
        action="{{ route('update-info', [auth()->id(), App\Enums\UpdateAction::IDENTIFY]) }}" 
        method="POST"
        class="d-flex flex-column justify-content-between" x-data="imageViewer()" style="height: 100vh;margin-bottom:50px;"
        enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="page-content card">

            <h3 class="py-2 text-bg-dark text-center mb-3">

                <div class="nav-button"><a href="{{route('information')}}"><i class="bi bi-arrow-left" style="color:white;float:left;margin-left:15px;"></i></a></div>
                Identify
            </h3>

            <div class="row g-2" style="padding:0px 5px;">
                <div class="col-6 align-self-center">
                    <label for="name" style="color:#0079b7 !important">Actual Name</label>
                </div>
                <div class="col-6">
                    <input type="text" name="actual_name" id="name" @class([
                        'form-control',
                        'border-danger' => $errors->has('actual_name'),
                    ])
                        value="{{ auth()->user()->member->actual_name??'' }}" @disabled(!empty(auth()->user()->member->actual_name))>
                </div>
                <div class="col-12 text-end">
                    @error('actual_name')
                        <span class="text-danger">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="col-6 align-self-center">
                    <label for="id_num" style="color:#0079b7 !important">Identification Card No.</label>
                </div>
                <div class="col-6">
                    <input type="text" name="id_card_number" id="id_num" @class([
                        'form-control',
                        'border-danger' => $errors->has('id_card_number'),
                    ])
                        value="{{ auth()->user()->member->id_card_number??'' }}" @disabled(!empty(auth()->user()->member->id_card_number??''))>
                </div>
                <div class="col-12 text-end">
                    @error('id_card_number')
                        <span class="text-danger">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>

            <div class="py-1 bg-secondary my-2 opacity-25"></div>

            <div class="card" style="margin-bottom: 10px !important;">
                <h5 class="card-header" style="color:#0079b7 !important">Upload ID photo</h5>
                <div class="card-body p-0 pt-2">
                    <div class="d-flex flex-wrap justify-content-center gap-2">
                        <div class="">
                            <p class="mb-0 text-center">
                                <b style="color:#0079b7 !important">Front ID card:</b>
                            </p>
                            <div class="img-id position-relative">
                                <label for="front"
                                    class="badge rounded-pill text-bg-success p-2 fs-6 position-absolute top-50 start-50 translate-middle">
                                    <i class="bi bi-cloud-arrow-up"></i>
                                </label>
                                <img :src="front" @class(['img-thumbnail w-100 h-100']) alt="id">
                            </div>
                        </div>
                        <div class="">
                            <p class="mb-0 text-center">
                                <b style="color:#0079b7 !important">Back ID card:</b>
                            </p>
                            <div class="img-id position-relative">
                                <label for="behind"
                                    class="badge rounded-pill text-bg-success p-2 fs-6 position-absolute top-50 start-50 translate-middle">
                                    <i class="bi bi-cloud-arrow-up"></i>
                                </label>
                                <img :src="behind" @class(['img-thumbnail w-100 h-100']) alt="id">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column align-items-center justify-content-center my-2">
                        <p class="mb-0">
                            <b style="color:#0079b7 !important">Selfie photo:</b>
                        </p>
                        <div class="img-id img-self position-relative">
                            <label for="self"
                                class="badge rounded-pill text-bg-success p-2 fs-6 position-absolute top-50 start-50 translate-middle">
                                <i class="bi bi-cloud-arrow-up"></i>
                            </label>
                            <img :src="self" @class(['img-thumbnail w-100 h-100']) alt="id">
                        </div>
                    </div>
                </div>
                <input type="file" name="id_card_front" id="front" class="d-none" accept="image/*" @change="fileFront" 
                @disabled(!empty(auth()->user()->member->id_card_front))>
                <input type="file" name="id_card_back" id="behind" class="d-none" accept="image/*" @change="fileBehind"
                @disabled(!empty(auth()->user()->member->id_card_back))>
                <input type="file" name="selfie_photo" id="self" class="d-none" accept="image/*" @change="fileSelf" 
                @disabled(!empty(auth()->user()->member->selfie_photo))>
            </div>
            <div class="btn-submit" style="clear:both;width:100%;">
                <button type="submit" class="btn btn-success rounded-0 fs-4 mt-auto w-100" onclick="return checkFormData();">Submit</button>
            </div>
        </div>

        
    </form>

    @if (session()->has('success'))
    <x-ms-success :message="session('success')" />
    @endif
    @if (session()->has('warning'))
    <x-ms-success type="warning" :message="session('warning')" />
    @endif
@endsection

@push('scripts')
    <script>
       function checkFormData(){
            var err =false;            
            if($('input[name="actual_name"]').val()==''){
                err = true;
            }
            else if($('input[name="id_card_number"]').val()==''){
                err = true;
            }

            var images= "{{auth()->user()->member->id_card_front??''}}";
            if(!images){
                if($('input[name="id_card_back"]').get(0).files.length == 0){
                    err = true;
                }
                else if($('input[name="id_card_front"]').get(0).files.length == 0){
                    err = true;
                }
                else if($('input[name="selfie_photo"]').get(0).files.length == 0){
                    err = true;
                }
            }
            
            if(err){
                jSuites.notification({
                    error: 1,
                    name: '',
                    message: 'Please Fill Your Information.',
                });
            }
            return !err ;
        }
        function imageViewer() {
            return {
                front: @json($front),
                behind: @json($behind),
                self: @json($self),

                fileFront(event) {
                    this.fileToDataUrl(event, src => this.front = src)
                },
                fileBehind(event) {
                    this.fileToDataUrl(event, src => this.behind = src)
                },
                fileSelf(event) {
                    this.fileToDataUrl(event, src => this.self = src)
                },

                fileToDataUrl(event, callback) {
                    if (!event.target.files.length) return

                    let file = event.target.files[0],
                        reader = new FileReader()

                    reader.readAsDataURL(file)
                    reader.onload = e => callback(e.target.result)
                },
            }
        }
    </script>
@endpush

@push('styles')
    <style>
        .img-id {
            width: 220px;
            height: 120px;
        }

        .img-id img {
            object-fit: cover;
        }
    </style>
@endpush