@extends('layouts.admin')
@section('css')
<link rel="stylesheet" href="{{ asset_public_admin('css/select2.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.css" integrity="sha512-7uSoC3grlnRktCWoO4LjHMjotq8gf9XDFQerPuaph+cqR7JC9XKGdvN+UwZMC14aAaBDItdRj3DcSDs4kMWUgg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .dropzone .dz-preview .dz-progress {
        top: 115% !important;
        background: rgba(0,0,255,90%) !important;
    }
    #actions {
        margin: 0 0 2em;
    }
    .progress {
        width: 10rem;
    }

    /* Mimic table appearance */
    div.table {
        display: table;
    }
    div.table .file-row {
        display: table-row;
    }
    div.table .file-row > div {
        display: table-cell;
        vertical-align: top;
        border-top: 1px solid #ddd;
        padding: 8px;
    }
    div.table .file-row:nth-child(odd) {
        background: #f9f9f9;
    }

    /* The total progress gets shown by event listeners */
    #total-progress {
        opacity: 0;
        transition: opacity 0.3s linear;
    }

    /* Hide the progress bar when finished */
    #previews .file-row.dz-success .progress {
        opacity: 0;
        transition: opacity 0.3s linear;
    }

    /* Hide the delete button initially */
    #previews .file-row .delete {
        display: none;
    }

    /* Hide the start and cancel buttons and show the delete button */

    #previews .file-row.dz-success .start,
    #previews .file-row.dz-success .cancel {
        display: none;
    }
    #previews .file-row.dz-success .delete {
        display: block;
    }
</style>
@endsection
@section('content')
<form class="forms-sample" action="{{ route('admin.title.store') }}" method="POST" id="title-form" enctype="multipart/form-data" autocomplete="off">
    @csrf
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="card">
                <div class="row card-body">
                    <div class="col-xl-6">
                        <h4 class="card-title">New Title</h4>

                        <div class="search-drp savedSearches">
                            <div class="searchInput"><input type="text" class="dropdownsearch" id="title"></div>
                            <ul></ul>
                        </div>

                        <div class="form-group title-details">
                            <div class="details"></div>
                            <textarea class="d-none" id="moviedata" name="moviedata"></textarea>
                        </div>
                        <div class="modal fade" id="updatepopup" tabindex="-1" role="dialog" aria-labelledby="updatepopupLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="updatepopupLabel">Update Manual</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body row" id="updatedata">
                                        <div class="form-group col-sm-6">
                                            <label for="title">Title</label>
                                            <input type="text" class="form-control" id="titlename" placeholder="Title" name="title">
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label for="url">Trailer Url</label>
                                            <input type="text" class="form-control" id="url" placeholder="url" name="url">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="type">Type</label>
                                            <div class="d-flex" id="typeContainer">
                                                <div class="form-check form-check-primary">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" name="type" value="1" id="movie">
                                                        Movie
                                                        <i class="input-helper"></i>
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-primary ml-3">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" value="2" name="type" id="series">
                                                        Series
                                                        <i class="input-helper"></i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-6">
                                            <label for=""> </label>
                                            <div class="d-flex">
                                                <div class="form-check form-check-primary">
                                                    <label class="form-check-label">
                                                        <input type="checkbox" class="form-check-input" name="featured" value="1" id="featured">
                                                        Featured
                                                        <i class="input-helper"></i>
                                                    </label>
                                                </div>
                                                <div class="form-check form-check-primary ml-3">
                                                    <label class="form-check-label">
                                                        <input type="checkbox" class="form-check-input" value="1" name="kid_friendly" id="kid_friendly">
                                                        Kid Friendly
                                                        <i class="input-helper"></i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-12">
                                            <label for="year">Description</label>
                                            <textarea class="form-control" name="description" id="description" rows="4"></textarea>
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="mpaa_rating">MPAA Rating</label>
                                            <select class="form-control" name="mpaa_rating" id="mpaa_rating">
                                                @foreach ($mpaa as $key => $rating)
                                                    <option value="{{ $rating }}" >{{ $rating }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="title">Genres</label>
                                            <select class="form-control select2" name="genres[]" id="genres" multiple>
                                                <option value="">Genres</option>
                                                @if ($genres)
                                                    @foreach ($genres as $item)
                                                        <option value="{{ $item->title }}">{{ $item->title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="year">Year</label>
                                            <input type="text" class="form-control onlyNumber" id="year" placeholder="year" name="year">
                                        </div>

                                        <div class="form-group col-6 actorsform">
                                            <label for="actors">Actors</label>
                                            <input type="text" class="form-control" id="actors" placeholder="actors" name="actors">
                                        </div>
                                        <div class="form-group col-6 directorform d-none">
                                            <label for="director">Director</label>
                                            <input type="text" class="form-control" id="director" placeholder="director" name="director">
                                        </div>
                                        <div class="form-group col-6 producersform d-none">
                                            <label for="producers">Producers</label>
                                            <input type="text" class="form-control" id="producers" placeholder="producers" name="producers">
                                        </div>
                                        <div class="form-group col-6 writersform d-none">
                                            <label for="writers">Writers</label>
                                            <input type="text" class="form-control" id="writers" placeholder="writers" name="writers">
                                        </div>
                                        <div class="form-group col-6 creatorsform d-none">
                                            <label for="creators">Creators</label>
                                            <input type="text" class="form-control" id="creators" placeholder="creators" name="creators">
                                        </div>

                                        <div class="form-group col-6">
                                            <label for="running_time">Running Time</label>
                                            <input type="text" class="form-control" id="running_time" placeholder="Running Time" name="running_time">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="release_date">Release Date</label>
                                            <input type="date" class="form-control" id="release_date" placeholder="Release Date" name="release_date">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="ratings">Ratings</label>
                                            <input type="text" class="form-control" id="ratings" placeholder="Ratings" name="ratings">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="certificate">Certificates</label>
                                            <input type="text" class="form-control" id="certificate" placeholder="Certificate" name="certificate">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="certificate">Country</label>
                                            <input type="text" class="form-control" id="country" placeholder="Country" name="country">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="Season">Seasons</label>
                                            <input type="text" class="form-control" id="Season" placeholder="Season" name="season">
                                        </div>

                                        <div class="form-group col-12">
                                            <label>Poster</label>
                                            <input type="file" name="poster" class="image" id="image" accept="image/*">
                                        </div>
                                        <div class="form-group col-12">
                                            <label>Images</label>
                                            <div id="actions" class="row">
                                                <div class="col-lg-7">
                                                    <span class="btn btn-success fileinput-button dz-clickable">Add files...</span>
                                                    <button type="button" class="btn btn-primary start d-none">Start upload</button>
                                                    <button type="button" class="btn btn-warning cancel d-none">Cancel upload</button>
                                                </div>
                                                <div class="col-lg-5">
                                                    <span class="fileupload-process">
                                                        <div id="total-progress" class="progress active" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="opacity: 0;">
                                                            <div class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" style="width: 100%;" data-dz-uploadprogress=""></div>
                                                        </div>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="table table-striped" class="files" id="previews">
                                                <div id="template" class="file-row">
                                                    <div>
                                                        <span class="preview"><img data-dz-thumbnail/></span>
                                                    </div>
                                                    <div>
                                                        <p class="name" data-dz-name></p>
                                                        <strong class="error text-danger" data-dz-errormessage></strong>
                                                    </div>
                                                    <div>
                                                        <p class="size" data-dz-size></p>
                                                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        {{-- <button type="button" class="btn btn-primary start">Start</button>
                                                        <button type="button" data-dz-remove class="btn btn-warning cancel">Cancel</button> --}}
                                                        <button type="button" class="btn btn-danger delete">Delete</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="uploadedimg"></div>
                                        </div>
                                        <div class="col-12 text-center">
                                            <button type="buttom" class="btn btn-primary mr-2" data-dismiss="modal" aria-label="Close">Submit</button>
                                            {{-- <button class="btn btn-light" data-dismiss="modal" aria-label="Close">Cancel</button> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6 d-none" id="seasonepisode">
                        <h4 class="card-title">Season Episode <a class="edit-icon seasonpopup" data-toggle="modal" data-target="#seasonpopup" data-backdrop="static" data-keyboard="false" style="float:right"><span class="mdi mdi-lead-pencil"></span></a></h4>
                        <div class="container">
                            <div id="accordion" class="py-5"></div>
                        </div>
                        <div class="modal fade" id="seasonpopup" tabindex="-1" role="dialog" aria-labelledby="seasonpopupLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="seasonpopupLabel">Update Season</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div id="accordion1"></div>
                                        <div class="text-center">
                                            <hr>
                                            <button type="buttom" class="btn btn-primary mr-2" data-dismiss="modal" aria-label="Close">Submit</button>
                                            {{-- <button class="btn btn-light" data-dismiss="modal" aria-label="Close">Cancel</button> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-12 title-details savebtn d-none">
                        <div class="details-container mt-0 text-center">
                            <button type="submit" name="submit" class="btn btn-primary save-title">Save </button>
                            <a href="route('admin.title.index')" class="btn btn-warning">Cancel </a>
                        </div>
                    </div>
                    {{-- <div class="col-xl-6 manualupdate text-right">
                        <button type="submit" name="submit" class="btn btn-primary updatepopup" data-toggle="modal" data-target="#updatepopup" data-backdrop="static" data-keyboard="false">Manual Update </button>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</form>
        <div class="menualupdate">
        {{-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updatepopup" data-whatever="@mdo">Open modal for @mdo</button> --}}

        {{-- <div class="modal fade" id="updatepopup" tabindex="-1" role="dialog" aria-labelledby="updatepopupLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="updatepopupLabel">Update Manual</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="updatedata">
                        <form class="forms-sample form-row" action="{{ route('admin.title.storemanual') }}" method="POST" id="title-form" enctype="multipart/form-data">
                            @csrf
                                <div class="form-group col-sm-6">
                                    <label for="title">Title</label>
                                    <input type="text" class="form-control" id="titlename" placeholder="Title" name="title">
                                    <textarea class="d-none" id="moviedata1" name="moviedata"></textarea>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label for="url">Trailer Url</label>
                                    <input type="text" class="form-control" id="url" placeholder="url" name="url">
                                </div>
                                <div class="form-group col-6">
                                    <label for="type">Type</label>
                                    <div class="d-flex" id="typeContainer">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="type" id="movie">
                                                Movie
                                                <i class="input-helper"></i>
                                            </label>
                                        </div>
                                        <div class="form-check form-check-primary ml-3">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" value="2" name="type" id="series">
                                                Series
                                                <i class="input-helper"></i>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-6">
                                    <label for=""> </label>
                                    <div class="d-flex">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="featured" value="1" id="featured">
                                                Featured
                                                <i class="input-helper"></i>
                                            </label>
                                        </div>
                                        <div class="form-check form-check-primary ml-3">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" value="1" name="kid_friendly" id="kid_friendly">
                                                Kid Friendly
                                                <i class="input-helper"></i>
                                            </label>
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group col-12">
                                    <label for="year">Description</label>
                                    <textarea class="form-control" name="description" id="description" rows="4"></textarea>
                                </div>

                                <div class="form-group col-6">
                                    <label for="mpaa_rating">MPAA Rating</label>
                                    <select class="form-control" name="mpaa_rating" id="mpaa_rating">
                                        @foreach ($mpaa as $key => $rating)
                                            <option value="{{ $rating }}" >{{ $rating }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <label for="title">Genres</label>
                                    <select class="form-control select2" name="genres[]" id="genres" multiple>
                                        <option value="">Genres</option>
                                        @if ($genres)
                                            @foreach ($genres as $item)
                                                <option value="{{ $item->title }}">{{ $item->title }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <label for="year">Year</label>
                                    <input type="text" class="form-control onlyNumber" id="year" placeholder="year" name="year">
                                </div>

                                <div class="form-group col-6 actorsform">
                                    <label for="actors">Actors</label>
                                    <input type="text" class="form-control" id="actors" placeholder="actors" name="actors">
                                </div>
                                <div class="form-group col-6 directorform">
                                    <label for="director">Director</label>
                                    <input type="text" class="form-control" id="director" placeholder="director" name="director">
                                </div>
                                <div class="form-group col-6 producersform">
                                    <label for="producers">Producers</label>
                                    <input type="text" class="form-control" id="producers" placeholder="producers" name="producers">
                                </div>
                                <div class="form-group col-6 writersform">
                                    <label for="writers">Writers</label>
                                    <input type="text" class="form-control" id="writers" placeholder="writers" name="writers">
                                </div>
                                <div class="form-group col-6 creatorsform">
                                    <label for="writers">Creators</label>
                                    <input type="text" class="form-control" id="creators" placeholder="creators" name="creators">
                                </div>

                                <div class="form-group col-6">
                                    <label for="running_time">Running Time</label>
                                    <input type="text" class="form-control" id="running_time" placeholder="Running Time" name="running_time">
                                </div>
                                <div class="form-group col-6">
                                    <label for="release_date">Release Date</label>
                                    <input type="date" class="form-control" id="release_date" placeholder="Release Date" name="release_date">
                                </div>
                                <div class="form-group col-6">
                                    <label for="ratings">Ratings</label>
                                    <input type="text" class="form-control" id="ratings" placeholder="Ratings" name="ratings">
                                </div>
                                <div class="form-group col-6">
                                    <label for="certificate">Certificates</label>
                                    <input type="text" class="form-control" id="certificate" placeholder="Certificate" name="certificate">
                                </div>
                                <div class="form-group col-6">
                                    <label for="certificate">Country</label>
                                    <input type="text" class="form-control" id="country" placeholder="Country" name="country">
                                </div>

                                <div class="form-group col-12">
                                    <label>Poster</label>
                                    <input type="file" name="poster" class="image" id="image" accept="image/*">
                                </div>
                                <div class="form-group col-12">
                                    <label>Images</label>

                                    <div id="actions" class="row">
                                        <div class="col-lg-7">
                                            <span class="btn btn-success fileinput-button dz-clickable">Add files...</span>
                                            <button type="button" class="btn btn-primary start">Start upload</button>
                                            <button type="button" class="btn btn-warning cancel">Cancel upload</button>
                                        </div>

                                        <div class="col-lg-5">
                                            <span class="fileupload-process">
                                                <div id="total-progress" class="progress active" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="opacity: 0;">
                                                    <div class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" style="width: 100%;" data-dz-uploadprogress=""></div>
                                                </div>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="table table-striped" class="files" id="previews">
                                        <div id="template" class="file-row">
                                            <div>
                                                <span class="preview"><img data-dz-thumbnail/></span>
                                            </div>
                                            <div>
                                                <p class="name" data-dz-name></p>
                                                <strong class="error text-danger" data-dz-errormessage></strong>
                                            </div>
                                            <div>
                                                <p class="size" data-dz-size></p>
                                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                                </div>
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-primary start">Start</button>
                                                <button type="button" data-dz-remove class="btn btn-warning cancel">Cancel</button>
                                                <button type="button" class="btn btn-danger delete">Delete</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="uploadedimg"></div>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                    <button class="btn btn-light" data-dismiss="modal" aria-label="Close">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.js" integrity="sha512-9e9rr82F9BPzG81+6UrwWLFj8ZLf59jnuIA/tIf8dEGoQVu7l5qvr02G/BiAabsFOYrIUTMslVN+iDYuszftVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset_public_admin('js/select2.min.js') }}"></script>

    <script>
        var previewNode = document.querySelector("#template");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone('#updatepopup', {
            url: "{{ route('admin.title.uploadfile') }}",
            thumbnailWidth: 60,
            thumbnailHeight: 60,
            parallelUploads: 20,
            previewTemplate: previewTemplate,
            autoQueue: true,
            previewsContainer: "#previews",
            clickable: ".fileinput-button",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // myDropzone.on("addedfile", function(file) {
        //     file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
        // });

        myDropzone.on("totaluploadprogress", function(progress) {
            document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
        });

        myDropzone.on("sending", function(file) {
            document.querySelector("#total-progress").style.opacity = "1";
            // file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
        });
        myDropzone.on("success", function(file, response) {
            $('#uploadedimg').append('<input type="hidden" name="images[]" class="images" value="'+ response +'">');
        });

        myDropzone.on("queuecomplete", function(progress) {
            document.querySelector("#total-progress").style.opacity = "0";
        });

        // document.querySelector("#actions .start").onclick = function() {
        //     myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
        // };
        // document.querySelector("#actions .cancel").onclick = function() {
        //     myDropzone.removeAllFiles(true);
        // };
        // document.querySelector("#actions .delete").onclick = function() {
        //     // myDropzone.removeFile(true);
        // };

        var s2 = $('.select2').select2();
        var delayTimer;
        var ajaxReq = searchTitleAjaxReq = 'ToCancelPrevReq';
        var apikey = "k_74q8ivck";

        $('#exampleModal').on('show.bs.modal')

        $(document).ready(function() {
            $(window).keydown(function(event){
                if(event.keyCode == 13) {
                event.preventDefault();
                return false;
                }
            });
        });

        $(function() {
            $("#title-form").validate({
                rules: {
                    title: "required",
                    url: {
                        required: true,
                    },
                },
                messages: {
                    title: "Please enter title",
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        });

        $('.dropdownsearch').on('keyup', function() {
            // Do the ajax stuff
            var rr = $(this);
            var value = rr.val();
            if(value.length > 3) {
                clearTimeout(delayTimer);
                delayTimer = setTimeout(function() {
                    $('.title-details .details').empty();
                    var $parent = rr.closest('.search-drp');
                    var results = 0;
                    $('#title').css('background-image', 'url(' + url + '/admin_assets/images/preloader-white.gif)').css('background-repeat', 'no-repeat').css('background-position', 'right');
                    $('.search-drp ul').hide();
                    var getTarget = rr.parents(".searchInput").next('ul');
                    getTarget.empty();
                    getTarget.show();
                    getTarget.children('.searchInput').children('input').focus();

                    var api_url = "https://imdb-api.com/en/API/AdvancedSearch/"+ apikey +"?title="+value;
                    searchTitleAjaxReq = $.ajax({
                        type: "get",
                        url: api_url,
                        beforeSend: function() {
                            if (searchTitleAjaxReq != 'ToCancelPrevReq' && searchTitleAjaxReq.readyState < 4) {
                                searchTitleAjaxReq.abort();
                            }
                        },
                        dataType: "json",
                        success: function(data) {
                            getTarget.empty();
                            $.each(data.results, function(k, v) {
                                var image = v.image;
                                getTarget.append(
                                    `<li><a href="javascript:void(0)" class="DropdownliValue" data-id="${v.id}"><img src="${image}" class="img-fluid" alt="123" /> <div class="DropdownliValuediv"><span>${v.title}</span> <span>${v.description}</span><span>${v.stars}</span></div></a></li>`
                                )
                            });
                            $('#title').css('background-image', 'none');
                        }
                    });
                }, 1000);
            }
        });

        $(document).on('click', '.search-drp ul li', function() {
            var line_text = $(this).children("a").text();
            $(this).parent('ul').prev('.searchInput').find(".dropdownsearch").val(line_text);
            $(this).parent('ul').hide();
        });

        $(document).on('click','.delete', function (e){
            var tt = $(this);
            var src = $(this).closest('.dz-image-preview').find('img').prop('src');
            var images = $('.images');
            $.each(images, function(index, image) {
                if(src == image.value){
                    image.remove();
                    tt.closest('.dz-image-preview').remove();
                }
            });
        });

        // var formData = [];
        $(document).on('click', '.DropdownliValue, .card-title', function() {
        // $(document).on('click', '.card-title', function() {
            $('.title-details .details').empty();
            $('#DropdownTitle').hide();
            $('#title').css('background-image', 'url(' + url + '/admin_assets/images/preloader-white.gif)').css('background-repeat', 'no-repeat').css('background-position', 'right');
            var title_id = $(this).data('id');
            // var api_url = "https://imdb-api.com/en/API/Title/"+ apikey +"/" + title_id + "/FullActor,FullCast,Posters,Images,Trailer";
            var api_url = "http://192.168.0.17:8001/admin_assets/data.json";
            $.ajax({
                type: "get",
                url: api_url,
                dataType: "json",
                success: function(data) {
                    var html = "";
                    var producerName = '';
                    // formData['ttid'] = data;
                    $('#moviedata').val(JSON.stringify(data));
                    html += `<div class="details-container"><h3>Details <a class="edit-icon updatepopup" data-toggle="modal" data-target="#updatepopup" data-backdrop="static" data-keyboard="false" style="float:right"><span class="mdi mdi-lead-pencil"></span></a></h3>
                        <div class="d-flex w-100">
                        <div class="movie-poster"><img src="${data.image}" class="img-fluid" alt="${data.title}"/></div>
                        <div class="movie-detail">
                        <h4> ${data.title}</h4>
                        <div clss="font-weight-bold">
                            <span class="mr-2"><svg class="_22qEau" viewBox="0 0 33 16" height="16" width="33" role="img" style="height:16;width:33" aria-hidden="true"><title>Logo Imdb Outline</title><svg xmlns="http://www.w3.org/2000/svg" width="33" height="16"><title>Logo Imdb Outline</title><path fill="currentColor" fill-rule="evenodd" d="M29.652719 1.0977341c.772758 0 1.396822.618987 1.396822 1.3842208V13.518051c0 .765681-.624064 1.384221-1.396822 1.384221H3.3468573c-.7721217 0-1.3965678-.61854-1.3965678-1.384221V2.4819549c0-.7652338.6244461-1.3842208 1.3965678-1.3842208zm0-.2977341H3.3468573C2.4112479.8 1.65 1.5544797 1.65 2.4819549V13.518051C1.65 14.44553 2.4112479 15.2 3.3468573 15.2H29.652719c.935822 0 1.697281-.75447 1.697281-1.681949V2.4819549C31.35 1.5544797 30.588541.8 29.652719.8"></path><path fill="currentColor" fill-rule="evenodd" d="M5.9317148 3.8610473v8.3986877h2.1976434V3.8610473H5.9317148m6.8886832 0-.509286 3.9246344-.312287-2.1332276c-.094387-.6837788-.180593-1.2824555-.266926-1.7914068H8.8811102v8.3986877h1.9266258l.0083-5.5445848.809278 5.5445848h1.37198l.772121-5.6666451.0042 5.6666451h1.92209V3.8610473h-2.875228m6.293065 8.3986877c.525819 0 .92022-.02858 1.183331-.08554.258321-.05682.480586-.154532.657089-.301228.176503-.14276.304105-.34196.373904-.594322.07376-.252529.114737-.756987.114737-1.5103496V6.820831c0-.7939403-.03292-1.3269684-.07786-1.5997796-.049309-.2687531-.172528-.517211-.369803-.7365515-.193015-.2203229-.480587-.3789146-.854491-.4763373-.373905-.0978426-.99002-.1471153-2.053784-.1471153h-1.639203v8.3986877zm.02077-6.884012c.08593.048988.143712.1263976.168596.2361392.02444.1058216.03688.3499397.03688.7287133v3.252332c0 .5621415-.03688.9041015-.111069 1.0304995-.07391.125978-.266799.186867-.583326.186867V5.2985972c.238248 0 .402308.024214.488917.077124m3.056013-1.5146587v8.3986745h1.980062l.139641-.533456c.17644.215833.373693.374428.591317.484593.218069.105683.538367.158594.788549.158594.345353 0 .649055-.08944.899702-.272683.254866-.178879.415344-.394866.481095-.639265.06982-.248166.102696-.622608.102696-1.123561V7.9773197c0-.5088167-.0085-.8388767-.03288-.9934102-.020971-.1546716-.090788-.3136849-.201475-.4767616-.115055-.1625009-.275067-.2886238-.489066-.3784902-.217771-.089447-.467931-.134372-.76006-.134372-.250182 0-.574868.049407-.792619.1511671-.213554.097434-.410807.2480424-.587246.4476398V3.8610643Zm2.863486 6.3632735c0 .402993-.02099.663486-.06198.769169-.04087.106244-.217772.158596-.353345.158596-.131184 0-.217771-.04843-.262708-.154113-.04084-.101899-.06575-.338048-.06575-.708568V8.0708145c0-.3829736.02035-.6191066.05761-.7168021.04103-.09351.127285-.1423599.254399-.1423599.135742 0 .316081.057235.36195.1629234.04494.109746.06982.3419696.06982.6962386v2.1535215"></path></svg></svg> ${data.imDbRating}</span>
                            <span class="mr-2">${data.runtimeStr}</span>
                            <span class="mr-2">${data.year}</span>
                        </div>
                        <p class="text-muted mt-3">${data.plot}</p>
                        <table class="">
                            <tr>
                                <th class="pl-0">Type</th>
                                <td>${data.type}</td>
                            </tr>`;
                        if(data.type == 'movie') {
                            html += `<tr>
                                    <th class="pl-0">Director</th>
                                    <td>${data.directors}</td>
                                </tr>`;
                        }
                        html += `<tr>
                                <th class="pl-0">Starring</th>
                                <td>${data.stars}</td>
                            </tr>
                            <tr>
                                <th class="pl-0">Genres</th>
                                <td>${data.genres}</td>
                            </tr>`;
                        if(data.type == 'movie') {
                            html += `<tr>
                                <th class="pl-0">Producer</th>`;
                                $.each(data.fullCast.others, function(p ,others){
                                    if(others.job == "Produced by"){
                                        $.each(others.items, function(p ,producer){
                                            producerName += producer.name + ", ";
                                        });
                                    }
                                });
                                html+= `<td>${producerName.slice(0, -1)}</td>
                            </tr>
                            <tr>
                                <th class="pl-0">Writer</th>
                                <td>${data.writers}</td>
                            </tr>`;
                        }
                        if(data.type == 'TVSeries') {
                            html += `<tr>
                                <th class="pl-0">Creators</th>
                                <td>${data.tvSeriesInfo.creators}</td>
                            </tr>`;
                        }
                        html += `<tr>
                                <th class="pl-0">Country</th>
                                <td>${data.countries}</td>
                            </tr>
                            <tr>
                                <th class="pl-0">Certificate</th>
                                <td>${data.contentRating}</td>
                            </tr>
                        </table>
                        <div class="movie-images" style="display: flex; flex-wrap: wrap;gap:10px;">`;
                            $.each(data.posters.posters, function(i, image){
                                html+=`<div><img src="${image.link}" width="125" height="125"/> </div>`;
                                if(i == 9){
                                    return false;
                                }
                            });
                            html+=`
                            </div>
                        </div>
                    </div>`;
                    // var trailer_url = "https://imdb-api.com/API/YouTubeTrailer/k_74q8ivck/" + data.id;
                    // $.ajax({
                    //     type: "get",
                    //     url: trailer_url,
                    //     dataType: "json",
                    //     success: function(trailer) {
                    //         $('#url').val(trailer.videoId);
                    //     }
                    // });

                    $('#titlename').val(data.title);
                    // $('#url').val(data.title);
                    if(data.type == 'Movie') {
                        $('#movie').attr('checked', true);
                        $('#directorform').removeClass('d-none');
                        $('#producersform').removeClass('d-none');
                        $('#writersform').removeClass('d-none');
                        $('#creatorsform').addClass('d-none');
                    }
                    if(data.type == 'TVSeries') {
                        $('#series').attr('checked', true);
                        $('#directorform').addClass('d-none');
                        $('#producersform').addClass('d-none');
                        $('#writersform').addClass('d-none');
                        $('#creatorsform').removeClass('d-none');
                    }
                    // $('#featured').val(data.title);
                    // $('#kid_friendly').val(data.title);
                    $('#description').val(data.plot);
                    $('#mpaa_rating').val(data.contentRating);

                    var values = data.genres.replace(/ /g,'');
                    var vals = values.split(",");
                    vals.forEach(function(e){
                        if(!s2.find('option:contains(' + e + ')').length)
                        s2.append($('<option>').text(e));
                    });
                    $('#genres').val(vals).trigger("change");
                    $('#year').val(data.year);
                    var actors = '';
                    var director = '';
                    var producers = '';
                    var writers = '';
                    var creators = '';

                    $.each(data.actorList, function(p ,actorList){
                        actors += actorList.name + ", ";
                        if(p == 9) {
                            return false;
                        }
                    });
                    $('#actors').val(actors);

                    $.each(data.directorList, function(p ,directorList){
                        director += directorList.name + ", ";
                        if(p == 9) {
                            return false;
                        }
                    });
                    $('#director').val(director);

                    $.each(data.fullCast.others, function(p ,others){
                        if(others.job == "Produced by"){
                            $.each(others.items, function(p ,producer){
                                producers += producer.name + ", ";
                            });
                        }
                    });
                    $('#producers').val(producers);

                    $.each(data.writerList, function(p ,writerList){
                        writers += writerList.name + ", ";
                        if(p == 9) {
                            return false;
                        }
                    });
                    $('#writers').val(writers);

                    if(data.tvSeriesInfo) {
                        $.each(data.tvSeriesInfo.creatorList, function(p ,creatorList){
                            creators += creatorList.name + ", ";
                            if(p == 9) {
                                return false;
                            }
                        });
                        $('#creators').val(creators);
                    }

                    $('#running_time').val(data.runtimeMins);
                    $('#release_date').val(data.releaseDate);
                    $('#ratings').val(data.imDbRating);
                    $('#certificate').val(data.contentRating);
                    $('#country').val(data.countries);
                    // console.log(JSON.stringify(data.tvSeriesInfo.seasons));
                    $('#Season').val(data.tvSeriesInfo != null ? JSON.stringify(data.tvSeriesInfo.seasons) : '');

                    $("#image").addClass('dropify');
                    $("#image").attr("data-default-file",data.image);
                    $('.dropify').dropify();
                    $.each(data.posters.posters, function(i, image){
                        var html = `<div id class="file-row dz-processing dz-image-preview dz-success dz-complete">
                            <div><span class="preview"><img data-dz-thumbnail src="${image.link}" height="60px" /></span></div>
                            <div><p class="name" data-dz-name>-</p><strong class="error text-danger" data-dz-errormessage></strong></div>
                            <div><p class="size" data-dz-size></p><div class="progress progress-striped active" role="progressbar" ><div class="progress-bar progress-bar-success"></div></div></div>
                            <div><button type="button" class="btn btn-danger delete">Delete</button></div></div>`;
                        $('#previews').append(html);
                        $('#uploadedimg').append('<input type="hidden" name="images[]" class="images" value="'+ image.link +'">');
                        if(i == 9){
                            return false;
                        }
                    });

                    if(data.type == 'Movie') {
                        $('#seasonepisode').empty();
                        $('#seasonepisode').addClass('d-none');

                    }
                    if(data.type == 'TVSeries') {
                        // debugger;
                        var seasondata = '';
                        var seasonform = '';
                        $('#seasonepisode').removeClass('d-none');
                        $.each(data.tvSeriesInfo.seasons , function(i, seasonno) {
                            seasondata += `<div class="card border-0">
                            <div class="card-header p-0 border-0" id="heading-${seasonno}">
                            <button  type="button" class="btn btn-link accordion-title border-0 collapse collapsed" data-toggle="collapse" data-target="#collapse-${seasonno}" aria-expanded="true"  aria-controls="#collapse-${seasonno}">
                            <i class="icon-minus text-center d-flex align-items-center justify-content-center h-100"></i> Season ${seasonno}</button>
                            </div>
                            <div id="collapse-${seasonno}" class="collapse ${seasonno}" aria-labelledby="heading-${seasonno}" data-parent="#accordion">
                            <div class="card-body accordion-body px-0">
                            <div class="row form-row" id="episodedataid_${seasonno}"></div></div></div></div>`;
                            $('#accordion').html(seasondata);

                            seasonform += `<div class="card border-0">
                            <div class="card-header p-0 border-0" id="heading1-${seasonno}">
                            <button  type="button" class="btn btn-link accordion-title border-0 collapse collapsed" data-toggle="collapse" data-target="#collapse1-${seasonno}" aria-expanded="true"  aria-controls="#collapse1-${seasonno}">
                            <i class="icon-minus text-center d-flex align-items-center justify-content-center h-100"></i> Season ${seasonno}</button>
                            </div>
                            <div id="collapse1-${seasonno}" class="collapse ${seasonno}" aria-labelledby="heading1-${seasonno}" data-parent="#accordion1">
                            <div class="card-body accordion-body px-0">
                            <div class="row form-row" id="episodeformid_${seasonno}"></div></div></div></div>`;
                        });
                        $('#accordion1').html(seasonform);

                        $.each(data.tvSeriesInfo.seasons , function(i, seasonno) {
                            var api_url1 = "http://192.168.0.17:8001/admin_assets/episode.json";
                            // var api_url1 = "https://imdb-api.com/API/SeasonEpisodes/k_74q8ivck/" +data.id+'/' + seasonno;
                            $.ajax({
                                type: "get",
                                url: api_url1,
                                dataType: "json",
                                success: function(ep) {
                                    var seasondata1 = '';
                                    var seasonform1 = '';
                                    $.each(ep.episodes, function(j, episodes) {
                                        seasondata1 += `<div class="col-xl-6 col-md-6 mb-2">
                                        <div class="list_item odd d-flex w-100 season-epList">
                                        <div class="image mr-2">
                                        <div class="hover-over-image zero-z-index">
                                        <img class="zero-z-index" alt="${ episodes.title }" src="${ episodes.image }">
                                        </div></div>
                                        <div class="info w-100" itemprop="episodes" itemscope="" itemtype="http://schema.org/TVEpisode">
                                        <div class="d-flex justify-content-between w-100 mb-2">
                                        <b class="small font-weight-bold text-muted">Ep ${ episodes.episodeNumber }</b>
                                        <div class="airdate">${ episodes.released }</div>
                                        </div>
                                        <h4 class="">${ episodes.title }</h4>
                                        <div class="ipl-rating-widget">
                                        <div class="ipl-rating-star small d-flex">
                                        <span class="ipl-rating-star__star"><svg class="ipl-icon ipl-star-icon" xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg></span>
                                        <span class="ipl-rating-star__rating">${ episodes.imDbRating }</span>
                                        </div></div></div></div></div>`;

                                        seasonform1 += `<div class="col-xl-12 col-md-12 mb-2">
                                            <div class="list_item odd d-flex w-100 row m-0">
                                                <div class="form-group col-sm-2">
                                                    <label for="title">Episode</label>
                                                    <input type="text" class="form-control" name="episodeNumber${seasonno}[]" value="${episodes.episodeNumber}">
                                                </div>
                                                <div class="form-group col-sm-4">
                                                    <label for="url">Title</label>
                                                    <input type="text" class="form-control" name="episodetitle${seasonno}[]" value="${episodes.title}">
                                                </div>
                                                <div class="form-group col-sm-6">
                                                    <label for="url">Description</label>
                                                    <input type="text" class="form-control" name="episodeplot${seasonno}[]" value="${episodes.plot}">
                                                </div>
                                                <div class="form-group col-sm-4">
                                                    <label for="url">Year</label>
                                                    <input type="text" class="form-control" name="episodeyear${seasonno}[]" value="${episodes.year}">
                                                </div>
                                                <div class="form-group col-sm-4">
                                                    <label for="url">released</label>
                                                    <input type="text" class="form-control" name="episodereleased${seasonno}[]" value="${episodes.released}">
                                                </div>
                                                <div class="form-group col-sm-4">
                                                    <label for="url">IMDb Rating</label>
                                                    <input type="text" class="form-control" name="episodeimDbRating${seasonno}[]" value="${episodes.imDbRating}">
                                                </div>
                                                <div class="form-group col-sm-12">
                                                    <label>Image</label>
                                                    <input type="hidden" name="episodeimage1_${seasonno}[]" value="${ episodes.image }">
                                                    <input type="file" name="episodeimage_${seasonno}_${j}" class="image dropify" accept="image/*" data-default-file="${ episodes.image }">
                                                </div>
                                            </div>
                                        </div>`;
                                    });
                                    $('#episodedataid_' + seasonno).html(seasondata1);
                                    $('#episodeformid_' + seasonno).html(seasonform1);
                                }
                            });
                        });
                        setTimeout(() => {
                            $('.dropify').dropify();
                        }, 3000);
                    }

                    $('.savebtn').removeClass('d-none');
                    // $('.manualupdate').removeClass('d-none');

                    $('.title-details .details').append(html);
                    $('#title').css('background-image', 'none');
                }
            });
        });

        // $(document).on('click', '.manualupdate', function() {
        //     $.getJSON(url + "/admin_assets/data.json", function( data ) {
        //         // var searchdata = $('#moviedata').val();
        //         var data = JSON.parse(searchdata);
        //         $('#moviedata1').val(searchdata);
        //         $('#titlename').val(data.title);
        //         // $('#url').val(data.title);
        //         if(data.type == 'Movie') {
        //             $('#movie').attr('checked', true);
        //         }
        //         if(data.type == 'TVSeries') {
        //             $('#series').attr('checked', true);
        //         }
        //         // $('#featured').val(data.title);
        //         // $('#kid_friendly').val(data.title);
        //         $('#description').val(data.plot);
        //         $('#mpaa_rating').val(data.contentRating);

        //         var values = data.genres.replace(/ /g,'');
        //         var vals = values.split(",");
        //         vals.forEach(function(e){
        //         if(!s2.find('option:contains(' + e + ')').length)
        //         s2.append($('<option>').text(e));
        //         });
        //         $('#genres').val(vals).trigger("change");
        //         $('#year').val(data.year);
        //         var actors = '';
        //         var director = '';
        //         var producers = '';
        //         var writers = '';
        //         $.each(data.actorList, function(p ,actorList){
        //             actors += actorList.name + ", ";
        //             if(p == 9) {
        //                 return false;
        //             }
        //         });
        //         $('#actors').val(actors);

        //         $.each(data.directorList, function(p ,directorList){
        //             director += directorList.name + ", ";
        //             if(p == 9) {
        //                 return false;
        //             }
        //         });
        //         $('#director').val(director);

        //         $.each(data.fullCast.others, function(p ,others){
        //             if(others.job == "Produced by"){
        //                 $.each(others.items, function(p ,producer){
        //                     producers += producer.name + ", ";
        //                 });
        //             }
        //         });
        //         $('#producers').val(producers);

        //         $.each(data.writerList, function(p ,writerList){
        //             writers += writerList.name + ", ";
        //             if(p == 9) {
        //                 return false;
        //             }
        //         });
        //         $('#writers').val(writers);

        //         $('#running_time').val(data.runtimeMins);
        //         $('#release_date').val(data.releaseDate);
        //         $('#ratings').val(data.imDbRating);
        //         $('#certificate').val(data.contentRating);
        //         $('#country').val(data.countries);

        //         $("#image").addClass('dropify');
        //         $("#image").attr("data-default-file",data.image);
        //         $('.dropify').dropify();
        //         $.each(data.posters.posters, function(i, image){
        //             var html = `<div id class="file-row dz-image-preview dz-processing dz-success dz-complete">
        //                 <div><span class="preview"><img data-dz-thumbnail src="${image.link}" height="60px" /></span></div>
        //                 <div><p class="name" data-dz-name>-</p><strong class="error text-danger" data-dz-errormessage></strong></div>
        //                 <div><p class="size" data-dz-size></p><div class="progress progress-striped active" role="progressbar" ><div class="progress-bar progress-bar-success"></div></div></div>
        //                 <div><button type="button" class="btn btn-danger delete">Delete</button></div></div>`;
        //             $('#previews').append(html);
        //             $('#uploadedimg').append('<input type="hidden" name="images[]" class="images" value="'+ image.link +'">');
        //             if(i == 9){
        //                 return false;
        //             }
        //         });
        //     });
        // });
    </script>
@endsection