@extends('layout')

@section('h4-page', __('setting') . ' ' . __('Taxinvoice'))

@section('contents')
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div class="mb-3">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="card">
                    <div class="card-body min-vh-100">
                        <form action="{{ route('setting.settingTaxinvoice.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <ul class="list-group">
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Company Name') }} ({{ __('en') }} )</label>
                                        <input type="text" class="form-control" name="datalange[en][name]"
                                            placeholder="{{ __('Company Name') }}"
                                            value="{{ @$main?->getTranslation('name', 'en') }}">
                                    </div>
                                </li>
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Address') }} ( {{ __('en') }} ) </label>
                                        <textarea type="text" class="form-control " name="datalange[en][address]" placeholder="Description"
                                            cols="5" rows="5">{!! @$main?->getTranslation('address', 'en') !!}</textarea>
                                    </div>
                                </li>
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Company Name') }} ({{ __('th') }} )</label>
                                        <input type="text" class="form-control" name="datalange[th][name]"
                                            placeholder="{{ __('Company Name') }}"
                                            value="{{ @$main?->getTranslation('name', 'th') }}">
                                    </div>
                                </li>
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Address') }} ( {{ __('th') }} ) </label>
                                        <textarea type="text" class="form-control " name="datalange[th][address]" placeholder="Description"
                                            cols="5" rows="5">{!! @$main?->getTranslation('address', 'th') !!}</textarea>
                                    </div>
                                </li>

                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Tax ID') }}</label>
                                        <input type="text" class="form-control" name="tax_id"
                                            placeholder="{{ __('Tax ID') }}" value="{{ @$main?->tax_id }}">
                                    </div>
                                </li>
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Tel') }}</label>
                                        <input type="text" class="form-control" name="tel"
                                            placeholder="{{ __('Tel') }}" value="{{ @$main?->tel }}">
                                    </div>
                                </li>
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Email') }}</label>
                                        <input type="email" class="form-control" name="email"
                                            placeholder="{{ __('Email') }}" value="{{ @$main?->email }}">
                                    </div>
                                </li>
                                {{-- <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Rubber Stamp') }}</label>
                                        <input type="file" class="form-control" name="rubber_img"
                                            placeholder="{{ __('Upload file') }}">
                                    </div>
                                </li> --}}
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Rubber Stamp') }}</label>
                                        <input type="file" class="form-control" name="rubber_img" id="rubber_img"
                                            accept="image/*" onchange="previewImage(event, 'rubber_preview')">
                                        <div class="mt-2">
                                            @if(@$main?->rubber)
                                            <img id="rubber_preview" src="{{ asset(@$main?->rubber) }}" alt="Preview Rubber Stamp" style="width: 100px;" />
                                            @else
                                            <img id="rubber_preview" src="#" alt="Preview Rubber Stamp" style="width: 100px; display: none;" />
                                            @endif
                                        </div>
                                    </div>
                                </li>
                                
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <label class="form-label">{{ __('Signature') }}</label>
                                        <input type="file" class="form-control" name="signature_img" id="signature_img"
                                            accept="image/*" onchange="previewImage(event, 'signature_preview')">
                                        <div class="mt-2">
                                            @if(@$main?->signature)
                                            <img id="signature_preview" src="{{ asset(@$main?->signature) }}" alt="Preview Signature" style="width: 100px;" />
                                            @else
                                            <img id="signature_preview" src="#" alt="Preview Signature" style="width: 100px; display: none;" />
                                            @endif
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        <button type="submit" class="btn btn-primary">{{ __('save') }}</button>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <link rel="stylesheet" href="{{ asset('libs/summernote/summernote-lite.css') }}">
    <script src="{{ asset('libs/summernote/summernote-lite.js') }}"></script>
    <script>
        function changeLange(e) {
            document.getElementById("lange").value = e.id;
            document.getElementById("imageFlagDrowdown").src = e.querySelector('img').src;
            lange = document.querySelectorAll(`.datalange`);
            lange.forEach(element => {
                if (element.classList.contains(`datalange_${e.id}`)) {
                    element.classList.remove("d-none");
                } else {
                    element.classList.add("d-none");
                }
            });
        }
    </script>

    <script>
      function previewImage(event, previewId) {
        const input = event.target;
        const preview = document.getElementById(previewId);

        if (input.files && input.files[0]) {
            const reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = "block";
            };

            reader.readAsDataURL(input.files[0]);
        } else {
            preview.src = "#";
            preview.style.display = "none";
        }
    }
    </script>

    <script>
        $('.summernote').summernote({
            height: 100, //set editable area's height
            codemirror: { // codemirror options
                theme: 'monokai'
            },
            toolbar: false,
        });
    </script>
@endsection