@extends('producer.producer_layout.app')

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

    @if (Auth::user()->getSubscriptionType() != 'premium' || Auth::user()->getSubscriptionType() != 'basic')
    <header class="producer_header px-4 mb-md-5 mb-4 mt-md-0 mt-3">
        <h4 class="text-sm-start text-center">Welcome to Wo Marketplace</h4>
    </header>
    @endif

    <section class="producer_marketplace">
        @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>
        @elseif (Auth::user()->getSubscriptionType() == 'premium' || Auth::user()->getSubscriptionType() == 'basic')
        <div class="row mx-0 w-100 mb-3 px-3 producer_marketplace_selectors_all">
            <div class="col-md-3 col-sm-4 col-6 mb-3">
                <select class="form-select category_filter" id="genre" name="genre">
                    <option selected>Genre</option>
                    <option value="action">Action</option>
                    <option value="adventure">Adventure</option>
                    <option value="comedy">Comedy</option>
                    <option value="drama">Drama</option>
                    <option value="fantasy">Fantasy</option>
                    <option value="foreign">Foreign</option>
                    <option value="historical">Historical</option>
                    <option value="horrow">Horror</option>
                    <option value="science">Science</option>
                    <option value="thriller">Thriller</option>
                    <option value="western">Western</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-4 col-6 mb-3">
                <select class="form-select category_filter" id="mpaa_rating" name="mpaa_rating">
                    <option selected>Rated</option>
                    <option value="g">G</option>
                    <option value="pg">PG</option>
                    <option value="pg-13">PG-13</option>
                    <option value="r">R</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-4 col-6 mb-3">
                <select class="form-select category_filter" id="budget" name="budget">
                    <option selected>Budget</option>
                    <option value="No Budget < 500K (Independent)">No Budget < 500K (Independent)</option>
                    <option value="Micro Budget 500k > 1m (Independent)">Micro Budget 500k > 1m (Independent)</option>
                    <option value="Ultra Low Budget 1m to 5m (Independent)">Ultra Low Budget 1m to 5m (Independent)</option>
                    <option value="Low Budget 5m to 20m (Independent or Studio)">Low Budget 5m to 20m (Independent or Studio)</option>
                    <option value="Medium Budget 20m - 100m (Studio Backed)">Medium Budget 20m - 100m (Studio Backed)</option>
                    <option value="Big Budget 100m+ (Studio Backed)">Big Budget 100m+ (Studio Backed)</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-4 col-6 mb-3">
                <select class="form-select category_filter" id="timeline">
                    <option selected>Timeline</option>
                    <option value="past">Past</option>
                    <option value="present">Present</option>
                    <option value="future">Future</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-4 col-6 mb-3">
                <select class="form-select category_filter" id="pages" name="pages">
                    <option selected>Pages</option>
                    <option value="90-110">90-110</option>
                    <option value="111-140">111-140</option>
                    <option value="140+">140+</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-4 col-6 mb-3">
                <select class="form-select category_filter" id="where" name="where">
                    <option selected>Where</option>
                    <option value="asia">Asia</option>
                    <option value="europe">Europe</option>
                    <option value="africar">Africa</option>
                    <option value="northamerica">North America</option>
                    <option value="southamerica">South America</option>
                    <option value="antarctica">Antarctica</option>
                    <option value="australia">Australia</option>
                </select>
            </div>
            <div class="col-md-3 col-sm-4 col-6 mb-3">
                <input type="text" class="form-control" name="similarstories" id="similarstories" placeholder="Similar Stories">
            </div>
        </div>
        <div class="row mx-0 w-100 px-3">
            <div class="col-sm-auto text-center {{ Route::is('producer.marketplace') ? 'active' : '' }}">
                <a href="{{ route('producer.marketplace') }}">
                    <span class="me-2">General Available</span>
                </a>
            </div>
            @if (Auth::user()->getSubscriptionType() == 'premium')
            <div class="col-sm-auto text-center mt-sm-0 mt-2 {{ Route::is('producer.marketplace.early_access') ? 'active' : '' }}">
                <a href="{{ route('producer.marketplace.early_access') }}">
                    <span class="me-2 position-relative">First Look Access
                        <span class="position-absolute"></span>
                    </span>
                </a>
            </div>
            @else
            <div class="col-sm-auto text-center mt-sm-0 mt-2">
                <span><i class="fa-solid fa-lock"></i></span>
                <span class="ms-1">First Look Access</span>
            </div>
            @endif
        </div>
        <hr class="mb-3 mt-2 mx-4">
        <div class="row w-100 mx-0 mb-4">
            <div class="col-12">
                <div class="row mx-0 w-100">
                    @foreach ($scripts as $script)
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 producer_marketplace_withscripts">
                        <input type="hidden" name="genre" value="{{ $script->genre }}">
                        <input type="hidden" name="mpaa_rating" value="{{ $script->content_ratings }}">
                        <input type="hidden" name="budget" value="{{ $script->budget }}">
                        <input type="hidden" name="timeline" value="{{ $script->timeline }}">
                        <input type="hidden" name="pages" value="{{ $script->pages }}">
                        <input type="hidden" name="where" value="{{ $script->where }}">
                        <div>
                            <a href="{{ route('producer.script.marketplace', ['script' => $script->id]) }}">
                                <img src="/img/branded-script-image.png" width="100%" height="100%" alt="Profile Picture" class="image-fluid">
                            </a>
                            <div class="ratingshow text-center">Rating: <span>37</span></div>
                        </div>
                        <h6 class="mt-3 mb-1 text-center">
                            <span>{{ $script->title }}</span>
                            <span class="float-end"></span>
                        </h6>
                        <p class="text-center">Uploaded {{ $script->elapsed }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @elseif(Auth::user()->getSubscriptionType() != 'basic' || Auth::user()->getSubscriptionType() != 'premium')
        <div class="row w-100 producer_first_time_marketplace mt-4 mb-5">
            <div class="col-12">
                <h3 class="text-center mb-0">Our Services Has</h3>
                <h3 class="text-center mb-3">Friendly Packages</h3>
                <p class="text-center">Choose plans that might better for your company</p>
                <div class="row w-100 mx-0 mt-5">
                    <div class="col-sm-6 basic_sub">
                        <div class="shadow p-4">
                            <h4>
                                <span>$25</span>
                                <span>/month</span>
                            </h4>
                            <h4>
                                Basic
                            </h4>
                            <p>Avaliable for business with large payments business models</p>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Treatment</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Full Screenplay (6-12 Months)</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Option Extension</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Comittion Work</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>First Look</span>
                            </div>
                            <div class="text-center mt-5">
                                <button type="button" class="border-0" data-name="Basic" data-price="25" id="start_basic_subscription_button" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#producer_premium_2">Get
                                    Started</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 premium_sub mt-sm-0 mt-3">
                        <div class="shadow p-4">
                            <h4>
                                <span>$50</span>
                                <span>/month</span>
                            </h4>
                            <h4>
                                Premium
                            </h4>
                            <p>Avaliable for business with large payments business models</p>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>First Look</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Treatment</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Full Screenplay (6-12 Months)</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Option Extension</span>
                            </div>
                            <div>
                                <i class="fa-solid fa-check"></i>
                                <span>Comittion Work</span>
                            </div>
                            <div class="text-center mt-5">
                                <button type="button" class="border-0" data-name="Premium" data-price="50" data-bs-dismiss="modal" data-bs-toggle="modal" id="start_premium_subscription_button" data-bs-target="#producer_premium_2">Get Started</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </section>

    <!-- Modal for First Time Visit to Dashboard -->
    <div class="modal fade" id="producer_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 exclusive access to our marketplace scripts. 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="#producer_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="producer_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">Create/Connect your Dwolla Wallet</h6>
                    <p class="mb-4 text-center description">Do not miss out on great screenplays when you find them. Connect your WoAccelerator account to your 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>
                        <span class="me-2" id="tab-5"></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>

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

</div>
@endsection