@extends('layouts.webLayoutMaster')

@section('meta')
<meta name="description" content="">
<meta name="keywords" content="">
@endsection

@section('canonical')
<link rel="canonical" href="https://www.vino-tasting.com/my-account">
@endsection

@section('title')
- My Account
@endsection

@section('css')
<style>
    .tomatin-sec {
        padding: 0;
        min-height: auto;
    }

    .tomatin-sec .comming-timer .countdown-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 33.33%;
    }

    .tomatin-sec .comming-timer .countdown-amount {
        line-height: 40px;
        width: 25%
    }

    .tomatin-sec .comming-timer .countdown-period {
        line-height: 35px;
    }

    #order_table th,
    #order_table td {
        padding: 0.5rem 3rem;
        line-height: 2rem;
    }

    #order_table th {
        border-bottom: 1px solid #919191;
    }

    #order_table td {
        border-bottom: 1px solid #dddddd;
    }

    .input-group {
        margin-top: 10px;
        margin-bottom: 4px;
    }

    .input {
        box-sizing: border-box;
        margin-bottom: 5px;
        width: 100%;
        border: none !important;
        padding: 8px 16px;
        background-color: transparent;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
        border-radius: 8px !important;
        font-weight: 600;
    }

    .country-select {
        box-sizing: border-box !important;
        margin-bottom: 5px !important;
        /* width: 100% !important; */
        border: none !important;
        padding: 8px 16px !important;
        /* background-color: transparent !important; */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        color: #333 !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        position: relative !important;
        height: auto !important;
    }

    .country-select:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .input:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .password-group {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
    }

    .checkbox-group {
        color: black;
        font-size: 14px;
        font-weight: 500;
    }

    .forget-password {
        font-size: 14px;
        font-weight: 500;
        color: #a53e4c;
        text-decoration: none;
    }

    .forget-password:hover {
        text-decoration: underline;
        color: #f37e10;
    }

    .widget .category-list a.active {
        color: #a53e4c;
        font-weight: bold;
    }

    .jcf-select-text {
        display: none !important;
    }

    /* #content .jcf-select {
        border: none !important;
    } */

    /* .jcf-select-opener {
        display: none !important;
    } */
</style>
@endsection

@section('content')
{{-- @if (auth()->guard('member')->check()) --}}
<!-- banner of the page -->
<section class="p-0 pt-5">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-center  py-5">
                <h1>My Account</h1>
                <ul class="list-unstyled breadcrumbs text-dark">
                    <li><a class="text-dark" href="{{ route('home') }}">Home</a></li>
                    <li>/</li>
                    <li>My Account</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- contact sec of the page -->
<section class="p-0 pb-5 account-section">
    <div class="container ">

        <div class="row justify-content-between">
            <aside id="sidebar" class="col-xs-12 col-md-3 pull-left">
                <section class="widget category-widget py-5">
                    <ul class="list-unstyled text-uppercase category-list">
                        <li><a href="{{ route('view-my-account', 'dashboard') }}" @if ($status=='dashboard' )
                                class="active" @endif>Dashboard</a></li>
                        <li><a href="{{ route('view-my-account', 'orders') }}" @if ($status=='orders' ) class="active"
                                @endif>Orders</a></li>
                        <li><a href="{{ route('view-my-account', 'settings') }}" @if ($status=='settings' )
                                class="active" @endif>Settings</a></li>
                    </ul>
                </section>
            </aside>

            <article id="content" class="col-xs-12 col-md-9 pull-right p-4">
                <h3 class="text-start">
                    @if ($status == 'dashboard')
                    {{ 'Dashboard' }}
                    @elseif ($status == 'orders')
                    {{ 'Orders' }}
                    @elseif ($status == 'settings')
                    {{ 'Settings' }}
                    @endif
                </h3>

                @if ($status == 'dashboard')

                <div class="row">
                    <div class="tomatin-sec">
                        <div id="defaultCountdown" class="comming-timer is-countdown">
                            <span class="countdown-row countdown-show3">
                                <span class="countdown-section">
                                    <span class="countdown-amount">{{ $order_count ?? 0 }}</span>
                                    <span class="countdown-period">Orders</span>
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
                @elseif ($status == 'orders')
                <div class="row">
                    <div class="col-xs-12">
                        <div class="table-responsive">
                            <table id="order_table">
                                <thead>
                                    <th class="text-center">ID</th>
                                    <th class="text-center">Date</th>
                                    <th class="text-center">Total</th>
                                    <th class="text-center">Name</th>
                                    <th class="text-center">Phone</th>
                                    <th class="text-center">Address</th>
                                    <th class="text-center">Payment Status</th>
                                </thead>
                                <tbody>
                                    @foreach ($orders as $key => $order)
                                    <tr>
                                        <td class="text-center">
                                            {{ ++$key }}
                                        </td>
                                        <td class="text-center" style="white-space: nowrap;">
                                            {{ $order->created_at->format('Y-m-d') }}
                                        </td>
                                        <td class="text-center" style="white-space: nowrap;">
                                            &euro;{{ number_format($order->order_total, 2) }}
                                        </td>
                                        <td class="text-center">
                                            {{ ucwords($order->name) }}
                                        </td class="text-center">
                                        <td class="text-center" style="white-space: nowrap;">
                                            {{ $order->contact_number }}
                                        </td class="text-center">
                                        <td class="text-center">
                                            {{ ucfirst($order->home_no . ', ' . $order->street . ', ' . $order->city . ' (' . $order->postal_code . '), ' . $order->state . ', ' . $order->country . '.') }}
                                        </td>
                                        <td class="text-center" style="white-space: nowrap;">
                                            <span
                                                style="@if ($order->payment_status == 'success') color:#22bb33 @else color:#901324 @endif; padding:5px;margin:0;">
                                                {{ $order->payment_status }}
                                            </span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @elseif ($status == 'settings')
                <div class="col-md-12">
                    <form action="{{ route('update-account') }}" method="POST">
                        @csrf

                        <div class="row pt-5">
                            <h4>Your details</h4>
                            <div class="col-md-6 col-sm-12">
                                <label for="email" class="text">Email</label>
                                <input type="email" id="email" name="email" maxlength="150"
                                    class="input @error('email') is-invalid @enderror" placeholder="Enter Your Email"
                                    value="{{ $member->email }}" disabled>
                                <div class="invalid-feedback">
                                    @error('email')
                                    {{ $message }}
                                    @else
                                    Please enter your email address
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <label for="country" class="text">Country</label>
                                <select disabled class="country-select @error('country') is-invalid @enderror"
                                    id="country" name="country">
                                    <option value="">Select Country</option>
                                    @if (isset($countries) && $countries != '[]' && $countries != null)
                                    @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" @if (session()->getOldInput('country') ==
                                        $country->id || $member->country_id == $country->id) selected @endif>
                                        {{ ucwords($country->name) }}</option>
                                    @endforeach
                                    @else
                                    <option disabled>No Any Countries</option>
                                    @endif
                                </select>
                                <div class="invalid-feedback">
                                    @error('country')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label for="city" class="text">City</label>
                                <input type="text" id="city" name="city"
                                    class="input @error('city') is-invalid @enderror" placeholder="Enter Your City"
                                    value="{{ $member->city ?? '' }}">
                                <div class="invalid-feedback">
                                    @error('city')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <label for="firstname" class="text">First Name</label>
                                <input type="text" id="firstname" name="firstname"
                                    class="input @error('firstname') is-invalid @enderror"
                                    placeholder="Enter Your First Name" value="{{ $member->first_name ?? '' }}">
                                <div class="invalid-feedback">
                                    @error('firstname')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label for="lastname" class="text @error('lastname') is-invalid @enderror">Last
                                    Name</label>
                                <input type="text" id="lastname" name="lastname" class="input"
                                    placeholder="Enter Your Last Name" value="{{ $member->last_name ?? '' }}">
                                <div class="invalid-feedback">
                                    @error('lastname')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <label for="phone" class="text">Contact Number</label>
                                <input type="tel" id="contact_number" name="contact_number"
                                    class="input @error('contact_number') is-invalid @enderror"
                                    placeholder="Enter Your Contact Number" value="{{ $member->contact_number ?? '' }}">
                                <div class="invalid-feedback">
                                    @error('contact_number')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label for="dob" class="text">Birthday</label>
                                <input type="date" id="dob" name="dob" class="input @error('dob') is-invalid @enderror"
                                    placeholder="Select Your Birthday" value="{{ $member->date_of_birth ?? '' }}">
                                <div class="invalid-feedback">
                                    @error('dob')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <label for="password" class="text">Password</label>
                                <input class="input @error('password') is-invalid @enderror" id="password"
                                    name="password" type="password" placeholder="Enter Password">
                                <div class="invalid-feedback">
                                    @error('password')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row ">
                            <div class="col-md-6 col-sm-12">
                                <label for="password_conform" class="text">Confirm Password</label>
                                <input class="input @error('password_conform') is-invalid @enderror"
                                    id="password_conform" name="password_conform" type="password"
                                    placeholder="Confirm Password">
                                <div class="invalid-feedback">
                                    @error('password_conform')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="py-5">
                            <h4>Company details</h4>
                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <label for="company_name" class="text">Company Name</label>
                                    <input type="text" id="company_name" name="company_name" class="input"
                                        placeholder="Enter Your Last Name" value="{{ $member->company_name ?? '' }}">
                                    <div class="invalid-feedback">
                                        @error('company_name')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <label for="company_contact_person_name" class="text">Company Contact Person
                                        Name</label>
                                    <input type="text" id="company_contact_person_name"
                                        name="company_contact_person_name" class="input"
                                        placeholder="Enter Your Last Name"
                                        value="{{ $member->company_contact_person_name ?? '' }}">
                                    <div class="invalid-feedback">
                                        @error('company_contact_person_name')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <label for="company_address" class="text">Company Address</label>
                                    <input type="text" id="company_address" name="company_address" class="input"
                                        placeholder="Enter Your Last Name" value="{{ $member->company_address ?? '' }}">
                                    <div class="invalid-feedback">
                                        @error('company_address')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <label for="company_contact_person_tel" class="text">Company Contact Person Contact
                                        Number</label>
                                    <input type="text" id="company_contact_person_tel" name="company_contact_person_tel"
                                        class="input" placeholder="Enter Your Last Name"
                                        value="{{ $member->company_contact_person_contact_number ?? '' }}">
                                    <div class="invalid-feedback">
                                        @error('company_contact_person_tel')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>


                        {{-- <div class="col-auto alert-notification">
                                    @if (session('success'))
                                        <div class="alert alert-success">
                                            {{ session('success') }}
                </div>
                @elseif (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
                @endif
                <div id="message" class="alert-msg"></div>
        </div> --}}

        <div class="register-submit-btn mt-5" style="display: flex; justify-content: space-between;">
            <button type="submit" class="btn">Save
                Changes</button>
        </div>
        </form>
    </div>

    @endif
    </article>
    </div>

    </div>
</section>
{{-- @else
        <script>
            window.location.href = "{{ route('login') }}";
</script>
@endif --}}

@endsection

@section('js')
@endsection