@extends('screenwriter.screenwriter_layout.app')

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

    <!-- HEADER -->

    <header class="screenwriter_header">
        <div class="row mx-0 w-100 mt-sm-0 mt-4 mb-2 mb-sm-0">
            <div class="col-sm-6 text-sm-start text-center order-sm-1 order-2 mt-3 mt-sm-0 mb-sm-0 mb-2">
                <h2>
                    <span>My Scripts</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_marketplace_scripts">
        <div class="row mx-0 w-100 mb-5">
            <div class="col-sm-2 col-auto">
                <select class="form-select" id="screenwriter_marketplacescript_selection">
                    <option class="disabled selected">All</option>
                    <option class="marketplacescripts">Scripts in Marketplace</option>
                    <option class="purchasescripts">Purchase Scripts</option>
                </select>
            </div>
        </div>
        <div class="row w-100 mx-0 mb-4">
            @if(!$scripts->isEmpty())
            <div class="col-md-9 col-12 order-md-1 order-2">
                <div class="row mx-0 w-100 mb-3 screenwriter_marketplace_scripts_heading">
                    <div class="col-12">
                        <span>
                            Scripts in Marketplace
                        </span>
                        <hr class="mt-1 mb-0">
                    </div>
                </div>
                <div class="row mx-0 w-100 screenwriter_marketplace_scripts_content">
                    @foreach ($scripts as $script)
                    <div class="col-lg-4 col-md-6 col-12 screenwritermarketplacescripts_withscripts text-center mt-2">
                        <div>
                            <!-- Write the route with id of script  -->
                            <a href="{{ route('screenwriter.script', $script->id) }}">
                                <img src="/img/branded-script-image.png" width="100%" height="100%" alt="Profile Picture" class="image-fluid">
                            </a>
                            <div class="livebtn text-center">Live
                                <span></span>
                            </div>
                        </div>
                        <h6 class="mt-3 mb-1 text-center">
                            <span>{{$script->title}}.pdf</span>
                            <span></span>
                        </h6>
                        <p class="text-center mb-1">{{$script->created_at->diffForHumans()}}</p>
                    </div>
                    @endforeach
                </div>
                <div class="row mx-0 w-100 mb-3 mt-5 screenwriter_marketplace_purchased_scripts_heading">
                    <div class="col-12">
                        <span>
                            Purchased Scripts
                        </span>
                        <hr class="mt-1 mb-0">
                    </div>
                </div>
                <div class="row mx-0 w-100 screenwriter_marketplace_purchased_scripts_content">
                    @for($i=0; $i < 2; $i++) <div class="col-sm-6 col-12 text-center mt-4 screenwritermarketplace_purchasedscripts">
                        <div class="row mx-0 w-100">
                            <div class="col-xl-6">
                                <div>
                                    <img src="/img/branded-script-image.png" width="100%" height="100%" alt="Profile Picture" class="image-fluid">
                                </div>
                            </div>
                            <div class="col-xl-6 text-center mt-xl-0 mt-2">
                                <h6 class="my-2">DM Compaign 2020.pdf</h6>
                                <p class="mb-2">Purchased From</p>
                                <div>
                                    <span>
                                        <img src="https://picsum.photos/40/40" alt="Profile Picture" class="image-fluid rounded-circle">
                                    </span>
                                    <div>
                                        <span class="ms-1">
                                            <span>Mark Delight</span>
                                            <span> (Disney)</span>
                                        </span>
                                        <span class="ms-1 d-block">Mark@gmail.com</span>
                                    </div>
                                </div>
                                <p class="mt-3 mb-2">Optioned From:</p>
                                <div>
                                    <span>
                                        <img src="https://picsum.photos/40/40" alt="Profile Picture" class="image-fluid rounded-circle">
                                    </span>
                                    <div>
                                        <span class="ms-1">
                                            <span>Julia D</span>
                                            <span> (Disney)</span>
                                        </span>
                                        <span class="ms-1 d-block">Julia@gmail.com</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                @endfor
            </div>
        </div>
        <div class="col-md-3 col-12 order-md-2 order-1">
            <div class="row mx-0 w-100">

            </div>
        </div>
        @else
        <div class="col-auto screenwritermarketplacescripts_withoutscripts text-sm-start text-center mx-auto mt-5">
            No Script in the Marketplace
        </div>
        @endif
</div>
</section>


</div>
@endsection