@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Invoice Setting</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Online Store</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Invoice Setting</div>
        </li>
    </ul>
</div>
<!-- setting -->
<form class="form-setting form-style-2" method="post" enctype="multipart/form-data">
    @csrf
    <div class="wg-box">
        <div class="left">
            <h5 class="mb-4">Invoice Information</h5>
            <div class="body-text">Invoice Setting</div>
        </div>
        <div class="right flex-grow">
            <div class="row">
            @foreach ($settings_query as $setting)
                @if($setting->category=="shop_logo")
                <div class="mb-20">
                    <fieldset>
                        <div class="body-title">Shop Logo <span class="tf-color-1">*</span></div>

                        <div class="upload-image flex-grow mb-10">
                            <div class="item up-load">
                                <label class="uploadfile h250" for="myFile">
                                    <span class="icon">
                                        <i class="icon-upload-cloud"></i>
                                    </span>
                                    <span class="body-text">
                                        Drop your image here or <span class="tf-color">click to browse</span>
                                    </span>
                                    <img
                                        id="myFile-preview"
                                        src="{{ !empty($setting->amount) ? asset($setting->amount) : '' }}"
                                        alt="Shop Logo"
                                        style="max-height: 120px; display: {{ !empty($setting->amount) ? 'block' : 'none' }}; margin-top: 10px;"
                                    >
                                    <input
                                        type="file"
                                        id="myFile"
                                        name="shop_logo"
                                        accept="image/*"
                                    >
                                </label>
                            </div>
                        </div>

                        <p class="body-text" id="shopLogo">
                            {{ !empty($setting->amount) ? basename($setting->amount) : 'No file uploaded yet' }}
                        </p>

                        @error('shop_logo')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </fieldset>

                </div>
                @else
                    <div class="col-md-6 col-12">
                        <fieldset class="mb-24">
                            <div class="body-title mb-10">{{ucwords(strtolower(str_replace('_',' ',$setting->category)))}}</div>
                            <input class="flex-grow" type="text"  name="store_settings[{{$setting->id}}]" tabindex="0" value="{{$setting->amount}}" aria-required="true" required="">
                        </fieldset>
                    </div>
                @endif
            @endforeach
            </div>
        </div>
    </div>
    <div class="cols gap10">
        <button class="tf-button w380" type="submit">Save Changes</button>
    </div>
</form>

@endsection
@section('page_script')
@parent
<script>
    $(".store-menu").addClass("active");
    $(".store-setting").addClass("active");
</script>
<script>
document.getElementById('myFile').addEventListener('change', function (event) {
    const file = event.target.files[0];
    const preview = document.getElementById('myFile-preview');
    const fileNameText = document.getElementById('shopLogo');

    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
        fileNameText.textContent = file.name;
    }
});
</script>

@endsection
<!-- App js -->