{{-- extend layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title', 'Información')
{{-- vendor styles --}}
@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/katex.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/monokai-sublime.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/quill.snow.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/quill.bubble.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/dropify/css/dropify.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/dataTables.checkboxes.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-users-campaign.css') }}">
@endsection

{{-- page styles --}}
@section('page-style')
@endsection

{{-- page content --}}
@section('content')
    @include('pages.campaign.modals.administrator-modal')
    <div class="section users-edit">
        <div class="row">
            <div class="col xl9 m8 s12">
                <div class="card">
                    <div class="card-content" role="tabpanel" id="campaign-tabs">
                        <ul class="tabs nav-tabs mb-2 row">
                            <li class="tab">
                                <a class="display-flex align-items-center active" style="text-overflow: clip !important" id="information-tab"  role="tab" data-toggle="tab" href="#information">
                                    <i class="material-icons mr-2">error_outline</i><span>Información</span>
                                </a>
                            </li>
                            @if ($user->userType === 1 || $user->userType === 0)
                                <li class="tab">
                                    <a class="display-flex align-items-center" id="administrators-tab" href="#administrators" style="text-overflow: clip !important">
                                        <i class="material-icons mr-1">person_outline</i><span>Administradores</span>
                                    </a>
                                </li>
                            @endif
                        </ul>
                        <div class="divider mb-0"></div>
                        <input id="uuidKey" name="uuidKey" value="{{ $campaign['uuidKey'] }}" type="hidden" />
                        <div class="row tab-content">
                            @include('pages.campaign.tabs.information-tab')
                            @include('pages.campaign.tabs.administrators-tab')
                        </div>
                    </div>
                </div>
            </div>
            <div class="col xl3 m4 s12">
                <div class="card invoice-action-wrapper mb-10">
                    <div class="card-content" style="overflow: hidden; align-items: center">
                        <div class="card-alert card purple">
                            <div class="card-content white-text">
                                <p>Logo 383x123</p>
                            </div>
                        </div>
                        <div class="col s12 m12 l12">
                            <input type="file"  class="dropify" name="logo-campaign" data-type="logo" onChange="showPreview(this,'logo');" id="logo-campaign" data-default-file="@isset($campaign['logoSignedUrl']){{ $campaign['logoSignedUrl'] }} @endisset" />
                        </div>
                    </div>
                </div>

                <div class="card invoice-action-wrapper mb-10">
                    <div class="card-content" style="overflow: hidden; align-items: center">
                        <div class="card-alert card purple">
                            <div class="card-content white-text">
                                <p>Poster 650x168</p>
                            </div>
                        </div>
                        <div class="col s12 m12 l12">
                            <input type="file" class="dropify" name="poster-campaign" data-type="poster" onChange="showPreview(this,'poster');"  id="poster-campaign" data-default-file="@isset($campaign['posterSignedUrl']){{ $campaign['posterSignedUrl'] }} @endisset" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
    <script src="{{ asset('vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/js/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('vendors/quill/katex.min.js') }}"></script>
    <script src="{{ asset('vendors/quill/highlight.min.js') }}"></script>
    <script src="{{ asset('vendors/dropify/js/dropify.min.js') }}"></script>
    <script src="{{ asset('/vendors/ckeditor/ckeditor.js') }}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
    <script src="{{ asset('js/scripts/form-file-uploads.js') }}"></script>
    <script src="{{ asset('js/manager/admin-campaign.js') }}"></script>
    <script>
        let routeUpdateCampaignInformation = '{{ route('web.manager.information.update', ['uuid' => ':uuidCampaign']) }}';
        let routeAdministratorSave = '{{ route('api.administrators.save', ['campaignUuidKey' => ':uuidCampaign']) }}';
        let routeInformationCampaign = '{{ route('manager.information', ['slug' => $campaign['slug'], 'uuid' => $campaign['uuidKey']]) }}'
        setDropifyImageCampaign($('#logo-campaign'), '{{ $campaign['logoSignedUrl'] ?? ''}}');
        setDropifyImageCampaign($('#poster-campaign'), '{{$campaign['posterSignedUrl'] ?? ''}}');

        function removeImg(campaignId, imgType) {
            let url = "";
            if (campaignId) {
                let fileReader = new FileReader();
                if ( imgType === "logo"){
                    url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/campaigns/delete/logo/${campaignId}`;
                } else if( imgType === "poster" ) {
                    url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/campaigns/delete/poster/${campaignId}`;
                }

                $.ajax({
                    url: url,
                    method: 'DELETE',
                    processData: false,
                    contentType: false,
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ session()->get('token') }} ');
                    },
                }).done(function(data) {
                    console.log("Imagen Guardada");
                }).fail(function() {

                });
            }
        }

        // $('.dropify-clear').click(function(){
        //     let inputObject = $(this).closest('.dropify-wrapper').children('input');
        //     let campaignId = $('#admin-campaing-form').find("[name = 'uuidKey']").val();
        //     removeImg(campaignId,inputObject[0].dataset.type);
        // });

        function showPreview(objFileInput, imgType) {
            let url = "";
            if (objFileInput.files[0]) {
                let fileReader = new FileReader();
                let formData = new FormData();
                let campaignId = $('#admin-campaing-form').find("[name = 'uuidKey']").val();
                fileReader.onload = function(e) {
                    if ( imgType === "logo"){
                        $('#img-logo-campaign').closest('.dropify-preview').attr('style','height: 200px; display: flex; align-items: center;');
                        $('#img-logo-campaign').attr('src', e.target.result);
                    }
                    else{
                        $('#img-poster-campaign').closest('.dropify-preview').attr('style','height: 200px; display: flex; align-items: center;');
                        $('#img-poster-campaign').attr('src', e.target.result);
                    }

                }
                fileReader.readAsDataURL(objFileInput.files[0]);

                if ( imgType === "logo"){
                     url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/campaigns/upload/logo/${campaignId}`;
                } else if( imgType === "poster" ) {
                     url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/campaigns/upload/poster/${campaignId}`;
                }

                formData.append('fileItem', objFileInput.files[0]);
                $.ajax({
                    url: url,
                    method: 'PUT',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ session()->get('token') }} ');

                    },
                }).done(function(data) {
                    console.log("Imagen Guardada");
                }).fail(function() {

                });
            }
        }


    </script>
@endsection