@extends('layouts/layout')

@section('title', "Dashboard")
@section('page-description', '')
@section('page-keywords', '')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/datatables-bs5/datatables.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/select2/select2.css')}}" />
@endsection

@section('page-style')
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/datatables/jquery.dataTables.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/dashboard.js')}}"></script>
@endsection

@section('content')
    <div class="dashboard-page">
        <div class="container">
            <h1 class="fs-72 fw-strong mb-5">Dashboard</h1>
            <div class="d-flex justify-content-between align-items-center mb-80">
                <div class="custom-tab-header">
                    <ul class="nav nav-pills gap-2" role="tablist" id="list_tab">
                        <li class="nav-item" role="presentation" data-target="history">
                            <button class="btn btn-lg btn-outline-primary {{$tab == 'history' ? 'active' : ''}}" data-bs-toggle="pill" data-bs-target="#history" type="button" role="tab" aria-selected="{{$tab == 'history' ? 'true' : 'false'}}">Order History</button>
                        </li>
                        <li class="nav-item" role="presentation" data-target="delivery">
                            <button class="btn btn-lg btn-outline-primary {{$tab == 'delivery' ? 'active' : ''}}" data-bs-toggle="pill" data-bs-target="#delivery" type="button" role="tab" aria-selected="{{$tab == 'delivery' ? 'true' : 'false'}}">Delivery Information</button>
                        </li>
                        <li class="nav-item" role="presentation" data-target="contact">
                            <button class="btn btn-lg btn-outline-primary {{$tab == 'contact' ? 'active' : ''}}" data-bs-toggle="pill" data-bs-target="#contact" type="button" role="tab" aria-selected="{{$tab == 'contact' ? 'true' : 'false'}}">Contact Information</button>
                        </li>
                    </ul>
                </div>
                <a href="{{ route('signout') }}" class="fs-20 d-none d-lg-block text-decoration-none" style="color: #FF3E38">
                    <svg width="20" height="20" class="me-3" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.35294 14.1996V16.2996C7.35294 16.8566 7.57605 17.3907 7.97319 17.7845C8.37032 18.1784 8.90895 18.3996 9.47059 18.3996L16.8824 18.3996C17.444 18.3996 17.9826 18.1784 18.3798 17.7845C18.7769 17.3907 19 16.8566 19 16.2996L19 3.69961C19 3.14266 18.7769 2.60851 18.3798 2.21469C17.9826 1.82086 17.444 1.59961 16.8824 1.59961L9.47059 1.59961C8.90895 1.59961 8.37032 1.82086 7.97319 2.21469C7.57605 2.60851 7.35294 3.14265 7.35294 3.69961V5.79961M13.7059 9.99961L1 9.99961M1 9.99961L4.17647 13.1496M1 9.99961L4.17647 6.84961" stroke="#FF3E38" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Log out
                </a>
            </div>

            <div class="tab-content">
                <div class="tab-pane fade  {{$tab == 'history' ? 'show active' : ''}}" id="history" role="tabpanel">
                    <div class="table-responsive d-none d-md-block">
                        <table class="table dataTable">
                            <thead>
                                <tr>
                                    <th class="">ORDER #</th>
                                    <th>PRODUCT</th>
                                    <th>DATE</th>
                                    <th>AMOUNT</th>
                                    <th>DELIVERY DATE</th>
                                    <th class="text-end">STATUS</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($histories as $history)
                                <tr>
                                    <td>#{{ $history->order_number}}</td>
                                    <td>
                                            @if($history->item == "QBio Pro")
                                            <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-pro'])}}">
                                                <img src="{{asset('assets/imgs/goods-pro.png')}}" class="m-product-img">
                                            @elseif($history->item == "QBio Elixir")
                                            <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-elixir'])}}">
                                                <img src="{{asset('assets/imgs/goods-elixir.png')}}" class="m-product-img">
                                            @elseif($history->item == "QBio Gro")
                                            <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-gro'])}}">
                                                <img src="{{asset('assets/imgs/goods-gro.png')}}" class="m-product-img">
                                            @endif
                                            <span class="ms-2">{{$history->item}}</span>
                                        </a>
                                    </td>
                                    <td>{{ (new DateTime($history->created_at))->format('F d, Y'); }}</td>
                                    <td>${{ $history->amount }}</td>
                                    <td>{{ $history->delivery_date ? (new DateTime($history->delivery_date))->format('F d, Y') : '-'; }}</td>
                                    <td class="text-end">
                                        @if(($history->status == 1 || $history->status == 3) && $history->is_preorder == 1)
                                            @if($history->preorder_invoice_path)
                                                <a href="{{asset($history->preorder_invoice_path)}}" class="text-white" target="_blank">Preordered</a>
                                            @else
                                                <a href="javascript:;" class="text-white">Preordered</a>
                                            @endif
                                        @endif

                                        @if($history->status == 1)
                                        <a href="javascript:;" class="text-danger cancel-preorder-btn ms-3" data-order-id="{{$history->id}}" >Cancel</a>
                                        @elseif($history->status == 2)
                                        <a href="javascript:;" class="text-info ms-3">Cancelled</a>
                                        @elseif($history->status == 3)
                                        <!-- Ready To Ship -->
                                        @elseif($history->status == 4)
                                        <a href="javascript:;" class="text-info ms-3">On Its Way</a>
                                        @elseif($history->status == 5)
                                        <a href="javascript:;" class="text-info ms-3">Completed</a>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="d-block d-md-none">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th class="">ORDER #</th>
                                    <th class="text-end">AMOUNT</th>
                                </tr>
                            </thead>
                        </table>

                        @if(count($histories) == 0)
                        <div class="text-center">
                            No data available in table
                        </div>
                        @else
                            <div class="accordion" id="accordionExample">
                            @php $index = 1; @endphp
                            @foreach($histories as $history)
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button {{$index == 1 ? '' : 'collapsed'}}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $history->index}}" aria-expanded="{{$index == 1 ? 'true' : 'false'}}" aria-controls="collapse1">
                                            #{{ $history->order_number }}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $history->index}}" class="accordion-collapse collapse {{$index == 1 ? 'show' : ''}}" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="mb-3">
                                                    @if($history->item == "QBio Pro")
                                                    <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-pro'])}}">
                                                        <img src="{{asset('assets/imgs/goods-pro.png')}}" class="m-product-img-md">
                                                    @elseif($history->item == "QBio Elixir")
                                                    <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-elixir'])}}">
                                                        <img src="{{asset('assets/imgs/goods-elixir.png')}}" class="m-product-img-md">
                                                    @elseif($history->item == "QBio Gro")
                                                    <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-gro'])}}">
                                                        <img src="{{asset('assets/imgs/goods-gro.png')}}" class="m-product-img-md">
                                                    @endif
                                                    <span class="ms-2">{{$history->item}}</span>
                                                </a>
                                            </div>
                                            <div class="d-flex justify-content-between mb-3">
                                                <label class="color-translucent-5">DATE</label>
                                                <label>{{ (new DateTime($history->created_at))->format('F d, Y'); }}</label>
                                            </div>
                                            <div class="d-flex justify-content-between mb-3">
                                                <label class="color-translucent-5">AMOUNT</label>
                                                <label>${{ $history->amount }}</label>
                                            </div>
                                            <div class="d-flex justify-content-between mb-3">
                                                <label class="color-translucent-5">DELIVERY DATE</label>
                                                <label>{{ (new DateTime($history->delivery_date))->format('F d, Y'); }}</label>
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <label class="color-translucent-5">STATUS</label>
                                                <div class="text-end">
                                                    @if($history->is_preorder == 1)
                                                        @if($history->preorder_invoice_path)
                                                        <div class="mb-3"><a href="{{asset($history->preorder_invoice_path)}}" class="text-white" target="_blank">Preordered</a></div>
                                                        @else
                                                        <div class="mb-3"><a href="javascript:;" class="text-white">Preordered</a></div>
                                                        @endif
                                                    @endif

                                                    @if($history->status == 1)
                                                    <a href="javascript:;" class="text-danger cancel-preorder-btn ms-3" data-order-id="{{$history->id}}">Cancel</a>
                                                    @elseif($history->status == 2)
                                                    <a href="javascript:;" class="text-info ms-3">Cancelled</a>
                                                    @elseif($history->status == 3)
                                                    @elseif($history->status == 4)
                                                    <a href="javascript:;" class="text-info ms-3">On Its Way</a>
                                                    @elseif($history->status == 5)
                                                    <a href="javascript:;" class="text-info ms-3">Completed</a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @php $index++; @endphp
                            @endforeach
                            </div>
                        @endif
                    </div>
                </div>


                <div class="tab-pane fade {{$tab == 'delivery' ? 'show active' : ''}}" id="delivery" role="tabpanel">
                    <form class="" id="delivery_form">
                        <input type="text" class="form-control form-control-outline mb-3" id="address" placeholder="Street Address*" value="{{ Auth::user()->detail_address }}" required>
                        <input type="text" class="form-control form-control-outline mb-3" id="apartment" placeholder="Apartment/unit" value="{{ Auth::user()->detail_apartment }}">
                        <div class="d-block d-md-flex gap-3">
                            <input type="text" class="form-control form-control-outline mb-3" id="city" placeholder="City*" value="{{ Auth::user()->detail_city }}" required>
                            <input type="text" class="form-control form-control-outline mb-3" id="country" placeholder="Country*" value="{{ Auth::user()->detail_country }}" required>
                        </div>
                        <input type="text" class="form-control form-control-outline mb-80" id="zipcode" placeholder="Zip Code*" value="{{ Auth::user()->detail_zipcode }}" required>
                        <button class="btn btn-lg btn-primary" style="width: 193px" type="submit" id="submit_btn">Save<i class="fas fa-spinner fa-spin ms-2 d-none"></i></button>
                    </form>
                </div>

                <div class="tab-pane fade {{$tab == 'contact' ? 'show active' : ''}}" id="contact" role="tabpanel">
                    <form class="" id="contact_form">
                        <input type="text" class="form-control form-control-outline mb-3" id="profile_name" placeholder="Name*" value="{{ Auth::user()->name }}" required>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="email-input-wrapper mb-3">
                                    <input type="email" class="form-control form-control-outline" id="profile_email" placeholder="Email*" value="{{ Auth::user()->email }}" >
                                    <div class="form-text text-danger error-msg email-error-msg mt-2 d-none" for="profile_email"></div>
                                </div>
                                <div class="verify-email-wrapper d-none">
                                    <input type="text" class="form-control form-control-outline verify-code mb-3" id="email_verify_code" placeholder="------" >
                                    <div class="form-text text-white" for="email_verify_code">Verify your email. Enter the code we’ve sent over email to <span class="verify-email"></span></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="phone-input-wrapper mb-3">
                                    <div class="input-group phone-input-group">
                                        <select class="select2 w-100" id="profile_country_code" placeholder="Country/Region">
                                            @foreach(config('variables.country_codes') as $country)
                                                <option value="{{ $country['code'] }}" {{ Auth::user()->phone_head_number ? (Auth::user()->phone_head_number == $country['code'] ? 'selected' : '') : ($country['name']=='United States' ? 'selected' : '') }}>
                                                {{ $country['code'] }}({{ $country['short_name'] }})
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="text" class="form-control form-control-outline" id="profile_phone" placeholder="Phone number*" value="{{ Auth::user()->phone_number }}" >
                                    </div>
                                    <div class="form-text text-danger error-msg phone-error-msg mt-2 d-none"></div>
                                </div>
                                <div class="verify-phone-wrapper d-none">
                                    <input type="text" class="form-control form-control-outline verify-code mb-3" id="phone_verify_code" placeholder="------" >
                                    <div class="form-text text-white" for="phone_verify_code">Verify your phone number. Enter the code we’ve sent over SMS to <span class="phone-number">+1098765432</span></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-block d-md-flex gap-3 mt-4">
                            <button class="btn btn-lg btn-primary w-100 w-md-auto mb-3" style="min-width: 193px" type="submit" id="save_contact_btn" disabled>Save<i class="fas fa-spinner fa-spin ms-2 d-none"></i></button>
                            <button class="btn btn-lg btn-primary d-none w-100 w-md-auto mb-3" style="min-width: 193px" type="button" id="verify_contact_btn">Verify<i class="fas fa-spinner fa-spin ms-2 d-none"></i></button>
                            <button class="btn btn-lg btn-secondary w-100 w-md-auto mb-3" style="min-width: 193px" type="reset">Cancel</i></button>
                        </div>
                    </form>
                </div>
            </div>

            <a href="{{ route('signout') }}" class="fs-20 d-block d-lg-none mt-80 text-decoration-none" style="color: #FF3E38">
                <svg width="20" height="20" class="me-3" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.35294 14.1996V16.2996C7.35294 16.8566 7.57605 17.3907 7.97319 17.7845C8.37032 18.1784 8.90895 18.3996 9.47059 18.3996L16.8824 18.3996C17.444 18.3996 17.9826 18.1784 18.3798 17.7845C18.7769 17.3907 19 16.8566 19 16.2996L19 3.69961C19 3.14266 18.7769 2.60851 18.3798 2.21469C17.9826 1.82086 17.444 1.59961 16.8824 1.59961L9.47059 1.59961C8.90895 1.59961 8.37032 1.82086 7.97319 2.21469C7.57605 2.60851 7.35294 3.14265 7.35294 3.69961V5.79961M13.7059 9.99961L1 9.99961M1 9.99961L4.17647 13.1496M1 9.99961L4.17647 6.84961" stroke="#FF3E38" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Log out
            </a>
        </div>
        
    </div>

    <div class="modal fade" id="cancel_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center fw-bold">NEED TO CANCEL YOUR PRE-ORDER?</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <div class="modal-body fs-16 text-center">
                    <div class="text-center text-danger mb-4 error-msg"></div>
                    <p class='text-center mb-24'>We totally understand! To make sure we process your refund to the correct account, please send us an email at <a href="mailto:cancel@quintessencebiologics.com">cancel@quintessencebiologics.com</a> with your order number and contact info.</p>
                    <p class='text-center mb-24'>We're happy to help and will get everything sorted for you!</p>
                    <p class='text-center'>Warm regards,<br> The Quintessence Biologics Team</p>                    
                </div>
            </div>
        </div>
    </div>
@endsection