@extends('layouts.default')
@section('title', 'User Details')
@section('content')
    <div class="content-main__inner">
        @if ($errors->any())
            <div class="alert alert-danger fade show" role="alert">
                <div class="alert-text">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="la la-close"></i></span>
                    </button>
                </div>
            </div>
        @endif
        @if (session()->has('message'))
            <div class="alert alert-success fade show" role="alert">
                <div class="alert-text">{{ session()->get('message') }}</div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="la la-close"></i></span>
                    </button>
                </div>
            </div>
        @endif

        <div class="card-box__content">
            <div class="tab-main tab--horizontal">
                <ul class="tabs">
                    <li class="tab-link current" data-tab="tab-1">User Details</li>
                    <li class="tab-link" data-tab="tab-2">Goal Details</li>
                    <li class="tab-link" data-tab="tab-3">Savings Details</li>
                </ul>

                {{-- user details tab --}}
                <div class="tab-content-main">
                    <div id="tab-1" class="tab-content current">
                        <div class="row">

                            <div class="col-12">
                                <div class="input-field">
                                    <label>User Name :</label>
                                    <input type="text" value="{{ $details['user_details'][0]['u_name'] ?? '' }}" disabled>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="input-field">
                                    <label>User Email :</label>
                                    <input type="text" value="{{ $details['user_details'][0]['u_email'] ?? '' }}"
                                        disabled>
                                </div>
                            </div>

                            {{-- <div class="col-12">
                                <div class="input-field">
                                    <label>Overall Percentage :</label>
                                    <input type="text" value="{{ $details['percentage'] ?? '' }}"
                                        disabled>
                                </div>
                            </div> --}}
                        </div>
                    </div>

                    {{-- goal details tab --}}
                    <div id="tab-2" class="tab-content">
                        <div class="row">
                            <div class="col-12">
                                <div class="card-box">
                                    <div class="card-box__inner">
                                        <div class="card-box__content">
                                            <h6><label>Overall Percentage : <span class="badge badge-info"> {{ $details["percentage"] }}% </span></label></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if ( ! $details['goal_details']->isEmpty() )
                                @foreach ($details['goal_details'] as $goal)
                                    <div class="col-6">
                                        <div class="card-box">
                                            <div class="card-box__inner">
                                                <div class="card-box__content">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="input-details">
                                                                <label>Goal Image :</label>
                                                                <p>
                                                                    <img src="{{ !empty($goal->gl_image) ? $goal->gl_image_path : asset('goal/default.png') }}" style="widht: 70px!important; height: 70px;">
                                                                </p>
                                                            </div>
                                                        </div>

                                                        <div class="col-12">
                                                            <div class="input-details">
                                                                <label>Goal Name :</label>
                                                                <p class="text-capitalize">
                                                                    {{ $goal->gl_name }}
                                                                </p>
                                                            </div>
                                                        </div>

                                                        <div class="col-12">
                                                            <div class="input-details">
                                                                <label>Goal Amount :</label>
                                                                <p class="text-capitalize">
                                                                    {{ $goal->gl_amount }}
                                                                </p>
                                                            </div>
                                                        </div>

                                                        <div class="col-12">
                                                            <div class="input-details">
                                                                <label>Goal Type :</label>
                                                                <p class="text-capitalize">
                                                                    {{ $goal->gl_type }}
                                                                </p>
                                                            </div>
                                                        </div>

                                                        <div class="col-12">
                                                            <div class="input-details">
                                                                <label>Goal Target Date :</label>
                                                                <p class="text-capitalize">
                                                                    @php
                                                                        $date = new DateTime($goal->gl_target_date);
                                                                    @endphp
                                                                    {{ $date->format('d-m-Y') }}
                                                                </p>
                                                            </div>
                                                        </div>

                                                        <div class="col-12">
                                                            <div class="input-details">
                                                                <label>Goal Days :</label>
                                                                <p class="text-capitalize">
                                                                    {{ $goal->gl_days ?? '-' }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-12">
                                    <div class="alert alert-custom alert-notice alert-light-danger fade show mb-3">
                                        <div class="alert-icon"><i class="fal fa-exclamation-triangle"></i></div>
                                        <div class="alert-text">Data Not Found...</div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>


                    {{-- savings details tab --}}
                    <div id="tab-3" class="tab-content">
                        {{-- <div class="table-main  table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Goal Name</th>
                                        <th>Saving Note</th>
                                        <th>Saving Amount</th>
                                        <th>Saving Type</th>
                                        <th>Saving Date</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @if ( ! $details['savings_details']->isEmpty() )

                                        @foreach ($details['savings_details'] as $savings)
                                            <tr>
                                                <td>
                                                    <span class="text-capitalize">
                                                        {{ $savings->gl_name }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="text-capitalize">
                                                        {{ $savings->sv_note }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="text-capitalize">
                                                        {{ $savings->sv_amount }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="text-capitalize">
                                                        {{ $savings->sv_type }}
                                                    </span>
                                                </td>
                                                <td>
                                                    @php
                                                        $date = new DateTime($savings->sv_date);
                                                    @endphp
                                                    <span class="text-capitalize">
                                                        {{ $date->format('d-m-Y') }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach

                                    @else
                                        <tr>
                                            <td class="text-center" colspan="5">Data Not Found...</td>
                                        </tr>
                                    @endif

                                </tbody>
                            </table>
                        </div> --}}

                        <div class="card-box" style="padding-bottom: 30px;">
                            <div class="card-box__inner">
                                <div class="card-box__header">
                                    <h5>Savings Timeline</h5>
                                </div>
                                <div class="card-box__content">

                                    @php
                                        $count = count($details['savings_details']);
                                    @endphp

                                    @if ( ! $details['savings_details']->isEmpty() )
                                        <div class="timeline timeline-4">
                                            <div class="timeline-bar"></div>
                                            <div class="timeline-items">
                                                @php $i = 0; @endphp

                                                @foreach ( $details['savings_details'] as $savings )

                                                    @php
                                                        $i++;

                                                        if ( $i % 2 == 0 ) {

                                                            $position = 'timeline-item-right';
                                                            $bg_class = 'bg-success';
                                                            $txt_class = 'text-warning';

                                                        } else {

                                                            $position = 'timeline-item-left';
                                                            $bg_class = 'bg-danger';
                                                            $txt_class = 'text-dark';
                                                        }
                                                    @endphp

                                                    <div class="timeline-item {{ $position }}">
                                                        <div class="timeline-badge">
                                                            <div class="{{ $bg_class }}"></div>
                                                        </div>

                                                        <div class="timeline-label">
                                                            <span class="{{ $txt_class }} font-weight-bold">
                                                                @php
                                                                    $date = new DateTime($savings->updated_at);
                                                                @endphp
                                                                {{ $date->format('d-m-Y H:i:s A') }}
                                                            </span>
                                                        </div>

                                                        <div class="timeline-content">
                                                            <div class="row">
                                                                <div class="col-12">
                                                                    <div class="input-details">
                                                                        <label>Goal Name :</label>
                                                                        <p class="text-capitalize">
                                                                            {{ $savings->gl_name }}
                                                                        </p>
                                                                    </div>
                                                                </div>

                                                                <div class="col-12">
                                                                    <div class="input-details">
                                                                        <label>Saving Note :</label>
                                                                        <p class="text-capitalize">
                                                                            {{ $savings->sv_note }}
                                                                        </p>
                                                                    </div>
                                                                </div>

                                                                <div class="col-12">
                                                                    <div class="input-details">
                                                                        <label>Saving Amount :</label>
                                                                        <p class="text-capitalize">
                                                                            {{ $savings->sv_amount }}
                                                                        </p>
                                                                    </div>
                                                                </div>

                                                                <div class="col-12">
                                                                    <div class="input-details">
                                                                        <label>Saving Type :</label>
                                                                        <p class="text-capitalize">
                                                                            {{ $savings->sv_type }}
                                                                        </p>
                                                                    </div>
                                                                </div>

                                                                <div class="col-12">
                                                                    <div class="input-details">
                                                                        <label>Saving Date :</label>
                                                                        <p class="text-capitalize">
                                                                            @php
                                                                                $date = new DateTime($savings->sv_date);
                                                                            @endphp
                                                                            <span class="text-capitalize">
                                                                                {{ $date->format('d-m-Y') }}
                                                                            </span>
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>

                                    @else
                                        <div class="alert alert-custom alert-notice alert-light-danger fade show mb-3">
                                            <div class="alert-icon"><i class="fal fa-exclamation-triangle"></i></div>
                                            <div class="alert-text">Timeline isn't available!</div>
                                        </div>
                                    @endif

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

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('pagespecificscripts')
    <script src="{{ asset('js/goal-list.js') }}"></script>
@endsection