@extends('layouts.app')

@section('content')
<div class="dashboard-content">
    <div class="main-edit-layout">
        <div class="main-card">
            <div class="main-heading">
                <h4>Edit Order</h4>
            </div>
        </div>
        <!-- edit heading -->
        <div class="products-layout">
            <div class="product-heading">
                <h4>Products</h4>
            </div>
            <div class="product-description">
                <div class="product-img-sec">
                    <img src="{{ asset('admin-assets/images/product.png') }}" alt="product" class="product-img">
                </div>
                <div class="product-data">
                    <div class="row">
                        <div class="col-md-4 product-col">
                            <h6>Name</h6>
                            <p>1200 mah 3.7V тънка полимерна батерия / B4025100/</p>
                        </div>
                        <div class="col-md-4 product-col">
                            <h6>Variation</h6>
                            <p>1200 mah 3.7V тънка полимерна</p>
                        </div>
                        <div class="col-md-4 product-col">
                            <h6>Quantity</h6>
                            <p>1200 mah 3.7V тънка полимерна батерия / B4025100/</p>
                        </div>
                        <div class="col-md-4 product-col">
                            <h6>Quality</h6>
                            <p>1200 mah 3.7V тънка полимерна батерия / B4025100/</p>
                        </div>
                        <div class="col-md-4 product-col">
                            <label>Price</label><br>
                            <input type="number" placeholder="40" />
                        </div>
                    </div>
                </div>
                <div class="edit-product-btn-group">
                    <button class="add-btn" data-bs-toggle="modal" data-bs-target="#ProductModal">Add a prdouct</button>
                    <!-- add product modal  -->

                    <!-- Button trigger modal -->
                    <!-- Modal -->
                    <div class="add-product-modal">
                        <div class="modal fade" id="ProductModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header text-center">
                                        <div class="add-product-img">
                                            <img src="{{ asset('admin-assets/images/add-product.svg') }}" alt="info"
                                                class="add-img">
                                        </div>
                                    </div>
                                    <div class="modal-body">
                                        <h4>Product Add</h4>
                                        <p>Are you sure that you want to dele 'Operator'?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="cancel-btn" data-bs-dismiss="modal">Cancel</button>
                                        <button type="button" class="delete-btn">Save</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="delete-btn">Delete</button>
                </div>
            </div>
        </div>
        <!-- product end  -->

        <!-- order sec -->
        <div class="product-order">
            <div class="product-heading">
                <h4>Orders</h4>
            </div>
            <div class="order-details">
                <div class="row">
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Status</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>Pending </option>
                                <option value="1">Completed</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Status</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>Pending </option>
                                <option value="1">Completed</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Status</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>Pending </option>
                                <option value="1">Completed</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Price</label><br>
                            <input class="order-inputdata" placeholder="15">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Promo code</label><br>
                            <input class="order-inputdata" placeholder="XXXX-XXXX-XXXX">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Created</label><br>
                            <input class="order-inputdata" placeholder="before 2 d 16 h 30 min">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Completed</label><br>
                            <input class="order-inputdata" placeholder="before 2 d 16 h 30 min">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Shipped</label><br>
                            <input class="order-inputdata" placeholder="Yes">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>On way to client</label><br>
                            <input class="order-inputdata" placeholder="Yes">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Waiting</label><br>
                            <input class="order-inputdata" placeholder="before 2 d 16 h 30 min">
                            </input>
                        </div>
                    </div>
                </div>
                <!-- notes -->
                <div class="form-notes">
                    <label for="myTextarea">Notes</label><br>
                    <textarea id="myTextarea" class="form-textarea" rows="4" cols="50" placeholder="Type your message here..."></textarea>
                </div>
            </div>
        </div>
        <!-- order sec end  -->



        <!-- client sec  -->
        <div class="product-order">
            <div class="product-heading">
                <h4>Clients</h4>
            </div>
            <div class="order-details">
                <div class="row">
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>First Name</label><br>
                            <input class="order-inputdata" placeholder="Павлин Колев Николаев">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Last Name</label><br>
                            <input class="order-inputdata" placeholder="Павлин Колев Николаев">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Email</label><br>
                            <input class="order-inputdata" placeholder="Павлин Колев Николаев">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Country</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>Bulgaria </option>
                                <option value="1">Norway</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>City</label><br>
                            <input class="order-inputdata" placeholder="Николаев">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Post Code</label><br>
                            <input class="order-inputdata" placeholder="140125">
                            </input>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Address</label><br>
                            <input class="order-inputdata" placeholder="vaican street, Bulgaria">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Company</label><br>
                            <input class="order-inputdata" placeholder="Yes">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>VAT</label><br>
                            <input class="order-inputdata" placeholder="Yes">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Not taken</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>0 </option>
                                <option value="1">1</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- notes -->
                <div class="form-notes">
                    <label for="myTextarea">Notes</label><br>
                    <textarea id="myTextarea" class="form-textarea" rows="4" cols="50" placeholder="Type your message here..."></textarea>
                </div>
            </div>
        </div>

        <!-- client sec end  -->


        <!-- #courier-region -->

        <div class="product-courier">
            <div class="product-heading">
                <h4>Courier</h4>
            </div>

            <div class="courier-details">
                <div class="courier-heading-row ">
                    <div class="left-col">
                        <div class="courier-input">
                            <label>Change Courier</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>Econt </option>
                                <option value="1">Speedy</option>
                            </select>
                        </div>
                    </div>
                    <div class="right-col">
                        <img src="{{ asset('admin-assets/images/econt-order.png') }}" alt="order-econt" class="order-econt-img">
                    </div>
                </div>
            </div>
            <div class="courier-fields">
                <div class="row">
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Shipment number</label><br>
                            <input class="order-inputdata" placeholder="xxxx-xxxx-xxxx">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Status</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>None </option>
                                <option value="1">Norway</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Shipment(Price)лв</label><br>
                            <input class="order-inputdata" placeholder="20.00">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Shippment description</label><br>
                            <input class="order-inputdata" placeholder="1200 mah 3.7V тънка полимерна батерия /">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Phone</label><br>
                            <input class="order-inputdata" placeholder="xxxx-xxxx-xxxx">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Country</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>Bulgaria</option>
                                <option value="1">Norway</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>City</label><br>
                            <input class="order-inputdata" placeholder="vaican street, Bulgaria">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Post Code</label><br>
                            <input class="order-inputdata" placeholder="140125">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Address</label><br>
                            <input class="order-inputdata" placeholder="vaican street, Bulgaria">
                            </input>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Address 2</label>
                            <select class="form-select" aria-label="Default select example" placeholder="completed">
                                <option selected>0 </option>
                                <option value="1">1</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label for="date">To</label><br>
                            <input class="order-inputdata" type="date" id="date" name="date">

                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="orders-input">
                            <label>Packages Count</label><br>
                            <input class="order-inputdata" placeholder="1">
                            </input>
                        </div>
                    </div>
                </div>
                <div class="courier-toogle">
                    <h6>Description Add</h6>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-check form-switch">
                                <label class="form-check-label" for="flexSwitchCheckChecked">Check </label>
                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-switch">
                                <label class="form-check-label" for="flexSwitchCheckChecked">Test
                                </label>
                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-switch">
                                <label class="form-check-label" for="flexSwitchCheckChecked">SMS notification</label>
                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-switch">
                                <label class="form-check-label" for="flexSwitchCheckChecked">Declared Value</label>
                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- #courier-region -->
        <div class="import-btn-group">
            <button class="import-back-btn">Back</button>
            <button class="import-btn">Save</button>
        </div>
    </div>
</div>


@endsection