@extends('site.layout.layout')

@section('title',__('Add a used product'))

@push('css')
    <style>
        .select2-container .select2-search--inline .select2-search__field {
            box-sizing: border-box!important;
            border: none!important;
            font-size: 65%!important;
            margin-top: 5px!important;
            margin-left: 5px!important;
            padding: 0!important;
            max-width: 100%!important;
            resize: none!important;
            height: 24px!important;
            vertical-align: text-top!important;
            font-family: sans-serif!important;
            overflow: hidden!important;
            word-break: keep-all!important;
        }

        .select2-selection--multiple {
            border-radius: 16px!important;;
        }
    </style>
@endpush

@section('content')
    <main class="orders_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('Add a used product') }}</li>
            </ol>
        </nav>
        <section class="all_products row py-3 px-3 px-lg-4 mb-5">
            <div class="col-sm-4 col-md-3 mb-3">
                <nav class="setting_nav d-flex d-sm-block">
                    <a href="{{ route('Site.MyOrders') }}">
                        <img src="{{ asset('site/img/light/3d-cube-scan.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/3d-cube-scan.png') }}" data-dark="{{ asset('site/img/dark/3d-cube-scan.png') }}" alt=""> {{ __('My Orders') }}
                    </a>
                    <a href="{{ route('Site.SellMyProducts') }}" class="active">
                        <img src="{{ asset('site/img/buy-crypto.png') }}" alt=""> {{ __('Sell My Products')}}
                    </a>
                    <a href="{{ route('Site.Profile') }}">
                        <img src="{{ asset('site/img/light/profile-circle.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/profile-circle.png') }}" data-dark="{{ asset('site/img/dark/profile-circle.png') }}" alt=""> {{ __('Profile') }}
                    </a>
                    <a href="{{ route('Site.favorites.index') }}">
                        <img src="{{ asset('site/img/light/heart.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/heart.png') }}" data-dark="{{ asset('site/img/dark/heart.png') }}" alt=""> {{ __('Favorites') }}
                    </a>
                    <a href="{{ route('Site.addresses.index') }}">
                        <img src="{{ asset('site/img/light/location.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/location.png') }}" data-dark="{{ asset('site/img/dark/location.png') }}" alt=""> {{ __('Addresses') }}
                    </a>
                </nav>
            </div>
            <div class="col-sm-8 col-md-9">
                <section class="title_sec mb-4">
                    <h3 class="section_title"> {{ __('Add a used product') }}</h3>
                </section>
                <section class="form-horizontal form-label-right">
                    <form class="general_form" action="{{ route('Site.addUsedProductAction') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="form-group col-lg-12 mb-3">
                                <p class="label mb-1"> {{ __('Upload product images') }}</p>
                                <div id="allPhotos" class="file_label d-flex fit_height_center">
                                    <div class="add_file fit_height_center">
                                        <label for="file_input">
                                            <i class="fas fa-plus"></i>
                                        </label>
                                    </div>
                                </div>
                                <input type="file" id="file_input" name="images[]" class="form-control d-none" multiple>
                            </div>
                            <div class="form-group col-lg-6 mb-3">
                                <label for="product_name_input"> {{ __('Product Title') }}</label>
                                <input type="text" name="title_en" class="form-control" placeholder="{{ __('Enter product title in English') }}" value="{{ old('title_en') }}" id="product_name_input">
                            </div>
                            <div class="form-group col-lg-6 mb-3">
                                <label for="product_name_input_ar"> {{ __('Product Title') }}</label>
                                <input type="text" name="title_ar" class="form-control" placeholder="{{ __('Enter product title in Arabic') }}" value="{{ old('title_ar') }}" id="product_name_input_ar">
                            </div>
                            <div class="form-group col-lg-12 mb-3">
                                <label for="desc_input"> {{ __('Product Description') }}</label>
                                <textarea id="desc_input" name="description_en" class="form-control" placeholder="{{ __('Enter product description in English') }}">{{ old('description_en') }}</textarea>
                            </div>
                            <div class="form-group col-lg-12 mb-3">
                                <label for="desc_input_ar"> {{ __('Product Description') }}</label>
                                <textarea id="desc_input_ar" name="description_ar" class="form-control" placeholder="{{ __('Enter product description in Arabic') }}">{{ old('description_ar') }}</textarea>
                            </div>
                            <div class="form-group col-lg-6 mb-3">
                                <label for="category_input" class="d-block" style="margin-top : 20px!important;"> {{ __('Category') }}</label>
                                <select class="quantity-select w-100" id="category_input" name="category_id" onchange="getSubCategories(this)">
                                    <option value="" disabled selected hidden>{{ __('Select product category') }}</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->getTranslation('title',app()->getLocale()) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-lg-6 mb-3">
                                <label for="sub_category_id" class="d-block" style="margin-top : 20px!important;"> {{ __('Sub Category') }}</label>
                                <select class="quantity-select w-100" id="sub_category_id" name="sub_category_id">
                                    <option value="" disabled selected hidden>{{ __('Select product sub category') }}</option>
                                </select>
                            </div>
                            <div class="form-group col-lg-6 mb-3">
                                <label for="sale_status" class="d-block" style="margin-top : 20px!important;"> {{ __('Sale status') }}</label>
                                <select class="quantity-select w-100" id="sale_status" name="sale_status">
                                    <option value="" disabled selected hidden>{{ __('Select product sale status') }}</option>
                                    <option value="2">{{ __('Open Box') }}</option>
                                    <option value="3">{{ __('Very Good') }}</option>
                                    <option value="4">{{ __('Good') }}</option>
                                </select>
                            </div>
                            <div class="form-group col-lg-6 mb-3">
                                <label for="shipping_types" class="d-block" style="margin-top : 20px!important;"> {{ __('Shipping types') }}</label>
                                <select class="quantity-select w-100" id="shipping_types" multiple name="shipping_types[]">
                                    <option value="1">{{ __('PickUp') }}</option>
                                    <option value="2">{{ __('Store Delivery') }}</option>
                                    <option value="3">{{ __('Shipping Company') }}</option>
                                </select>
                            </div>
                            <div class="form-group col-lg-12 mb-3">
                                <label for="status_input"> {{ __('Product Price') }}</label>
                                <input type="number" name="price" placeholder="{{ __('Enter product price') }}" value="{{ old('price') }}" class="form-control" id="status_input">
                            </div>
                            <p><i class="fas fa-info-circle mx-1"></i> {{ __('Your application will be reviewed by the Tasahal administration. Once approved, the product will be displayed to users.') }}</p>
                            <div class="d-flex justify-content-center col-12 mt-5">
                                <button type="submit" class="primaryBgBtn floatBtn w-50 text-center d-block"> {{ __('Add') }}</button>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.quantity-select').select2({
                allowClear: false,
                minimumResultsForSearch: Infinity,
                dir: "{{ app()->getLocale() == 'ar' ? 'ltr' : 'rtl' }}"
            });

            $('#shipping_types').select2({
                placeholder: "{{ __('Select product shipping types') }}",
                allowClear: false,
                minimumResultsForSearch: Infinity
            }).on('select2:open select2:close', function () {
                // Apply styles after dropdown opens or closes to ensure DOM is ready
                $('.select2-selection__choice__display').css({
                    'cursor': 'default',
                    'padding-left': '10px',
                    'padding-right': '10px'
                });
            });
        });

        function updateSelect2Theme() {
            const isDark = $('body').hasClass('dark-mode') || window.matchMedia('(prefers-color-scheme: dark)').matches;

            // Apply styles to the rendered options inside Select2 dropdown
            $('.select2-container--open .select2-results__option').css({
                'color': isDark ? '#fff' : '#000',
                'background-color': isDark ? '#2c2c2c' : '#fff'
            });

            // Also style the selected tags (for multiple select)
            $('.select2-selection__choice').css({
                'background-color': isDark ? '#444' : '#e4e4e4',
                'color': isDark ? '#fff' : '#000'
            });

            $('.select2-selection--multiple').css({
                'background-color': isDark ? '#000000' : '#ffffff',
                'border' : isDark ? '1px solid #262626' : '1px solid #E5E5E5'
            });
        }
        
        // Run when dropdown opens
        $('#shipping_types').on('select2:open', function () {
            updateSelect2Theme();
        });

        // Run when an option is selected or removed
        $('#shipping_types').on('change', function () {
            updateSelect2Theme();
        });

        // Run when dropdown closes
        $('#shipping_types').on('select2:close', function () {
            updateSelect2Theme();
        });

        $(document).ready(function () {
            updateSelect2Theme();
        });
    </script>
    <script>
        const fileInput = document.getElementById('file_input');
        const allPhotos = document.getElementById('allPhotos');

        fileInput.addEventListener('change', (e) => {
            const files = Array.from(e.target.files);

            files.forEach(file => {
                const reader = new FileReader();

                reader.onload = function (event) {
                    const productContainer = document.createElement('div');
                    productContainer.classList.add('product_container');
                    productContainer.style.backgroundImage = `url(${event.target.result})`;

                    const removeBtn = document.createElement('button');
                    removeBtn.type = 'button';
                    removeBtn.classList.add('remove_btn');
                    removeBtn.innerHTML = '<i class="fas fa-xmark"></i>';

                    removeBtn.addEventListener('click', () => {
                        productContainer.remove();
                    });

                    productContainer.appendChild(removeBtn);

                    const addFileDiv = allPhotos.querySelector('.add_file');
                    allPhotos.insertBefore(productContainer, addFileDiv);
                };

                reader.readAsDataURL(file);
            });

            // fileInput.value = '';
        });

        function getSubCategories(e)
        {
            if(e.value)
            {
                var _token = $('meta[name="csrf-token"]').attr('content');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: "{{ route('Admin.getSubCategories', ':id') }}".replace(':id', e.value),
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data)
                    {
                        $('#sub_category_id').html(data);
                    }, //end success
                    error: function(xhr, ajaxOptions, thrownError) {
                        $('#sub_category_id').html('<option value="">{{ __('Select product sub category') }}</option>');
                    }
                }); //end
            }else{
                $('#sub_category_id').html('<option value="">{{ __('Select product sub category') }}</option>');
            }
        }
    </script>
@endpush