@extends('companyuser::layouts.master')
@section('extra_styles')
<link href="{{ asset('app-assets/css/plugins/imageUpload/style.css') }}" rel="stylesheet">
@endsection
@section('extra_script')
<script src="{{ asset('app-assets/js/plugins/imageUpload/script.js') }}" defer></script>
<script src="{{ asset('app-assets/js/general/checkboxdisable.js') }}" defer></script>
<script src="{{ asset('app-assets/js/plugins/tables/recipeTable.js') }}" defer></script>
<script src="{{ asset('app-assets/js/plugins/tables/recipeTable2.js') }}" defer></script>
@endsection
@section('content')
        <div class="content-body">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-xs-12 mt-2 my-1">
                    <div class="row breadcrumbs-top">
                        <div class="breadcrumb-wrapper col-xs-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{url('/product')}}">Product</a></li>
                                <li class="breadcrumb-item active"><a href="{{url('/AddRecipe')}}">New Recipe</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <section id="basic-form-layouts recipeSection" class="form-border add-form-section filter-section-collapse">
                <div class=" match-height">
                    <div>
                        <div class="card mb-0">
                            <div class="card-body  in">
                                <form action="/addCustomer" method="GET" class="form">
                                @csrf
                                <div class="card-block">
                                    <div class="form-body">
                                        <div class="row my-1">
                                            <div class="col-md-6 headTitle">
                                                <h3 class="d-inline">New Recipe</h3>
                                            </div>
                                            <div class="col-md-6 divBack">
                                                <a href="{{url('/product')}}" class="btn btn-primary btn-min-width">Back</a>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group mt-0">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="recipeName">Recipe Name</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <input type="text" name="recipeName" value="Sharp Air Conditioner" class="w-100 form-control" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="Id">@lang('ID')</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <input type="number" name="Id" value="PIDOO4" class="w-100 form-control" required>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="row mb-1">
                                                        <div class="col-md-4">

                                                            <label for="Category">@lang('Category')</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <select name="Category" class="form-control w-100" required disabled>
                                                                <option value="A">Air Conditioner</option>
                                                                <option value="B">Air Conditioner</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="description">Description</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <textarea name="description" id="description" cols="40" rows="5" class="w-100 form-control"></textarea>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="row mb-1">
                                                        <div class="col-md-4">
                                                            <label for="unitType">Unity Type</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <select name="unitType" id="unitType" class="w-100 form-control" required>
                                                                <option value="A">weight</option>
                                                                <option value="B">unitType</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label for="barcode">Barcode</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <input type="text" name="barcode" class="w-100 form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row mb-1">
                                                        <div class="col-md-4">
                                                            <label for="Taxes">@lang('Taxes')</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <select name="Taxes" id="Taxes" class="w-100 form-control" required>
                                                                <option value="A">Air Conditioner</option>
                                                                <option value="B">Air Conditioner</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- image --}}
                                                <div class="form-group">
                                                    <div class="row mb-1">
                                                        <div class="col-md-4"></div>
                                                        <div class="col-md-8">
                                                            {{-- <div class="alert"></div> --}}
                                                            <div id='img_contain'><img id="blah" align='middle'
                                                                    src="{{asset('/assets/images/default.png')}}"
                                                                    alt="your image" title='' />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-4">

                                                            <label for="img">Image</label>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <div class="input-group">
                                                                <div class="custom-file w-100">
                                                                    <input type="file" name="file" class="imgInp custom-file-input w-100 form-control" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                                                                    <label for="inputGroupFile01" class="custom-file-label">Choose File</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <label class=" custom-control custom-checkbox">
                                                    <input type="checkbox" id="checkbox1" class="custom-control-input">
                                                </label>
                                            </div>
                                            <div class="col-md-6">
                                                <h5 class="form-border mb-0 border-bottom-0 py-2 px-1">Accounting Alignment:</h5>
                                                <div class="container  form-border p-4">
                                                    <div class="form-group">
                                                        <div class="row mb-1">
                                                            <div class="col-md-5">
                                                                <label class="custom-control custom-checkbox">
                                                                    <input type="checkbox"
                                                                        class="custom-control-input check">
                                                                    <span class="custom-control-indicator"></span>
                                                                    <span class="custom-control-description">Inventory
                                                                        Item</span>
                                                                </label>
                                                            </div>
                                                            <div class="col-md-7">
                                                                <select name="Category" class="form-control catselect selection" required disabled>
                                                                    <option value="A">Air Conditioner</option>
                                                                    <option value="B">Air Conditioner</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="row mb-1">
                                                            <div class="col-md-5">
                                                                <label class="custom-control custom-checkbox">
                                                                    <input type="checkbox"
                                                                        class="custom-control-input check">
                                                                    <span class="custom-control-indicator"></span>
                                                                    <span class="custom-control-description">Selling
                                                                        Product</span>
                                                                </label>

                                                            </div>
                                                            <div class="col-md-7">
                                                                <input type="text" name="sellingproduct" class="w-50 form-control mb-half" required placeholder="selling price">
                                                                <select name="Category" class="form-control selection" required disabled>
                                                                    <option value="A">Air Conditioner</option>
                                                                    <option value="B">Air Conditioner</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="card-body in" aria-expanded="false" style="">
                                                    <div class="card-block card-dashboard">
                                                        <div class="table-responsive">
                                                            <table class="table">
                                                                <thead>
                                                                    <tr>
                                                                        <th>1 Unit of</th>
                                                                        <th>
                                                                            <h2>=</h2>
                                                                        </th>
                                                                        <th>Number</th>
                                                                        <th>Of Unit</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="recipeTable1">
                                                                    <tr>
                                                                        <td class="">
                                                                            <select class="select2 form-control">
                                                                                <option value="AK">select unit type
                                                                                </option>
                                                                                <option value="HI">Product 2
                                                                                </option>
                                                                            </select>
                                                                        </td>
                                                                        <td class="">
                                                                            <h2>=</h2>
                                                                        </td>
                                                                        <td class="">
                                                                            <input type="number" class="form-control"
                                                                                id="basicInput">
                                                                        </td>
                                                                        <td class="">
                                                                            <select class="select2 form-control">
                                                                                <option value="AK">select unit type
                                                                                </option>
                                                                                <option value="HI">Product 2
                                                                                </option>
                                                                            </select>
                                                                        </td>
                                                                    </tr>

                                                                </tbody>
                                                                <tfoot>
                                                                    <tr class="background-transparent">
                                                                        <th colspan="10">
                                                                            <button id="btnAdd" type="button"
                                                                                class="btn btn-primary"
                                                                                data-toggle="tooltip"
                                                                                data-original-title="Add more controls"><i
                                                                                    class="glyphicon glyphicon-plus-sign"></i>&nbsp;
                                                                                Add&nbsp;</button></th>
                                                                    </tr>
                                                                </tfoot>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="card-body in" aria-expanded="false" style="">
                                                    <div class="card-block card-dashboard">
                                                        <div class="table-responsive">
                                                            <table class="table">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Product</th>
                                                                        <th>
                                                                            <h2>=</h2>
                                                                        </th>
                                                                        <th>Unit</th>
                                                                        <th>QTY</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="recipeTable2">
                                                                    <tr>
                                                                        <td class="">
                                                                            <select class="select2 form-control">
                                                                                <option value="AK">select Product
                                                                                </option>
                                                                                <option value="HI">Product 2
                                                                                </option>
                                                                            </select>
                                                                        </td>
                                                                        <td class="">
                                                                            <h2>=</h2>
                                                                        </td>
                                                                        <td class="">
                                                                            <select class="select2 form-control">
                                                                                <option value="AK">selet unit type
                                                                                </option>
                                                                                <option value="HI">Product 2
                                                                                </option>
                                                                            </select>
                                                                        </td>
                                                                        <td class="">
                                                                            <input type="number" class="form-control"
                                                                                id="basicInput">
                                                                        </td>
                                                                    </tr>

                                                                </tbody>
                                                                <tfoot>
                                                                    <tr class="background-transparent">
                                                                        <th colspan="10">
                                                                            <button id="btnAdd2" type="button"
                                                                                class="btn btn-primary"
                                                                                data-toggle="tooltip"
                                                                                data-original-title="Add more controls"><i
                                                                                    class="glyphicon glyphicon-plus-sign"></i>&nbsp;
                                                                                Add&nbsp;</button></th>
                                                                    </tr>
                                                                </tfoot>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="d-flex justify-content-center form-group text-center pb-2 mb-0">
                                                <button type="submit" class="btnWidth btn btn-warning mr-1">Cancel</button>
                                                <button type="submit" class="btnWidth btn btn-primary mr-1 saveDraftBtn">Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
            </section>
        </div>

@endsection