@extends('layouts.default')
@section('title', 'Goal 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">Goal Details</li>
                    <li class="tab-link" data-tab="tab-2">Savings Details</li>
                </ul>

                <div class="tab-content-main">

                    {{-- goal details tab --}}
                    <div id="tab-1" class="tab-content current">
                        <div class="card-box">
                            <div class="card-box__inner">
                                @if (  ! $details['goal_details']->isEmpty()  )

                                    @foreach ($details['goal_details'] as $goal)

                                        <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 class="col-12">
                                                    <div class="input-details">
                                                        <label>Goal Created At :</label>
                                                        <p class="text-capitalize">
                                                            @php
                                                                $cr_date = new DateTime($goal->created_at);
                                                            @endphp
                                                            {{ $cr_date->format('d-m-Y') }}
                                                        </p>
                                                    </div>
                                                </div>

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

                                    @endforeach

                                @else
                                    <h4 class="alert alert-danger text-center">Data Not Found...</h4>
                                @endif
                            </div>
                        </div>

                        <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 Amount :</label>
                                                <p>
                                                    {{ $details['goal_details'][0]['gl_amount'] }}
                                                </p>
                                            </div>
                                        </div>

                                        @if ( empty($details["exceeding_amount"]) )
                                            <div class="col-12">
                                                <div class="input-details">
                                                    <label>Daily Savings :</label>
                                                    <p>
                                                        {{ round($details['daily_savings'], 2) }}
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="input-details">
                                                    <label>Weekly Savings :</label>
                                                    <p>
                                                        {{ round($details['weekly_savings'], 2) }}
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="input-details">
                                                    <label>Monthly Savings :</label>
                                                    <p>
                                                        {{ round($details['monthly_savings'], 2) }}
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="input-details">
                                                    <label>Remaining Amount :</label>
                                                    <p>
                                                        {{ round($details['remaining_amount'], 2) }}
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="input-details">
                                                    <label>Remaining Days :</label>
                                                    <p>
                                                        {{ $details['remaining_days'] }}
                                                    </p>
                                                </div>
                                            </div>
                                        @endif

                                        @if ( ! empty($details["exceeding_amount"]) )
                                            <div class="col-12">
                                                <div class="input-details">
                                                    <label>Exceeding Amount :</label>
                                                    <p>
                                                        {{ round($details['exceeding_amount'], 2) }}
                                                    </p>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="col-12">
                                            <div class="input-details">
                                                <label>Percentage :</label>

                                                @if ( $details['percentage'] <=  0 && $details['percentage'] <= 40 )
                                                    <p>
                                                        <span class="badge badge-danger" style="width: 10%">
                                                            {{ round($details['percentage'], 2) }}%
                                                        </span>
                                                    </p>

                                                @elseif( ( $details["percentage"] <= 80 && $details["percentage"]>= 40 ) )
                                                    <p>
                                                        <span class="badge badge-warning"
                                                            style="width: {{ $details['percentage'] }}%">
                                                            {{ round($details['percentage'], 2) }}%
                                                        </span>
                                                    </p>

                                                @else
                                                    <p>
                                                        <span class="badge badge-success" style="width: {{ $details['percentage'] }}%">
                                                            {{ round($details['percentage'], 2) }}%
                                                        </span>
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    {{-- savings details tab --}}
                    <div id="tab-2" class="tab-content">
                        {{-- <div class="table-main  table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <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->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="4">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>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