@extends('layouts/app')
@section('css')
    <style type="text/css" nonce="{{ csp_nonce() }}">
        .w-full>.col-sm-6 {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }

        .w-full {
            width: 50%;
        }

        .select2-container {
            box-sizing: border-box;
            display: inline-block;
            margin: 0;
            position: relative;
            vertical-align: middle;
            width: 100% !important;
        }

        .col-1st {
            display: inline-block;
            width: 100px !important;
        }

        .content-image-video {
            display: none;
            max-height: 250px;
            max-width: 400px
        }
    </style>
@stop
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-4">
                    <h4 class="card-title">Add Image/Video</h4>
                </div>
                <div class="col-sm-8">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">Content Management</li>
                        <li class="breadcrumb-item"><a href="{{ route('content-management.kioskBanner') }}">Kiosk Content
                                Management</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card card-secondary">
                        @if(Session::has('error'))
                        <div class="alert alert-danger">
                            <h5><i class="icon fas fa-x"></i> Errors!</h5>
                            @foreach(Session::get('error') as $err)
                            {{ $err }}<br>
                            @endforeach
                            @php
                            Session::forget('error');
                            @endphp
                        </div>
                        @endif    
                        <div class="card-header">
                            <a href="{{ route('content-management.kioskBanner.getItem', ['banner_name' => $banner->banner_name]) }}"
                                class="card-title left-btn"><i class="fa fa-chevron-circle-left"></i>&nbsp;&nbsp;Back</a>
                        </div>
                        <div class="card-body">
                            <form name='f_a' action="{{ route('content-management.kioskBanner.store') }}" method="post"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            Banner Name: <input type="text" disabled class=""
                                                value="{{ $banner->banner_description }}" placeholder="Banner Description">
                                            <input type="hidden" value="{{ $banner->banner_name }}" id="banner_name"
                                                name="banner_name">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div><label>Display Branch</label></div>
                                        <span class="pr-3 col-1st"><input type="radio" name="all_branch" value="1"
                                                @if (!$errors->has('branches')) checked @endif id="all_branch"> All</span>
                                        <span><input type="radio" name="all_branch" value="0"
                                                @if ($errors->has('branches')) checked @endif id="selectedbranch">
                                            Selected Branches</span>
                                    </div>
                                    <div id='show_branches' class="col-sm-6">
                                        <label>Branches</label>
                                        <span class="text-red">*</span>
                                        <select id="branches" class="form-control select2-multiple" name="branches[]"
                                            multiple="multiple">
                                            @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}"
                                                    @if (in_array($branch->id, $branchIds)) selected="selected" @endif>
                                                    {{ $branch->code }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('branches'))
                                            <span class="text-danger">{{ $errors->first('branches') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="item_type">Item Type</label>
                                            <div>
                                                {{-- <span class="pr-3 col-1st"><input type="radio" name="item_type"
                                                        value="0" checked onclick="toggle_image();"> Image</span> --}}
                                                <span class="pr-3 col-1st"><input type="radio" name="item_type"
                                                        value="0" checked id="imageCheckbox"> Image</span>
                                                {{-- <span><input type="radio" name="item_type" value="1" @if (old('item_type') === '1') checked @endif onclick="toggle_image();"> Video</span> --}}
                                                <span><input type="radio" name="item_type" value="1"
                                                        id="videoCheckbox" @if (old('item_type') === '1') checked @endif>
                                                    Video</span>

                                            </div>
                                            <span id="advice-image" class="small">Note:<br>
                                                - Please ensure the file is a valid image file (JPG/JPEG/PNG/GIF).<br>
                                                - Uploaded image will replace existing one.<br>
                                                - Image File Size is limited to a maximum of 20MB only.<br>
                                            </span>
                                            <span id="advice-video" class="small">Note:<br>
                                                - Please ensure the video is a valid video (MP4/MKV/WEBM).<br>
                                                - Uploaded video will replace existing one.<br>
                                                - Image File Size is limited to a maximum of 30MB only.<br>
                                            </span>
                                            @if ($errors->has('item_type'))
                                                <span class="text-danger">{{ $errors->first('item_type') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Upload File</label>
                                            <span class="text-red">*</span>
                                            <input type="file" name="fileUpload" id="fileUpload"
                                                class="form-control form-control-file">
                                            <input type="hidden" name="duration" id="duration" class="form-control">
                                        </div>
                                        @if ($errors->has('fileUpload'))
                                            <span class="text-danger">{{ $errors->first('fileUpload') }}</span>
                                        @endif
                                        <div class="col-md-12 mb-2">
                                            <img id="preview-image" src="#" alt="preview image"
                                                class="content-image-video">
                                            <video id="preview-video" controls autoplay muted src="#"
                                                alt="preview video" class="content-image-video">
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary mt-3">Add Image/Video</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('js')
    <script nonce="{{ csp_nonce() }}">
        document.addEventListener('DOMContentLoaded', function() {
            var videoCheckbox = document.getElementById('videoCheckbox');
            if (videoCheckbox) {
                videoCheckbox.addEventListener('click', function() {
                    toggle_image();
                });
            }
            var imageCheckbox = document.getElementById('imageCheckbox');
            if (imageCheckbox) {
                imageCheckbox.addEventListener('click', function() {
                    toggle_image();
                });
            }
            var selectedbranch = document.getElementById('selectedbranch');
            if (selectedbranch) {
                selectedbranch.addEventListener('click', function() {
                    toggle_branch_settings();
                });
            }
            var all_branch = document.getElementById('all_branch');
            if (all_branch) {
                all_branch.addEventListener('click', function() {
                    toggle_branch_settings();
                });
            }
        });


        if (document.f_a['all_branch'].value == 1) {
            $('#show_branches').hide();
        }

        if (document.f_a['item_type'].value == 0) {
            $('#advice-image').show();
            $('#advice-video').hide();
        } else {
            $('#advice-image').hide();
            $('#advice-video').show();
        }

        function toggle_image() {
            var item_type = document.f_a['item_type'].value;

            if (item_type == 1) {
                $('#advice-video').show();
                $('#advice-image').hide();
            } else {
                $('#advice-image').show();
                $('#advice-video').hide();
            }
        }




        function toggle_branch_settings() {
            var all_branch = document.f_a['all_branch'].value;

            if (all_branch == 1) {
                $('#show_branches').hide();
            } else {
                $('#show_branches').show();
            }
        }

        // $('#fileUpload').change(function(){
        //        let reader = new FileReader();
        //        reader.onload = (e) => { 
        //          $('#preview-image').attr('src', e.target.result); 
        //        }
        //        reader.readAsDataURL(this.files[0]); 

        // });

        $('#fileUpload').on('change', function() {
            const fileInput = document.getElementById('fileUpload');
            captureDuration(fileInput);
            if (document.f_a['item_type'].value == 0) {
                if (isImage($(this).val())) {
                    preview = document.getElementById('preview-image');
                    document.getElementById('preview-video').style.display = 'none';
                    preview.style.display = 'block';
                } else {
                    $('#fileUpload').val('');
                    alert("Only image files are allowed to upload.")
                }
            } else {
                if (isVideo($(this).val())) {
                    preview = document.getElementById('preview-video');
                    document.getElementById('preview-image').style.display = 'none';
                    preview.style.display = 'block';
                } else {
                    $('#fileUpload').val('');
                    alert("Only video files are allowed to upload.")
                }
            }
            const [file] = fileUpload.files
            if (file) {
                preview.src = URL.createObjectURL(file)
            }
        });

        function isVideo(filename) {
            var ext = getExtension(filename);
            switch (ext.toLowerCase()) {
                case 'mp4':
                case 'mkv':
                case 'webm':
                    return true;
            }
            return false;
        }

        function isImage(filename) {
            var ext = getExtension(filename);
            switch (ext.toLowerCase()) {
                case 'png':
                case 'jpg':
                case 'jpeg':
                case 'gif':
                    return true;
            }
            return false;
        }

        function getExtension(filename) {
            var parts = filename.split('.');
            return parts[parts.length - 1];
        }

        $('#branches').select2({
            placeholder: "Select",
            allowClear: true
        });
//================================================ Capture video and Gif image duration============================================//
        function captureDuration(fileInput) {
            const durationInput = document.getElementById('duration');
            const file = fileInput.files[0];
            const fileType = file.type;
            if (fileType === 'image/gif') {
                try {
                    let fileReader = new FileReader();
                    fileReader.readAsArrayBuffer(file);
                    fileReader.onload = (event) => {
                        let arr = new Uint8Array(fileReader.result);
                        let duration = 0;
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == 0x21 &&
                                arr[i + 1] == 0xF9 &&
                                arr[i + 2] == 0x04 &&
                                arr[i + 7] == 0x00) {
                                const delay = (arr[i + 5] << 8) | (arr[i + 4] & 0xFF)
                                duration += delay < 2 ? 10 : delay;
                            }
                        }

                        durationInput.value = duration / 100;
                    }
                } catch (error) {
                    console.error('Error processing GIF:', error);
                }
            }

            if (fileType === 'video/mp4' || fileType === 'video/mkv' || fileType === 'video/webm') {
                let video = document.getElementById("preview-video");
                console.log(video.duration);
                durationInput.value = video.duration;
            }
        }

        const durationInput = document.getElementById('duration');
        const video = document.getElementById('preview-video');
        function handleVideoLoaded() {
            durationInput.value = video.duration;
        }
        video.addEventListener('loadeddata', handleVideoLoaded);
//================================================ End Capture video duration ============================================//
</script>
@stop