@extends('screenwriter.screenwriter_layout.app')

@section('content')
<div class="page_right">

    <!-- HEADER -->

    <header class="screenwriter_header mb-sm-5 mb-1">
        <div class="row mx-0 w-100 mt-sm-0 mt-4 mb-4 mb-sm-0">
            <div class="col-sm-6 text-sm-start text-center order-sm-1 order-2 mt-3 mt-sm-0">
                <h2>
                    <span><i class="fa-solid fa-hand"></i></span>
                    <span>Hey, {{$fullname}}!</span>
                </h2>
            </div>
            <div class="col-sm-6 text-sm-end text-center order-sm-2 order-1">
                <span class="p-2">
                    <a href=""> Apply to the program</a>
                </span>
                <p class="text-sm-end text-center mt-2 mb-0"><a href="https://woaccelerator.com/courses-details.html">Take a course</a></p>
            </div>
        </div>
    </header>

    <section class="screenwriter_dashboard">
        @if(request()->query('subtype') == 'payment')
        <div class="row mx-0 w-100 producer_marketplace_purchase">
            <div class="text-center">
                <i class="fa-solid fa-check" id="payment_info_icon"></i>
                <h6 class="text-center" id="payment_info_text">Payment Done</h6>
                <p class="text-center mb-0" id="payment_info_description">
                    {{ ucfirst(request()->query('type')) }} Membership has been purchased successfully
                </p>
                <a id="payment_info_link" href="{{ route('producer.marketplace') }}?subtype=filled&type={{ request()->query('type') }}"><button type="button" class="border-0">Explore Scripts</button></a>
            </div>
        </div>
        @else
        <div class="row w-100 mx-0">
            <div class="col-md-9 col-12 order-md-1 order-2">
                <div class="row mx-0 w-100 mb-5">
                    <div class="col-sm-6 col-12">
                        <h5> My Current Scripts </h5>
                        @if(!$scripts->isEmpty())
                        <span class="d-sm-none ms-2">
                            <a href="{{ route('screenwriter.scripts') }}">See All</a>
                        </span>
                        @endif
                    </div>
                    @if(!$scripts->isEmpty())
                    <div class="col-6 text-end d-sm-inline d-none">
                        <a href="{{ route('screenwriter.scripts') }}">See All</a>
                    </div>
                    @endif
                </div>
                <div class="row mx-0 w-100">
                    @if(!$scripts->isEmpty())
                    @foreach ($scripts as $script)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-12 screenwriterwithscripts">
                        <div>
                            <a href="">
                                <img src="/img/branded-script-image.png" width="100%" height="100%" alt="Profile Picture" class="image-fluid">
                            </a>
                            <div class="{{($script->publish_status == 'accepted') ? 'live' : preg_replace('/_/i','',$script->publish_status)}}btn text-center">{{($script->publish_status == 'accepted') ? 'Live' : ucwords(preg_replace('/_/i',' ',$script->publish_status))}}</div>
                            @if(!$script->scriptRatings->isEmpty())
                            <div class="ratings">
                                <span>2</span>
                                <span><i class="fa-solid fa-star"></i></span>
                            </div>
                            @endif
                        </div>
                        <h6 class="mt-3 mb-1 text-center">{{$script->title}}.pdf</h6>
                        <p class="text-center">{{$script->updated_at->diffForHumans()}}</p>
                    </div>
                    @endforeach
                    @else
                    <div class="col-12 screenwriterwithoutscripts text-sm-start text-center">
                        <a href="{{route('screenwriter.scripts')}}">
                            <i class="fa-solid fa-plus"></i>
                        </a>
                    </div>
                    @endif
                </div>
                <div class="row w-100 mx-0 mt-5">
                    <div class="col-lg-4 col-md-6 col-12 pe-3 mb-md-0 mb-5">
                        <div class="row mx-0 w-100">
                            <div class="col-12">
                                <h5>
                                    My Current Status
                                </h5>
                            </div>
                        </div>
                        <div class="row w-100 mx-0 mt-md-5 mt-2 mb-4">
                            <div>
                                <span>Draft</span>
                            </div>
                            <div class="rounded-pill p-0 screenwriter_dashboard_denied_status">
                                <div class="h-100 rounded-pill"></div>
                            </div>
                            <div>
                                <span>{{auth()->user()->scripts->where('publish_status','draft')->count()}}/{{auth()->user()->scripts->count()}}</span>
                            </div>
                        </div>
                        <div class="row w-100 mx-0 mt-2 mb-4">
                            <div>
                                <span>Submitted</span>
                            </div>
                            <div class="rounded-pill p-0 screenwriter_dashboard_submitted_status">
                                <div class="h-100 rounded-pill"></div>
                            </div>
                            <div>
                                <span>{{auth()->user()->scripts->where('publish_status','submitted')->count()}}/{{auth()->user()->scripts->count()}}</span>
                            </div>
                        </div>
                        <div class="row w-100 mx-0 mt-2 mb-4">
                            <div>
                                <span>In Review</span>
                            </div>
                            <div class="rounded-pill p-0 screenwriter_dashboard_inreview_status">
                                <div class="h-100 rounded-pill"></div>
                            </div>
                            <div>
                                <span>{{auth()->user()->scripts->where('publish_status','inreview')->count()}}/{{auth()->user()->scripts->count()}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 ps-md-3 ps-0">
                        <div class="row mx-0 w-100">
                            <div class="col-12">
                                <h5>
                                    My Marketplace Status
                                </h5>
                            </div>
                        </div>
                        <div class="row w-100 mx-0 mt-md-5 mt-2 mb-4">
                            <div class="col-md-10 col-auto">
                                <span>Marketplace Submissions</span>
                            </div>
                            <div class="col-md-2 col-auto text-end p-md-auto p-0">
                                <span>{{0}}</span>
                            </div>
                        </div>
                        <div class="row w-100 mx-0 mt-2 mb-4">
                            <div class="col-md-10 col-auto">
                                <span>Script in Marketplace</span>
                            </div>
                            <div class="col-md-2 col-auto text-end p-md-auto p-0">
                                <span>{{$scripts->where('publish_status','accepted')->count()}}</span>
                            </div>
                        </div>
                        <div class="row w-100 mx-0 mt-2 mb-4">
                            @if(!$scripts->isEmpty())
                            <div class="col-12 text-md-end text-start px-0">
                                <a href="{{ route('screenwriter.marketplace') }}" class="text-decoration-none">See All</a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-12 order-md-2 order-1">
                <div class="row mx-0 w-100 flex-column align-items-center text-center mb-4 mb-md-2">
                    <img src="https://picsum.photos/100/100" alt="Profile Picture" class="image-fluid rounded-circle w-50">
                    <h5 class="mt-2">{{$fullname}}</h5>
                    <span class="mt-1"><i class="fa-solid fa-file-pen"></i></span>
                    <span>{{auth()->user()->scripts->count()}}</span>
                    <h6>Total Scripts</h6>
                    <span class="mt-2">
                        <a href="{{ route('screenwriter.settings') }}" class="text-decoration-none">
                            <span><i class="fa-solid fa-pen-to-square"></i></span>
                            <span> Edit Profile</span>
                        </a>
                    </span>
                </div>
                <div class="row mx-0 w-100 screenwriter_checklist text-center justify-content-center mb-4 mb-md-2">
                    <div class="col-10">
                        <div class="mb-3">
                            <span title="Setup your Dwolla Account" class="btn btn-primary me-2 w-75">Dwolla Setup</span>
                            @if(auth()->user()->dwolla_customer_id)
                            <i class="fa fa-check fa-lg text-primary" aria-hidden="true"></i>
                            @else
                            <i class="fa fa-times fa-lg text-danger" aria-hidden="true"></i>
                            @endif
                        </div>
                        <div class="mb-3">
                            <span title="Upload your first script in Draft Mode" class="btn btn-secondary me-2 w-75">Draft Script</span>
                            @if($checklist->first_script)
                            <i class="fa fa-check fa-lg text-secondary" aria-hidden="true"></i>
                            @else
                            <i class="fa fa-times fa-lg text-danger" aria-hidden="true"></i>
                            @endif
                        </div>
                        <div class="mb-3">
                            <span title="Pay your First Monthly Fee" class="btn btn-info text-light me-2 w-75">Monthly Fee</span>
                            @if($checklist->first_fee)
                            <i class="fa fa-check fa-lg text-info" aria-hidden="true"></i>
                            @else
                            <i class="fa fa-times fa-lg text-danger" aria-hidden="true"></i>
                            @endif
                        </div>
                        <div class="mb-3">
                            <span title="Sign your First Contract" class="btn btn-success me-2 w-75">Contract Sign</span>
                            @if($checklist->first_contract)
                            <i class="fa fa-check fa-lg text-success" aria-hidden="true"></i>
                            @else
                            <i class="fa fa-times fa-lg text-danger" aria-hidden="true"></i>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </section>

    <!-- Modal for First Time Visit to Dashboard -->
    <div class="modal fade" id="screenwriter_first_dashboard_experience_1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="Guide to get Started and Setup Correctly" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <div class="d-flex justify-content-center title_header align-items-center">
                        <span>WoAccelerator</span>
                    </div>
                    <h6 class="mt-4 mb-3 text-center">Hi There!
                        <span>👋</span>
                    </h6>
                    <h6 class="mt-3 mb-3 text-center">Welcome to WoAccelerator</h6>
                    <p class="mb-4 text-center">You are just a few steps closer to getting your scripts in front of producers. This brief tour is the perfect guide to get you started and set up correctly.</p>
                    <div class="mb-3 text-center">
                        <button type="button" class="border-0" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#screenwriter_first_dashboard_experience_2">
                            Let's Go
                        </button>
                    </div>
                    <div class="mb-4 text-center">
                        <form action="{{route('checklist.update')}}" method="post">
                            @csrf
                            <button type="submit" class="border-0" data-bs-dismiss="modal">
                                No thanks.I’ve used it before.
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for First Time Visit to Dashboard -->
    <div class="modal fade" id="screenwriter_first_dashboard_experience_2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="Guide to get Started and Setup Correctly" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <div class="d-flex justify-content-center title_header align-items-center">
                        <span>WoAccelerator</span>
                    </div>
                    <h4 class="mb-3 text-center number">1</h4>
                    <h6 class="mt-3 mb-3 text-center title">Connect to the WoAccelerator/Dwolla Wallet</h6>
                    <p class="mb-4 text-center description">Receive payments seamlessly and on time. Connect your WoAccelerator account to Dwolla wallet, or create a new one on your wallet tab here.</p>
                    <div class="mb-3 text-center tabs_bottom">
                        <span class="me-2 active" id="tab-1"></span>
                        <span class="me-2" id="tab-2"></span>
                        <span class="me-2" id="tab-3"></span>
                        <span class="me-2" id="tab-4"></span>
                    </div>
                    <div class="mb-4 text-center">
                        <form action="{{route('checklist.update')}}" method="post">
                            @csrf
                            <button type="button" class="border-0">
                                Next
                            </button>
                            <button type="submit" class="border-0" hidden>
                                <span>Let's Go</span> 
                                <i class="fa-solid fa-arrow-right-long ms-2"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@isset($checklist)
@if($checklist->first_experience)
<script>
    window.addEventListener('load', () => {
        $('#screenwriter_first_dashboard_experience_1').modal('show');
    })
</script>
@endif
@endisset

@endsection