@extends('layouts.master')

@section('page_title', 'Add Product')
@section('title', 'Products Details')
@section('main_item', 'Products')
@section('sub_item', 'Add Product')

@section('content')

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="mt-0 header-title">Add Product</h4>
                <p class="text-muted mb-3"></p>
                <form id="product-create-form" class="form-parsley" method="POST" action="{{ route('products.store') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="type" value="open" readonly>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="product_name">Product Name</label>
                                <input type="text" class="form-control required_text" placeholder="Product Name"
                                    id="product_name" name="product_name" required="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="category">Category</label>
                                <select class="form-control required_combo" id="category" name="category_id" required>
                                    <option value="">Select</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="sub_category_id">Sub Category</label>
                                <select class="form-control select2" id="sub_category_id" name="sub_category_id[]"
                                    multiple="multiple">
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="unit">Unit</label>
                                <select class="form-control required_combo" id="unit" name="unit_id" required>
                                    <option value="">Select</option>
                                    @foreach ($units as $unit)
                                        <option value="{{ $unit->id }}">
                                            {{ $unit->actual_name . ' (' . $unit->short_name . ')' }}</option>
                                    @endforeach

                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="sku">SKU</label>
                                <input type="text" class="form-control" placeholder="SKU" id="sku" name="sku">
                            </div>
                        </div>
                        <div class="col-md-2 mt-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="allow_woocommerce_sync"
                                    data-parsley-multiple="groups" data-parsley-mincheck="1" name="allow_woocommerce_sync">
                                <label class="custom-control-label" for="allow_woocommerce_sync">Allow Woocomerce
                                    Sync</label>
                            </div>
                        </div>
                        <div class="col-md-2 mt-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="product_visible_sync"
                                    data-parsley-multiple="groups" data-parsley-mincheck="1" name="product_visible_sync">
                                <label class="custom-control-label" for="product_visible_sync">Woocomerce Product InVisible
                                    Sync
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2 mt-2" @if ($setting->second_woocommerece_api_setting_enable != '1') style="display: none" @endif>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="second_allow_woocommerce_sync"
                                    data-parsley-multiple="groups" data-parsley-mincheck="1"
                                    name="second_allow_woocommerce_sync">
                                <label class="custom-control-label" for="second_allow_woocommerce_sync">Second Allow
                                    Woocomerce
                                    Sync</label>
                            </div>
                        </div>
                        <div class="col-md-2 mt-2" @if ($setting->second_woocommerece_api_setting_enable != '1') style="display: none" @endif>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="second_product_visible_sync"
                                    data-parsley-multiple="groups" data-parsley-mincheck="1"
                                    name="second_product_visible_sync">
                                <label class="custom-control-label" for="second_product_visible_sync">Second Woocomerce
                                    Product InVisible
                                    Sync
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2 mt-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="custom_website_sync"
                                    data-parsley-multiple="groups" data-parsley-mincheck="1" name="custom_website_sync">
                                <label class="custom-control-label" for="custom_website_sync">Custom Website Woocomerce
                                    Sync
                                </label>
                            </div>
                        </div>
                    </div><br>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="reorder_level">Re-order Level</label>
                                <input type="number" step="1" class="form-control required_text"
                                    placeholder="Re-order Level" id="reorder_level" name="reorder_level" required=""
                                    data-parsley-type="integer">
                            </div>
                        </div>
                        <div class="col-md-4" hidden>
                            <div class="form-group">
                                <label style="font-weight: bold" for="variation">Is Combo</label>
                                <select class="form-control" id="is_combo" name="is_combo">
                                    <option value="no">No</option>
                                    <option value="yes">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4" id="product_type">
                            <div class="form-group">
                                <label style="font-weight: bold" for="variation">Product Type</label>
                                <select class="form-control" id="variation" name="variation">
                                    <option value="">Select</option>
                                    <option value="single">Single</option>
                                    <option value="variable">Variable</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4" id="attri" hidden>
                            <div class="form-group">
                                <label style="font-weight: bold">Variation Type</label>
                                <select class="form-control" id="attribute" name="attribute_id">
                                    <option value="">Select</option>
                                    @foreach ($attributes as $att)
                                        <option value="{{ $att->id }}">{{ $att->attribute_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4" id="attri_value" hidden>
                            <div class="form-group">
                                <label style="font-weight: bold">Variation Value</label>
                                <select class="form-control" id="attribute_value_id" name="attribute_value_id[]">
                                    

                                </select>
                            </div>
                        </div>
                        <div class="col-md-12" id="attr" hidden>
                            <div class="table-responsive">
                                <table id="attribute-table" class="table table-bordered mb-0 table-centered">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th>Variation</th>
                                            <th>Variation Value</th>
                                            <th>Quantity</th>
                                            <th>Unit Price @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                            <th>Selling Price @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                            <th @if ($setting->second_woocommerece_api_setting_enable != '1') style="display: none" @endif>Second
                                                Woocomerece Selling Price @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                            <th>Re-Selling Price @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="attribute-value-tbody"></tbody>
                                </table>
                                <!--end /table-->
                            </div>
                            <!--end /tableresponsive-->
                        </div>
                        <div class="col-md-4 mt-3">
                            <div class="form-group">
                                <label style="font-weight: bold">Product Image</label>
                                <input class="form-control dropify" type="file" name="image" id="image"
                                    accept="image/*">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group" style="position: relative;">
                                <label style="font-weight: bold" for="message">Description</label>
                                <textarea class="form-control" rows="5" id="message" name="descrption"></textarea>
                            </div>
                        </div>
                        <div class="col-md-4" id="single-unit-cost">
                            <div class="form-group">
                                <label style="font-weight: bold" for="unit_cost">Unit Cost @if ($setting->select_currency_type == '1')
                                        <span> (LKR) </span>
                                    @else
                                        <span> (USD) </span>
                                    @endif
                                </label>
                                <input type="number" class="form-control required_text" placeholder="Unit Cost"
                                    id="unit_cost" name="unit_cost" required="" data-parsley-type="integer"
                                    step="0.01">
                            </div>
                        </div>
                        <div class="col-md-4" id="single-selling-price">
                            <div class="form-group">
                                <label style="font-weight: bold" for="unit_price">Selling Price @if ($setting->select_currency_type == '1')
                                        <span> (LKR) </span>
                                    @else
                                        <span> (USD) </span>
                                    @endif
                                </label>
                                <input type="number" step="0.01" class="form-control required_text"
                                    placeholder="Selling Price" id="unit_price" name="unit_price" required="">
                            </div>
                        </div>
                        <div class="col-md-4" id="single-second-woocomerece-selling-price"
                            @if ($setting->second_woocommerece_api_setting_enable != '1') style="display: none" @endif>
                            <div class="form-group">
                                <label style="font-weight: bold" for="second_woocomerece_unit_price">Second Woocomerece
                                    Selling Price @if ($setting->select_currency_type == '1')
                                        <span> (LKR) </span>
                                    @else
                                        <span> (USD) </span>
                                    @endif
                                </label>
                                <input type="number" step="0.01" class="form-control" placeholder="Selling Price"
                                    id="second_woocomerece_unit_price" name="second_woocomerece_unit_price">
                            </div>
                        </div>
                        <div class="col-md-4" id="single-second-price">
                            <div class="form-group">
                                <label style="font-weight: bold" for="second_price">Re-Selling Price @if ($setting->select_currency_type == '1')
                                        
                                        <span> (LKR) </span>
                                    @else
                                        <span> (USD) </span>
                                    @endif
                                </label>
                                <input type="number" step="0.01" class="form-control" placeholder="Second Price"
                                    id="second_price" name="second_price">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold">Warranty Period Type</label>
                                <select class="form-control" id="warranty_select" name="warranty_select">
                                    <option value="">Select</option>
                                    <option value="month">Month</option>
                                    <option value="year">Year</option>
                                    <option value="day">Day</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold">Warranty Period</label>
                                <input type="number" step="0.01" class="form-control" placeholder="Warranty Period"
                                    id="warranty_period" name="warranty_period">
                            </div>
                        </div>
                    </div>
                    <div id="combo_section">
                        <div class="row justify-content-center">
                            <div class="col-md-6 ">
                                <div class="form-group">
                                    <div class="input-group">
                                        <select class="form-control select2 " multiple="multiple" name="products[]"
                                            id="product-list" data-placeholder="Select">
                                            <option label="Select product"></option>
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive dash-social">
                            <table id="datatable" class="table table-striped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Product </th>
                                        <th>Qty</th>
                                    </tr>

                                </thead>
                                <tbody id="t-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 text-right">
                            <button id="save-btn" type="submit" class="btn btn-primary px-5 py-2">Save</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('#combo_section').hide();
        })
        $('#sku').change(function() {
            let input = $('#sku').val();
            let url = "{{ route('products.validate-sku') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    sku: input
                },
                success: function(response) {

                    if (response.is_have == 'yes') {
                        $('#sku').val('');
                        Swal.fire(
                            'Error',
                            'This SKU already used',
                            'warning'
                        )
                    }
                }
            })
        });
        $("#attribute_value_id").change(function() {
            var selectedOption = $(this).val();
            $("#attribute_value_id option").prop("disabled", false);
            $("#attribute_value_id option[value='" + selectedOption + "']").prop("disabled", true);
        });
        $(document).on('change', '#is_combo', function() {
            let variation = $(this).val();
            if (variation == 'yes') {
                $('#combo_section').show();
                $('#product_type').hide();
                $('#attr').prop('hidden', false);
                $('#attri').prop('hidden', false);
                $('#attri_value').prop('hidden', false);
            } else {
                $('#combo_section').hide();
                $('#product_type').show();
                $('#attr').prop('hidden', true);
                $('#attri').prop('hidden', true);
                $('#attri_value').prop('hidden', true);

            }
        });
        $(document).on('change', '#variation', function() {
            let variation = $(this).val();
            $('#variation').val(variation);
            if (variation == 'single') {
                $('#attr').prop('hidden', true);
                $('#attri').prop('hidden', true);
                $('#single-unit-cost').prop('hidden', false);
                $('#single-selling-price').prop('hidden', false);
                $('#single-second-woocomerece-selling-price').prop('hidden', false);
                $('#single-second-price').prop('hidden', false);
                $('#unit_cost').prop('required', true);
                $('#unit_price').prop('required', true);
                $('#attri_value').prop('hidden', true);

            } else {
                $('#attr').prop('hidden', false);
                $('#attri').prop('hidden', false);
                $('#single-unit-cost').prop('hidden', true);
                $('#single-selling-price').prop('hidden', true);
                $('#single-second-woocomerece-selling-price').prop('hidden', true);
                $('#single-second-price').prop('hidden', true);
                $('#unit_cost').prop('required', false);
                $('#unit_price').prop('required', false);
                $('#attri_value').prop('hidden', false);

            }
        });
        // $(document).on('change', '#attribute_value_id', function() {
        //     var selected = $('#attribute_value_id').find(':selected').val();
        //     var rowCount = $('#attribute-value-tbody tr').length;
        //     $.ajax({
        //         method: 'GET',
        //         url: '/value/product/add/',
        //         data: {
        //             selected: selected,
        //             rowCount: rowCount,
        //         },
        //         success: function(response) {
        //             $(response).appendTo($("#attribute-value-tbody"));
        //         }
        //     })
        // })
        $(document).on('change', '#attribute_value_id', function() {
            var selected = $('#attribute_value_id').find(':selected').val();
            var rowCount = $('#attribute-value-tbody tr').length;
            axios.get('{{ url('/value/product/add/') }}/' + selected + '/' + rowCount)
                .then(function(response) {
                    $(response.data).appendTo($("#attribute-value-tbody"));
                })
                .catch(function(error) {
                    console.log(error);
                })
        })
        $(document).on('click', '#remove-value', function() {
            console.log('Button clicked');
            $(this).closest('tr').remove();
        });

        $(document).on('click', "#attribute-value-tbody input[type='number']", function() {
            $(this).select();
        });
        $(document).on('click', '#save-btn', function(e) {
            e.preventDefault();
            let product_type = $('#variation').val();
            if (product_type != '' && product_type == 'variable') {
                let row_count = $('#attribute-table tbody tr').length;
                if (row_count == 0) {
                    $.toast({
                        heading: 'Error',
                        text: "No Variations in table.!",
                        position: 'top-right',
                        bgColor: '#f1646c',
                        icon: 'error',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                    return false;
                }
            }
            let item_flag = false;
            $('#attribute-table tbody tr').each(function() {
                let qty = $(this).find('td #qty').val();
                let unit_cost = $(this).find('td #unit_cost').val();
                let unit_price = $(this).find('td #unit_price').val();
                if (parseFloat(unit_cost) == 0 || parseFloat(unit_price) == 0) {
                    item_flag = true;
                }
            });
            if (item_flag && product_type == 'variable') {
                $.toast({
                    heading: 'Error',
                    text: "Please add values to variations, cannot be empty or 0 values.!",
                    position: 'top-right',
                    bgColor: '#f1646c',
                    icon: 'error',
                    showHideTransition: 'fade',
                    loaderBg: '#ecf0f1'
                });
                return false;
            }
            var textValid = true;
            var comboValid = true;

            $('.required_text').each(function() {
                if ($(this).val() === '') {
                    textValid = false;
                    return;
                }
            });

            $('.required_combo').each(function() {
                if ($(this).val() === '') {
                    comboValid = false;
                    return;
                }
            });

            if (textValid == true && comboValid == true) {}
            $('#product-create-form').submit();
        });
        $('#product-list').on('change', function() {
            let id = $('#product-list').val();
            $.ajax({
                method: 'POST',
                url: "{{ url('/product/combo/add') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'id': id,
                },
                success: function(response) {
                    $('#datatable tbody').empty().html(response);
                }
            })
        });

        $(document).on('change', '#category', function() {
            let id = $(this).val();
            if (id !== '') {
                let url = "{{ route('categories.get_sub_categories', ':id') }}";
                url = url.replace(':id', id);
                $.ajax({
                    method: 'GET',
                    url: url,
                    success: function(response) {
                        $('#sub_category_id').empty().html(response);
                    },
                    error: function(response) {
                        $('#sub_category_id').empty();
                    }
                });
            } else {
                $('#sub_category_id').empty();
            }
        });
        $(document).on('change', '#attribute', function() {
            let id = $(this).val();
            if (id !== '') {
                let url = "{{ route('categories.get_value', ':id') }}";
                url = url.replace(':id', id);
                $.ajax({
                    method: 'GET',
                    url: url,
                    success: function(response) {
                        $('#attribute_value_id').empty().html(response);
                    },
                    error: function(response) {
                        $('#attribute_value_id').empty();
                    }
                });
            } else {
                $('#attribute_value_id').empty();
            }
        });
    </script>
@endsection