@extends('companyuser::layouts.master')
@section('title',__($edit? 'Edit' : 'New').' '.ucfirst(__(old_input($product, 'type'))))
@section('extra_styles')
<link href="{{ asset('assets/css/plugins/imageUpload/style.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css"
      href="{{asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/pickadate/pickadate.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/pickers/daterange/daterange.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/frames.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/person-details.css') }}">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<script src="{{ asset('/js/app.js') }}" defer></script>
@if(!$edit)
    <link href="{{ asset('assets/css/custom/forms/select2.min.css') }}" rel="stylesheet">
    @if(LaravelLocalization::getCurrentLocale() === 'ar')
        <style>
            /*  needed for select2 */
            .select2-container .select2-selection--single .select2-selection__rendered {
                display: block;
                padding-right: 8px;
                padding-left: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: right;
            }
            .select2-results__options,
            .select2-search__field{
                text-align: right;

            }
            /*  needed for select2 */
        </style>
    @endif
    <style>
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #3F587E;
        }
        .headBtns button.save-font {
        font-size: 16px;
        font-weight: 100;
        font-family: 'Arbfont', 'Changa', sans-serif;
    }
    </style>
@endif
@endsection
@section('extra_scripts')
    <script>
        gtag('event', 'web_products_and_services_products_create_or_edit');
        console.log('web_products_and_services_products_create_or_edit event');
    </script>
    <script src="{{ asset('assets/js/vendors/js/forms/select/select2.min.js') }}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.date.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.time.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/legacy.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>
    <script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/picker-date-time.js')}}" defer></script>
    <script src="{{ asset('assets/js/custom/redirectconfirmation.js') }}" defer></script>
    <script src="{{asset('js/validation/limit-digits-in-decimal-numbers.js')}}" defer></script>
    <script src="{{url('assets/js/general/zatca-validations.js')}}"></script>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            (function($) {
                $('.check-zatca-validation').on('keypress', function (e) {
                  checkZatcaValidation(e);
                });
                $('.dev-product-submit').click(function(){
                    //take value from clicked btn
                    $('#dev-action-holder').val($(this).attr('dev-value'))
                    //submit form
                    $('#productForm').submit();
                    //disabled form
                    $(this).prop('disabled',true);
                });

                @isset($product_recipes)
                    var product_recipes = null;
                    const deleted_products = product_recipes.filter(item => item.product_deleted_at != null);
                    if(deleted_products.length){
                        $('#deleted_products').empty();
                        deleted_products.forEach(function (product){
                            $('#deleted_products').append('<li style="list-style: circle;">' + product['product_name'] + ' (' + product['product_identifier'] + ')</li>')

                        })
                        $('#deletedProductsModal').modal('show');
                    }
                @endisset
            })(jQuery);
        });
        function checkZatcaValidation(e) {
            window.parent.preventAndSymbol(e, {{$companyInfo->zatca_comply}});
        }
        function cancelAddEditProduct(route) {
            if ('{{old_input($product,'type')}}' === '{{\Modules\Products\Enums\ProductTypeEnum::RECIPE}}') {
                $('#cancelAddEditModal').modal('show');
            } else {
                window.location = route;
            }
        }
        function confirmCancelAddEditProduct(route, btn) {
            $(btn).attr('disabled', true);
            window.location = route;
        }

        window.productType = "{{ old_input($product, 'type') }}";
        window.addEventListener('DOMContentLoaded', function() {
            if (window.productType !== '{{ \Modules\Products\Models\Product::TYPE_RECIPE }}') {
                return; // Exit early if product is not a recipe
            }
            let $warehousesSelect = $("#warehouses_select");
            let warehouseId = $warehousesSelect.val();
            fetchFilteredProducts(warehouseId);

            // Listen for both native change and select2 select events
            $warehousesSelect.on('change select2:select', function() {
                let warehouseId = $(this).val();
                if (warehouseId) {
                    if (window.vueComponent) {
                        window.vueComponent.resetForm();
                    }
                    fetchFilteredProducts(warehouseId);
                } else {
                    updateComponentProducts({!! isset($neededRecipeProducts) ? json_encode($neededRecipeProducts) : 'null' !!});
                }
            });

            function fetchFilteredProducts(warehouseId) {
                let baseUrl = window.location.origin + "/ar/products/products/list-products";
                let url = `${baseUrl}?warehouse_id=${warehouseId}`;
                fetch(url, {
                        method: "GET",
                        headers: {
                            "X-Requested-With": "XMLHttpRequest",
                            Accept: "application/json",
                            Authorization: `Bearer ${getAuthToken()}`
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        updateComponentProducts(data);
                    })
                    .catch(error => console.error("Error fetching products:", error));
            }
        });
    </script>
    @if(!$edit)
        <script>
            window.addEventListener('DOMContentLoaded', function() {
                (function($) {
                    // needed for select2 unit and categories
                    $(".select2-tag").select2({
                        tags: true
                    });
                    // needed for select2 unit and categories
                })(jQuery);
            });
        </script>
    @endif
<script src="{{ asset('assets/js/plugins/imageUpload/script.js') }}" defer></script>
<script src="{{ asset('assets/js/general/checkboxdisable.js') }}" defer></script>
@endsection
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                @can('products.products.view')
                    <li class="breadcrumb-item"><a href="{{url('/products/products/')}}" class="redirect-item">{{ __('products::product.Products') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{url('/products/products/')}}" class="redirect-item">{{ __('products::product.Product List') }}</a></li>
                @endcan
                @can('products.products.create')
                    <li class="breadcrumb-item active"><a href="#">{{ __($edit? 'Edit' : 'New') }} {{ ucfirst(__(old_input($product, 'type'))) }}</a></li>
                @endcan
            </ol>
        </div>
    </div>
@endsection
@section('content')
<section id="basic-form-layouts productSection" class="form-border add-form-section filter-section-collapse">
    <div class="container-fluid">
        @if($edit)
            @can('products.products.edit')
                <div class="col-xs-6 headTitle">
                    <h3 class="d-inline">{{ __( 'Edit' ) }} {{ ucfirst(__(old_input($product, 'type'))) }}</h3>
                </div>
            @endcan
            @else
            @can('products.products.create')
                <div class="col-xs-6 headTitle">
                    <h3 class="d-inline">{{ __( 'New') }} {{ ucfirst(__(old_input($product, 'type'))) }}</h3>
                </div>
            @endcan
        @endif
        <div class="match-height">
            <div class="card mb-0">
                <div class="mt-2">
                    @include('products::Product.form')
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="cancelAddEditModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="favoritesModalLabel">@lang('Confirm')</h4>
                </div>
                <div class="modal-body">
                    <p> @lang('products::product.cancel edit recipe confirmation')</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('No')</button>
                    <span class="pull-right">
                        <button onclick="confirmCancelAddEditProduct('{{url('/products/products')}}', this)" class="btn btn-primary">@lang('Yes')</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    @include('sales::includes.redirect_popup')
    @isset($product_recipes)
        <div class="modal fade" id="deletedProductsModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="favoritesModalLabel">@lang('products::product.the following products are deleted')</h4>
                    </div>
                    <div class="modal-body">
                        <ul id="deleted_products" style="@if(app()->getLocale() == 'ar') padding-right: 15px; @else padding-left: 15px; @endif"></ul>
                    </div>
                    <div class="modal-footer">
                        <span class="@if(app()->getLocale() == 'ar') pull-left @else text-right @endif">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">@lang('Ok')</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    @endisset
</section>
@endsection