@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>
    <!-- PAGE-HEADER END -->

    <!-- CONTAINER -->
    <div class="main-container container-fluid">
        <form action="{{ route('superadmin.add.additional') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row card-body">
                <div class="col-xl-4 col-md-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>

                                        <button type="button" class="btn btn-secondary-light clear-image" style="display: none;">{{ __('global.clear') }}</button>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group mb-0">
                                            <input type="file" class="form-control filepond" name="additional_image">
                                        </div>

                                        <div class="file_background_image mt-4">
                                            <img src="{{ asset('assets/images/additionals/default.png') }}" alt="Default additional" id="default_image">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h3 class="card-title">{{ __('global.general') }}</h3>
                                                    </div>
                                                    <div class="card-body">
                                                        <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="{{ old('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') }}">{{ old('description_'.$language->code) }}</textarea>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="card">
                                                    <div class="card-header">
                                                        <h3 class="card-title">{{ __('global.pricing') }}</h3>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-xl-12 mb-4">
                                                            <label for="price" class="form-label">{{ __('global.price') }} <span class="text-secondary">*</span></label>
                                                            <input type="text" class="form-control price-input @error('price') is-invalid is-text-invalid @enderror" id="price" placeholder="{{ __('global.enter_price') }} 00.00" name="price" value="{{ old('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') }} <span class="text-secondary">*</span></label>
                                                                <input type="number" class="form-control @error('min') is-invalid is-text-invalid @enderror" id="min" placeholder="{{ __('global.enter_quantity') }}" name="min" value="{{ old('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') }} <span class="text-secondary">*</span></label>
                                                                <input type="number" class="form-control @error('max') is-invalid is-text-invalid @enderror" id="max" placeholder="{{ __('global.enter_quantity') }}" name="max" value="{{ old('max') }}">

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

                                                        <div class="col-xl-12 mx-2">
                                                            <div class="custom-toggle-switch d-flex align-items-center">
                                                                <input id="toggleswitchPrimary" name="is_hourly" type="checkbox" {{ old('is_hourly') == 'on' ? '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-2 mx-3">
                                                    <input type="submit" class="btn btn-primary" value="{{ __('global.create') }}">
                                                    <a href="{{ route('superadmin.get.additional') }}" class="btn btn-default mx-2">{{ __('global.go_back') }}</a>
                                                </div>  
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- ROW-2 END -->
    </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();
            });
        });

        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