@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-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 class="form-group">
                                <label class="required" style="font-weight: bold" for="activate_code">business
                                    Location</label>
                                <select class="form-control select2" id="location_id" name="location_id[]"
                                    multiple="multiple" required>
                                    @if (Auth::user()->role_id == '1')
                                        @foreach ($users_access_location as $business_location)
                                            @if ($business_location->is_active == '1')
                                                <option value="{{ $business_location->id }}">
                                                    {{ $business_location->name }}
                                                </option>
                                            @else
                                            @endif
                                        @endforeach
                                    @else
                                        @foreach ($users_access_location as $business_location)
                                            @if ($business_location->is_active == '1')
                                                <option value="{{ $business_location->business_location_id }}">
                                                    {{ $business_location->name }}
                                                </option>
                                            @else
                                            @endif
                                        @endforeach
                                    @endif

                                </select>
                            </div>
                        </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-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</th>
                                            <th>Selling Price</th>
                                            <th>Second Price</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</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</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-price">
                            <div class="form-group">
                                <label style="font-weight: bold" for="second_price">Second Price</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>
                                    <!--end 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>
            <!--end card-body-->
        </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'
                        )
                    }
                }
            })
        });

        $(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);
            } else {
                $('#combo_section').hide();
                $('#product_type').show();
                $('#attr').prop('hidden', true);
                $('#attri').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-price').prop('hidden', false);
                $('#unit_cost').prop('required', true);
                $('#unit_price').prop('required', true);
            } else {
                $('#attr').prop('hidden', false);
                $('#attri').prop('hidden', false);
                $('#single-unit-cost').prop('hidden', true);
                $('#single-selling-price').prop('hidden', true);
                $('#single-second-price').prop('hidden', true);
                $('#unit_cost').prop('required', false);
                $('#unit_price').prop('required', false);
            }
        });
        $(document).on('change', '#attribute', function() {
            let id = $(this).val();
            if (id == '') {
                $('#attribute-value-tbody').empty();
                return false;
            }
            let url = "{{ route('products.get_attribute_values', ':id') }}";
            url = url.replace(':id', id);
            $.ajax({
                method: 'GET',
                url: url,
                success: function(result) {
                    $('#attribute-value-tbody').empty().html(result);
                },
            });
        });
        $(document).on('click', '#remove-value', function() {
            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;
            }
            //disable save button when form is not error
            var textValid = true;
            var comboValid = true;

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

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

            if (textValid == true && comboValid == true) {
                // $(this).prop("disabled", true);
            }
            $('#product-create-form').submit();
        });


        $('#product-list').on('change', function() {
            let id = $('#product-list').val();
            // let ref_no = $('#ref_no').val();
            $.ajax({
                method: 'POST',
                url: "{{ url('/product/combo/add') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'id': id,
                    // 'ref_no':ref_no,

                },
                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('click', 'button#apply-all-qty', function() {
            var val = $('#qty').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each(function() {
                element = $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button#apply-all-cost', function() {
            var val = $('#unit_cost').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each(function() {
                element = $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button#apply-all-price', function() {
            var val = $('#unit_price').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each(function() {
                element = $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
        $(document).on('click', 'button#apply-all-second', function() {
            var val = $('#second_price').val();
            var target_class = $(this).data('target-class');
            $(this).closest('tbody').find('tr').each(function() {
                element = $(this).find(target_class);
                element.val(val);
                element.change();
            });
        });
    </script>
@endsection