@extends('admin.layouts.layouts')

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

@section('content')
    <div class="page-header">
        <h3 class="page-title">Create Pesticide</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('pesticide.index') }}">Pesticide</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' => 'pesticide.store',
                    'method' => 'POST',
                    'id' => 'validate_form_add_pesticide',
                    '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 mb-1">
                        <div class="col-md-6">
                            <div class="form-group row align-items-center">
                                <label class="col-sm-3 col-form-label" for="name">
                                    Name <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control onlytxt" name="name" id="name"
                                        placeholder="Enter Pesticide Name" value="{{ old('name') }}"
                                        data-parsley-required="required"
                                        data-parsley-required-message="Please enter pesticide name"
                                        data-parsley-trigger="keyup">
                                    <span class="text-danger" id="name_error">{{ $errors->first('name') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row align-items-center">
                                <label class="col-sm-3 col-form-label" for="image">
                                    Image <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="file" class="form-control file-upload-info" name="image"
                                        id="image" data-parsley-required="true" data-parsley-trigger="change"
                                        data-parsley-filetype="png,jpg,jpeg" data-parsley-errors-container="#image_error"
                                        data-parsley-required-message="Please upload an image"
                                        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 class="col-md-6">
                            <div class="form-group row align-items-center">
                                <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 align-items-center">
                                <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 class="col-md-6">
                            <div class="form-group row align-items-center">
                                <label class="col-sm-3 col-form-label" for="buying_price">
                                    Buying Price <span class="text-danger">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control rateValidation" name="price"
                                        id="buying_price" placeholder="Enter Buying Price" value="{{ old('price') }}"
                                        data-parsley-required="required"
                                        data-parsley-required-message="Please enter buying price"
                                        data-parsley-trigger="keyup">
                                    <span class="text-danger"
                                        id="buying_price_error">{{ $errors->first('price') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row align-items-center">
                                <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 class="col-md-6">
                            <div class="form-group row align-items-center">
                                <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')) }}"
                                        data-parsley-required="required"
                                        data-parsley-required-message="Please select effective date" readonly="readonly">
                                    <span class="text-danger"
                                        id="effective_date_error">{{ $errors->first('effective_date') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-1">
                        <div class="col-md-12">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">Description<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-10">
                                    <textarea name="description" id="description" class="form-control" placeholder="Enter description" rows="3"
                                        data-parsley-required="required" maxlength="5000" data-parsley-required-message="Please enter description"
                                        data-parsley-maxlength="5000" data-parsley-maxlength-message="Description cannot be more than 5000 characters"
                                        data-parsley-trigger="keyup" 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="addPesticide">Save</button>
                    <a href="{{ route('pesticide.index') }}" class="btn btn-light">Cancel</a>
                </div>

                {{ Form::close() }}

            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script>
        var pesticideId = "";
        var pesticideStore = "{{ route('pesticide.store') }}";
        var pesticideIndexURL = "{{ route('pesticide.index') }}";
        var pesticideAjaxList = "{{ route('pesticide.ajax-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/pesticide.js') }}"></script>
@endsection