@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} {{ trans('cruds.product.singular') }}
    </div>
    <div class="card-body">
        <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="#">{{ trans('cruds.product.fields.product_type') }}</label>
                <select name="product_type" class="form-control select2" id="product_type">
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                    <option value="1" {{ old('product_type') == 1 ? 'selected' : '' }}>For Auction</option>
                    <option value="2" {{ old('product_type') == 2 ? 'selected' : '' }}>For Sell</option>
                </select>
            </div>
            <div class="form-group">
                <label for="cat_id">{{ trans('cruds.product.fields.category') }}</label>
                <select name="cat_id" class="form-control select2" id="cat_id">
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                    @foreach ($category as $cat)
                        <option value="{{ $cat->id }}" data-bid_increment_gap="{{ $cat->bid_increment_gap }}" {{ old('cat_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="name">{{ trans('cruds.product.fields.name') }} (In English)</label>
                <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
            </div>
            <div class="form-group">
                <label for="name_ar">{{ trans('cruds.product.fields.name') }} (In Arabic)</label>
                <input type="text" name="name_ar" class="form-control" value="{{ old('name_ar') }}" required>
            </div>
            <div class="form-group">
                <label for="sku">{{ trans('cruds.product.fields.sku') }}</label>
                <input type="text" name="sku" class="form-control" value="{{ generateSKU() }}" readonly>
            </div>
            <div class="form-group">
                <label for="purchase_price">{{ trans('cruds.product.fields.purchase_price') }}</label>
                <input type="number" step="0.01" name="purchase_price" class="form-control" value="{{ old('purchase_price') }}">
            </div>
            <div class="form-group">
                <label for="price">{{ trans('cruds.product.fields.price') }}</label>
                <input type="number" step="0.01" name="price" class="form-control" value="{{ old('price') }}" required>
            </div>
            <div class="form-group product_quantity_div">
                <label for="product_quantity">{{ trans('cruds.product.fields.product_quantity') }}</label>
                <input type="number" name="product_quantity" class="form-control" value="{{ old('product_quantity') }}">
            </div>
            <div class="form-group">
                <label for="user_id">{{ trans('cruds.product.fields.user_id') }}</label>
                <select name="user_id" id="seller_id" class="form-control select2">
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>{{ $user->first_name }} {{ $user->last_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="commission_percentage">{{ trans('cruds.product.fields.commission_percentage') }}</label>
                <input type="number" name="commission_percentage" id="seller_commission_percentage" class="form-control" value="{{ old('commission_percentage') }}" readonly>
            </div>
            <div class="form-group">
                <label for="description">{{ trans('cruds.product.fields.description') }} (In English)</label>
                <textarea name="description" class="form-control">{{ old('description') }}</textarea>
            </div>
            <div class="form-group">
                <label for="description_ar">{{ trans('cruds.product.fields.description') }} (In Arabic)</label>
                <textarea name="description_ar" class="form-control">{{ old('description_ar') }}</textarea>
            </div>
            <div class="form-group live_date_div">
                <label for="live_date">{{ trans('cruds.product.fields.live_date') }}</label>
                <input type="text" id="datetimepicker5" name="live_date" class="form-control datetimepicker-input live_date" data-toggle="datetimepicker" data-target="#datetimepicker5" value="{{ old('live_date') }}">
            </div>
            <div class="form-group duration_day_div">
                <label for="duration_day">{{ trans('cruds.product.fields.duration_day') }}</label>
                <select name="duration_day" class="form-control duration_day">
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                    @for ($i = 1; $i <= 31; $i++)
                        <option value="{{ $i }}" {{ old('duration_day') == $i ? 'selected' : '' }}>{{ $i }} {{ trans('cruds.product.fields.duration_day') }}</option>
                    @endfor
                </select>
            </div>
            <input type="hidden" id="finish_date" name="finish_date" value="{{ old('finish_date') }}">
            <div class="form-group">
                <label for="status">{{ trans('cruds.product.fields.status') }}</label>
                <select name="status" class="form-control">
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                    <option value="Draft" {{ old('status') == "Draft" ? 'selected' : '' }}>{{ trans('cruds.product.status.draft') }}</option>
                    <option value="Pending" {{ old('status') == "Pending" ? 'selected' : '' }}>{{ trans('cruds.product.status.pending') }}</option>
                    <option value="Approved" {{ old('status') == "Approved" ? 'selected' : '' }}>{{ trans('cruds.product.status.approved') }}</option>
                    <option value="Rejected" {{ old('status') == "Rejected" ? 'selected' : '' }}>{{ trans('cruds.product.status.rejected') }}</option>
                </select>
            </div>
            <div class="form-group">
                <label for="condition">{{ trans('cruds.product.fields.condition') }}</label>
                <select name="condition" class="form-control">
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                    <option value="1" {{ old('condition') == "1" ? 'selected' : '' }}>{{ trans('cruds.product.condition.new') }}</option>
                    <option value="2" {{ old('condition') == "2" ? 'selected' : '' }}>{{ trans('cruds.product.condition.used') }}</option>
                </select>
            </div>
            <div class="form-group">
                <label for="cover_image">{{ trans('cruds.product.fields.cover_image') }}</label>
                <input type="file" id="cover_image" name="cover_image" class="form-control" onchange="previewCoverImage(event)">
                <img id="coverPreview" src="#" class="mt-2" width="100" style="display: none;">
            </div>
            <div class="form-group">
                <label for="images">{{ trans('cruds.product.fields.images') }}</label>
                <input type="file" id="images" name="images[]" class="form-control" multiple onchange="previewMultipleImages(event)">
                <div id="imagePreviewContainer" class="row"></div>
            </div>
            <div class="form-group bidding_incremented_price_div">
                <label for="bidding_incremented_price">{{ trans('cruds.product.fields.bidding_incremented_price') }}</label>
                <select name="bidding_incremented_price" id="bidding_incremented_price" class="form-control select2">
                    <option value="">{{ trans('global.pleaseSelect') }}</option>
                </select>
            </div>

            <div class="form-group" id="fieldWrapper">
                <label for="documents">{{ trans('cruds.product.fields.documents') }}</label>
                @foreach(old('document_name', ['']) as $index => $docName)
                    <div class="form-group field-group row">
                        <div class="col-md-5">
                            <input type="text" name="document_name[]" class="form-control" placeholder="Document Name" value="{{ $docName }}">
                        </div>
                        <div class="col-md-5">
                            <input type="file" class="form-control" name="documents[]">
                        </div>
                        <div class="col-md-2">
                            @if ($loop->last)
                                <button type="button" class="btn btn-success addDocument">
                                    <i class="fa-fw fas fa-plus"></i>
                                </button>
                            @else
                                <button type="button" class="btn btn-danger remove-btn">
                                    <i class="fa-fw fas fa-times"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="form-group" id="shippingDetailsFieldWrapper">
                <label for="shipping_details">{{ trans('cruds.product.fields.shipping_details') }}</label>
                @foreach(old('country', ['']) as $index => $country)
                    <div class="form-group field-group row">
                        <div class="col-md-4">
                            <label for="country">{{ trans('cruds.product.fields.country') }}</label>
                            <select name="country[]" class="form-control country">
                                <option value="">{{ trans('global.pleaseSelect') }}</option>
                                @foreach ($country_details as $vlu)
                                    <option value="{{ $vlu->id }}" {{ $country == $vlu->id ? 'selected' : '' }}>{{ $vlu->country_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="day">{{ trans('cruds.product.fields.day') }}</label>
                            <select name="day[]" class="form-control day">
                                <option value="">{{ trans('global.pleaseSelect') }}</option>
                                @for ($i = 1; $i <= 30; $i++)
                                    <option value="{{ $i }}" {{ old('day') == $i ? 'selected' : '' }}>{{ $i }} {{ trans('cruds.product.fields.day') }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="day">{{ trans('cruds.product.fields.fee') }}</label>
                            <input type="text" name="fee[]" class="form-control" placeholder="Fee" value="{{ old('fee') }}">
                        </div>
                        <div class="col-md-2">
                            @if ($loop->last)
                                <button type="button" class="btn btn-success mt-4 addShippingDetails">
                                    <i class="fa-fw fas fa-plus"></i>
                                </button>
                            @else
                                <button type="button" class="btn btn-danger mt-4 remove-btn-shipping-details">
                                    <i class="fa-fw fas fa-times"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
            <button type="submit" class="btn btn-success">{{ trans('global.save') }}</button>
        </form>
    </div>
</div>

@endsection

@section('scripts')

<script>
    $(document).ready(function() {
        $('#datetimepicker5').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            minDate: moment(),
            icons: {
                time: 'fa fa-clock',
                date: 'fa fa-calendar',
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down',
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-sun',
                clear: 'fa fa-trash',
                close: 'fa fa-times'
            },
            showClear: true,
            showClose: true,
            useCurrent: true,
            sideBySide: true
        });

        $('.live_date, .duration_day').on('change', function() {
            let liveDate = $('.live_date').val();
            let duration = parseInt($('.duration_day').val());

            if (liveDate && duration) {
                let finishDate = moment(liveDate, 'YYYY-MM-DD HH:mm').add(duration, 'days').format('YYYY-MM-DD HH:mm');
                console.log(finishDate);
                $('#finish_date').val(finishDate);
            } else {
                $('#finish_date').val('');
            }
        });

        $('#seller_id').on('change', function () {
            var sellerId = $(this).val();

            if (sellerId) {
                $.ajax({
                    url: '/admin/products/get-seller-commission/' + sellerId,
                    type: 'GET',
                    success: function (data) {
                        $('#seller_commission_percentage').val(data.seller_commission_percentage);
                    }
                });
            }
        });

        $('#cat_id').on('change', function () {
            let gap = $(this).find(':selected').data('bid_increment_gap');

            if (!gap || gap <= 0) {
                $('#bidding_incremented_price').html('<option value="">{{ trans("global.pleaseSelect") }}</option>');
                return;
            }

            let options = '<option value="">{{ trans("global.pleaseSelect") }}</option>';
            for (let j = gap; j <= 1000; j += gap) {
                options += `<option value="${j}">${j}</option>`;
            }

            $('#bidding_incremented_price').html(options);
        });

        function getNewField() {
            return `
            <div class="form-group field-group row">
                <div class="col-md-5">
                    <input type="text" name="document_name[]" class="form-control" placeholder="Document Name">
                </div>
                <div class="col-md-5">
                    <input type="file" class="form-control" name="documents[]">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger remove-btn"><i class="fa-fw fas fa-times"></i></button>
                    <button type="button" class="btn btn-success addDocument"><i class="fa-fw fas fa-plus"></i></button>
                </div>
            </div>`;
        }

        // Add new field
        $(document).on('click', '.addDocument', function () {
            // Remove all existing add buttons
            $('.addDocument').remove();

            // Append new field
            $('#fieldWrapper').append(getNewField());
        });

        // Remove field
        $(document).on('click', '.remove-btn', function () {
            $(this).closest('.field-group').remove();

            // Ensure only the last row has the add button
            $('.addDocument').remove();
            $('#fieldWrapper .field-group:last .col-md-2').append(
                `<button type="button" class="btn btn-success addDocument"><i class="fa-fw fas fa-plus"></i></button>`
            );
        });

        function getNewShippingDetailsField() {
            return `
            <div class="form-group field-group row">
                <div class="col-md-4">
                    <label for="country">{{ trans('cruds.product.fields.country') }}</label>
                    <select name="country[]" class="form-control country">
                        <option value="">{{ trans('global.pleaseSelect') }}</option>
                        @foreach ($country_details as $vlu)
                            <option value="{{ $vlu->id }}" {{ $country == $vlu->id ? 'selected' : '' }}>{{ $vlu->country_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="day">{{ trans('cruds.product.fields.day') }}</label>
                    <select name="day[]" class="form-control day">
                        <option value="">{{ trans('global.pleaseSelect') }}</option>
                        @for ($i = 1; $i <= 30; $i++)
                            <option value="{{ $i }}" {{ old('day') == $i ? 'selected' : '' }}>{{ $i }} {{ trans('cruds.product.fields.day') }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="day">{{ trans('cruds.product.fields.fee') }}123</label>
                    <input type="text" name="fee[]" class="form-control" placeholder="Fee" value="{{ old('fee') }}">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger mt-4 remove-btn-shipping-details"><i class="fa-fw fas fa-times"></i></button>
                    <button type="button" class="btn btn-success mt-4 addShippingDetails"><i class="fa-fw fas fa-plus"></i></button>
                </div>
            </div>`;
        }

        // Add new Shipping Details
        $(document).on('click', '.addShippingDetails', function () {
            // Remove all existing add buttons
            $('.addShippingDetails').remove();

            // Append new field
            $('#shippingDetailsFieldWrapper').append(getNewShippingDetailsField());
        });

        // Remove field Shipping Details
        $(document).on('click', '.remove-btn-shipping-details', function () {
            $(this).closest('.field-group').remove();

            // Ensure only the last row has the add button
            $('.addShippingDetails').remove();

            $('#shippingDetailsFieldWrapper .field-group:last .col-md-2:last').append(
                `<button type="button" class="btn btn-success mt-4 addShippingDetails"><i class="fa-fw fas fa-plus"></i></button>`
            );
        });

        toggleAuctionFields();

        $('#product_type').on('change', function() {
            toggleAuctionFields();
        });
    });

    function previewCoverImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('coverPreview');
            output.src = reader.result;
            output.style.display = 'block';
        };

        reader.readAsDataURL(event.target.files[0]);
    }

    function previewMultipleImages(event) {
        var previewContainer = document.getElementById('imagePreviewContainer');
        previewContainer.innerHTML = '';

        for (let i = 0; i < event.target.files.length; i++) {
            let file = event.target.files[i];
            let reader = new FileReader();

            reader.onload = function(e) {
                let div = document.createElement("div");
                div.setAttribute("class", "col-md-3 mt-3");

                let img = document.createElement("img");
                img.setAttribute("src", e.target.result);
                img.setAttribute("class", "preview-image img-thumbnail");
                img.setAttribute("width", "100");

                div.appendChild(img);
                previewContainer.appendChild(div);
            };

            reader.readAsDataURL(file);
        }
    }

    function toggleAuctionFields() {
        var productType = $('#product_type').val();

        if (productType == 1) {
            $('.live_date_div').show();
            $('.duration_day_div').show();
            $('.bidding_incremented_price_div').show();

            $('.product_quantity_div').hide();
        } else {
            $('.live_date_div').hide();
            $('.duration_day_div').hide();
            $('.bidding_incremented_price_div').hide();

            $('.product_quantity_div').show();
        }
    }
</script>
@endsection