@extends('layouts.app')
@section('css')


@endsection
@php
    $resto = \App\Models\Restaurants::find(\App\Helpers\CommonMethods::getRestuarantID());
    $lang = $resto->default_lang;

    app()->setLocale($lang);
    if(session('app_lang') !==null){
    $lang = session('app_lang');
    app()->setLocale($lang);

    }
@endphp
@section('content')


    <link href="{!! env('APP_ASSETS') !!}vendor_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
    <link href="{!! env('APP_ASSETS') !!}vendor_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
    <link href="{!! env('APP_ASSETS') !!}/css/jquery.timepicker.min.css" rel="stylesheet"/>
    <link href="{!! env('APP_ASSETS') !!}vendor_components/select2/dist/css/select2.min.css" rel="stylesheet">
    <style>
        .datepicker-days{
            display: block !important;
        }
        .alert {
            display: none;
        }

        .border-red {
            border: 1px solid #F00 !important;
        }
        .tab-pane{}
        .container-full,.content-wrapper{
            background-color: transparent !important;
        }
        #image-preview {
            width: 700px;
            border-radius: 20px;
            height: 341px;
            position: relative;
            overflow: hidden;
            background-color: #f9f9f9;
            color: #ecf0f1;
            background-position: center !important;
            background-size: cover !important;
        }
        #image-preview input {
            line-height: 200px;
            font-size: 200px;
            position: absolute;
            opacity: 0;
            z-index: 10;
        }
        #image-preview label {
            position: absolute;
            z-index: 5;
            opacity: 0.8;
            cursor: pointer;
            background-color: #bdc3c7;
            width: 200px;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }
        .select2-container .select2-selection--multiple{
            min-height: 46px;
        }
        .form-control, .form-select {
            height: 46px !important;
            border-color: #E4E6EB !important;
            border-radius: 7px !important;
        }
        .select2-container--default .select2-selection--single{
            height: 40px !important;
            border-color: #E4E6EB !important;
            border-radius: 7px !important;
            padding: 9px 12px;
        }

        .outlet-section,.item-section{
            display: none;
        }

        .outlets.selected .outlet-section, .items.selected .item-section{
            display: inline-flex;
        }
        .select2 {width: 100% !important;}

        html[dir="rtl"]  .ar-m-0{
            margin: 0 !important;
        }

    </style>


    <div class="content-wrapper">
        @php
            $selectSocialMedia = [];
            $social_media_array = ['facebook','youtube','instagram','twitter','tiktok','weChat','linkedIn'];
            if(isset($businessLinks)){

                $businessSocialLinks = ($businessLinks->business_links);
                $selectSocialMedia = $businessSocialLinks->pluck('social_type')->toArray();
            }


                $remaining_social_media = array_diff($social_media_array,$selectSocialMedia);

        @endphp
        <div class="container-full">
            <section class="content pt-3">

                <form id="bio-form" method="POST" action="{!! env('APP_URL') !!}bio/link/save"
                      enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{!! isset($bioLink)?$bioLink->id:'' !!}"/>
                    <div class="row ar-m-0">
                        <div class="col-xl-8 col-sm-8">
                            <div class="card mb-4">



                                <div class="card-body">
                                    <h4>{{__('label.add_bio_link')}}</h4>
                                    <p>Enable and manage bio links for social media
                                    </p>

                                    <div class="row">
                                        <div class="form-group">
                                            <label>Page Background (optional)</label>
                                            <input type="file" name="background_image" class="form-control" />
                                        </div>
                                    </div>
                                    @if(isset($businessLinks))
                                    <div class="row">
                                        <div class="col-md-12">
                                            <img src="{!! $businessLinks->background_image !!}" width="200px" />
                                        </div>
                                    </div>
                                        @endif

                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">Social Links</div>
                                <div class="card-body">
                                    <div class="table-responsive">


                                    <table class="table table-stripped table-borderless">
                                        <thead>
                                        <tr>
                                            <th width="20%">Social Media Type</th>
                                            <th width="30%">Label</th>
                                            <th >Social Media Link</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        @if(isset($businessSocialLinks) && $businessSocialLinks->count() > 0)
                                            @foreach($businessSocialLinks as $link)
                                                <tr>
                                                    <td>
                                                        @php

                                                        @endphp
                                                        <select class="form-control social_media_type  form-control-sm" name="social_media_type[]" required>
                                                            <option value="">Choose Social Media Type</option>
                                                            @foreach($social_media_array as $media)
                                                                <option @if($link->social_type==$media) selected @endif value="{!! ($media) !!}">{!! ucwords($media) !!}</option>
                                                            @endforeach

                                                        </select>
                                                    </td>
                                                    <td width="30%">
                                                        <input type="text" value="{!! $link->social_label !!}" name="social_label[]" class="form-control form-control-sm" required />

                                                    </td>
                                                    <td >
                                                        <input type="url" value="{!! $link->social_link !!}" name="social_media_link[]" class="form-control form-control-sm" required />
                                                    </td>
                                                    <td>
                                                        <a href="#!" class="text-danger delete-social"><i class="glyphicon glyphicon-trash"></i> </a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                            @endif



                                        <tr class="for-clone">
                                            <td width="20%">
                                                <select class="form-control social_media_type form-control-sm" name="social_media_type[]" required>
                                                    <option value="">Choose Social Media Type</option>
                                                    @foreach($remaining_social_media as $media)
                                                    <option value="{!! ($media) !!}">{!! ucwords($media) !!}</option>
                                                    @endforeach

                                                </select>
                                            </td>
                                            <td width="30%">
                                                <input type="text"  name="social_label[]" class="form-control form-control-sm" required />

                                            </td>
                                            <td >
                                                <input type="url" name="social_media_link[]" class="form-control form-control-sm" required />
                                            </td>
                                            <td>
                                                <a href="#!" class="text-danger delete-social"><i class="glyphicon glyphicon-trash"></i> </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="3" class="text-end">
                                                    <a href="#!" class="btn btn-primary btn-sm add-more"> Add More </a>
                                                </td>
                                            </tr>
                                        </tfoot>

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

                            </div>

                            <div class="card card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <a href="#!" class="btn btn-primary save-bio-link">{{__('label.save_bio_link')}}</a>
                                    </div>
                                </div>

                            </div>




                        </div>
                        <div class="col-xl-4 col-sm-4">
                            <div class="card">
                                <div class="card-header">QR Code</div>
                                <div class="card-body">
                                    <div id="output" class="qr-output"></div>

                                    <a style="width: 100%; margin:  10px 0" class="btn btn-primary download-image ">{{__('label.download')}}</a>

                                    <input type="text" class="form-control" readonly name="" value="{!! env('SHARE_LINK_URL').$resto->resto_unique_name !!}">
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </section>
        </div>
    </div>

    <div id="download" style="display: none"></div
@endsection

@section('js')
    <script src="{!! env('APP_ASSETS') !!}vendor_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="{!! env('APP_ASSETS') !!}vendor_components/select2/dist/js/select2.min.js"></script>
    <script src="{!! env('APP_ASSETS') !!}js/jquery.timepicker.min.js"></script>
    <script src="{!! env('APP_ASSETS') !!}js/jquery.qrcode.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $('#output').qrcode({
                render: "canvas",
                text: "{!! env('SHARE_LINK_URL').$resto->resto_unique_name !!}",
                width: 250,
                height: 250,
                background: "#ffffff",
                foreground: "#000000",
                imgWidth: 50,
                imgHeight: 50
            });

            $('#download').qrcode({
                render: "canvas",

                text: "{!! env('SHARE_LINK_URL').$resto->resto_unique_name !!}",
                width: 2000,
                height: 2000,
                background: "#ffffff",
                foreground: "#000000",
                imgWidth: 500,
                imgHeight: 500
            });

            $(".download-image").click(function () {
                var canvas = $('#download canvas')[0];
                var _this = $(this);

                console.log(canvas.toDataURL());
// Change here
                $.ajax({
                    url: "{!! env('APP_URL') !!}download/qrcode",
                    type: "POST",
                    data: {
                        resto:"bio-link-{!! $resto->resto_unique_name !!}-bio-link",
                        data: canvas.toDataURL(),
                        '_token': "{!! csrf_token() !!}"
                    },
                    success: function (response) {
                        console.log(response);
                        var link = document.createElement('a');
                        link.href = response;
                        link.download = "bio-link-{!! $resto->resto_unique_name !!}-qrcode.png";
                        link.click();
                    }
                });
            });

            $("body").on("click",".save-bio-link",function(){
                if($("#bio-form").valid()){
                    $("#bio-form").ajaxForm(function(response){
                        if(response.type=="success"){
                            $.toast({
                                heading: 'Bio Links.',
                                text: response.message,
                                position: 'top-right',
                                loaderBg: '#ff6849',
                                icon: 'success',
                                hideAfter: 3000,
                                stack: 1
                            });

                            setTimeout(function () {
                                location.reload();
                            },2000);
                        }else{
                            $.toast({
                                heading: 'Bio Links.',
                                text: response.message,
                                position: 'top-right',
                                loaderBg: '#ff6849',
                                icon: 'error',
                                hideAfter: 3000,
                                stack: 1
                            });
                        }
                    }).submit();
                }
            });

           $("body").on("click",".add-more",function(){

               var _lastRow =  $('table tbody').find("tr:last");
               var _newRow = _lastRow.clone();
               _newRow.find('input').val('');
               $('table tbody').find("tr:last").after(_newRow);
           });

            $("body").on("click",".delete-social",function(e){

                e.preventDefault();
                var _this = $(this);

                var _tr = $("table tbody tr").length;
             //   alert(_tr);

                if(_tr ==1){
                   alert('cannot delete all social media link');
                    return false;
                }

                _this.parents('tr').remove();

            });

        })
    </script>


@endsection