@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title', 'Product Form')
{{-- vendor style --}}
@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2-materialize.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/file-upload/image-uploader.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/dropify/css/dropify.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.css">
@endsection
{{-- page style --}}
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/form-select2.css') }}">

    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

    </style>
@endsection

{{-- page content --}}
@section('content')
    <div class="section">
        <div class="row">
            <div class="col s12">
                <div id="html-validations" class="card card-tabs">
                    <div class="card-content">
                        <div class="card-title">
                            <div class="row">
                                <div class="col s12 m6 l10">
                                    <h4 class="card-title">Product Create</h4>
                                </div>
                                <div class="col s12 m6 l2">
                                </div>
                            </div>
                        </div>
                        {{-- {{dd($errors)}} --}}
                        <div id="html-view-validations">
                            <form action="{{ route('admin.products.store') }}" class="formValidate0" id="formValidate0"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                <table class="striped">
                                    <tbody>
                                        <tr>
                                            <th class="right-align padr30px">Model *</th>
                                            <td>
                                                <div class="input-field">
                                                    <input class="validate" id="model" type="text" name="model"
                                                        value="{{ old('model') }}">
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('model'))
                                                            <div id="model-error" class="error">
                                                                {{ $errors->first('model') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="right-align padr30px">Normal Price *</th>
                                            <td>
                                                {{-- <label for="grade">MMK</label> --}}
                                                <div class="input-field">
                                                    <div class="custom-d-flex">
                                                        <input class="validate" id="normal_price" type="number"
                                                            name="normal_price" value="{{ old('normal_price') }}">
                                                        <span class="mt-2">MMK</span>
                                                    </div>
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('normal_price'))
                                                            <div id="normal_price-error" class="error">
                                                                {{ $errors->first('normal_price') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="right-align padr30px">Discounted Price </th>
                                            <td>
                                                {{-- <label for="grade">MMK</label> --}}
                                                <div class="input-field">
                                                    <div class="custom-d-flex">
                                                        <input class="validate" id="discounted_price" type="number"
                                                            name="discounted_price"
                                                            value="{{ old('discounted_price') }}">
                                                        <span class="mt-2">MMK</span>
                                                    </div>
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('discounted_price'))
                                                            <div id="discounted_price-error" class="error">
                                                                {{ $errors->first('discounted_price') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Quantity *</th>
                                            <td>
                                                <div class="input-field">
                                                    <input class="validate" id="quantity" type="number"
                                                        name="quantity" value="{{ old('quantity') }}">
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('quantity'))
                                                            <div id="quantity-error" class="error">
                                                                {{ $errors->first('quantity') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Description *</th>
                                            <td>
                                                <div class="input-field">
                                                    <textarea class="validate materialize-textarea" id="description"
                                                        name="description">{{ old('description') }}</textarea>
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('description'))
                                                            <div id="description-error" class="error">
                                                                {{ $errors->first('description') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="width25 right-align padr30px">Choose your category *</th>
                                            <td>
                                                <div class="input-field">
                                                    <select class="error validate" id="category_id" name="category_id">
                                                        <option value="" disabled selected>Choose your category</option>
                                                        @foreach ($categories as $category)
                                                            <option value="{{ $category->id }}">{{ $category->name }}
                                                                @if ($category->is_customer_also == '1' && $category->is_merchant_also == '1')
                                                                    (Customer & Merchant)
                                                                @elseif($category->is_customer_also == '1')
                                                                    (Customer)
                                                                @elseif($category->is_merchant_also == '1')
                                                                    (Merchant)
                                                                @endif
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('category_id'))
                                                            <div id="category_id-error" class="error">
                                                                {{ $errors->first('category_id') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>
                                        @foreach ($merchantClasses as $class)
                                            <tr>
                                                <th class="with25 right-align padr30px">{{ $class->name }} Price</th>
                                                <td>
                                                    <input type="hidden" name="classes[]" value="{{ $class->id }}">
                                                    <input type="number" name="prices[]" required>
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr>
                                            <th class="width25 right-align padr30px">Choose your usage area *</th>
                                            <td>
                                                <div class="input-field">
                                                    <select class="select2 browser-default  validate" id="usage_area_id"
                                                        name="usage_areas[]" multiple="multiple">
                                                        {{-- <option value="" disabled selected>Choose your Usage Area</option> --}}
                                                        <optgroup label="Usage Area">
                                                            @foreach ($usage_areas as $usage_area)
                                                                <option value="{{ $usage_area->id }}"
                                                                    @if (old('usage_area_id') == $usage_area->id) selected @endif>
                                                                    {{ $usage_area->name }}</option>
                                                            @endforeach
                                                    </select>
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('usage_area_id'))
                                                            <div id="usage_area_id-error" class="error">
                                                                {{ $errors->first('usage_area_id') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Is Best Deal *</th>
                                            <td>
                                                <div class="input-field">
                                                    <p class="is-bestdeal-radio">
                                                        <label>
                                                            <input class="validate" value="1" name="is_bestdeal"
                                                                type="radio" checked />
                                                            <span>Yes</span>
                                                        </label>
                                                        <label>
                                                            <input class="validate" value="0" name="is_bestdeal"
                                                                type="radio" />
                                                            <span>No</span>
                                                        </label>
                                                    </p>
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('is_bestdeal'))
                                                            <div id="is_bestdeal-error" class="error">
                                                                {{ $errors->first('is_bestdeal') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Product Images *</th>
                                            <td>
                                                <div class="col s12 m8 l12 input-field">
                                                    <div class="input-images"></div>
                                                    {{-- <input type="file" name="images[]" multiple> --}}
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('images'))
                                                            <div id="image-error" class="error">
                                                                {{ $errors->first('images') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Feature Product</th>
                                            <td>
                                                <div class="switch">
                                                    <label>
                                                        Off
                                                        <input type="checkbox" id="formButton">
                                                        <span class="lever"></span>
                                                        On
                                                    </label>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr id="form1">
                                            <th class="right-align padr30px">Banner Image</th>
                                            <td>
                                                <div class="row">
                                                    <div class="row section mt-5 ">
                                                        <div class="col s12 m12 input-field" id="banner-image-section">
                                                            <input type="file" name="banner_image" id="banner_image"
                                                                class="dropify" />
                                                            <div class="cropper-box center">
                                                                <div class="crop-img-box">
                                                                    <img src="" alt="" id="show_banner_image">
                                                                </div>
                                                                <div class="preview"></div>
                                                                <button type="button" class="btn waves-effect waves-light"
                                                                    id="crop">Crop</button>
                                                            </div>
                                                            <div class="preview-box">
                                                                <img src="" alt="" class="preview-custom-image">
                                                            </div>
                                                            <small class="errorTxt1">
                                                                @if ($errors->has('banner_image'))
                                                                    <div id="image-error" class="error">
                                                                        {{ $errors->first('banner_image') }}</div>
                                                                @endif
                                                            </small>
                                                        </div>
                                                    </div>

                                                    <div class="input-field col s12">
                                                        <label for="banner_description">Description *</label>
                                                        <input class="validate" id="banner_description" type="text"
                                                            name="banner_description">
                                                        <small class="errorTxt1">
                                                            @if ($errors->has('description'))
                                                                <div id="model-error" class="error">
                                                                    {{ $errors->first('banner_description') }}</div>
                                                            @endif
                                                        </small>
                                                    </div>
                                                    <input type="hidden" name="cropped_image" id="cropped">
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                        </div>
                    </div>
                </div>
                <div class="custom-d-flex right">
                    <a href="{{ route('admin.products.index') }}"
                        class="waves-effect waves-light black-text padr30px mt-4">Cancel</a>
                    <button type="button" class="btn waves-effect waves-light red border-radius-10"
                        id="btn-product-spinner">
                        <div class="preloader-wrapper small active">
                            <div class="spinner-layer">
                                <div class="circle-clipper left">
                                    <div class="circle"></div>
                                </div>
                                <div class="gap-patch">
                                    <div class="circle"></div>
                                </div>
                                <div class="circle-clipper right">
                                    <div class="circle"></div>
                                </div>
                            </div>
                        </div>
                    </button>
                    <button class="btn waves-effect waves-light red border-radius-10" type="submit"
                        id="btn-product-create">Create</button>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

{{-- vendor script --}}
@section('vendor-script')
    <script src="{{ asset('vendors/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/file-upload/image-uploader.min.js') }}"></script>
    <script src="{{ asset('vendors/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendors/dropify/js/dropify.min.js') }}"></script>
    <script>
        $('.input-images').imageUploader();
    </script>
@endsection

{{-- page script --}}
@section('page-script')
    <script src="{{ asset('js/scripts/form-select2.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.js"></script>
    <script src="{{ asset('js/scripts/form-validation.js') . '?' . config('app.version') }}"></script>
    <script src="{{ asset('js/scripts/form-file-uploads.js') . '?' . config('app.version') }}"></script>
    <script src="{{ asset('js/custom/custom-cropper.js') . '?' . config('app.version') }}"></script>
    <script>
        $(document).ready(function() {
            $("#formButton").click(function() {
                $("#form1").toggle();
            });

            $("#btn-product-create").on('click', function() {
                $("#btn-product-spinner").css("display", "block");
                $(this).css("display", "none");
            });
        });
    </script>
@endsection