@extends('admin::index')

@section('content')
    <section class="content-header">
        <h1>
            {{ $header or trans('admin.title') }}
            <small>{{ $description or trans('admin.description') }}</small>
        </h1>

        <!-- breadcrumb start -->
    @include('partials.breadcrumb')
    <!-- breadcrumb end -->

    </section>

    <section class="content">

        @include('partials.error')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')

        {{-- MAIN CONTENT --}}
        {{ Form::open(array('route' => 'products.store', 'method' => 'POST', 'class'=>'', 'enctype'=>'multipart/form-data' )) }}
        <div class="row">
            <div class="col-md-8">
                <div class="box">
                    <div class="box-body p-20">
                        <div class="form-group">
                            <label>{{ __("Mã sản phẩm / Barcode") }}</label>
                            <div class="row">
                                <div class="col-sm-6">
                                    <input type="text" name="code" class="form-control" value="{{ old('code') }}">
                                    <div class="help-block">{{ __("Nếu để trống Mã sẽ đươc sinh tự động.") }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ __("Tên sản phẩm *") }}</label>
                            <input type="text" name="name" class="form-control" required value="{{ old('name') }}">
                        </div>

                        <div class="form-group">
                            <label>{{ __("Mô tả") }}</label>
                            <textarea name="description" class="form-control" >{{ old('description') }}</textarea>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>{{ __("Giá nhập *") }}</label>
                                    <input type="text" name="price" class="form-control" required value="{{ old('price') }}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>{{ __("Giá bán") }}</label>
                                    <input type="text" name="sale_price" class="form-control" value="{{ old('sale_price') }}">
                                    <div class="help-block">{{ __("Nếu để trống Giá nhập xem như Giá bán") }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>{{ __("Số lượng") }}</label>
                                    <input type="number" step="0.5" min="0" name="qty" class="form-control" value="{{ old('qty',1) }}">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>{{ __("Đơn vị") }}</label>
                                    {{ \Form::select('unit', $units, old('unit'), ['class'=>'form-control']) }}
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="base-unit-default" checked>
                                            <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                                            {{ __("Đơn vị bán mặc định") }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ __("Ghi chú khuyến mãi") }}</label>
                            <textarea name="promotion_note" class="form-control">{{ old('promotion_note') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="box">
                    <div class="box-body p-20">
                        <h4 class="is-uppercase m-t-20">{{ __("Giá bán theo đơn vị quy đổi") }}</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered with-bg conversion-units-table" id="conversion-units-table">
                                <thead>
                                    <tr>
                                        <th style="width: 30%">{{ __("Đơn vị") }}</th>
                                        <th style="width: 20%">{{ __("Số lượng quy đổi") }}</th>
                                        <th style="width: 25%">{{ __("Giá tính (tự động)") }}</th>
                                        <th class="text-center" style="width: 15%">{{ __("Mặc định") }}</th>
                                        <th style="width: 10%"></th>
                                    </tr>
                                </thead>
                                <tbody id="conversion-units-body"></tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-default btn-sm m-t-10" id="add-conversion-unit">
                            <i class="fa fa-plus"></i> {{ __("Thêm đơn vị") }}
                        </button>
                    </div>
                </div>

                <div class="box">
                    <div class="box-body p-20">
                        <h4 class="is-uppercase m-t-20">{{ __("Giá sỉ") }}</h4>
                        @foreach($customerTypes as $key => $type)
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>{{ __("Giá: ") }} {{ __($type) }}</label>
                                        <input type="text" name="wholesale_prices[{{ $key }}]" class="form-control">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>
            <div class="col-md-4">
                <div class="box">
                    <div class="box-body p-20">
                        <div class="form-group">
                            <label>{{ __("Dạnh mục") }}</label>
                            {{ \Form::select('category_id', $categories, old('category_id'), ['class'=>'form-control']) }}
                        </div>
                        <div class="form-group">
                            <label>{{ __("Nhãn hiệu") }}</label>
                            {{ \Form::select('brand_id', $brands, old('brand_id'), ['class'=>'form-control']) }}
                        </div>
                        <div class="form-group">
                            <label>{{ __("Ảnh sản phẩm") }}</label>
                            <input type="file" name="pictures" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>{{ __("Hạn sử dụng") }}</label>
                            <div class="input-group date" id="expiry_date_picker">
                                <input type="text" class="form-control" id="expiry_date_display" placeholder="Ngày/Tháng/Năm" autocomplete="off"
                                       value="{{ old('expiry_date') ? \Carbon\Carbon::parse(old('expiry_date'))->format('d/m/Y') : '' }}">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="hidden" name="expiry_date" id="expiry_date_hidden" value="{{ old('expiry_date') }}">
                        </div>
                        @foreach($productAttrs as $name => $val)
                            <div class="form-group">
                                <label>{{ __('app.' . $name) }}</label>
                                {{ \Form::select('attr_' . $name, array_combine($val,$val), old('attr_' . $name), ['class'=>'form-control']) }}
                            </div>
                            @endforeach
                        <div class="form-group">
                            <label>{{ __("Điểm thưởng") }}</label>
                            <input type="text" name="reward_point" class="form-control" required value="{{ old('reward_point') }}">
                        </div>
                    </div>
                </div>
                <div class="flex">
                    <a type="submit" class="btn btn-lg btn-default" href="{{ route('products.index') }}">{{ __('Huỷ bỏ') }}</a>
                    <button type="submit" class="btn btn-warning btn-lg flex-grow m-l-5"><i
                                class="fa fa-save"></i> {{ __('Thêm') }}</button>
                </div>
            </div>
        </div>
        {{ Form::close() }}

        <style>
            .conversion-units-table > tbody > tr > td,
            .conversion-units-table > thead > tr > th {
                vertical-align: middle;
            }
            .conversion-units-table > tbody > tr > td {
                padding: 8px;
            }
            .conversion-units-table .form-control {
                margin-bottom: 0;
            }
            .conversion-units-table .conv-price {
                background-color: #f9f9f9;
            }
            .conversion-units-table .conv-default {
                width: 16px;
                height: 16px;
            }
        </style>

        <link rel="stylesheet" href="{{ admin_asset('vendor/laravel-admin/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css') }}">
        <script src="{{ admin_asset('vendor/laravel-admin/moment/min/moment-with-locales.min.js') }}"></script>
        <script src="{{ admin_asset('vendor/laravel-admin/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js') }}"></script>
        <script>
            $('#expiry_date_picker').datetimepicker({
                format: 'DD/MM/YYYY',
                locale: 'vi',
                useCurrent: false,
                allowInputToggle: true
            }).on('dp.change', function (e) {
                $('#expiry_date_hidden').val(e.date ? e.date.format('YYYY-MM-DD') : '');
            });

            var allUnits = @json($allUnits);

            function buildUnitOptions(selectedId) {
                var opts = '<option value="">-- Chọn đơn vị --</option>';
                allUnits.forEach(function(u) {
                    opts += '<option value="' + u.id + '"' + (u.id == selectedId ? ' selected' : '') + '>' + u.name + '</option>';
                });
                return opts;
            }

            function recalcPrice(row) {
                var basePrice = parseFloat($('input[name="sale_price"]').val()) || 0;
                var qty = parseFloat(row.find('.conv-qty').val()) || 0;
                var computed = (qty > 0) ? (basePrice / qty).toFixed(2) : '';
                row.find('.conv-price').val(computed);
            }

            function addConversionRow(unitId, convQty, isDefault) {
                var idx = $('#conversion-units-body tr').length;
                var row = $('<tr></tr>');
                row.html(
                    '<td><select class="form-control conv-unit" name="product_units[' + idx + '][unit_id]">' + buildUnitOptions(unitId) + '</select></td>' +
                    '<td><input type="number" step="0.0001" min="0.0001" class="form-control conv-qty" name="product_units[' + idx + '][conversion_qty]" value="' + (convQty || '') + '"></td>' +
                    '<td><input type="text" class="form-control conv-price" readonly></td>' +
                    '<td class="text-center"><input type="checkbox" class="conv-default" name="product_units[' + idx + '][is_default]" value="1"' + (isDefault ? ' checked' : '') + '></td>' +
                    '<td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-conv-row"><i class="fa fa-times"></i></button></td>'
                );
                $('#conversion-units-body').append(row);
                recalcPrice(row);
            }

            $('#add-conversion-unit').on('click', function() {
                addConversionRow(null, '', false);
            });

            $(document).on('input', '.conv-qty', function() {
                recalcPrice($(this).closest('tr'));
            });

            $('input[name="sale_price"]').on('input', function() {
                $('#conversion-units-body tr').each(function() {
                    recalcPrice($(this));
                });
            });

            $(document).on('change', '.conv-default', function() {
                if ($(this).is(':checked')) {
                    $('.conv-default').not(this).prop('checked', false);
                    $('#base-unit-default').prop('checked', false);
                }
            });

            $('#base-unit-default').on('change', function() {
                if ($(this).is(':checked')) {
                    $('.conv-default').prop('checked', false);
                } else if (!$('.conv-default:checked').length) {
                    $(this).prop('checked', true);
                }
            });

            $(document).on('click', '.remove-conv-row', function() {
                var wasDefault = $(this).closest('tr').find('.conv-default').is(':checked');
                $(this).closest('tr').remove();
                if (wasDefault) {
                    $('#base-unit-default').prop('checked', true);
                }
                $('#conversion-units-body tr').each(function(i) {
                    $(this).find('[name]').each(function() {
                        $(this).attr('name', $(this).attr('name').replace(/product_units\[\d+\]/, 'product_units[' + i + ']'));
                    });
                });
            });
        </script>

    </section>
@endsection

@php

        @endphp