@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_scripts">
        <div class="row mx-0 w-100 mb-5">
            <div class="col-sm-2">
                <select class="form-select" id="screenwriter_scripts_selection">
                    <option class="disabled selected">All</option>
                    <option class="draft">Draft</option>
                    <option class="submitted">Submitted</option>
                    <option class="inreview">In Review</option>
                    <option class="denied">Denied</option>
                </select>
            </div>
            <div class="col-sm-auto mt-sm-0 mt-2">
                <button class="border-0" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#screenwriter_script_to_create">Upload</button>
            </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">
                    @foreach ($scripts as $script)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-12 screenwriterscripts_withscripts {{$script->publish_status}} text-center">
                        <div>
                            <a href="{{ ($script->publish_status == 'draft') ? route('screenwriter.script.draft', $script->id) : 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="{{preg_replace('/_/i','',$script->publish_status)}}btn text-center">{{ucwords(preg_replace('/_/i',' ',$script->publish_status))}}</div>
                        </div>
                        <h6 class="mt-3 mb-1 text-center">
                            <span>{{$script->title}}.pdf</span>
                            @if($script->publish_status == 'draft')
                            <form id="screenwriter_draft_script_delete" action="{{route('screenwriter.script.draft.delete', $script->id)}}" method="post">
                                @csrf
                                <button type="submit" class="border-0 bg-transparent"><i class="fa-solid fa-trash-can"></i></button>
                            </form>
                            @else
                            <span></span>
                            @endif
                        </h6>
                        <p class="text-center mb-1">{{$script->updated_at->diffForHumans()}}</p>
                        @if($script->publish_status == 'accepted')
                        <button type="button" class="border-0 bg-transparent mb-sm-0 mb-3" data-bs-toggle="modal" data-bs-target="#screenwriter_script_payment1_to_marketplace">Publish to Marketplace</button>
                        @endif
                    </div>
                    @endforeach
                </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 screenwriterscripts_withoutscripts text-sm-start text-center mx-auto mt-5">
                No Script Yet
            </div>
            @endif
        </div>
        @if(@session('delete_status') == 'success')
        <div class="row w-100 mx-0 mb-4">
            <div class="col-12">
                <div>
                    <span class="me-3"><i class="fa-solid fa-check"></i></span>
                    <span>Script Deleted</span>
                </div>
            </div>
        </div>
        @endif
    </section>

    <!-- Modal 1-->
    <!-- <div class="modal fade" id="screenwriter_script_to_marketplace" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_script_to_marketplace_Label" 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 px-sm-5 px-2 mt-3">
                    <div class="d-flex justify-content-center">
                        <div class="rounded-circle text-center">
                            <i class="fa-solid fa-check"></i>
                        </div>
                    </div>
                    <h4 class="mt-3 mb-3 text-center">Congratulations</h4>
                    <p class="text-center mb-4">Your script is now listed in marketplace. Click on the below button to see all of your marketplace scripts</p>
                    <div class="mb-3 text-center">
                        <button type="button" class="border-0 w-75" data-bs-toggle="modal">
                            <a href="{{ route('screenwriter.marketplace') }}">View Marketplace Scripts</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div> -->

    <!-- Model For Upload -->
    <div class="modal fade" id="screenwriter_script_to_create" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_script_to_create_Label" aria-hidden="true">
        <div class="modal-dialog modal-lg m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-end pb-1">
                    <button type="button" class="border-0" data-bs-dismiss="modal" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
                </div>
                <div class="modal-body px-sm-3 px-2 pt-0 mt-1">
                    <h5 class="mb-4">Upload Your Script</h5>
                    <h6 class="mb-3">1. Marketplace Details</h6>
                    <form action="{{route('screenwriter.script.upload')}}" method="POST" id="upload_script_form" enctype="multipart/form-data">
                        @csrf
                        <div class="bg-danger p-4 rounded-lg mb-5 text-light text-center d-none auth_failed"></div>
                        <div class="row w-100 mx-0 text-start">
                            <div class="col-sm-4 mb-3">
                                <label for="genre" class="form-label">Genre</label>
                                <select class="form-select" id="genre" name="genre">
                                    <option selected disabled>Select 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 class="text-danger mt-2 fs-6 genre_error"></div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label for="pages" class="form-label">Pages</label>
                                <select class="form-select" id="pages" name="pages">
                                    <option selected disabled>Select Pages</option>
                                    <option value="90-110">90-110</option>
                                    <option value="111-140">111-140</option>
                                    <option value="140+">140+</option>
                                </select>
                                <div class="text-danger mt-2 fs-6 pages_error"></div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label for="mpaa_rating" class="form-label">MPAA Rating</label>
                                <select class="form-select" id="mpaa_rating" name="mpaa_rating">
                                    <option selected disabled>Select MPAA Rating</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 class="text-danger mt-2 fs-6 mpaa_rating_error"></div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label for="budget" class="form-label">Budget</label>
                                <select class="form-select" id="budget" name="budget">
                                    <option selected disabled>Select 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 class="text-danger mt-2 fs-6 budget_error"></div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label for="timeline" class="form-label">Timeline</label>
                                <select class="form-select" id="timeline" name="timeline">
                                    <option selected disabled>Select Timeline</option>
                                    <option value="past">Past</option>
                                    <option value="present">Present</option>
                                    <option value="future">Future</option>
                                </select>
                                <div class="text-danger mt-2 fs-6 timeline_error"></div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label for="where" class="form-label">Where</label>
                                <select class="form-select" id="where" name="where">
                                    <option selected disabled>Select Continent</option>
                                    <option value="asia">Asia</option>
                                    <option value="europe">Europe</option>
                                    <option value="africa">Africa</option>
                                    <option value="north-america">North America</option>
                                    <option value="south-america">South America</option>
                                    <option value="antarctica">Antarctica</option>
                                    <option value="australia">Australia</option>
                                </select>
                                <div class="text-danger mt-2 fs-6 where_error"></div>
                            </div>
                        </div>
                        <h6 class="mt-4 mb-0">2. Script Details</h6>
                        <p class="mb-3">Fill all the information</p>
                        <div class="row w-100 mx-0 text-start">
                            <div class="mb-3">
                                <label for="title" class="form-label">Script Name:</label>
                                <input type="text" class="form-control" id="title" name="title">
                                <div class="text-danger mt-2 fs-6 title_error"></div>
                            </div>
                            <div class="mb-3">
                                <label for="synopsis" class="form-label">Synopsis:</label>
                                <input type="text" class="form-control" id="synopsis" name="synopsis">
                                <div class="text-danger mt-2 fs-6 synopsis_error"></div>
                            </div>
                            <div class="mb-3">
                                <label for="tagline" class="form-label">Tagline:</label>
                                <input type="text" class="form-control" id="tagline" name="tagline">
                                <div class="text-danger mt-2 fs-6 tagline_error"></div>
                            </div>
                            <div class="mb-3">
                                <label for="logline" class="form-label">Logline:</label>
                                <input type="text" class="form-control" id="logline" name="logline">
                                <div class="text-danger mt-2 fs-6 logline_error"></div>
                            </div>
                            <div class="mb-3">
                                <label for="treatment" class="form-label">Treatment(pdf)</label>
                                <input type="file" class="form-control" id="treatment" name="treatment">
                                <div class="text-danger mt-2 fs-6 treatment_error"></div>
                            </div>
                            <div class="mb-3">
                                <label for="script" class="form-label">Script(pdf)</label>
                                <input type="file" class="form-control" id="script" name="script">
                                <div class="text-danger mt-2 fs-6 script_error"></div>
                            </div>
                        </div>
                        <div class="mb-3 d-flex justify-content-between flex-sm-row flex-column">
                            <div class="text-sm-left text-center">
                                <button type="button" class="border-0 bg-transparent w-auto" data-bs-dismiss="modal">Cancel</button>
                            </div>
                            <div class="d-flex flex-sm-row flex-column">
                                <!-- <button type="submit" name="review_upload" class="border-0 bg-transparent me-2 my-sm-0 my-2" data-bs-target="#screenwriter_review_confirmation">Submit for Review</button> -->
                                <button type="submit" name="draft_upload" class="border-0">Save as Draft</button>
                            </div>
                        </div>
                        <p class="text-center">*Note you will not be able to delete or edit the treatment or screenplay once you submit for review</p>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection