@extends('layouts.'.$namespaceName.'.master')
@section('title')
    {{$title}}
@endsection
@section('content')
    <div class="page-wrapper">
        <div class="page-content m-2">
            @include('message')
            @include('breadcrumb')
            <div class="row">
                <div class="col-xl-10 mx-auto">
                    <h6 class="mb-0 text-uppercase">{{$title}}</h6>
                    <hr/>
                    <div class="card">
                        <div class="card-body">
                            <div class="border p-3 rounded">
                                <form action="{{route($modelName.'.update','test')}}" method="post" autocomplete="off" enctype="multipart/form-data">
                                    @method('PUT')
                                    @csrf
                                    <div class="mb-3">
                                        <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'system_name_en')}}</label>
                                        <input type="text" name="system_name_en" class="form-control  @error('system_name_en') is-invalid @enderror" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{$data->getTranslation('system_name', 'en')}}">
                                        @error('system_name_en')
                                        <div class="alert alert-danger">{{$message}}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'system_name_ar')}}</label>
                                        <input type="text" name="system_name_ar" class="form-control  @error('system_name_ar') is-invalid @enderror" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);"value="{{$data->getTranslation('system_name', 'ar')}}">
                                        @error('system_name_ar')
                                        <div class="alert alert-danger">{{$message}}</div>
                                        @enderror
                                    </div>




                                    <div class="mb-3">
                                        <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'logo')}}</label>
                                        <div class="mx-auto form-control" >
                                            <div class="col-xl-2 mb-3">
                                                <div class="form-group">
                                                    <img style="height: 100px;width: 120px;"
                                                         src="{{ asset($data->logo) }}"
                                                         id="imageView">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xl-10">
                                                    <div>
                                                        <label for="logo" class="btn btn-dark" >{{ __('labels.Select Image') }}</label>
                                                        <input id="logo" name="logo" style="visibility:hidden;" type="file" accept="image/*">
                                                    </div>
                                                </div>
                                                <div class="col-xl-2">
                                                    <div class="form-group">
                                                        <button  class="btn btn-inverse-dark form-control" style="padding: 0;" id="remove-logo" disabled><a href="{{route('system-info.resetImage','logo')}}" width="inherit"  class="form-control"style="color:black; display:block" >{{__('labels.remove')}}</a></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'fav')}}</label>
                                        <div class="mx-auto form-control" >
                                            <div class="col-xl-2 mb-3">
                                                <div class="form-group">
                                                    <img style="height: 50px;width: 60px;"
                                                         src="{{ asset($data->fav) }}"
                                                         id="favIcon">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xl-10">
                                                    <div>
                                                        <label for="fav" class="btn btn-dark" >{{ __('labels.Select Image') }}</label>
                                                        <input id="fav" name="fav" style="visibility:hidden;" type="file" accept="image/*">
                                                    </div>
                                                </div>
                                                <div class="col-xl-2">
                                                    <div class="form-group">
                                                        <button  class="btn btn-inverse-dark form-control" style="padding: 0;" id="remove-fav" disabled> <a href="{{route('system-info.resetImage','fav')}}"  width="inherit" class="form-control"style="color:black; display:block" >{{__('labels.remove')}}</a></button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <button class="btn btn-success">{{trans($namespaceName.'/app.update')}}</button>
                                        </div>
                                    </div>                            </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let logo = document.getElementById("logo");
        let imageName = document.getElementById("imageName")
        let removeLogo=document.getElementById('remove-logo');
        logo.addEventListener("change", ()=>{
            let inputImage = document.querySelector("#logo").files[0];
            let photo =document.getElementById("imageView")
            removeLogo.disabled = false;
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#imageView').attr('src', e.target.result);
            }
            reader.readAsDataURL(inputImage);
            console.log(inputImage.name);
        });


        let removeFav=document.getElementById('remove-fav');
        let fav = document.getElementById("fav");
        fav.addEventListener("change", ()=>{
            let inputImage1 = document.querySelector("#fav").files[0];
            let photo1 =document.getElementById("favIcon")
            removeFav.disabled = false;
            var reader1 = new FileReader();

            reader1.onload = function (e) {
                $('#favIcon').attr('src', e.target.result);
            }
            reader1.readAsDataURL(inputImage1);
            // console.log(inputImage1.name);

        })
        let defaultPhoto=window.location.origin+'/default/no-icon.png';
        if(document.getElementById('favIcon').src !== defaultPhoto)
        {
            removeFav.disabled = false;
        }
        if(document.getElementById('imageView').src !== defaultPhoto)
        {
            removeLogo.disabled = false;
        }

    </script>
@endsection