@extends('layouts.dashboard_app')
@section('content')


    <section class="dashboard">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    @if(session('success') || session('error'))
                        <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">
                            {{ session('success') ?? session('error') }}
                        </div>
                    @endif
                    <div class="dashboardCard bgSecondary">
                        <p id="profile-message"></p>
                        <h2 class="heading">user porfile</h2>
                        <div class="dashboardCard-user">
                            @foreach ($profile_img as $image)
                                <img src="{{ $image->getUrl() }}" alt="image" id="userProfileImage" class="img-fluid">
                            @endforeach
                            <div class="dashboardCard-title">
                                <h4>{{ $user->name }}</h4>
                                <a href="#" class="themeBtn" id="fileUploadBtn">Change pic</a>
                                <input type="file" style="display: none;" name="image" id="fileInput">
                            </div>
                        </div>
                        <div class="dashboardInfo">
                            <div class="dashboardInfo-title">
                                <h3>account information</h3>
                                <a href="{{ route('customer.edit.profile') }}" class="themeBtn">change setting</a></a>
                            </div>
                            <div class="dashboardInfo-content">
                                <ul class="infoTitle">
                                    <li>full name:</li>
                                    <li>Email address:</li>
                                    <li>phone number:</li>
                                    <li>packages:</li>
                                </ul>
                                <ul class="infoDescription">
                                    <li>{{ $user->name }}</li>
                                    <li>{{ $user->email }}</li>
                                    <li>{{ $user->phone }}</li>
                                    <li>------</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="purchaseCard">
                        <div class="purchaseCard-info dashboardInfo bgSecondary">
                            <h3><span class="d-block">purchase</span> packages</h3>
                            <h4>{{ $user->plan_name ? $user->plan_name : ''}}</h4>

                            <div class="row">
                                <div class="col-6 infoTitle">price:</div>
                                <div class="col-6 infoTitle">$
                                    @if(isset($user->plan_price) && isset($addonPackagePrice))
                                        {{ $user->plan_price + $addonPackagePrice }}
                                    @elseif(isset($user->plan_price))
                                        {{ $user->plan_price }}
                                    @else
                                        {{ '' }}
                                    @endif

                                @if($user->plan_type == 'Subscription')
                                        <sup>* Month</sup>
                                    @endif</div>
                            </div>

                            <div class="row">
                                <div class="col-6 infoTitle">events:</div>
                                <div class="col-6 infoTitle">05</div>
                            </div>

                            <div class="row">
                                <div class="col-6 infoTitle">hosted ticket link:</div>
                                <div class="col-6 infoTitle">yes</div>
                            </div>
                            <div class="row">
                                <div class="col-6 infoTitle">hosted on maps:</div>
                                <div class="col-6 infoTitle">yes</div>
                            </div>
                            @if($user->plan_type == 'Subscription')
                                <div class="row">
                                    <div class="col-6 infoTitle">Package Expire :</div>
                                    <div class="col-6 infoTitle">{{ $user->expirationDate->format('d-M-y') }}</div>
                                </div>

                                <div class="row">
                                    <div class="col-6 infoTitle"></div>
                                    <div class="col-6 infoTitle">
                                        @if($user->subscriptionExpire == true)
                                            <a href="{{ route('customer.subscription.renew') }}"
                                               class="themeBtn">Renew</a>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                        <a href="{{ route('customer.add.event') }}" class="themeBtn w-100 d-block mt-5">add a event</a>
                        <a href="{{ route('customer.add.shows') }}" class="themeBtn w-100 d-block mt-4">Spotlight Comic</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection


@push('dashboard_script')
    <script>
        $(document).ready(function () {
            $("#fileUploadBtn").on("click", function () {
                $("#fileInput").click();
            });

            $("#fileInput").on("change", function () {
                var selectedFile = $(this).prop("files")[0];

                if (selectedFile) {
                    $('#profile-message').empty()
                    var formData = new FormData();
                    formData.append("image", selectedFile);
                    formData.append("_token", "{{ csrf_token() }}");

                    $.ajax({
                        url: "{{ route('customer.updateProfilePicture') }}",
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            $('#profile-message').html('<div class="alert alert-success">' + response.message + '</div>');
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        },
                        error: function (xhr, status, error) {
                            $('#profile-message').html('<div class="alert alert-danger">' + error + '</div>');
                        }
                    });
                }
            });
        });

    </script>
@endpush