@extends('backend.layout.master')
@section('content')
    <section class="content mt-3">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Create Product</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{url('/manager')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Create Product</li>
                    </ol>
                </div>
            </div>
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-dark">
                        <div class="card-header">
                            <h3 class="card-title">Create Product</h3>
                        </div>
                        <form action="{{ route('manager.product.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="created_by" value="{{ Auth::guard('admin')->user()->id }}" >
                            <div class="card-body">
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Category</label>
                                    <select id="multiselect" class="form-control" name="category_id[]" style="min-height: 200px;" multiple >
                                        <option value="0">==ROOT==</option> 
                                        @foreach($categories as $category)
                                               <option value="{{$category->id}}">{{$category->name}}</option>
                                               
                                               @foreach($category->childs as $sub1)
                                                   <option value="{{$sub1->id}}">-{{$sub1->name}}</option>
                                                   
                                                   @foreach($sub1->childs as $sub2)
                                                       <option value="{{$sub2->id}}">--{{$sub2->name}}</option>
                                                       
                                                       @foreach($sub2->childs as $sub3)
                                                       <option value="{{$sub3->id}}">---{{$sub3->name}}</option>
                                                       
                                                         @foreach($sub3->childs as $sub4)
                                                         <option value="{{$sub4->id}}">----{{$sub4->name}}</option>
                                                         @endforeach
                                                       @endforeach
                                                   @endforeach 
                                               @endforeach 
                                           @endforeach 
                                       </select>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Name</label>
                                    <input type="text" name="name" placeholder="Product Name" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Name Arabic</label>
                                    <input type="text" name="nameae" placeholder="Product Name Arabic" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Description</label>
                                    <textarea class="form-control editor" name="description"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Description Arabic</label>
                                    <textarea class="form-control editor" name="descriptionar"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Price</label>
                                    <input type="text" name="price" placeholder="Product Price" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Quantity</label>
                                    <input type="number" name="qty" placeholder="Product Quantity" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Is Software</label>
                                    <select class="form-control" name="is_software">
                                        <option selected disabled>Choose a option</option>
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Key Feature</label>
                                    <input type="text" name="key_feature" placeholder="Key Feature" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">URL</label>
                                    <input type="text" name="url" placeholder="URL" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Main Image</label>
                                    <input type="file" name="image" placeholder="Choose Product Image" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Gallery</label>
                                    <input type="file" name="galleries[]" placeholder="Choose Product Gallery" class="form-control" multiple>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Series</label>
                                    <input type="text" name="series" placeholder="Series" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Model</label>
                                    <input type="text" name="model" placeholder="Model" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Model Variations</label>
                                    <input type="text" name="model_variations" placeholder="Model Variations" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Type</label>
                                    <input type="text" name="panel_type" placeholder="Type" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Backlight</label>
                                    <input type="text" name="panel_backlight" placeholder="Backlight" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Size</label>
                                    <input type="text" name="panel_size" placeholder="Size" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Resolution</label>
                                    <input type="text" name="panel_resolution" placeholder="Resolution" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Resolution Compare</label>
                                    <input type="text" name="panel_resolution_compare" placeholder="Resolution Compare" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Viewable Image Size (H x V)</label>
                                    <input type="text" name="panel_viewable_img_size_hv" placeholder="Viewable Image Size (H x V)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Pixel Pitch</label>
                                    <input type="text" name="panel_pixel_pitch" placeholder="Pixel Pitch" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Pixel Density</label>
                                    <input type="text" name="panel_pixel_density" placeholder="Pixel Density" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Display Colors</label>
                                    <input type="text" name="panel_display_color" placeholder="Display Colors" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Viewing Angles (H / V, typical)</label>
                                    <input type="text" name="panel_viewable_angles_hv" placeholder="Viewing Angles (H / V, typical)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Brightness (typical)</label>
                                    <input type="text" name="panel_brightness" placeholder="Brightness (typical)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Contrast Ratio (typical)</label>
                                    <input type="text" name="panel_contrast_ratio" placeholder="Contrast Ratio (typical)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Response Time (typical)</label>
                                    <input type="text" name="panel_response_time" placeholder="Response Time (typical)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Color Gamut (typical)</label>
                                    <input type="text" name="panel_color_gamut" placeholder="Color Gamut (typical)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Input Terminals</label>
                                    <input type="text" name="video_input_terminals" placeholder="Input Terminals" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Ouput Terminals</label>
                                    <input type="text" name="video_output_terminals" placeholder="Ouput Terminals" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Digital Scanning Frequency (H / V)</label>
                                    <input type="text" name="video_digital_scanning" placeholder="Digital Scanning Frequency (H / V)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Upstream</label>
                                    <input type="text" name="usb_upstream" placeholder="Upstream" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Downstream</label>
                                    <input type="text" name="usb_downstream" placeholder="Downstream" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Power Requirements</label>
                                    <input type="text" name="power_requirements" placeholder="Power Requirements" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Typical Power Consumption</label>
                                    <input type="text" name="power_consumption" placeholder="Typical Power Consumption" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Maximum Power Consumption</label>
                                    <input type="text" name="max_power_consumption" placeholder="Maximum Power Consumption" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Power Save Mode</label>
                                    <input type="text" name="power_save_mode" placeholder="Power Save Mode" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Built-in Calibration Sensor</label>
                                    <input type="text" name="builtin_calibration_sensor" placeholder="Built-in Calibration Sensor" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Brightness Stabilization</label>
                                    <input type="text" name="brightness_stabilization" placeholder="Brightness Stabilization" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Digital Uniformity Equalizer</label>
                                    <input type="text" name="digital_equalizer" placeholder="Digital Uniformity Equalizer" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Preset Modes</label>
                                    <input type="text" name="preset_modes" placeholder="Preset Modes" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">HDR Gamma</label>
                                    <input type="text" name="hdr_gamma" placeholder="HDR Gamma" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">OSD Languages</label>
                                    <input type="text" name="osd_lang" placeholder="OSD Languages" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Other Functions</label>
                                    <input type="text" name="others_functions" placeholder="Other Functions" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Dimensions (Landscape, W x H x D)</label>
                                    <input type="text" name="physical_dimensions_landscape" placeholder="Dimensions (Landscape, W x H x D)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Dimensions (Without Stand, W x H x D)</label>
                                    <input type="text" name="physical_dimensions_without_stand" placeholder="Dimensions (Without Stand, W x H x D)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Dimensions (Landscape with Hood, W x H x D)</label>
                                    <input type="text" name="physical_dimensions_landscape_hood" placeholder="Dimensions (Landscape with Hood, W x H x D)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Net Weight</label>
                                    <input type="text" name="physical_net_weight" placeholder="Net Weight" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Net Weight (Without Stand)</label>
                                    <input type="text" name="physical_net_weight_without_stand" placeholder="Net Weight (Without Stand)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Net Weight (With Hood)</label>
                                    <input type="text" name="physical_net_weight_with_hood" placeholder="Net Weight (With Hood)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Hole Spacing (VESA Standard)</label>
                                    <input type="text" name="physical_hole_spacing_vesa_standard" placeholder="Hole Spacing (VESA Standard)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Operating Temperature</label>
                                    <input type="text" name="environment_temp" placeholder="Operating Temperature" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Operating Humidity (R.H., non condensing)</label>
                                    <input type="text" name="environment_humudity" placeholder="Operating Humidity (R.H., non condensing)" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Certifications & Standards</label>
                                    <input type="text" name="certifications_standards" placeholder="Certifications & Standards" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Color Management Software ColorNavigator 7</label>
                                    <input type="text" name="ps_color_management" placeholder="Color Management Software ColorNavigator 7" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Monitor Management Software ColorNavigator NX</label>
                                    <input type="text" name="ds_monitor_navigator_nx" placeholder="Monitor Management Software ColorNavigator NX" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Signal Cables</label>
                                    <input type="text" name="access_signal_cables" placeholder="Signal Cables" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Accessories Others</label>
                                    <input type="text" name="access_others" placeholder="Accessories Others" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Warranty</label>
                                    <input type="text" name="warranty" placeholder="Warranty" class="form-control">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Content</label>
                                    <textarea class="form-control editor" name="content"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Content Arabic</label>
                                    <textarea class="form-control editor" name="contentar"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Features</label>
                                    <textarea class="form-control editor" name="features"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Features Arabic</label>
                                    <textarea class="form-control editor" name="featuresar"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Specifications</label>
                                    <textarea class="form-control editor" name="specifications"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Specifications Arabic</label>
                                    <textarea class="form-control editor" name="specificationsar"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Awards</label>
                                    <textarea class="form-control editor" name="awards"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Awards Arabic</label>
                                    <textarea class="form-control editor" name="awardsar"></textarea>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Status</label>
                                    <select class="form-control" name="status">
                                        <option selected disabled>Choose a option</option>
                                        <option value="0">Excluded from E-Store</option>
                                        <option value="1">Included in E-Store</option>
                                    </select>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="exampleInputName">Product Sorting</label>
                                    <input type="number" name="sorting" placeholder="Product Sorting" class="form-control">
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-dark">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('specific_css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.css" integrity="sha512-tlP4yGOtHdxdeW9/VptIsVMLtgnObNNr07KlHzK4B5zVUuzJ+9KrF86B/a7PJnzxEggPAMzoV/eOipZd8wWpag==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@push('specific_js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js" integrity="sha512-lxQ4VnKKW7foGFV6L9zlSe+6QppP9B2t+tMMaV4s4iqAv4iHIyXED7O+fke1VeLNaRdoVkVt8Hw/jmZ+XocsXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function(){
        var editors = [].slice.call(document.querySelectorAll('.editor'));
        editors.forEach(function (textarea) {
            var editor = Jodit.make(textarea, {
                height: 500,
                allowResizeX: true,
                allowResizeY: true
            });
        });
        
        $("#multiselect").multiselect({
            templates: {
                button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
            },
        });
    })
</script>
@endpush