@extends('layout.master')

@section('css') 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css">
<link href="{{ asset('css/fileinput.css') }}" rel="stylesheet" />
<style>
    .col-form-label{
        margin: 0 !important;
    }
    input{
        margin: 0 !important;
    }
    .card .card-body .form-group {
        margin: 0;
    }
    .error {
        color:red !important;
    }
</style>
@stop

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="card">
                        <div class="card-header card-header-warning">
                            <h4 class="card-title">IVF Video Settings</h4>
                        </div>
                        <div class="card-body">
                            <form id="frm_commision_update" action="{{ route('settings.ivfvideo_setting_update') }}" method="POST" enctype="multipart/form-data">
                                <div class="p-2">
                                    @csrf
                                    
                                        <div class="row mt-4" id="ovum_pickup_video_section">
                                            <label class="col-md-5 col-sm-12 col-form-label mt-0">Change Ovum Pickup Video</label>
                                            <div class="col-md-7 col-sm-12">
                                                <input type="file" name="ovum_pickup_video" id="ovum_pickup_video"
                                                    data-msg-placeholder="Change Ovum Pickup Video" />
                                                <strong><span class='text-danger' id='error_ovum_pickup_video'> </span></strong>
                                            </div>
                                        </div>
                                        @if ($ovum_pickup_video->setting_value)
                                            <div class="row mt-0" id="ovum_pickup_video_section">
                                                <label class="col-md-5 col-sm-12 col-form-label mt-0"></label>
                                                <div class="col-md-7 col-sm-12">
                                                   <!-- <a href="{{ $ovum_pickup_video->setting_value }}"
                                                        target="_blank">Ovum Pickup Video Preview</a>-->
                                                    
                                                    <a href="#" class="play_button_ovum_pickup_video" title="Delete Day2 Video">Ovum Pickup Video Preview</a>
                                                    <a href="#" class="button_delete_ovum_pickup_video" title="Delete Day2 Video"><i class="material-icons" style="color:red">delete</i></a>
                                                    
                                                </div>
                                            </div>
                                        @endif
                                        <div class="row mt-4" id="embryo_transfer_video_section">
                                            <label class="col-md-5 col-sm-12 col-form-label mt-0">Change Embryo Transfer Video</label>
                                            <div class="col-md-7 col-sm-12">
                                                <input type="file" name="embryo_transfer_video" id="embryo_transfer_video"
                                                    data-msg-placeholder="Change Embryo Transfer Video" />
                                                <strong><span class='text-danger' id='error_embryo_transfer_video'> </span></strong>
                                            </div>
                                        </div>
                                        @if ($embryo_transfer_video->setting_value)
                                            <div class="row mt-0" id="embryo_transfer_video_section">
                                                <label class="col-md-5 col-sm-12 col-form-label mt-0"></label>
                                                <div class="col-md-7 col-sm-12">
<!--                                                    <a href="{{ $embryo_transfer_video->setting_value }}"
                                                        target="_blank">Embryo Transfer Video Preview</a>-->
                                                        <a href="#" class="play_button_embryo_transfer_video" title="Delete Day2 Video">Embryo Transfer Video Preview</a>
                                                    <a href="#" class="button_delete_embryo_transfer_video" title="Delete Day2 Video"><i class="material-icons" style="color:red">delete</i></a>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="row mt-4" id="ivf_information_video_section">
                                            <label class="col-md-5 col-sm-12 col-form-label mt-0">Change Ivf Information Video</label>
                                            <div class="col-md-7 col-sm-12">
                                                <input type="file" name="ivf_information_video" id="ivf_information_video"
                                                    data-msg-placeholder="Change Ivf Information Video" />
                                                <strong><span class='text-danger' id='error_ivf_information_video'> </span></strong>
                                            </div>
                                        </div>
                                        @if ($ivf_information_video->setting_value)
                                            <div class="row mt-0" id="ivf_information_video_section">
                                                <label class="col-md-5 col-sm-12 col-form-label mt-0"></label>
                                                <div class="col-md-7 col-sm-12">
<!--                                                    <a href="{{ $ivf_information_video->setting_value }}"
                                                        target="_blank">IVF information Video Preview</a>-->
                                                        <a href="#" class="play_button_ivf_information_video" title="Delete Day2 Video">IVF information Video Preview</a>
                                                    <a href="#" class="button_delete_ivf_information_video" title="Delete Day2 Video"><i class="material-icons" style="color:red">delete</i></a>
                                                </div>
                                            </div>
                                        @endif
                                    
                                </div>
                                <div class="text-center pt-2">
                                    <a href="{{ route('index') }}" class="btn btn-danger w-25">Cancel</a>
                                    <input type="submit" class="btn btn-info w-25" value="Update">
                                </div>


                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Delete Confirmation for Ovum Pickup START -->
    <div class="modal fade" id="deleteOvumPickupAlertModel" tabindex="-1" role="dialog" aria-labelledby="DeleteOvumPickupModelLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="DeleteOvumPickupModelLabel">Delete Confirmation</h5>
                    <button type="button" class="close reset-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure want to delete this video?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary reset-close" data-dismiss="modal">Cancel</button>
                    <a href="{{ route('settings.ovum_pickup_video', $ovum_pickup_video->id) }}" id="resetLink"
                        class="btn btn-info">Delete</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Delete Confirmation for Ovum Pickup Video Popup START -->
    <div class="modal fade" id="VideoOvumPickupAlertModel" tabindex="-1" role="dialog" aria-labelledby="DeleteOvumPickupModelLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="VideoOvumPickupModelLabel">Ovum Pickup Video</h5>
                    <button type="button" class="close reset-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @php
                        $strArray1 = explode('/',$ovum_pickup_video->setting_value);
                        $lastElement1 = end($strArray1);
                    @endphp
                    <iframe src="https://player.vimeo.com/video/{{ $lastElement1 }}" width="480" height="281" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
    
    
    <!-- Delete Confirmation for EmbryoTransfer START -->
    <div class="modal fade" id="deleteEmbryoTransferAlertModel" tabindex="-1" role="dialog" aria-labelledby="DeleteEmbryoTransferModelLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="DeleteEmbryoTransferModelLabel">Delete Confirmation</h5>
                    <button type="button" class="close reset-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure want to delete this video?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary reset-close" data-dismiss="modal">Cancel</button>
                    <a href="{{ route('settings.embryo_transfer_video', $embryo_transfer_video->id) }}" id="resetLink"
                        class="btn btn-info">Delete</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Delete Confirmation for EmbryoTransfer Video Popup START -->
    <div class="modal fade" id="VideoEmbryoTransferAlertModel" tabindex="-1" role="dialog" aria-labelledby="DeleteEmbryoTransferModelLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="VideoEmbryoTransferModelLabel">Embryo Transfer Video</h5>
                    <button type="button" class="close reset-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @php
                        $strArray2 = explode('/',$embryo_transfer_video->setting_value);
                        $lastElement2 = end($strArray2);
                    @endphp
                    <iframe src="https://player.vimeo.com/video/{{ $lastElement2 }}" width="480" height="281" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
    
    <!-- -->
    <!-- Delete Confirmation for IVFInformation START -->
    <div class="modal fade" id="deleteIVFInformationAlertModel" tabindex="-1" role="dialog" aria-labelledby="DeleteIVFInformationModelLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="DeleteIVFInformationModelLabel">Delete Confirmation</h5>
                    <button type="button" class="close reset-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure want to delete this video?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary reset-close" data-dismiss="modal">Cancel</button>
                    <a href="{{ route('settings.ivf_information_video', $ivf_information_video->id) }}" id="resetLink"
                        class="btn btn-info">Delete</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Delete Confirmation for IVFInformation Video Popup START -->
    <div class="modal fade" id="VideoIVFInformationAlertModel" tabindex="-1" role="dialog" aria-labelledby="DeleteIVFInformationModelLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="VideoIVFInformationModelLabel">IVF Information Video</h5>
                    <button type="button" class="close reset-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @php
                        $strArray3 = explode('/',$ivf_information_video->setting_value);
                        $lastElement3 = end($strArray3);
                    @endphp
                    <iframe src="https://player.vimeo.com/video/{{ $lastElement3 }}" width="480" height="281" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

@stop
@section('script')
    <style>
        .form-control {
            background: none;
        }
        textarea.form-control {
            border-bottom: 1px solid #9e9e9e;
        }
    </style>
    <script src="{{ asset('js/image/fileinput.js') }}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ asset('js/settings/add.js') }}" type="text/javascript"></script>
    <script>
        
        $("#ovum_pickup_video").fileinput({
            @if($ovum_pickup_video->ovum_pickup_video==null) 
                initialPreview :'',
            @else  
                //https://vimeo.com/manage/videos/{{ $ovum_pickup_video->ovum_pickup_video }}
                initialPreview:'',
            @endif

            initialPreviewAsData: true,
            showUpload: false,
            showPreview:true,
            showRemove: false,
            showUploadStats:true,
            removeFromPreviewOnError: true,
            initialPreviewShowDelete:false,
            overwriteInitial: true, 
            maxFileSize:24414.1,
            allowedFileExtensions: ['mp4', 'mov','webm','mpeg','flv','ogv','ogg','avi','wmv','3gp'],
            allowedPreviewTypes: ['video'],
            initialPreviewConfig: [

                {type: "video",initialPreviewAsData: true,  caption: "", url: "", key: 15},
            ],
        });
        
        $("#embryo_transfer_video").fileinput({
            @if($embryo_transfer_video->embryo_transfer_video==null) 
                initialPreview :'',
            @else
                //https://vimeo.com/manage/videos/{{ $embryo_transfer_video->embryo_transfer_video }}
                initialPreview:'',
            @endif

            initialPreviewAsData: true,
            showUpload: false,
            showPreview:true,
            showRemove: false,
            showUploadStats:true,
            removeFromPreviewOnError: true,
            initialPreviewShowDelete:false,
            overwriteInitial: true,
            maxFileSize:24414.1,
            allowedFileExtensions: ['mp4', 'mov','webm','mpeg','flv','ogv','ogg','avi','wmv','3gp'],
            allowedPreviewTypes: ['video'],
            initialPreviewConfig: [
                {type: "video",  initialPreviewAsData: true,  caption: "", url: "", key: 15},
            ],
        });
        
        $("#ivf_information_video").fileinput({
            @if($ivf_information_video->ivf_information_video==null) 
                initialPreview :'',
            @else
                //https://vimeo.com/manage/videos/{{ $ivf_information_video->ivf_information_video }}
                initialPreview:'',
            @endif

            initialPreviewAsData: true,
            showUpload: false,
            showPreview:true,
            showRemove: false,
            showUploadStats:true,
            removeFromPreviewOnError: true,
            initialPreviewShowDelete:false,
            overwriteInitial: true, 
            maxFileSize:24414.1,
            allowedFileExtensions: ['mp4', 'mov','webm','mpeg','flv','ogv','ogg','avi','wmv','3gp'],
            allowedPreviewTypes: ['video'],
            initialPreviewConfig: [

                {type: "video",initialPreviewAsData: true,  caption: "", url: "", key: 15},
            ],
        });

        // OvumPickup
        $(document).on('click', '.reset-close', function() {
            $("#deleteOvumPickupAlertModel").modal("hide");
        });
        // OvumPickup
        $(document).on('click', 'a.button_delete_ovum_pickup_video', function() {
            $("#deleteOvumPickupAlertModel").modal("show");
        });
        
        // OvumPickupVideoPopup
        $(document).on('click', '.reset-close', function() {
            $("#VideoOvumPickupAlertModel").modal("hide");
        });
        // OvumPickupVideoPopup
        $(document).on('click', 'a.play_button_ovum_pickup_video', function() {
            $("#VideoOvumPickupAlertModel").modal("show");
        });
        
        // EmbryoTransfer
        $(document).on('click', '.reset-close', function() {
            $("#deleteEmbryoTransferAlertModel").modal("hide");
        });
        // EmbryoTransfer
        $(document).on('click', 'a.button_delete_embryo_transfer_video', function() {
            $("#deleteEmbryoTransferAlertModel").modal("show");
        });
        
        // EmbryoTransferVideoPopup
        $(document).on('click', '.reset-close', function() {
            $("#VideoEmbryoTransferAlertModel").modal("hide");
        });
        // EmbryoTransferVideoPopup
        $(document).on('click', 'a.play_button_embryo_transfer_video', function() {
            $("#VideoEmbryoTransferAlertModel").modal("show");
        });
        
        
        //
        // IVFInformation
        $(document).on('click', '.reset-close', function() {
            $("#deleteIVFInformationAlertModel").modal("hide");
        });
        // IVFInformation
        $(document).on('click', 'a.button_delete_ivf_information_video', function() {
            $("#deleteIVFInformationAlertModel").modal("show");
        });
        
        // IVFInformationVideoPopup
        $(document).on('click', '.reset-close', function() {
            $("#VideoIVFInformationAlertModel").modal("hide");
        });
        // IVFInformationVideoPopup
        $(document).on('click', 'a.play_button_ivf_information_video', function() {
            $("#VideoIVFInformationAlertModel").modal("show");
        });
    </script>
@stop