@include('front.include.start')
@include('front.include.header')
<style>
    section {
        width: 1080px;
        height: 1920px;
    }

    #preview {
        width: 1920px;
        height: 100%;
        transform: rotate(90deg);
        height: 1080px;
        transform: translate(420px, 0) scale(1) rotate(90deg);
        /*object-fit: contain;*/
    }

    .counter {
        text-align: center;
        color: #fff;
        font-size: 15rem;
        z-index: 99999;
        position: relative;
        font-weight: bold;
        line-height: 0;
        top:3rem;
    }
    .to-pink {
        color  : #E72F88;
    }
    .errorr {
        font-size: 25px;
        text-align: center;
        margin-bottom: 2rem;
        background: #dd4c93;
        color: #fff;
        border-radius: 24px;
        height: 70px;
    }
</style>
<main>

    <section class=" second-slide">

        <h4 class="counter">5</h4>

        <img src="{{ asset('assets/images/top.png')}}" class="frame-large tr">
        <img src="{{ asset('assets/images/bottom.png')}}" class="frame-large tl">
        <img src="{{ asset('assets/images/bottom.png')}}" class="frame-large br">
        <img src="{{ asset('assets/images/top.png')}}" class="frame-large bl">
        <video id="preview"  autoplay muted></video>
        <br/><br/>

        <p class="hashtag-title">
            #لیلی_همونه
        </p>

        <span class="frame-focus">

        </span>

        <img src="{{ asset('assets/images/say.png')}}" alt="" class="say-apple">

        <div id="startButton" class="btn-record btn-record2"></div>

    </section>
    <section class="disNone three-slide">
        <img src="assets/images/loading.png" alt="" class="loading">
    </section>
    <section class="disNone four-slide">
        <img src="{{ asset('assets/images/cl1.jpg')}}" alt="" class="pattern color1">
        <img src="{{ asset('assets/images/cl2.jpg')}}" alt="" class="pattern color2">
        <img src="{{ asset('assets/images/cl3.jpg')}}" alt="" class="pattern color3">
        <img src="{{ asset('assets/images/lili-loading.png')}}" alt="" class="loading-type">

        <div class="box-content">
            <h1 class="title">
                #لیلی_همونه
            </h1>
            <div class="preview">
                <div class="boxes">
                    <div class="img">
                        <img id="captured-image" width="160" height="120"><br/><br/>

                    </div>
                    <div class="video" style="display: none">
                        <video id="recording" width="160" height="120"></video>
                        <br/><br/>
                        <span class="play-icon">

                        </span>
                    </div>
                </div>
                <p class="text">
                    برای گرفتن جایزه و دیدن عکستون منتظر پیامک لیلی باشید.
                </p>
                <div class="links">
                    <a href="#" class="to-save">باحال شد!</a>
                    <a href="#" class="to-refresh">نه! از اول</a>
                </div>
            </div>
        </div>


    </section>

    <section class="disNone five-slide">
        <img src="{{ asset('assets/images/cl1.jpg')}}" alt="" class="pattern color1">
        <img src="{{ asset('assets/images/cl2.jpg')}}" alt="" class="pattern color3">

        <div class="box-content">
            <img src="{{ asset('assets/images/cup2.png')}}" alt="" class="cup2">
            <p class="text">
                برای گرفتن عکس باحالت شماره‌ات رو اینجا ثبت کن تا جایزه‌ات رو ازمون بگیری
                <!---->
            </p>
            <p class="text2">
                توجه: شما با این کار به برند لیـلی اجــازه می‌دید کـه در وبـسایت
                و شبکه اجتماعی خودش عکستون رو به اشتـراک بـذاره
            </p>

            <div class="input">
                <svg xmlns="http://www.w3.org/2000/svg" width="43.315" height="43.359" viewBox="0 0 43.315 43.359">
                    <path id="Path_1895" data-name="Path 1895"
                          d="M1906.1,112.29a36.971,36.971,0,0,1-19.893-6.2,37.868,37.868,0,0,1-15-19.206,34.36,34.36,0,0,1-1.976-10.584,8.056,8.056,0,0,1,.063-2.676,3.721,3.721,0,0,1,2.779-2.7c2.684-.656,5.372-1.294,8.071-1.883a3.819,3.819,0,0,1,4.349,2.383c.877,1.965,1.712,3.948,2.566,5.924.308.714.62,1.426.927,2.14a3.985,3.985,0,0,1-1.259,5.113c-.913.742-1.805,1.51-2.729,2.239-.277.219-.317.379-.143.686a26.072,26.072,0,0,0,10.06,10.065c.348.2.506.133.732-.15q1.119-1.4,2.28-2.771a3.957,3.957,0,0,1,5.087-1.182q3.87,1.666,7.74,3.329a3.98,3.98,0,0,1,2.552,5.008q-.84,3.662-1.7,7.32a3.928,3.928,0,0,1-4.507,3.14m.162-2.61c1.188.076,1.632-.27,1.89-1.407q.8-3.551,1.632-7.1a1.412,1.412,0,0,0-.947-1.906q-3.975-1.714-7.953-3.421a1.344,1.344,0,0,0-1.925.47q-1.61,1.967-3.237,3.919a1.259,1.259,0,0,1-1.693.419,27.308,27.308,0,0,1-6.048-4.035,30.172,30.172,0,0,1-7.043-8.906,1.391,1.391,0,0,1,.4-2.077c1.306-1.081,2.617-2.154,3.917-3.24a1.261,1.261,0,0,0,.4-1.742c-.2-.475-.406-.951-.611-1.426-.971-2.246-1.937-4.494-2.918-6.736a1.259,1.259,0,0,0-1.5-.895q-3.929.888-7.849,1.817a1.282,1.282,0,0,0-1.009,1.317,38.317,38.317,0,0,0,.972,8.113,33.952,33.952,0,0,0,8.548,15.727,34.452,34.452,0,0,0,14.459,9.336,35.951,35.951,0,0,0,10.51,1.769"
                          transform="translate(-1869.14 -68.957)" fill="#18559a"/>
                </svg>
                <input id="phone_number" value="" class="number-input numberInput" name="phone_number" type="text"
                       maxlength="11" placeholder="شماره تلفن">
            </div>
            <p class="disNone load1">
                <img src="{{ asset('assets/images/loading.jpg')}}" alt="" class="loading">
            </p>


            <div class="links">
                <a id="downloadButton" data-url="{{route('captureMediaStore')}}" class="save">
                    <svg xmlns="http://www.w3.org/2000/svg" width="45.803" height="28.6" viewBox="0 0 45.803 28.6">
                        <path id="Path_1894" data-name="Path 1894"
                              d="M3693.288,753.791a1.785,1.785,0,0,1,1.324.622q5.9,5.186,11.8,10.372c.792.7.593.679,1.372-.007q10.442-9.2,20.877-18.414c1.133-1,2.264-2,3.416-2.983a1.5,1.5,0,0,1,2.408.286.939.939,0,0,1-.075,1.127,4.068,4.068,0,0,1-.605.638q-12.639,11.2-25.282,22.387c-1.1.977-1.687.981-2.773.02q-6.62-5.86-13.238-11.723c-.92-.816-.854-1.655.137-2.186a1.452,1.452,0,0,1,.642-.14"
                              transform="translate(-3690.359 -741.407)" fill="#fff" stroke="#fff" stroke-width="3"/>
                    </svg>

                    تایید
                </a>
                <a href="#" class="to-refresh">
                    <svg xmlns="http://www.w3.org/2000/svg" width="33.489" height="30.047" viewBox="0 0 33.489 30.047">
                        <path id="Path_1909" data-name="Path 1909"
                              d="M3139.075,764.182c-1.282-.021-1.991-1.1-1.474-1.877a3.614,3.614,0,0,1,.608-.636q5.9-5.271,11.819-10.527c.446-.394.41-.6-.015-.979q-5.906-5.225-11.774-10.482c-.972-.867-1.081-1.522-.36-2.149.687-.6,1.377-.485,2.362.382q5.924,5.208,11.839,10.425c.443.393.684.379,1.117,0q5.974-5.291,11.984-10.55a1.633,1.633,0,0,1,1.72-.544,1.193,1.193,0,0,1,.459,2.141c-1.554,1.417-3.132,2.813-4.7,4.215-2.477,2.209-4.947,4.423-7.442,6.615-.4.35-.4.544,0,.9q6,5.311,11.967,10.651c.486.432.869.888.6,1.533a1.441,1.441,0,0,1-2.385.421c-1.6-1.376-3.176-2.775-4.759-4.166-2.494-2.193-5-4.378-7.469-6.591-.432-.387-.662-.347-1.069.013q-6,5.309-12.035,10.589c-.354.311-.7.628-.99.625"
                              transform="translate(-3135.886 -735.635)" fill="#fff" stroke="#fff" stroke-width="3"/>
                    </svg>
                    عدم تایید
                </a>
            </div>


            <div class="keyboard">
                <div class="number">
                    <span data-number="1"><i>1</i></span>
                    <span data-number="2"><i>2</i></span>
                    <span data-number="3"><i>3</i></span>
                    <span data-number="4"><i>4</i></span>
                    <span data-number="5"><i>5</i></span>
                    <span data-number="6"><i>6</i></span>
                    <span data-number="7"><i>7</i></span>
                    <span data-number="8"><i>8</i></span>
                    <span data-number="9"><i>9</i></span>

                </div>
                <div class="number aling-right">
                    <span class="call-button">
                        <i>
                            <img src="" alt=""/>
                        </i>
                    </span>
                    <span data-number="0"><i>0</i></span>
                    <span>
                        <i class="delete">
                            <img src="{{asset('assets/images/delete-icon.svg')}}" width="30"
                                                 height="30" alt="Left Arrow free icon"
                                                 title="Left Arrow free icon">
                        </i>
                    </span>

                </div>
            </div>
        </div>


    </section>
    <style>
        .preview .boxes {
            display: flex;
            justify-content: space-around;
            margin-top: 20rem;
            margin-bottom: 6rem;
        }

        .preview .img {

        }

        .preview .img img {
            width: 100%;
            height: 370px;
            object-fit: contain;
            border-radius: 22px;
            overflow: hidden;
        }

        .preview .video video {
            transform: rotate(90deg);
            width: 100%;
            height: 370px;
            object-fit: contain;
            border-radius: 22px;
            overflow: hidden;
        }

        .preview .links {
            text-align: center;
        }
        #downloadButton{
            cursor: pointer;
        }
        .btn-record{
            transition: 0.3s all;
        }
        .sca{
            transform: scale(0.8);
            cursor: not-allowed;
            pointer-events: none;

        }
        .load1 .loading {
            width: 20%;
            position: relative;

        }
        .load1  {
            margin-top: -34px;

        }
    </style>
</main>
@include('front.include.footer')
@include('front.include.end')
{{--<script>--}}
{{--    jQuery(document).ready(function ($) {--}}
{{--    let preview = document.getElementById("preview");--}}
{{--    let start = document.getElementById("start");--}}
{{--    let recording = document.getElementById("recording");--}}
{{--    let startButton = document.getElementById("startButton");--}}
{{--    // let stopButton = document.getElementById("stopButton");--}}
{{--    let downloadButton = document.getElementById("downloadButton");--}}
{{--    let logElement = document.getElementById("log");--}}
{{--    let recorded = document.getElementById("recorded");--}}
{{--    // let downloadLocalButton = document.getElementById("downloadLocalButton");--}}
{{--    let phoneNumber = document.getElementById("phone_number");--}}

{{--    let recordingTimeMS = 6000; //video limit 5 sec--}}
{{--    var localstream;--}}

{{--    window.log = function (msg) {--}}
{{--        //logElement.innerHTML += msg + "\n";--}}
{{--        console.log(msg);--}}
{{--    }--}}

{{--    window.wait = function (delayInMS) {--}}
{{--        return new Promise(resolve => setTimeout(resolve, delayInMS));--}}
{{--    }--}}

{{--    window.startRecording = function (stream, lengthInMS) {--}}
{{--        let recorder = new MediaRecorder(stream);--}}
{{--        let data = [];--}}

{{--        recorder.ondataavailable = event => data.push(event.data);--}}
{{--        recorder.start();--}}
{{--        log(recorder.state + " for " + (lengthInMS / 1000) + " seconds...");--}}

{{--        let stopped = new Promise((resolve, reject) => {--}}
{{--            recorder.onstop = resolve;--}}
{{--            recorder.onerror = event => reject(event.name);--}}
{{--        });--}}

{{--        let recorded = wait(lengthInMS).then(--}}
{{--            () => recorder.state == "recording" && recorder.stop()--}}
{{--        );--}}

{{--        return Promise.all([--}}
{{--            stopped,--}}
{{--            recorded--}}
{{--        ])--}}
{{--            .then(() => data);--}}
{{--    }--}}

{{--    window.stop = function (stream) {--}}
{{--        stream.getTracks().forEach(track => track.stop());--}}
{{--    }--}}
{{--    var formData = new FormData();--}}

{{--    navigator.mediaDevices.getUserMedia({--}}
{{--        video: true,--}}
{{--        audio: true--}}
{{--    }).then(stream => {--}}
{{--        preview.srcObject = stream;--}}
{{--        localstream = stream;--}}
{{--        //downloadButton.href = stream;--}}
{{--        preview.captureStream = preview.captureStream || preview.mozCaptureStream;--}}
{{--        return new Promise(resolve => preview.onplaying = resolve)--}}
{{--    })--}}

{{--    if (startButton) {--}}
{{--        startButton.addEventListener("click", function () {--}}
{{--            //  startButton.innerHTML = "recording...";--}}
{{--            // recorded.style.display = "none";--}}
{{--            // stopButton.style.display = "inline-block";--}}
{{--            // downloadButton.innerHTML = "rendering..";--}}
{{--            navigator.mediaDevices.getUserMedia({--}}
{{--                video: true,--}}
{{--                audio: true--}}
{{--            }).then(stream => {--}}
{{--                preview.srcObject = stream;--}}
{{--                localstream = stream;--}}
{{--                //downloadButton.href = stream;--}}
{{--                preview.captureStream = preview.captureStream || preview.mozCaptureStream;--}}
{{--                return new Promise(resolve => preview.onplaying = resolve);--}}
{{--            }).then(() => startRecording(preview.captureStream(), recordingTimeMS))--}}
{{--                .then(recordedChunks => {--}}
{{--                    let recordedBlob = new Blob(recordedChunks, {--}}
{{--                        type: "video/mp4"--}}
{{--                    });--}}
{{--                    recording.src = URL.createObjectURL(recordedBlob);--}}

{{--                    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));--}}
{{--                    formData.append('video', recordedBlob);--}}

{{--                    // downloadLocalButton.href = recording.src;--}}
{{--                    // downloadLocalButton.download = "RecordedVideo.webm";--}}
{{--                    log("Successfully recorded " + recordedBlob.size + " bytes of " +--}}
{{--                        recordedBlob.type + " media.");--}}
{{--                    startButton.innerHTML = "Start";--}}
{{--                    // stopButton.style.display = "none";--}}
{{--                    // recorded.style.display = "block";--}}
{{--                    downloadButton.innerHTML = "تایید";--}}
{{--                    localstream.getTracks()[0].stop();--}}
{{--                })--}}
{{--                .catch(log);--}}

{{--            // گرفتن عکس پس از 5 ثانیه--}}
{{--            setTimeout(() => {--}}
{{--                const video = document.getElementById('preview');--}}
{{--                const canvas = document.createElement('canvas');--}}
{{--                canvas.width = video.videoWidth;--}}
{{--                canvas.height = video.videoHeight;--}}
{{--                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);--}}
{{--                //  const imageData = canvas.toDataURL('image/jpg');--}}
{{--                const capturedImage = document.getElementById('captured-image');--}}
{{--                // const dataURL = canvas.toDataURL('image/jpeg');--}}
{{--                //  capturedImage.src = dataURL;--}}
{{--                // capturedImage.src = imageData;--}}
{{--                // اضافه کردن تصویر به فرم‌دیتا--}}
{{--                //formData.append('image', dataURL);--}}
{{--                canvas.toBlob(function (blob) {--}}
{{--                    const file = new File([blob], 'image.jpg', {type: 'image/jpeg'});--}}

{{--                    formData.append('image', file);--}}

{{--                    capturedImage.src = URL.createObjectURL(file);--}}

{{--                    // ارسال فرم دیتا به سرور--}}
{{--                    // ...--}}
{{--                }, 'image/jpeg');--}}
{{--            }, 5000);--}}

{{--        }, false);--}}


{{--    }--}}
{{--    if (downloadButton) {--}}
{{--        downloadButton.addEventListener("click", function () {--}}
{{--            var phone = document.getElementById('phone_number').value;--}}
{{--            formData.append('phone_number', phone);--}}
{{--            $.ajax({--}}


{{--                url: this.getAttribute('data-url'),--}}
{{--                method: 'POST',--}}
{{--                data: formData,--}}
{{--                cache: false,--}}
{{--                processData: false,--}}
{{--                contentType: false,--}}
{{--                success: function (data) {--}}
{{--                    console.log(data)--}}
{{--                    if (data === "exist") {--}}
{{--                        $('.errorr').removeClass('disNone')--}}
{{--                    } else {--}}
{{--                        $('.errorr').addClass('disNone')--}}
{{--                    }--}}

{{--                }--}}
{{--            });--}}
{{--        }, false);--}}
{{--    }--}}
{{--    // if (stopButton) {--}}
{{--    //     stopButton.addEventListener("click", function () {--}}
{{--    //         stop(preview.srcObject);--}}
{{--    //         startButton.innerHTML = "Start";--}}
{{--    //         // stopButton.style.display = "none";--}}
{{--    //         recorded.style.display = "block";--}}
{{--    //         downloadButton.innerHTML = "Save";--}}
{{--    //         localstream.getTracks()[0].stop();--}}
{{--    //     }, false);--}}
{{--    // }--}}


{{--    jQuery(document).ready(function ($) {--}}

{{--        $('.btn-record2').click(function () {--}}

{{--            $(this).addClass('sca');--}}
{{--            $('.counter').addClass('to-pink');--}}

{{--            setTimeout(() => {--}}
{{--                $('.counter').html(5);--}}
{{--            }, 1000);--}}
{{--            setTimeout(() => {--}}
{{--                $('.counter').html(4);--}}
{{--            }, 2000);--}}
{{--            setTimeout(() => {--}}
{{--                $('.counter').html(3);--}}
{{--            }, 3000);--}}
{{--            setTimeout(() => {--}}
{{--                $('.counter').html(2);--}}
{{--            }, 4000);--}}
{{--            setTimeout(() => {--}}
{{--                $('.counter').html(1);--}}
{{--            }, 5000);--}}


{{--            setTimeout(() => {--}}
{{--                $('.second-slide').addClass('disNone');--}}
{{--                $('.four-slide').removeClass('disNone');--}}
{{--            }, 5000);--}}
{{--        })--}}
{{--        $('.to-save').click(function () {--}}
{{--            $('.four-slide').addClass('disNone');--}}
{{--            $('.five-slide').removeClass('disNone');--}}
{{--        });--}}
{{--        $('.to-refresh').click(function () {--}}
{{--            location.reload();--}}
{{--        });--}}



{{--        $(".number-input").keyup(function (e) {--}}
{{--            if ($(this).val().length >= 11) $(".call-button").addClass("show");--}}
{{--            if (e.which == 8) $(".call-button").removeClass("show");--}}
{{--        });--}}
{{--        $(".number-input").keypress(function (e) {--}}
{{--            //if the letter is not digit then display error and don't type anything--}}
{{--            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {--}}
{{--                //display error message--}}
{{--                return false;--}}
{{--            }--}}
{{--        });--}}

{{--        $("[data-number]").on("click", function () {--}}
{{--            if ($(".number-input").val().length < 11) {--}}
{{--                var phoneNumber = $(".number-input").val() + $(this).data("number");--}}
{{--                $(".number-input").val(phoneNumber);--}}
{{--            }--}}
{{--            if ($(".number-input").val().length == 11) $(".call-button").addClass("show");--}}
{{--        });--}}

{{--        $(".delete").on("click", function () {--}}
{{--            var phoneNumber = $(".number-input").val().slice(0, -1);--}}
{{--            $(".number-input").val("");--}}
{{--            $(".number-input").val(phoneNumber);--}}
{{--            $(".call-button").removeClass("show");--}}
{{--        });--}}


{{--        $('.play-icon').click(function () {--}}

{{--            $(this).addClass('disNone');--}}
{{--            $('.video video').get(0).play()--}}

{{--            setTimeout(() => {--}}
{{--                $('.play-icon').removeClass('disNone');--}}
{{--            }, 6000);--}}
{{--        });--}}


{{--        $('.save').click(function () {--}}

{{--            $('.load1').removeClass('disNone');--}}
{{--            setTimeout(() => {--}}
{{--                location.reload();--}}
{{--            }, 10000);--}}
{{--        });--}}
{{--        document.addEventListener('contextmenu', event => event.preventDefault());--}}

{{--    })--}}
{{--    })--}}
{{--</script>--}}