@extends('layouts.front-end.app')

@section('title',auth('customer')->user()->name)

@section('content')
<div class="container">
    <div class="cs_height_45 cs_height_lg_45"></div>
    <ol class="breadcrumb cs_fs_18 mb-0">
      <li class="breadcrumb-item"><a href="{{ route('home')}}">Home</a></li>
      <li class="breadcrumb-item"><a href="{{ route('shop')}}">Shop</a></li>
      <li class="breadcrumb-item active">Details</li>
    </ol>
    <div class="cs_height_30 cs_height_lg_30"></div>
  </div>
  <div class="container">
    <div class="cs_account_wrap">
        @include('web-views.partials._profile-aside')
      <div class="cs_account_content">
        <div class="cs_account_card cs_radius_10">
          <div class="cs_account_card_head">
            <h3 class="cs_fs_18 mb-0">Personal Profile</h3>
            <a class="cs_text_btn cs_accent_color cs_medium" href="{{ route('user-account')}}">
              <span>Edit</span>
            </a>
          </div>
          <div class="cs_account_body">
            <div class="cs_personal_info">
              <p>Name: {{auth('customer')->user()->name}}</p>
              <p>Email: {{auth('customer')->user()->email}}</p>
              <p>Number: +088{{auth('customer')->user()->phone}}</p>
            </div>
          </div>
        </div>
        <div class="cs_height_30 cs_height_lg_30"></div>
        <div class="cs_account_card cs_radius_10">
          <div class="cs_account_card_head cs_type_1">
            <h3 class="cs_fs_18 mb-0">Your Orders</h3>
            <select>
              <option value="1">All Order</option>
              <option value="2">Pending</option>
              <option value="3">Delivered</option>
              <option value="3">Canceled</option>
            </select>
          </div>
          <div class="cs_plr_25">
            <div class="table-responsive">
              <table class="cs_table_1 m-0">
                <thead>
                  <tr>
                    <th>Order</th>
                    <th>Placed On</th>
                    <th>Status</th>
                    <th>Total</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                    @if (count($orders) > 0)
                    @foreach ($orders as $order)
                    <tr>
                        <td><a href="{{ route('account-order-details', $order->id) }}">#{{$order->id}}</a></td>
                        <td>{{\Carbon\Carbon::parse($order->create_at)->format('Y-m-d')}}</td>
                        @if ($order['order_status']=='failed' || $order->order_status == 'canceled')
                        <td>
                            <span class="btn btn-sm btn-danger text-white">
                                {{$order['order_status']}}
                            </span>
                        </td>
                        @elseif($order['order_status']=='confirmed' || $order['order_status']=='processing' || $order['order_status']=='delivered')
                        <td>
                            <span class="btn btn-sm btn-success text-white">
                                {{$order['order_status']}}
                            </span>
                        </td>
                        @else
                        <td>
                            <span class="btn btn-sm btn-info text-white">
                                {{$order['order_status']}}
                            </span>
                        </td>
                        @endif
                        <td>{{\App\CPU\Helpers::currency_converter($order['order_amount'])}}</td>
                        <td class="text-end">
                          <a class="cs_text_btn" href="{{ route('account-order-details',$order->id) }}">
                            <span>View Details</span>
                          </a>
                        </td>
                      </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="5" class="text-center">Order are empty</td>
                    </tr>
                    @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('script')
    <script src="{{asset('assets/back-end/js/croppie.js')}}"></script>
    <script>
        function checkPasswordMatch() {
            var password = $("#password").val();
            var confirmPassword = $("#confirm_password").val();
            $("#message").removeAttr("style");
            $("#message").html("");
            if (confirmPassword == "") {
                $("#message").attr("style", "color:black");
                $("#message").html("Please ReType Password");

            } else if (password == "") {
                $("#message").removeAttr("style");
                $("#message").html("");

            } else if (password != confirmPassword) {
                $("#message").html("Passwords do not match!");
                $("#message").attr("style", "color:red");
            } else if (confirmPassword.length <= 6) {
                $("#message").html("password Must Be 6 Character");
                $("#message").attr("style", "color:red");
            } else {

                $("#message").html("Passwords match.");
                $("#message").attr("style", "color:green");
            }

        }

        $(document).ready(function () {
            $("#confirm_password").keyup(checkPasswordMatch);

        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }

        $("#files").change(function () {
            readURL(this);
        });

    </script>
@endpush