@extends('admin.layouts.layouts')

@section('title', 'Create | Product')

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Create Product
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('product.index') }}">Products</a></li>
                <li class="breadcrumb-item active" aria-current="page">Create</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">

                {!! Form::open([
                    'route' => 'product.store',
                    'method' => 'POST',
                    'id' => 'validate_form_add_product',
                    'class' => 'forms-sample',
                    'enctype' => 'multipart/form-data',
                ]) !!}
                @csrf
                <div class="card-body">
                    <input type="hidden" name="submit_type" id="submit_type" value="add">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">
                                    Product Type <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <select name="product_type_id" class="js-example-basic-single w-100"
                                        data-parsley-required="required"
                                        data-parsley-required-message="Please select product type"
                                        data-parsley-errors-container='#product_type_error'>
                                        <option value="" selected disabled>Select Product Type</option>
                                        @if (isset($productType))
                                            @foreach ($productType as $type)
                                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <span class="text-danger"
                                        id="product_type_error">{{ $errors->first('product_type_id') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">
                                    Name <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control noStripTags" name="name" id="name"
                                        placeholder="Enter Product Name" value="{{ old('name') }}" data-parsley-required
                                        data-parsley-required-message="Please enter product name" maxlength="100"
                                        data-parsley-trigger='keyup' data-parsley-errors-container='#name_error'>
                                    <span class="text-danger" id="name_error">{{ $errors->first('name') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" for="size_value">
                                    Size <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <input class="form-control rateValidation" placeholder="Enter Size Value"
                                            style="width: 60%;" name="size_value" type="text" id="size_value"
                                            data-parsley-required="required"
                                            data-parsley-required-message="Please enter size value"
                                            data-parsley-errors-container="#size_value_error" data-parsley-trigger="keyup"
                                            value="{{ old('size_value') }}">
                                        <select class="form-control {{ $errors->has('product_size') ? 'is-invalid' : '' }}"
                                            name="product_size" style="width: 40%;">
                                            <option value="" selected disabled>Select Size</option>
                                            @foreach ($sizes as $key => $size)
                                                <option value="{{ $key }}"
                                                    {{ old('product_size') == $key ? 'selected' : '' }}>
                                                    {{ $size }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="text-danger" id="size_value_error"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" for="opening_stock">
                                    Opening Stock <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control rateValidation" name="opening_stock"
                                        id="opening_stock" placeholder="Enter Opening Stock"
                                        value="{{ old('opening_stock') }}" data-parsley-required="required"
                                        data-parsley-required-message="Please enter opening stock"
                                        data-parsley-trigger="keyup">
                                    <span class="text-danger"
                                        id="opening_stock_error">{{ $errors->first('opening_stock') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">
                                    Buying Price <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control rate-input rateValidation" name="rate"
                                        id="buying_price" placeholder="Enter Buying Price" value="{{ old('rate') }}"
                                        data-parsley-required="required"
                                        data-parsley-required-message="Please enter buying price"
                                        data-parsley-trigger='keyup' data-parsley-errors-container='#buying_price_error'>
                                    <span class="text-danger" id="buying_price_error">{{ $errors->first('rate') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" for="selling_price">
                                    Selling Price <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control rateValidation" name="selling_price"
                                        id="selling_price" placeholder="Enter Selling Price"
                                        value="{{ old('selling_price') }}" data-parsley-required="required"
                                        data-parsley-required-message="Please enter selling price"
                                        data-parsley-trigger="keyup">
                                    <span class="text-danger"
                                        id="selling_price_error">{{ $errors->first('selling_price') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">
                                    Effective Date <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="date" class="form-control" name="effective_date" id="effective_date"
                                        value="{{ old('effective_date', date('Y-m-d')) }}" min="{{ date('Y-m-d') }}"
                                        data-parsley-required data-parsley-required-message="Please select effective date"
                                        data-parsley-min-date="{{ date('Y-m-d') }}"
                                        data-parsley-min-date-message="Effective date must be today or in the future"
                                        data-parsley-trigger='change'
                                        data-parsley-errors-container='#effective_date_error' readonly="readonly">
                                    <span class="text-danger"
                                        id="effective_date_error">{{ $errors->first('effective_date') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">
                                    Image <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="file" class="form-control file-upload-info"
                                        placeholder="Upload Image" name="image" id="image"
                                        data-parsley-required="true"
                                        data-parsley-required-message="Please select an image"
                                        data-parsley-trigger="change" data-parsley-filetype="png,jpg,jpeg"
                                        data-parsley-errors-container="#image_error"
                                        data-parsley-filetype-message="Only .png, .jpg and .jpeg files are allowed." />
                                    <span class="text-danger" id="image_error">{{ $errors->first('image') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">Description</label>
                                <div class="col-sm-10">
                                    <textarea name="description" id="description" class="form-control form-control-lg form-control-solid validate-space"
                                        placeholder="Description" data-parsley-maxlength="5000" maxlength="5000" data-parsley-trigger="keyup"
                                        data-parsley-maxlength-message="Description cannot be more than 5000 characters" rows="4"
                                        data-parsley-errors-container='#description_error'>{{ old('description') }}</textarea>
                                    <span class="text-danger"
                                        id="description_error">{{ $errors->first('description') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary mr-2" id="addProduct">Save</button>
                    <a href="{{ route('product.index') }}" class="btn btn-light">Cancel</a>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script>
        var productId = "";
        var productStore = "{{ route('product.store') }}";
        var productIndexURL = "{{ route('product.index') }}";
        var productAjaxList = "{{ route('product-list') }}";

        // Ck Editor Code
        CKEDITOR.replace("description");

        CKEDITOR.on("instanceReady", function() {
            $.each(CKEDITOR.instances, function(instance) {
                CKEDITOR.instances[instance].on("change", function(e) {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                });
            });
        });

        $(document).ready(function() {
            // Validate size value and select
            $('#size_value').on('input', function() {
                var sizeValue = $(this).val().trim();
                var $select = $('select[name="product_size"]');
                if (sizeValue !== '') {
                    $select.attr('data-parsley-required', 'true')
                        .attr('data-parsley-required-message', 'Please select size')
                        .attr('data-parsley-errors-container', '#size_value_error');
                } else {
                    $select.removeAttr('data-parsley-required')
                        .removeAttr('data-parsley-required-message')
                        .removeAttr('data-parsley-errors-container');
                    $select.parsley().reset();
                    $select.parsley().validate();
                }
            });

            $('#size_value').trigger('input');
        });
    </script>
    <script src="{{ asset('assets/js/admin/product.js') }}"></script>
@endsection