@extends('layouts.super_admin.app')

@section('styles')
    <style>
        .file_background_image img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
    </style>
@endsection

@section('content')
    <!-- PAGE-HEADER -->
    <div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
        <h1 class="page-title">{{ __('global.additional_product') }}</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('superadmin.get.categories') }}">{{ __('global.additional_products') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('global.additional_product') }}</li>
            </ol>
        </div> 
    </div>
    <!-- PAGE-HEADER END -->

    <!-- CONTAINER -->
    <div class="main-container container-fluid">
        <form action="{{ route('superadmin.update.additional', $additional->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        <!-- ROW-2 OPEN -->
            <div class="row">
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class=" card-body row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between">
                                        <h3 class="card-title my-2">{{ __('global.upload') }}</h3>

                                        @if($additional->image && File::exists(public_path('assets/images/additionals/' . $additional->image)))
                                            <a href="{{ route('superadmin.delete.image.additional', $additional->id) }}" class="btn btn-secondary-light clear-image">{{ __('global.delete') }}</a>
                                        @endif
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group mb-0">
                                            <input type="file" class="form-control filepond" name="additional_image" id="additional_image_input">
                                        </div>

                                        <div class="file_background_image mt-4">
                                            @if($additional->image && File::exists(public_path('assets/images/additionals/' . $additional->image)))
                                                <img src="{{ asset('assets/images/additionals/'.$additional->image) }}" alt="Uploaded File" id="uploaded_image">
                                            @else
                                                <img src="{{ asset('assets/images/additionals/default.png') }}" alt="Default File" id="default_image">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{ __('global.general') }}</h3>
                        </div>
                        
                        <div class="card-body">
                            <div class="card">
                                <div class="panel panel-primary">
                                    <div class=" tab-menu-heading">
                                        <div class="tabs-menu1">
                                            <!-- Tabs -->
                                            <ul class="nav panel-tabs">
                                                @foreach($languages as $language)
                                                    <li>
                                                        <a href="#{{ $language->code }}" class="d-flex align-items-center {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab">
                                                            <img src="{{ asset('/build/assets/images/flags-svg/' . $language->code . '.svg') }}" alt="{{ $language->code }}" style="width: 27px;" class="me-2">
                                                                {{ $language->name }}

                                                            @error('title_' . $language->code)
                                                                <span class="text-secondary px-2">*</span>
                                                            @enderror
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="panel-body tabs-menu-body px-0">
                                        <div class="tab-content">
                                            @foreach($languages as $language)
                                                <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="{{ $language->code }}">
                                                    <div class="col-xl-12 mb-4">
                                                        <label for="title_{{ $language->code }}" class="form-label">{{ __('global.name') }} <span class="text-secondary">*</span></label>
                                                        <input type="text" class="form-control @error('title_ge') is-invalid is-text-invalid @enderror" id="title_{{ $language->code }}" placeholder="{{ __('global.enter_name') }}"
                                                            name="title_{{ $language->code }}" value="{{ unserialize($additional->title)[$language->code] ?? '' }}">

                                                        @error('title_'.$language->code)
                                                            <span class="invalid-feedback d-block" role="alert">
                                                                {{ $message }}
                                                            </span>
                                                        @enderror
                                                    </div>

                                                    <div class="col-xl-12">
                                                        <label for="description_{{ $language->code }}" class="form-label">{{ __('global.description') }}</label>
                                                        <textarea class="form-control" id="description_{{ $language->code }}" rows="3" name="description_{{ $language->code }}" 
                                                            placeholder="{{ __('global.enter_description') }}">{{ unserialize($additional->description)[$language->code] ?? '' }}</textarea>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-xl-12 mb-4">
                                        <label for="price" class="form-label">{{ __('global.price') }}</label>
                                        <input type="text" class="form-control price-input @error('price') is-invalid is-text-invalid @enderror" id="price" placeholder="{{ __('global.enter_price') }}" name="price" value="{{ $additional->price }}">

                                        @error('price')
                                            <span class="invalid-feedback d-block" role="alert">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="d-flex">
                                        <div class="col-xl-6 mb-4">
                                            <label for="min" class="form-label">{{ __('global.min_quantity') }}</label>
                                            <input type="number" class="form-control @error('min') is-invalid is-text-invalid @enderror" id="min" placeholder="{{ __('global.enter_quantity') }}" name="min" value="{{ $additional->min }}">

                                            @error('min')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="col-xl-6 mb-5">
                                            <label for="max" class="form-label">{{ __('global.max_quantity') }}</label>
                                            <input type="number" class="form-control @error('max') is-invalid is-text-invalid @enderror" id="max" placeholder="{{ __('global.enter_quantity') }}" name="max" value="{{ $additional->max }}">

                                            @error('max')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-xl-12 mx-2 mb-4">
                                        <div class="custom-toggle-switch d-flex align-items-center">
                                            <input id="toggleswitchPrimary" name="is_hourly" type="checkbox" {{ $additional->is_hourly ? 'checked' : '' }}>
                                            <label for="toggleswitchPrimary" class="label-primary"></label>
                                            <span class="fs-13 ms-3 mb-2">{{ __('global.hourly') }}?</span>
                                        </div>
                                    </div>

                                    
                                </div>
                            </div>

                            <div class="d-flex justify-content-end m-3 mx-3">
                                <a href="{{ route('superadmin.get.additional') }}" class="btn btn-default mx-2">{{ __('global.go_back') }}</a>
                                <input type="submit" class="btn btn-primary mx-2" value="{{ __('global.update') }}">
                            </div>
                        </div>
                    </div>

                    
                </div>
            </div>
        </form>
        <!-- ROW-2 CLOSED -->
    </div>
    <!-- CONTAINER CLOSED -->

@endsection

@section('scripts')

    <script>
        $(document).ready(function() {
            $('.filepond').on('change', function() {
                var file = this.files[0];

                if (file) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $('.file_background_image').html('<img src="' + e.target.result + '" alt="Uploaded File">');
                        $('.clear-image').show();
                    };

                    reader.readAsDataURL(file);
                } else {
                    $('.file_background_image').html('');
                    $('.file_background_image').html('<img src="/assets/images/additionals/default.png" alt="Default Additional" id="default_image">');
                    $('.clear-image').hide();
                }
            });

            $('.clear-image').on('click', function() {
                $('.file_background_image').html('');
                $('.file_background_image').html('<img src="/assets/images/additionals/default.png" alt="Default Additional" id="default_image">');
                $('.filepond').val('');
                $(this).hide();
            });
        });

        $('#additional_image_input').change(function() {
            var input = this;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    // Update the src attribute of the image with the uploaded file
                    $('#uploaded_image').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        });

        function priceInputGenerator(inputId) {
            $(inputId).on('keyup', function(){
                var price = $(this).val().replace(/[^\d]/g,'');    
                var pre, dec;
                var delimiter = '.';
                
                var result = price;
            
                if (price.length > 3 && price.charAt(0) == '0') {
                        price = price.substr(1);
                }
                
                if (price.length > 2) {
                        pre = price.slice(0,-2);
                        dec = price.substr( (price.length-2), 2);
                        result = pre + delimiter + dec;
                }
                
                $(this).val('').val(result);
                
            });
        }

        priceInputGenerator('.price-input');
    </script>

    <!-- Validation JS -->
    <script src="{{ asset('assets/js/validation.js') }}"></script>

@endsection