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

<style>
    .my-account-main {
        margin: 164px 0 50px 0;
    }

    .my-account-tablinks {
        display: block;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid #d7d7d791;
        padding: 13px;
        text-align: left;
    }

    .account-tab {
        border: 1px solid #d7d7d791;
        border-bottom: none;
    }

    .row-shadow {
        box-shadow: 0 10px 25px 0 #80808059;
        padding: 40px 25px;
    }

    .profile-image {
        text-align: center;
        border: 1px solid #c1c1c170;
        margin-bottom: 16px;
        padding: 22px 0;
    }

    .my-account-profile-image {
        width: 150px;
        height: 150px;
    }

    .profile-pic {
        color: transparent;
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: all 0.3s ease;
        width: 165px;
        height: 165px;
        margin: auto;
    }

    .profile-pic input {
        display: none;
    }

    .profile-pic img {
        position: absolute;
        object-fit: cover;
        width: 165px;
        height: 165px;
        box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
        border-radius: 100px;
        z-index: 0;
    }

    .profile-pic .-label {
        cursor: pointer;
        height: 165px;
        width: 165px;
    }

    .profile-pic:hover .-label {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10000;
        color: #fafafa;
        transition: background-color 0.2s ease-in-out;
        border-radius: 100px;
        margin-bottom: 0;
    }

    .profile-pic span {
        display: inline-flex;
        padding: 0.2em;
        height: 2em;
    }

    .my-account-h3 {
        font-size: 31px;
        margin-bottom: 30px;
        padding-bottom: 10px;
        border-bottom: 1px solid #c9c9c9;
        width: fit-content;
    }

    .my-account-product-text2 {
        text-align: end;
    }

    .my-account-product-image {
        width: 100%;
        height: 98px;
    }

    .product-sub-text {
        font-size: 11px;
    }

    .tab-details-inner {
        margin-top: 20px;
    }

    @media screen and (max-width: 768px) {
        .my-order {
            overflow: auto;
        }

        .row-width {
            width: 500px;
            padding: 0;
        }

        .row-shadow {
            padding: 11px 7px;
        }
    }
</style>

<div class="my-account-main ">

    <div class="container ">
        <div class="row row-shadow px-0">
            <div class="col-lg-4">

                <div class="profile-image">
                    <img src="{{ url('/') }}/frontend/img/user.png" alt="profile image" class="my-account-profile-image">
                </div>
                <div class="account-tab">
                    <button class="tablinks  my-account-tablinks" onclick="openCity12(event, 'my-account-tab1')"
                        id="defaultOpen">Personal Information</button>
                    <!-- <button class="tablinks  my-account-tablinks" onclick="openCity12(event, 'my-account-tab4')"
                            id="defaultOpen">Shipping Address</button> -->
                    <button class="tablinks my-account-tablinks" onclick="openCity12(event, 'my-account-tab2')">My
                        Order</button>
                    <a href="{{route('user.logout')}}"><button class="tablinks my-account-tablinks">Logout</button></a>
                </div>
            </div>

            <div class="col-lg-8">


                <div class="tab-details-inner">

                    <div id="my-account-tab1" class="tabcontent my-account-tabcontent">
                        <h3 class="my-account-h3">Personal Information</h3>

                        <div class="personal-info">
                            
                            <div class="profile-pic">
                                <label class="-label" for="file">
                                    <span class="glyphicon glyphicon-camera"></span>
                                    <span>Change Image</span>
                                </label>
                                <input id="file" type="file" onchange="loadFile(event)" />
                                <img src="https://cdn.pixabay.com/photo/2017/08/06/21/01/louvre-2596278_960_720.jpg"
                                    id="output" width="200" />
                            </div>

                            <form action="{{route('saveaccount')}}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <div class="row mt-5">
                                    <div class="col-lg-12  mb-3">
                                        <input type="text" name="name" value="{{$alluser->name}}" class="form-control" placeholder=" Full Name">
                                    </div>

                                    
                                    <div class="col-lg-6 col-md-6 mb-3">
                                        <input type="email" name="email" value="{{$alluser->email}}" class="form-control"
                                            placeholder=" Email Address">
                                            
                                    </div>

                                    <div class="col-lg-6 col-md-6 mb-3">
                                        <input type="number" name="phone" value="{{$alluser->phone}}" class="form-control"
                                            placeholder="Phone Number">
                                    </div>

                                    <div class="col-lg-6 col-md-6 mb-3">
                                        <label>Select Gender</label>
                                        <select name="gender" class="form-control">
                                            <option disabled> ----- Select -----</option>
                                            <option value="male" {{ $alluser->gender == 'male' ? 'selected' : '' }}>Male</option>
                                            <option value="female" {{ $alluser->gender == 'female' ? 'selected' : '' }}>Female</option>
                                            <option value="other" {{ $alluser->gender == 'other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 col-md-6 mb-3">
                                        <label>Date of Birth </label>
                                        <input type="date" class="form-control" value="{{$alluser->dob}}" name="dob" placeholder="DOB">
                                    </div>

                                    <div class="col-lg-6 col-md-6 mb-3">
                                        <input type="text" class="form-control" value="{{$alluser->city}}" name="city" placeholder=" City">
                                    </div>

                                    <div class="col-lg-6 col-md-6 mb-3">
                                        <input type="text" class="form-control" name="pincode" value="{{$alluser->pincode}}" placeholder="Pin Code">
                                    </div>

                                    <div class="col-lg-12 mb-3">
                                        <label>Address</label>
                                        <textarea name="address" class="form-control" rows="4">{!! $alluser->address !!}</textarea>
                                    </div>

                                    <div class="account-button-div"
                                        style="text-align: end; width: 100%;padding-right: 10px;">
                                        <button type="submit" name="submit" class="btn btn-submit">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                    <!-- <div id="my-account-tab4" class="tabcontent my-account-tabcontent">
                                <h3 class="my-account-h3">Personal Information</h3>

                                <div class="col-lg-12 mb-4">
                                    <label>Address 1</label>
                                    <textarea class="form-control" rows="4"></textarea>
                                </div>
                                <div class="col-lg-12">
                                    <label>Address 2</label>
                                    <textarea class="form-control" rows="4"></textarea>
                                </div>
                                <div class="account-button-div"
                                    style="text-align: end; width: 100%;padding-right: 10px;">
                                    <button class="btn btn-submit">Save</button>
                                </div>
                            </div> -->

                    <div id="my-account-tab2" class="tabcontent my-account-tabcontent">
                        <div class="my-order">
                            @foreach($products as $allp)
                            <div class="row row-width">
                                <div class="col-3">
                                    <img src="{{ url('/') }}/{{$allp->product_image}}" alt="image"
                                        class="my-account-product-image">
                                </div>
                                <div class="col-4">

                                    <div class="my-account-product-text">
                                        <p>{{$allp->product_name}}</p>

                                        <div class="d-flex">
                                            <p class="product-sub-text">Code: {{$allp->product_code}} </p>
                                            <!-- <p class="product-sub-text">&nbsp; | &nbsp;</p>
                                                    <p class="product-sub-text">Size: 32</p> -->
                                        </div>
                                    </div>
                                </div>
                                <div class="col-5">
                                    <div class="my-account-product-text2">
                                        <p class="sale-price-p">Sale Price</p>
                                        <p>₹ {{$allp->product_saleprice}}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <hr>
                            @endforeach
                        </div>
                        <div style="text-align: end;">
                        Total Bill: {{$totalBill}}
                        </div>
                    </div>


                </div>


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

</div>


<script>
    var loadFile = function(event) {
        var image = document.getElementById("output");
        image.src = URL.createObjectURL(event.target.files[0]);
    };
</script>

<script>
    function openCity12(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("my-account-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";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
</script>

@endsection