@extends('admin.layouts.app')
@section('page_content')
<div class="content-wrapper">
    <!-- Page Title Header Starts-->
    <div class="row page-title-header">
        <div class="col-12">
            <div class="page-header">
                <h4 class="page-title">Add Product - {{$category->name}}</h4>
                <ul>
                    <!-- <li><a href="{{route('admin.projects.page_titles')}}" class="outline_green_btn">Page Title</a></li>  -->
                    <li><a href="{{route('admin.products', ['id'=>$category->id,'category_name'=>strtolower(urlencode($category->name))])}}" class="filled_green_btn">Back</a></li> 
                </ul>   
            </div>
        </div>
        
    </div>
    <!-- Page Title Header Ends-->

    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row flex-grow">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="forms-sample" method="post" enctype="multipart/form-data" action="javascript:0;">
                                @csrf
                                <div class="form-row">
                                    <div class="col-md-4 form-group">
                                        <label for="series_value">Product Series <span class="text-danger">*</span></label>
                                        <select class="form-control" name="series_value[]" required id="series_value">
                                            <option value="">Select Product Series </option>
                                            @foreach($series as $key => $series_value)
                                                <option value="{{$series_value->id}}">{{$series_value->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4 form-group">
                                        <label for="">Model Number <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="" required id="" placeholder="Model">
                                    </div>
                                </div>

                                <div class="form-group mt-1">
                                    <h6 class="mb-3"><b>Mechanical Data</b></h6>
                                    <div class="Mechanical_Data field_wrapper" id="Mechanical_Data">
                                        <div class="form-row">
                                            <div class="col-md-3 form-group">
                                                <label for="">Width (mm) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Width">
                                            </div>
                                            
                                            <div class="col-md-3 form-group">
                                                <label for=""> Height (mm) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Height">
                                            </div>

                                            <div class="col-md-3 form-group">
                                                <label for="">Length (mm) / Reel <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Lenght">
                                            </div>
                                            
                                            <div class="col-md-3 form-group">
                                                <label for="">Degree of protection (IP) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Degree of protection">
                                            </div>

                                            <div class="col-md-3 form-group">
                                                <label for="">Cut Length (mm) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Cut Lenght">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mt-1">
                                    <h6 class="mb-3"><b>Electrical Data</b></h6>
                                    <div class="electrical_data field_wrapper" id="electrical_data">
                                        <div class="form-row">
                                            <div class="col-md-3 form-group">
                                                <label for="">Efficacy (Lm/W) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Efficacy">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for=""> Wattage (W/M) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="wattage">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Voltage (VDC) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Voltage">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mt-1">
                                    <h6 class="mb-3"><b>Light Technical Data</b></h6>
                                    <div class="light_technical_data field_wrapper" id="light_technical_data">
                                        <div class="form-row">
                                            <div class="col-md-3 form-group">
                                                <label for="">SMD <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="SMD">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for=""> No of Leds/M <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="No of Leds/M">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Colour temperature (CCT) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Colour temperature">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Luminous Flux (Lm/M) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Luminous Flux">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Beam angle <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Beam angle">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Colour consistency(<small>McAdam ellipse</small>) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Colour consistency">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Binning <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Binning">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Colour rendering index (CRI) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Colour rendering index">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Life Span (hrs) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Life Span (hrs)">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Warranty (Years) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Warranty (Years)">
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label for="">Dimmable <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Dimmable">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mt-1">
                                    <h6 class="mb-3"><b>Temprature Data</b></h6>
                                    <div class="temprature_data field_wrapper" id="temprature_data">
                                        <div class="form-row">
                                            <div class="col-md-3 form-group">
                                                <label for="">Operating Temp (°C) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="" required id="" placeholder="Operating Temp (°C)">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mt-1">
                                    <h6 class="mb-3"><b>Downloads</b></h6>
                                    <div class="downloads field_wrapper" id="downloads">
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="thumb_image">Datasheet (.pdf)<span class="text-danger">*</span></label>
                                                <div class="custom-file">
                                                    <input type="file" name="thumb_image" required class="custom-file-input form-control" accept=".pdf" id="customFile">
                                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="thumb_image">IES Files<span class="text-danger">*</span></label>
                                                <div class="custom-file">
                                                    <input type="file" name="thumb_image" required class="custom-file-input form-control" id="customFile">
                                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-green btn-rounded mr-2">Save</button>
                                <!-- <button class="btn btn-light btn-rounded">Cancel</button> -->
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>
@endsection