@extends('layouts.master')
@section('page')
    <title>Profile | {{setting('site.title')}}</title>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                @if (session()->has('success_message'))
                    <div class="alert alert-success">
                        {{ session()->get('success_message') }}
                    </div>
                @endif
                @if(count($errors) > 0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="cm-page-header overlay-dark bg-cover" style="background-image: url({{asset('assets/images/tech-support/optics.jpg')}});">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="block text-white text-center">
                        <h2 class="h1">My Account</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="section cm-services cm-services-02 pt-80 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 mb-5 mb-lg-0">
                    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <a class="nav-link rounded-0 text-white text-left active" data-toggle="pill" href="#account" role="tab" aria-selected="true">
                            My Account
                            <i style="float: right" class="fas fa-user"></i>
                        </a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#order" role="tab" aria-selected="false">
                            Orders
                            <i style="float: right" class="fas fa-shopping-cart"></i>
                        </a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#password" role="tab" aria-selected="false">
                            Password
                            <i style="float: right" class="fas fa-lock"></i>
                        </a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#address" role="tab" aria-selected="false">
                            Addresses
                            <i style="float: right" class="fas fa-address-card"></i>
                        </a>
                        <a class="nav-link rounded-0 text-white text-left" onclick="event.preventDefault();
                        document.getElementById('logout-form').submit();" data-toggle="pill" href="{{ route('logout') }}" role="tab" aria-selected="false">
                            Logout
                            <i style="float: right" class="fas fa-sign-out-alt"></i>
                        </a>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                            @csrf
                        </form>
                    </div>
                </div>
                <div class="col-lg-9 col-12 learts-mb-30">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="account" role="tabpanel">
                            <div class="myaccount-content account-details">
                                <div class="account-details-form">
                                    <form method="POST" action="{{route('profile.update', ['id' =>Auth::user()->id])}}">
                                        @csrf					
                                        <div class="row learts-mb-n30">
                                            <div class="col-12 learts-mb-30">
                                                <label for="email">Email Address <abbr class="required">*</abbr></label>
                                                <input type="email" name="email" id="email" value="{{ Auth::user()->email }}" readonly="">
                                                <p>Changing email address is currently not supported.</p>
                                            </div>
                                            <div class="col-12 learts-mb-30">
                                                <label class="label1" for="display-name">Full Name <abbr class="required">*</abbr></label>
                                                <input type="text" id="display-name" name="name" value="{{ Auth::user()->name }}">
                                            </div>
                                            <div class="col-12 learts-mb-30">
                                                <label class="label1" for="gender">Gender <abbr class="required">*</abbr></label>
                                                <select name="gender" class="form-control">
                                                    @if (Auth::user()->gender)
                                                    <option value="{{Auth::user()->gender}}">{{ Auth::user()->gender }}</option>
                                                    @else
                                                    <option value="0">Select Gender</option>
                                                    @endif
                                                    <option value="male">Male</option>
                                                    <option value="female">Female</option>
                                                </select>
                                            </div>
                                            <div class="col-12 learts-mb-30">
                                                <label class="label1" for="dob">Date of Birth <abbr class="required">*</abbr></label>
                                                <input type="date" name="dob" placeholder="ex: 19/03/1988" value="{{ Auth::user()->date_of_birth }}" class="form-control pull-right">
                                            </div>
                                            <div class="col-12 learts-mb-30">
                                                <label class="label1" for="phone">Phone Number <abbr class="required">*</abbr></label>
                                                <input type="text" id="phone" pattern="[0-9]{8}" min="8" max="8"  name="phone" value="{{ Auth::user()->mobile }}">
                                            </div>
                                            <div class="col-12 learts-mb-30">
                                                <button style="margin-top: 30px; border-radius: 500px;" class="btn btn-dark btn-outline-hover-dark">Save Changes</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="order" role="tabpanel">
                            <div class="myaccount-content order">
                                @if ($orders->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Order Number</th>
                                                <th>Total</th>
                                                <th>Date</th>
                                                <th>Status</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        @foreach ($orders as $order)
                                        <tbody>
                                            <td>{{$order->id}}</td>
                                            <td>${{$order->order_total}}</td>
                                            <td>{{$order->created_at->format('d-m-Y')}}</td>
                                            <td>{{$order->status}}</td>
                                            <td><a class="btn btn-dark btn-outline-hover-dark btn-sm" style="padding: 7px 20px;" href="{{route('order-details',$order->id)}}">View</a></td>
                                        </tbody>
                                        @endforeach
                                    </table>
                                </div>
                                @else
                                <div class="row">
                                    <div class="col-md-12">
                                        <p style="padding: 20px;
                                        background-color: #FAFAFA;">You do not currently have any order. <a href="{{route('shop')}}" style="color: #7d7d7d">Click here to add one.</a></p>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="tab-pane fade" id="password" role="tabpanel">
                            <div class="myaccount-content account-details">
                                <div class="account-details-form">
                                    <form class="form-horizontal" method="POST" action="{{ route('changePassword') }}">
                                        {{ csrf_field() }}
                                        <div class="col-12 learts-mb-30 learts-mt-30">
                                            <fieldset style="padding: 30px 40px;border: 1px solid #EEEEEE;">
                                                <legend>Password change</legend>
                                                <div class="col-12 learts-mb-30 mt-30 form-group{{ $errors->has('current-password') ? ' has-error' : '' }}">
                                                    <label for="new-password">Current Password</label>
                                                    <input id="current-password" type="password" class="form-control" name="current-password" required>
                                                    @if ($errors->has('current-password'))
                                                        <span class="help-block">
                                                            <strong>{{ $errors->first('current-password') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="col-12 learts-mb-30 mt-30 form-group{{ $errors->has('new-password') ? ' has-error' : '' }}">
                                                    <label for="new-password">New password</label>
                                                    <input id="new-password" type="password" class="form-control" name="new-password" required>
                                                    @if ($errors->has('new-password'))
                                                        <span class="help-block">
                                                            <strong>{{ $errors->first('new-password') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="col-12 learts-mb-30 mt-30">
                                                    <label for="new-password-confirm">Confirm password</label>
                                                    <input id="new-password-confirm" type="password" class="form-control" name="new-password_confirmation" required>
                                                </div>
                                            </fieldset>
                                            <div class="col-12 learts-mb-30 mt-30">
                                                <button style="border-radius: 500px" type="submit" class="btn btn-dark btn-outline-hover-dark">
                                                    Save Changes
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="address" role="tabpanel">
                            <div class="myaccount-content account-details">
                                <div class="account-details-form">
                                    <p style="padding-bottom: 3%">The following addresses will be used on the checkout page by default.</p>
                                    
                                    <form class="form-horizontal" method="POST" action="{{ route('address.update', ['id' =>Auth::user()->id]) }}">
                                        {{ csrf_field() }}
                                        <div class="col-12 learts-mb-30 learts-mt-30">
                                            <fieldset style="padding: 30px 40px;border: 1px solid #EEEEEE;">
                                                <legend>Addresses</legend>
                                                <div class="col-12 learts-mb-30 mt-30 form-group">
                                                    <label for="first-address">First Address</label>
                                                    <input id="first-address" type="text" class="form-control" value="{{Auth::user()->first_address}}" name="first-address" required>
                                                    @if ($errors->has('first-address'))
                                                        <span class="help-block">
                                                            <strong>{{ $errors->first('first-address') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="col-12 learts-mb-30 mt-30 form-group">
                                                    <label for="second-address">Second Address</label>
                                                    <input id="second-address" type="text" class="form-control" value="{{Auth::user()->second_address}}" name="second-address">
                                                    @if ($errors->has('second-address'))
                                                        <span class="help-block">
                                                            <strong>{{ $errors->first('second-address') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="col-12 learts-mb-30 mt-30 form-group">
                                                    <label for="city">City</label>
                                                    <input id="city" type="text" class="form-control" value="{{Auth::user()->city}}" name="city" required>
                                                    @if ($errors->has('city'))
                                                        <span class="help-block">
                                                            <strong>{{ $errors->first('city') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="col-12 learts-mb-30 mt-30 form-group">
                                                    <label for="street">Street</label>
                                                    <input id="street" type="text" class="form-control" value="{{Auth::user()->street}}" name="street" required>
                                                    @if ($errors->has('street'))
                                                        <span class="help-block">
                                                            <strong>{{ $errors->first('street') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="col-12 learts-mb-30 mt-30 form-group">
                                                    <label for="building-floor">Building and Floor</label>
                                                    <input id="building-floor" type="text" class="form-control" value="{{Auth::user()->building_and_floor}}" name="building-floor" required>
                                                    @if ($errors->has('building-floor'))
                                                        <span class="help-block">
                                                            <strong>{{ $errors->first('building-floor') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                            </fieldset>
                                            <div class="col-12 learts-mb-30 mt-30">
                                                <button style="border-radius: 500px" type="submit" class="btn btn-dark btn-outline-hover-dark">
                                                    Save Changes
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection()
@push('styles')
<style>
    label{font-size: 16px;font-weight: 500;line-height: 1;display: block;margin-bottom: 10px;letter-spacing: 1.6px;color: #333333;}
    label .required{font-size: 16px;color: #FF0000;}
    input:not([type="checkbox"]):not([type="radio"]){font-size: 16px;font-weight: 400;display: block; width: 100%;padding: 10px 0;color: #333333; border: 2px solid transparent;border-bottom-color: #EDEDED;background-color: transparent;}
    .label1{margin-top: 30px;}
    .form-control{display: block;width: 100%;height: calc(1.5em + .75rem + 2px);padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
    fieldset legend{font-size: 18px;font-weight: 400;line-height: 1;width: auto;margin-top: -9px;margin-bottom: 0;padding: 0 15px;text-transform: uppercase;color: #333333;background-color: #FFFFFF;}
    .cm-services.cm-services-02 .nav-link.active{background-color: #d33733;color: white !important;}
    .cm-services.cm-services-02 .nav-link:hover{background-color: #d33733;color: white !important;}
</style>
@endpush()
@push('scripts')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript">
        $('.date').datepicker({  
        format: 'dd-mm-yyyy'
        });  
    </script>
@endpush()