@php
    $hasVoiceFile = false;
    if(!empty($details['voice_file'])) {
        $voiceFile = 'voices/'.$details['voice_file'];
        if (\Storage::disk('public')->has($voiceFile)) {
            $hasVoiceFile = true;
        }
    }
@endphp

@extends('layouts.master')

@section('css')
<link href="/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
    .play-pause-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #3490dc;
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="row">
                <div class="col-lg-12 mb-2">
                    <div class="float-right">
                        @hasrole('super-admin')
                            <a class="btn btn-primary" href="{{ url()->previous() }}"> Back</a>
                        @else
                            <a class="btn btn-success" href="{{ route('my-company.config') }}">Config</a>
                            <a class="btn btn-primary" href="{{ route('my-company.edit') }}"> Edit</a>
                        @endhasrole
                    </div>
                </div>
            </div>
            @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    {{ $message }}
                </div>
            @endif
            <div class="card">
                <div class="card-header">Show Company</div>
                <div class="card-body">
                    <div class="row">
                        @if (!empty($details['twilio_auth_token']))
                            
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>ID:</strong>
                                {{ $details['id'] }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>Name:</strong>
                                {{ $details['name'] }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>TWILIO ACCOUNT SID:</strong>
                                {{ $details['twilio_account_sid'] }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>TWILIO AUTH TOKEN:</strong>
                                {{ $details['twilio_auth_token'] }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>TWILIO NUMBER:</strong>
                                {{ $details['twilio_number'] }}
                            </div>
                        </div>
                        {{-- <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>TWILIO APPLICATION SID:</strong>
                                {{ $details['twilio_application_sid'] }}
                            </div>
                        </div> --}}
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>TWILIO API KEY:</strong>
                                {{ $details['twilio_api_key'] }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>TWILIO API SECRET:</strong>
                                {{ $details['twilio_api_secret'] }}
                            </div>
                        </div>
                        @if ($hasVoiceFile)
                            <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>Voice MP3:</strong>
                                <button class="play-pause-btn" id="playPauseBtn" onclick="playPause(event)">
                                    <i class="fa fa-play" id="playIcon"></i>
                                    <i class="fa fa-pause" id="pauseIcon" style="display: none;"></i>
                                </button>
                                <audio id="audioPlayer" src="{{asset('storage/voices/'.$details['voice_file'])}}" onended="audioEnded()"></audio>
                            </div>
                        </div>
                        @endif
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>Voice Message:</strong>
                                {{ $details['voice_message'] ?? '' }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>Text Message:</strong>
                                {{ $details['text_message'] ?? '' }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>Phone Numbers / Webhooks:</strong>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>A CALL COMES IN:</strong>
                                {{ route('incoming-call-handler', ['secret_key' => getEncryptedTextForCompany($details['id'])]) }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>CALL STATUS CHANGES:</strong>
                                {{ route('voice-callback-inbound') }}
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>TwiML Apps / Webhooks:</strong>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <strong>Voice / REQUEST URL:</strong>
                                {{ route('new-call', $details['twilio_number']) }}
                            </div>
                        </div>
                        @else
                            <div class="col">
                                Your company account still needs to be set up.&nbsp;
                                @hasrole('user')
                                    Please get in touch with your Admin.
                                @else
                                    @hasrole('super-admin')
                                        Please go to <a href="{{ route('companies.edit', $details['id']) }}">Edit Company</a> and set up the company.
                                    @else
                                        Please go to <a href="{{ route('my-company.edit') }}">Edit Company</a> and set up the company.
                                    @endhasrole
                                @endhasrole
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
    <script type="text/javascript">
        const audioPlayer = document.getElementById('audioPlayer');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const playIcon = document.getElementById('playIcon');
        const pauseIcon = document.getElementById('pauseIcon');

        function playPause(e) {
        
            e.preventDefault();
            if (audioPlayer.paused) {
                audioPlayer.play();
                playIcon.style.display = 'none';
                pauseIcon.style.display = 'inline-block';
            } else {
                audioPlayer.pause();
                playIcon.style.display = 'inline-block';
                pauseIcon.style.display = 'none';
            }
        }

        function audioEnded() {
            playIcon.style.display = 'inline-block';
            pauseIcon.style.display = 'none';
        }
    </script>
@endsection