@extends('layout.master')
@section('content')
<!-- Main Content-->
<div class="main-content side-content pt-0">

    <div class="main-container container-fluid">
        <div class="inner-body">
            <!-- Page Header -->
            <div class="page-header">
                <div>
                    <h2 class="main-content-title tx-24 mg-b-5">Order Page</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Order Page / Edit</li>
                    </ol>
                </div>
            </div>
        </div>



        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card custom-card overflow-hidden">
                    <div class="card-body">
                        <div class="container">
                            <!-- @if(session('message')) -->
                            <div class="alert alert-success">
                                <!-- {{ session('message') }}
                                @endif -->

                                <form method="post" >
                                    <!-- @csrf -->
                                    

                                    <div class="row">

                                        <div class="col-md-12 col-sm-12 mt-2 mb-2">
                                            <div class=" font-weight-semibold mt-1 mb-3">Select</div>
                                            <select name="category" id="category" class="form-control select2 mt-5 mb-3">
                                                <option label="Select Category">Select Option</option>
                                            </select>
                                        </div>
                                        
                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Unit</div>
                                            <input type="text" class="form-control" name="Unit"
                                                placeholder="Enter Unit">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Order ID</div>
                                            <input type="number" readonly name="OrderID" class="form-control"
                                                placeholder="Enter Order ID">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Model ID</div>
                                            <input type="number" name="ModelID" class="form-control"
                                                placeholder="Enter Model ID">
                                        </div>


                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Width</div>
                                            <input type="text" name="Width" class="form-control"
                                                placeholder="Enter Width">
                                        </div>

                                         <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Depth</div>
                                            <input type="text" name="Depth" class="form-control"
                                                placeholder="Enter Depth">
                                        </div>

                                          <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Height</div>
                                            <input type="text" name="Height" class="form-control"
                                                placeholder="Enter Height">
                                        </div>

                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">User Weight</div>
                                            <input type="text" name="UserWeight" class="form-control"
                                                placeholder="Enter User Weight">
                                        </div>
                                        
                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Wer Required</div>
                                            <input type="text" name="Wer" class="form-control"
                                                placeholder="Enter Wer Required">
                                        </div>

                                  
                                            
                                           <div class="form-group col-md-12" id="image-upload-section">
                                                <div class="mb-3 font-weight-semibold">Upload Image</div>
                                                <div class="input-group mb-3">
                                                    <input type="file" name="Image" class="form-control">
                                                    <button type="button" class="btn btn-primary" onclick="addInputField('image-upload-section', 'file', 'Image')">+</button>
                                                    <button type="button" class="btn btn-danger" style="display:none;" onclick="removeInputField(this)">-</button>
                                                </div>
                                            </div>

                                            <div class="form-group col-md-12" id="video-upload-section">
                                                <div class="mb-3 font-weight-semibold">Upload Video</div>
                                                <div class="input-group mb-3">
                                                    <input type="text" name="Video" class="form-control" placeholder="Enter Video Url">
                                                    <button type="button" class="btn btn-primary" onclick="addInputField('video-upload-section', 'text', 'Video')">+</button>
                                                    <button type="button" class="btn btn-danger" style="display:none;" onclick="removeInputField(this)">-</button>
                                                </div>
                                            </div>

                                            <div class="form-group col-md-12" id="document-upload-section">
                                                <div class="mb-3 font-weight-semibold">Upload Document</div>
                                                <div class="input-group mb-3">
                                                    <input type="file" name="Document" class="form-control">
                                                    <button type="button" class="btn btn-primary" onclick="addInputField('document-upload-section', 'file', 'Document')">+</button>
                                                    <button type="button" class="btn btn-danger" style="display:none;" onclick="removeInputField(this)">-</button>
                                                </div>
                                            </div>


                                        <div class="d-flex justify-content-end">
                                            <button class="btn btn-primary col-md-3" type="submit">Save</button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


           <script>
                function addInputField(sectionId, type, name) {
                    const section = document.getElementById(sectionId);
                    const inputGroup = document.createElement('div');
                    inputGroup.className = 'input-group mb-3';

                    const input = document.createElement('input');
                    input.type = type;
                    input.name = name;
                    input.className = 'form-control';

                    const removeButton = document.createElement('button');
                    removeButton.type = 'button';
                    removeButton.className = 'btn btn-danger';
                    removeButton.innerText = '-';
                    removeButton.onclick = function() {
                        removeInputField(removeButton);
                    };

                    inputGroup.appendChild(input);
                    inputGroup.appendChild(removeButton);
                    section.appendChild(inputGroup);
                }

                function removeInputField(button) {
                    const inputGroup = button.parentNode;
                    inputGroup.parentNode.removeChild(inputGroup);
                }
        </script> 

        @endsection