@extends('front.layouts.front')
@section('maincss')
    <link href="{{ asset_public('front/css/bootstrap-timepicker.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset_public_admin('css/dropify.min.css') }}">
@endsection
@section('content')
    <section class="section section--head festive-banner" data-bg="{{ $filmfestival->banner }}"></section>
    <div class="container">
        <div class="d-md-flex">
            <div class="festive-logo">
                <img src="{{ $filmfestival->logo }}" class="img-fluid" alt="Logo">
            </div>
            <h3 class="text-start text-white mb-0 p-3">{{ $filmfestival->name }}</h3>
        </div>
    </div>
    <!-- end page title -->

    <!-- section -->
    <section class="section">
        <div class="container">
            <div class="col-lg-9 mx-auto">
                <form action="{{ route('front.film-festival.formstore', [$filmfestival->uuid]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <h3 class="text-white">Project Information</h3>
                    <div class="form">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                                <label class="form__label" for="submitter_name">Submitter Name</label>
                                <input id="submitter_name" type="text" name="submitter_name" class="form__input">
                            </div>
                            <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                                <label class="form__label" for="first_name">Are you the owner and/or rights holder to this media and ae empowered to publish it? </label>
                                <div class="d-lg-flex flex-wrap">
                                    <div class="sign__group sign__group--radio w-auto mx-3">
                                        <input id="yes" name="empowered" type="radio" value="1">
                                        <label for="yes">Yes</label>
                                    </div>
                                    <div class="sign__group sign__group--radio w-auto mx-3">
                                        <input id="no" name="empowered" type="radio" value="0">
                                        <label for="no">No</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-6 col-xl-6 empowered">
                                <label class="form__label" for="first_name">Contains Adult content?</label>
                                <div class="d-lg-flex flex-wrap">
                                    <div class="sign__group sign__group--radio w-auto mx-3">
                                        <input id="cyes" name="adult" type="radio" value="1">
                                        <label for="cyes">Yes</label>
                                    </div>
                                    <div class="sign__group sign__group--radio w-auto mx-3">
                                        <input id="cno" name="adult" type="radio" value="0">
                                        <label for="cno">No</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-6 col-xl-6 empowered">
                                <label class="form__label" for="">Trigger Warning?</label>
                                <div class="d-lg-flex flex-wrap">
                                    <div class="sign__group sign__group--radio w-auto mx-3">
                                        <input id="tyes" name="trigger_warning" type="radio" value="1">
                                        <label for="tyes">Yes</label>
                                    </div>
                                    <div class="sign__group sign__group--radio w-auto mx-3">
                                        <input id="tno" name="trigger_warning" type="radio" value="0">
                                        <label for="tno">No</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form empowered">
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <label class="form__label" for="first_name">Project Type</label>
                                <div class="d-lg-flex flex-wrap">
                                    @foreach (\App\Models\FilmFestival::$ProjectType as $key => $val)
                                        <div class="sign__group sign__group--radio w-auto mx-3">
                                            <input id="id{{ $key }}" name="projectType" type="radio" value="{{ $key }}" @if ($key == 1) checked @endif>
                                            <label for="id{{ $key }}">{{ $val }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                                <label class="form__label" for="title">Project Title</label>
                                <input id="title" type="text" name="title" class="form__input">
                            </div>
                            <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                                <label class="form__label" for="synopsis">Brief Synopsis</label>
                                <input id="synopsis" type="text" name="synopsis" class="form__input">
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="website">Website</label>
                                <input id="website" type="text" name="website" class="form__input">
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="twitter">Twitter</label>
                                <input id="twitter" type="text" name="twitter" class="form__input">
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="facebook">Facebook</label>
                                <input id="facebook" type="text" name="facebook" class="form__input">
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="instagram">Instagram</label>
                                <input id="instagram" type="text" name="instagram" class="form__input">
                            </div>
                        </div>
                    </div>

                    <h3 class="text-white mt-5 empowered">Credits</h3>
                    <div class="form empowered">
                        <div class="credit-block mb-4">
                            <h4 class="credit-head">Directors <button class="btn add-credit add-director" data-id="1" type="button">+ Add</button></h4>
                            <div class="credit-body director-container"></div>
                        </div>
                        <div class="credit-block mb-4">
                            <h4 class="credit-head">Writers <button class="btn add-credit add-director" data-id="2" type="button">+ Add</button></h4>
                            <div class="credit-body director-container"></div>
                        </div>
                        <div class="credit-block mb-4">
                            <h4 class="credit-head">Producers <button class="btn add-credit add-director" data-id="3" type="button">+ Add</button></h4>
                            <div class="credit-body director-container"></div>
                        </div>
                        <div class="credit-block mb-4">
                            <h4 class="credit-head">Key Cast <button class="btn add-credit add-director" data-id="4" type="button">+ Add</button></h4>
                            <div class="credit-body director-container"></div>
                        </div>
                    </div>

                    <h3 class="text-white mt-5 empowered">Specifications</h3>
                    <div class="form empowered">
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <label class="form__label" for="first_name">Project Type</label>
                                <div class="d-lg-flex flex-wrap">
                                    @foreach (\App\Models\FilmFestival::$ProjectType1 as $key => $val)
                                        <div class="sign__group sign__group--checkbox w-auto mx-3">
                                            <input id="id_{{ $key }}" name="projectType1[]" type="checkbox" value="{{ $key }}">
                                            <label for="id_{{ $key }}">{{ $val }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                                <label class="form__label" for="geners">Genres</label>
                                <input id="geners" type="text" name="geners" class="form__input">
                            </div>
                            <div class="col-12 col-md-12 col-lg-12 col-xl-6">
                                <label class="form__label" for="runtime">Runtime</label>
                                <div>
                                    <input id="timepicker2" type="text" name="runtime" class="form__input">
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="completion_date">Completion Date</label>
                                <input id="completion_date" type="date" name="completion_date" class="form__input">
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="production_gudget">Production Budget</label>
                                <div class="row">
                                    <div class="col-8">
                                        <input id="production_gudget" type="text" name="production_gudget" class="form__input">
                                    </div>
                                    <div class="col-4 pl-0">
                                        <select name="gudget_cur" id="gudget_cur" class="form__select">
                                            @foreach (\App\Models\FilmFestival::$currency as $key => $val)
                                                <option value="{{ $key }}">{{ $val }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="country_origin">Country of Origin</label>
                                <select name="country_origin" id="country_origin" class="form__select">
                                    <option value="">Select Country</option>
                                    @foreach ($Country as $val)
                                        <option value="{{ $val->id }}">{{ $val->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="country_filming">Country of Filming</label>
                                <select name="country_filming" id="country_filming" class="form__select">
                                    <option value=""></option>
                                    @foreach ($Country as $val)
                                        <option value="{{ $val->id }}">{{ $val->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="language">Language</label>
                                <input id="language" type="text" name="language" class="form__input">
                            </div>

                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="shooting_format">Shooting Format</label>
                                <input id="shooting_format" type="text" name="shooting_format" class="form__input">
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="aspect_ratio">Aspect Ratio</label>
                                <input id="aspect_ratio" type="text" name="aspect_ratio" class="form__input">
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="film_color">Film Color</label>
                                <select name="film_color" id="film_color" class="form__select">
                                    <option value="Color">Color</option>
                                    <option value="Black & White and Color">Black & White and Color</option>
                                    <option value="Black & White">Black & White</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="first_time_filmmaker">First-time Filmmaker</label>
                                <select name="first_time_filmmaker" id="first_time_filmmaker" class="form__select">
                                    <option value="1">Yes</option>
                                    <option value="0" selected>No</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                <label class="form__label" for="student_project">Student Project</label>
                                <select name="student_project" id="student_project" class="form__select">
                                    <option value="1">Yes</option>
                                    <option value="0" selected>No</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-6 col-lg-12 col-xl-6 school_name" style="display: none">
                                <label class="form__label" for="school_name">School Name</label>
                                <input id="school_name" type="text" name="school_name" class="form__input">
                            </div>
                        </div>
                    </div>

                    <h3 class="text-white mt-5 empowered">Distribution</h3>
                    <div class="form empowered">
                        <div class="credit-block mb-4">
                            <h4 class="credit-head">Distributor / Sales Agent <button class="btn add-credit add-distributor" data-id="1" type="button">+ Add</button></h4>
                            <div class="credit-body director-container"></div>
                        </div>
                    </div>

                    {{-- <h3 class="text-white mt-5 empowered">Professional Reels <button class="btn add-credit add-professionalreels" data-id="1" type="button">+ Add</button></h3>
                    <div class="form empowered">
                        <div class="credit-block mb-4">
                            <div class="credit-body professionalreels"></div>
                        </div>
                    </div> --}}

                    <div class="form text-center empowered">
                        <button class="form__btn" type="submit">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- end section -->
    <input type="hidden" name="" id="countries" value="{{ $Countries }}">
    <input type="hidden" name="" id="rights" value="{{ $rights }}">
    <input type="hidden" name="" id="category" value="{{ $category }}">
@endsection

@section('script')
    <script src="{{ asset_public('front/js/bootstrap-timepicker.min.js') }}"></script>
    <script src="{{ asset_public_admin('js/dropify.js') }}"></script>
    <script>
        $('#timepicker2').timepicker({
            disableFocus: true,
            showInputs: false,
            showSeconds: true,
            showMeridian: false,
            defaultValue: '12:45:30'
        });

        $('.dropify').dropify();
        let count = 0;
        let count1 = 0;

        let countries = JSON.parse($('#countries').val());
        let country = '<option>Select Country</option>';
        countries.forEach(element => {
            country += `<option value="${element.id}">${element.name}</option>`;
        })

        let categories = JSON.parse($('#category').val());
        let category = '<option>Select Category</option>';
        $.each(categories, function(key, val) {
            category += `<option value="${key}">${val}</option>`;
        })
        let rights = JSON.parse($('#rights').val());

        $(document).on('change', '#student_project', function(e) {
            var value = $(this).val();
            if (value == 1) {
                $('.school_name').show();
            } else {
                $('.school_name').hide();
            }
        });

        $(document).on("click", ".add-director", function() {
            let id = $(this).attr('data-id');
            const html = `<div class="d-flex directorToAdd mb-3">
                <div class="row">
                    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
                        <label class="form__label" for="first_name">First Name</label>
                        <input type="hidden" name="credit_type[]" value="${id}">
                        <input id="first_name" type="text" name="first_name[]" class="form__input">
                    </div>
                    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
                        <label class="form__label" for="middle_name">Middle Name</label>
                        <input id="middle_name" type="text" name="middle_name[]" class="form__input">
                    </div>
                    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
                        <label class="form__label" for="last_name">Last Name</label>
                        <input id="last_name" type="text" name="last_name[]" class="form__input">
                    </div>
                    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
                        <label class="form__label" for="prior_credits">Prior Credits (Optinal)</label>
                        <input id="prior_credits" type="text" name="prior_credits[]" class="form__input">
                    </div>
                    <div class="col-md-8 col-lg-8 col-xl-8">
                        <div class="align-self-end text-right">
                            <button class="btn remove-credit mt-4" type="button"><i class="fas fa-trash-can"></i></button>
                        </div>
                    </div>
                </div>
            </div>`
            $(this).parents(".credit-block").find('.director-container').append(html);
        });

        $(document).on("click", ".add-distributor", function() {
            count++;
            let right = '';
            $.each(rights, function(key, val) {
                right += `<div class="sign__group sign__group--checkbox w-auto mx-3">
                    <input id="prior_credits_${count}_${key}" name="prior_credits1[${count}][]" type="checkbox" value="${key}">
                    <label for="prior_credits_${count}_${key}">${val}</label>
                </div>`;
            })
            const html = `<div class="d-flex directorToAdd mb-3">
                <div class="row">
                    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
                        <label class="form__label">Name</label>
                        <input type="hidden" name="count[]" value="${count}">
                        <input type="text" name="name[]" class="form__input">
                    </div>
                    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
                        <label class="form__label">Type</label>
                        <select name="type[]" class="form__select">
                            <option value="0"></option>
                            <option value="1">Distributor</option>
                            <option value="2">Sales Agent</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4 col-lg-4 col-xl-4">
                        <label class="form__label">Country</label>
                        <select name="country_id[]" class="form__select">${country}</select>
                    </div>
                    <div class="col-12 col-lg-12">
                        <label class="form__label">Media / Rights</label>
                        <div class="d-grid gtc3">${right}</div>
                    </div>

                    <div class="col-12 col-lg-12">
                        <div class="align-self-end text-right">
                            <button class="btn remove-credit" type="button"><i class="fas fa-trash-can"></i></button>
                        </div>
                    </div>
                </div>
            </div>`
            $(this).parents(".credit-block").find('.director-container').append(html);
        });

        $(document).on("click", ".add-professionalreels", function() {
            count1++;
            const html = `<div class="d-flex directorToAdd mb-3">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                        <label class="form__label" for="category">Category</label>
                        <input type="hidden" name="count1[]" value="${count1}">
                        <select name="category_${count1}" class="form__select">${category}</select>
                    </div>
                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                        <label class="form__label" for="professional_name">Name</label>
                        <input type="text" name="professional_name_${count1}" class="form__input" >
                    </div>
                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                        <label class="form__label" for="reel_title">Title</label>
                        <input type="text" name="reel_title_${count1}" class="form__input" >
                    </div>
                    <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                        <label class="form__label" for="category">Thumbnails</label>
                        <div class="d-grid gtc3" style="gap: 15px">
                            <input type="file" name="thumbnail1_${count1}" class="dropify" accept="image/*">
                            <input type="file" name="thumbnail2_${count1}" class="dropify" accept="image/*">
                            <input type="file" name="thumbnail3_${count1}" class="dropify" accept="image/*">
                        </div>
                    </div>
                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 setvideo">
                        <label class="form__label" for="video">Video</label>
                        <input type="file" name="video_${count1}" class="dropify videoset" accept="video/*">
                        <span class="error d-none">Invalid Video! video is less than 10 Minutes</span>
                    </div>
                    <div class="col-12 col-lg-12">
                        <div class="align-self-end text-right">
                            <button class="btn remove-credit" type="button"><i class="fas fa-trash-can"></i></button>
                        </div>
                    </div>
                </div>
            </div>`
            $('.professionalreels').append(html);
            $('.dropify').dropify();
        });

        $('.add-director').click();
        $('.add-distributor').click();
        // $('.add-professionalreels').click();

        $(document).on('click', '.remove-credit', function(e) {
            $(this).parents('.directorToAdd').remove();
        });

        function validateFile(th, file) {
            var video = document.createElement('video');
            video.preload = 'metadata';
            video.onloadedmetadata = function() {
                window.URL.revokeObjectURL(video.src);
                if (video.duration > 600.00) {
                    $(th).closest('.setvideo').find('.error').removeClass('d-none');
                    return;
                }
                $(th).closest('.setvideo').find('.error').addClass('d-none');
            }
            video.src = URL.createObjectURL(file);
        }

        $(".videoset").on("change", function(e) {
            var file = this.files[0];
            validateFile(this, file);
            e.target.value = '';
        })

        $('input:radio[name=empowered]').change(function() {
            if (this.value == '1') {
                $('.empowered').show();
            }
            else if (this.value == '0') {
                $('.empowered').hide();
            }
        });
    </script>
@endsection