@extends('frontend.layout.master')
@section('title', $pageTitle)
@section('content')

<section>
                <div class="profile_page_div_1 tab">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-12">
                            <div class="profile_page_div_2">
                                <div class="profile_page_div_4">
                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-3" style="padding: 0px;">
                                            <div class="profile_page_div_5">
                                                <img src="assets/img/user.png" class="user_image">
                                            </div>
                                        </div>
                                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 col-9" style="padding: 0px;">
                                            <div class="profile_page_div_5">
                                                <p class="profile_page_p_1">Hello,</p>
                                                <p class="profile_page_p_2">Nandini Karmakar</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="profile_page_div_6">
                                <div class="profile_page_div_7 tablinks" onclick="openCity1(event, 'city-1')" >
                                    <div class="profile_page_div_8">
                                        <span class="profile_page_span_1">
                                            <i class="fa fa-first-order" aria-hidden="true"></i>
                                        </span>
                                        <span class="profile_page_span_2">
                                            <p class="profile_page_p_3">My Orders</p>
                                        </span>
                                        <span class="profile_page_span_3">
                                            <p class="profile_page_p_4">
                                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                            </p>
                                        </span>
                                    </div>
                                </div>
                                <div class="profile_page_div_7 ">
                                    <div class="profile_page_div_8 toggle">
                                        <span class="profile_page_span_1">
                                            <i class="fa fa-cog" aria-hidden="true"></i>
                                        </span>
                                        <span class="profile_page_span_2">
                                            <p class="profile_page_p_3">Account Setting</p>
                                        </span>
                                        <span class="profile_page_span_3">
                                            <p class="profile_page_p_4">
                                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                            </p>
                                        </span>
                                    </div>
                                    <div id="target">
                                        <div class="profile_page_div_9">
                                            <ul class="profile_page_ul_1">
                                                <li class="profile_page_li_1 tablinks" onclick="openCity1(event, 'city-2')">
                                                    Profile Information
                                                </li>
                                                <li class="profile_page_li_1 tablinks" onclick="openCity1(event, 'city-3')">
                                                    Manage Address
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="profile_page_div_7">
                                    <div class="profile_page_div_8 toggle4">
                                        <span class="profile_page_span_1">
                                            <i class="fa fa-user" aria-hidden="true"></i>
                                        </span>
                                        <span class="profile_page_span_2">
                                            <p class="profile_page_p_3">My Stalf</p>
                                        </span>
                                        <span class="profile_page_span_3">
                                            <p class="profile_page_p_4">
                                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                            </p>
                                        </span>
                                    </div>
                                    <div id="target4">
                                        <div class="profile_page_div_9">
                                            <ul class="profile_page_ul_1">
                                                <li class="profile_page_li_1 tablinks" onclick="openCity1(event, 'city-4')">
                                                    My Review & Ratings
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="profile_page_div_7">
                                    <div class="profile_page_div_8">
                                        <span class="profile_page_span_1">
                                            <i class="fa fa-power-off" aria-hidden="true"></i>
                                        </span>
                                        <span class="profile_page_span_2">
                                            <p class="profile_page_p_3">Logout</p>
                                        </span>
                                        <span class="profile_page_span_3">
                                            <p class="profile_page_p_4">
                                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                            </p>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 col-md-8 col-12">
                            <div class="profile_page_div_3">

                                <!-- My order_body -->
                                <div class="my_order_tab">
                                    <div id="city-1" class="tabcontent order_tab_div_1" >
                                        <div class="order_tab_div_2">
                                            <form>
                                                <div class="order_tab_div_3">
                                                    <input type="text" class="order_tab_input">
                                                    <button class="order_tab_button">
                                                        <i class="fa fa-search" aria-hidden="true"></i>
                                                        &nbsp;
                                                        Search Order
                                                    </button>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="order_tab_div_4">
                                            <a href="order_details.html">
                                                <div class="row row_width">
                                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2 " style="padding: 0px;">
                                                        <div class="order_tab_div_5">
                                                            <img src="assets/img/product-2.jpg" class="order_tab_img_1">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 col-5" style="padding: 0px;"> 
                                                        <div class="order_tab_div_6">
                                                            <p class="order_tab_p_1">
                                                                ATROCK 1000ml Stainless Steel Fridge Wat...
                                                            </p>
                                                            <p class="order_tab_p_2">
                                                                Colour : Silver
                                                            </p>
                                                            <p class="order_tab_p_2">
                                                                Seller:  OmeoImpex
                                                            </p>
                                                        </div> 
                                                    </div>
                                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" >
                                                        <div class="order_tab_div_6">
                                                            <p class="order_tab_p_1">
                                                                Rs. 100.00
                                                            </p>
                                                        </div> 
                                                    </div>
                                                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-3" style="padding: 0px;">
                                                        <div class="order_tab_div_6">
                                                            <p class="order_tab_p_1">
                                                                <span style="color: green; ">
                                                                    <i class="fa fa-eercast" aria-hidden="true"></i>
                                                                </span>
                                                                &nbsp;
                                                                Delivered on Jun 24
                                                            </p>
                                                            <p class="order_tab_p_2">
                                                                Your item has been delivered
                                                            </p>
                                                        </div> 
                                                    </div>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="order_tab_div_4">
                                            <a href="order_details.html">
                                                <div class="row row_width">
                                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2 " style="padding: 0px;">
                                                        <div class="order_tab_div_5">
                                                            <img src="assets/img/product-3.jpg" class="order_tab_img_1">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 col-5" style="padding: 0px;"> 
                                                        <div class="order_tab_div_6">
                                                            <p class="order_tab_p_1">
                                                                ATROCK 1000ml Stainless Steel Fridge Wat...
                                                            </p>
                                                            <p class="order_tab_p_2">
                                                                Colour : Silver
                                                            </p>
                                                            <p class="order_tab_p_2">
                                                                Seller:  OmeoImpex
                                                            </p>
                                                        </div> 
                                                    </div>
                                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" >
                                                        <div class="order_tab_div_6">
                                                            <p class="order_tab_p_1">
                                                                Rs. 100.00
                                                            </p>
                                                        </div> 
                                                    </div>
                                                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-3" style="padding: 0px;">
                                                        <div class="order_tab_div_6">
                                                            <p class="order_tab_p_1">
                                                                <span style="color: red; ">
                                                                    <i class="fa fa-eercast" aria-hidden="true"></i>
                                                                </span>
                                                                &nbsp;
                                                                Delivered on Jun 24
                                                            </p>
                                                            <p class="order_tab_p_2">
                                                                Your item has been delivered
                                                            </p>
                                                        </div> 
                                                    </div>
                                                </div>  
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- /My order_body -->

                                <!-- profile information body -->
                                <div class="profile_info_tab">
                                    <div id="city-2" class="tabcontent profile_info_tab_div_1" style="display: block;">
                                        <div class="profile_info_tab_div_2">
                                            <p class="profile_info_tab_p_1">
                                                Personal Information 
                                                <span class="profile_info_tab_span_1">Edit</span>
                                            </p>
                                            <div class="profile_info_tab_div_3">
                                                <form>
                                                    <div class="profile_info_tab_div_4">
                                                        <input type="text" class="profile_info_tab_input_1" placeholder="First Name">
                                                        <input type="text" class="profile_info_tab_input_1" placeholder="Last Name">
                                                    </div><br><br>
                                                    <label class="profile_info_tab_lable_1">Your Gender</label><br><br>
                                                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                    <label for="vehicle1" style="margin-right: 30px;">Male</label>
                                                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
                                                    <label for="vehicle2">Female</label>
                                                </form>
                                            </div>
                                            <br><br>
                                            <p class="profile_info_tab_p_1">
                                                Email Address
                                                <span class="profile_info_tab_span_1">Edit</span>
                                                <span class="profile_info_tab_span_1">Change Password</span>
                                            </p>
                                            <div class="profile_info_tab_div_3">
                                                <form>
                                                    <div class="profile_info_tab_div_4">
                                                        <input type="Email" class="profile_info_tab_input_1">
                                                    </div>
                                                </form>
                                            </div>
                                            <br><br>
                                            <p class="profile_info_tab_p_1">
                                                Mobile Number
                                                <span class="profile_info_tab_span_1">Edit</span>
                                            </p>
                                            <div class="profile_info_tab_div_3">
                                                <form>
                                                    <div class="profile_info_tab_div_4">
                                                        <input type="Email" class="profile_info_tab_input_1" placeholder="00000 00000">
                                                    </div>
                                                </form>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <!-- /profile information body -->

                                <!-- Manage Addresses body -->
                                <div class="manage_address_tab">
                                    <div id="city-3" class="tabcontent manage_ads_tab_div_1">
                                        <div class="manage_ads_tab_div_2">
                                            <p class="profile_info_tab_p_1">
                                                Manage Addresses
                                            </p>
                                            <div class="manage_ads_tab_div_3 ">
                                                <div class="manage_ads_tab_div_4 toggle1">
                                                    <p class="manage_ads_tab_p_1">
                                                        <span class="manage_ads_tab_span_1">
                                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                                        </span>
                                                        ADD ADDRESS
                                                    </p>
                                                </div>
                                                <div id="target1" class="manage_ads_tab_div_5">
                                                    <div class="manage_ads_tab_div_6">
                                                        <form>
                                                            <button class="manage_ads_tab_btn_1">
                                                                Use my current location
                                                            </button>
                                                            <br><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="First Name">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Phone Number">
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Pincode">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="Locality">
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <textarea row="5" style="height: 100% !important;" class="profile_info_tab_input_3" placeholder="Address (Ares and Street)"> </textarea>
                                                            </div>
                                                            <br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="City/District/Town">
                                                                <select class="profile_info_tab_input_1" style="position: relative; top: 9px;">
                                                                    <option value="volvo">Volvo</option>
                                                                    <option value="saab">Saab</option>
                                                                    <option value="mercedes">Mercedes</option>
                                                                    <option value="audi">Audi</option>
                                                                </select>
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Pincode">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="Locality">
                                                            </div><br>
                                                            <label class="profile_info_tab_lable_1">Address Type</label><br><br>
                                                            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                            <label for="vehicle1" style="margin-right: 30px;">Home</label>
                                                            <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
                                                            <label for="vehicle2">Work</label>
                                                            <br><br>
                                                            <button class="manage_ads_tab_btn_1">
                                                                Save
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>

                                            <br><br>
                                            <div class="manage_ads_tab_div_7">
                                                <div class="manage_ads_tab_div_8">
                                                    <div class="manage_ads_tab_div_9">
                                                        <button class="manage_ads_tab_btn_2">Home</button>
                                                    </div>
                                                    <div class="manage_ads_tab_div_10 ">
                                                        <div class="dropdown">
                                                            <p class="manage_ads_tab_p_2 ">
                                                                <i class="fa fa-bars" aria-hidden="true"></i>
                                                            </p>
                                                            <div class="dropdown-content edit_delete">
                                                                <ul class="manage_ads_tab_ul_1">
                                                                    <li class="manage_ads_tab_li_1 toggle2">
                                                                        Edit
                                                                    </li>
                                                                    <li class="manage_ads_tab_li_1">
                                                                        Delete
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><br>
                                                <div id="target2" class="manage_ads_tab_div_5">
                                                    <div class="manage_ads_tab_div_6">
                                                        <form>
                                                            <button class="manage_ads_tab_btn_1">
                                                                Use my current location
                                                            </button>
                                                            <br><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="First Name">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Phone Number">
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Pincode">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="Locality">
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <textarea row="5" style="height: 100% !important;" class="profile_info_tab_input_3" placeholder="Address (Ares and Street)"> </textarea>
                                                            </div>
                                                            <br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="City/District/Town">
                                                                <select class="profile_info_tab_input_1" style="position: relative; top: 9px;">
                                                                    <option value="volvo">Volvo</option>
                                                                    <option value="saab">Saab</option>
                                                                    <option value="mercedes">Mercedes</option>
                                                                    <option value="audi">Audi</option>
                                                                </select>
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Pincode">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="Locality">
                                                            </div><br>
                                                            <label class="profile_info_tab_lable_1">Address Type</label><br><br>
                                                            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                            <label for="vehicle1" style="margin-right: 30px;">Home</label>
                                                            <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
                                                            <label for="vehicle2">Work</label>
                                                            <br><br>
                                                            <button class="manage_ads_tab_btn_1">
                                                                Save
                                                            </button><br><br>
                                                        </form>
                                                    </div>
                                                </div>
                                                <p class="manage_ads_tab_p_3">Name - Nandini Karmakar</p>
                                                <p class="manage_ads_tab_p_3">Phone number - 1234567890</p>
                                                <p class="manage_ads_tab_p_3">
                                                    Sri Ram Park , Babur bandh , Post office - AVL colony, Sri Ram park, Durgapur, West Bengal - 713206
                                                </p>
                                            </div>

                                            <br><br>
                                            <div class="manage_ads_tab_div_7">
                                                <div class="manage_ads_tab_div_8">
                                                    <div class="manage_ads_tab_div_9">
                                                        <button class="manage_ads_tab_btn_2">Home</button>
                                                    </div>
                                                    <div class="manage_ads_tab_div_10 ">
                                                        <div class="dropdown">
                                                            <p class="manage_ads_tab_p_2 ">
                                                                <i class="fa fa-bars" aria-hidden="true"></i>
                                                            </p>
                                                            <div class="dropdown-content edit_delete">
                                                                <ul class="manage_ads_tab_ul_1">
                                                                    <li class="manage_ads_tab_li_1 toggle3">
                                                                        Edit
                                                                    </li>
                                                                    <li class="manage_ads_tab_li_1">
                                                                        Delete
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><br>
                                                <div id="target3" class="manage_ads_tab_div_5">
                                                    <div class="manage_ads_tab_div_6">
                                                        <form>
                                                            <button class="manage_ads_tab_btn_1">
                                                                Use my current location
                                                            </button>
                                                            <br><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="First Name">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Phone Number">
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Pincode">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="Locality">
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <textarea row="5" style="height: 100% !important;" class="profile_info_tab_input_3" placeholder="Address (Ares and Street)"> </textarea>
                                                            </div>
                                                            <br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="City/District/Town">
                                                                <select class="profile_info_tab_input_1" style="position: relative; top: 9px;">
                                                                    <option value="volvo">Volvo</option>
                                                                    <option value="saab">Saab</option>
                                                                    <option value="mercedes">Mercedes</option>
                                                                    <option value="audi">Audi</option>
                                                                </select>
                                                            </div><br>
                                                            <div class="profile_info_tab_div_4">
                                                                <input type="Number" class="profile_info_tab_input_1" placeholder="Pincode">
                                                                <input type="text" class="profile_info_tab_input_1" placeholder="Locality">
                                                            </div><br>
                                                            <label class="profile_info_tab_lable_1">Address Type</label><br><br>
                                                            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                                                            <label for="vehicle1" style="margin-right: 30px;">Home</label>
                                                            <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
                                                            <label for="vehicle2">Work</label>
                                                            <br><br>
                                                            <button class="manage_ads_tab_btn_1">
                                                                Save
                                                            </button>
                                                            <br>
                                                            <br>
                                                        </form>
                                                    </div>
                                                </div>
                                                <p class="manage_ads_tab_p_3">Name - Nandini Karmakar</p>
                                                <p class="manage_ads_tab_p_3">Phone number - 1234567890</p>
                                                <p class="manage_ads_tab_p_3">
                                                    Sri Ram Park , Babur bandh , Post office - AVL colony, Sri Ram park, Durgapur, West Bengal - 713206
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /Manage Addresses body -->

                                <!-- My Review & Ratings body -->
                                <div class="manage_address_tab">
                                    <div id="city-4" class="tabcontent review_tab_div_1">
                                        <p class="review_tab_p_1">Orders you might be interested reviewing</p>
                                        <div class="review_tab_div_2">
                                            <div class="row">
                                                <div class="col-lg-2 col-md-2 col-12" style="padding: 0px;">
                                                    <div class="review_tab_div_3">
                                                        <img src="assets/img/product-1.jpg" class="review_tab_img_1">
                                                    </div>
                                                </div>
                                                <div class="col-lg-10 col-md-10 col-12">
                                                    <div class="review_tab_div_3">
                                                        <p class="review_tab_p_2">
                                                            ATROCK 1000ml Stainless Steel Fridge Water Bottle Set of 6 1000 ml Bottle
                                                        </p>
                                                        <p class="review_tab_p_3">
                                                            <span class="fa fa-star checked1"></span>
                                                            <span class="fa fa-star checked1"></span>
                                                            <span class="fa fa-star checked1"></span>
                                                            <span class="fa fa-star"></span>
                                                            <span class="fa fa-star"></span>
                                                        </p>
                                                        <p class="review_tab_p_4 toggle5">
                                                            Write a Review
                                                        </p>
                                                        <div id="target5" class="review_tab_div_4">
                                                            <form>
                                                                <div class="profile_info_tab_div_4">
                                                                    <textarea row="5" style="height: 100% !important;" class="profile_info_tab_input_3" placeholder="Address (Ares and Street)"> </textarea>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /My Review & Ratings body -->

                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <script>
                $('.toggle').click(function() {
                    $('#target').toggle('slow');
                });
            </script>
            <script>
                $('.toggle1').click(function() {
                    $('#target1').toggle('slow');
                });
            </script>
            <script>
                $('.toggle2').click(function() {
                    $('#target2').toggle('slow');
                });
            </script>
            <script>
                $('.toggle3').click(function() {
                    $('#target3').toggle('slow');
                });
            </script>
            <script>
                $('.toggle4').click(function() {
                    $('#target4').toggle('slow');
                });
            </script>
            <script>
                $('.toggle5').click(function() {
                    $('#target5').toggle('slow');
                });
            </script>

            <script>
                function openCity1(evt, cityName) {
                  var i, tabcontent, tablinks;
                  tabcontent = document.getElementsByClassName("tabcontent");
                  for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                  }
                  tablinks = document.getElementsByClassName("tablinks");
                  for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                  }
                  document.getElementById(cityName).style.display = "block";
                  evt.currentTarget.className += " active";
                }
            </script>

@endsection