{% extends '_base.html' %} {% block content %} <div class="container mx-auto w-full pt-10 pb-12 sm:pt-24 sm:pb-12 md:pt-28 lg:px-4" x-data="voiceCallsManager()" x-init="init()"><div class="flex items-center justify-between"><h1 class="px-1 py-4 font-bold uppercase text-gray-600"> {{ locales["nav_phone"] }} </h1></div><div class="mb-4 w-full px-2 leading-normal text-gray-800 md:px-0"><div class="grow rounded border bg-white shadow"><div class="px-5 py-3"> {% include '_notification.html' %} <div class="mb-8"><div class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 rounded-2xl p-8 border border-slate-200 shadow-xl"><div class="text-center mb-6"><div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full mb-4 shadow-lg"><svg class="h-8 w-8 text-white" fill="currentColor" viewbox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg></div><h3 class="text-2xl font-bold text-gray-800 mb-2">📞 Smart Dialer</h3><p class="text-sm text-gray-600">{{locales.voice_call_under_development}}</p></div><div class="mb-6 p-6 bg-white rounded-2xl border border-slate-200 shadow-lg"><div class="min-h-[80px] flex items-center justify-center"><div x-show="dialing" class="flex flex-col items-center space-y-3 text-orange-500"><div class="relative"><div class="animate-spin rounded-full h-12 w-12 border-4 border-orange-200"></div><div class="animate-spin rounded-full h-12 w-12 border-4 border-orange-500 border-t-transparent absolute top-0"></div></div><div class="text-center"><p class="text-lg font-semibold text-gray-800">{{locales.voice_calling}}</p><p class="text-xl font-mono text-orange-600" x-text="dialNumber"></p></div></div><div x-show="incomingCall.active" class="text-center p-4 bg-gradient-to-r from-yellow-50 to-orange-50 border-2 border-orange-300 rounded-xl"><div class="text-6xl mb-3 animate-bounce">📞</div><h3 class="text-xl font-bold text-orange-800 mb-2">INCOMING CALL</h3><p class="text-lg font-mono text-orange-700 mb-2" x-text="incomingCall.number || 'Unknown Number'"></p><p class="text-sm text-orange-600 mb-4"> Ring #<span x-text="incomingCall.ring_count"></span> · <span x-text="incomingCall.duration + 's'"></span></p></div><div x-show="!dialing && !callStatus.loading && callStatus.hasActiveCalls && !incomingCall.active" class="w-full"><template x-for="call in callStatus.calls" :key="call.id"><div class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl shadow-sm"><div class="flex items-center space-x-3"><div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div><div><p class="font-bold text-green-900 text-lg" x-text="call.number"></p><p class="text-sm text-green-700 capitalize" x-text="call.status"></p></div></div></div></template></div></div></div><div class="space-y-8"><div class="text-center"><div class="bg-gradient-to-br from-slate-800 via-blue-900 to-indigo-900 rounded-2xl p-6 mb-6 shadow-inner border border-slate-600"><input x-model="dialNumber" type="tel" placeholder="Enter phone number" @keyup.enter="makeCall()" class="w-full bg-transparent text-3xl font-mono text-center placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 rounded-lg p-2 gradient-text" :disabled="dialing"></div></div><style>
                .gradient-text {
                  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  background-clip: text;
                  color: transparent;
                }
                .gradient-text::placeholder {
                  background: none;
                  -webkit-text-fill-color: #d1d5db;
                  color: #d1d5db;
                }
              </style><div class="flex justify-center space-x-8"><button @click="makeCall()" :disabled="!dialNumber || dialing" class="flex flex-col items-center justify-center h-20 w-20 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 disabled:from-gray-300 disabled:to-gray-300 text-white rounded-full shadow-xl transition-all duration-150 hover:scale-105 active:scale-95"><svg x-show="!dialing" class="h-8 w-8 mb-1" fill="currentColor" viewbox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg><div x-show="dialing" class="animate-spin rounded-full h-6 w-6 border-b-2 border-white mb-1"></div><span class="text-sm font-bold" x-text="dialing ? locales['voice_calling'] : locales['voice_make_call']"></span></button><button @click="answerCall()" :disabled="answeringCall" :class="answeringCall ? 'from-gray-300 to-gray-300' : 'from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'" class="flex flex-col items-center justify-center h-20 w-20 bg-gradient-to-r text-white rounded-full shadow-xl transition-all duration-150 hover:scale-105 active:scale-95"><svg x-show="!answeringCall" class="h-8 w-8 mb-1" fill="currentColor" viewbox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg><div x-show="answeringCall" class="animate-spin rounded-full h-6 w-6 border-b-2 border-white mb-1"></div><span class="text-sm font-bold" x-text="answeringCall ? 'Answering...' : locales['voice_answer']"></span></button><button @click="hangupCall()" :disabled="hangingUpCall" :class="hangingUpCall ? 'from-gray-300 to-gray-300' : 'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700'" class="flex flex-col items-center justify-center h-20 w-20 bg-gradient-to-r text-white rounded-full shadow-xl transition-all duration-150 hover:scale-105 active:scale-95"><svg x-show="!hangingUpCall" class="h-8 w-8 mb-1" fill="currentColor" viewbox="0 0 20 20"><path d="M3.707 2.293a1 1 0 00-1.414 1.414l6.921 6.922c.05.062.105.118.168.167l6.91 6.911a1 1 0 001.415-1.414l-.675-.675a9.001 9.001 0 002.69-8.605l-.04-.1a2 2 0 00-1.73-1.378l-2.8-.4a2 2 0 00-1.908 1.072L9.573 9.573 3.707 2.293z"></path><path d="M9.573 9.573L6.8 12.8a16.084 16.084 0 001.392 1.392l3.227-2.773a1 1 0 011.414 0l2.58 2.58 8.684-8.684a1 1 0 10-1.414-1.414l-8.684 8.684-2.58-2.58a1 1 0 000-1.414z"></path></svg><div x-show="hangingUpCall" class="animate-spin rounded-full h-6 w-6 border-b-2 border-white mb-1"></div><span class="text-sm font-bold" x-text="hangingUpCall ? 'Hanging up...' : locales['voice_hangup']"></span></button></div><div class="mt-6 p-4 bg-gray-50 rounded-xl border border-gray-200"><label class="block text-sm font-semibold text-gray-800 mb-3 flex items-center"><svg class="h-4 w-4 mr-2 text-gray-600" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 01-1.414-1.414A7.972 7.972 0 0017 12a7.972 7.972 0 00-1.343-4.243 1 1 0 010-1.414z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M13.243 8.757a1 1 0 011.414 0A5.984 5.984 0 0116 12a5.984 5.984 0 01-1.343 3.243 1 1 0 01-1.414-1.414A3.984 3.984 0 0014 12a3.984 3.984 0 00-.757-2.243 1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> {{locales.voice_audio_path}} </label><select x-model="audioPath" @change="setAudioPath()" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm"><option value="0">🔊 {{locales.voice_speaker}} (0)</option><option value="1">📞 {{locales.voice_earpiece}} (1)</option><option value="2">🎧 {{locales.voice_headset}} (2)</option><option value="3">📶 {{locales.voice_bluetooth}} (3)</option></select></div></div></div></div><div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl border border-gray-200 shadow-xl"><div class="px-6 py-5 border-b border-gray-200"><div class="flex items-center justify-between"><div class="flex items-center"><div class="w-10 h-10 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center mr-3"><svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div><div><h3 class="text-xl font-bold text-gray-900">📋 {{locales.voice_call_history}}</h3><p class="text-sm text-gray-600">Recent call activities</p></div></div><div class="flex space-x-2"><button @click="refreshCallHistory()" :disabled="refreshingHistory" :class="refreshingHistory ? 'bg-gray-200 text-gray-500' : 'bg-blue-100 text-blue-700 hover:bg-blue-200'" class="flex items-center px-3 py-2 text-xs font-medium rounded-lg transition-colors duration-150"><svg x-show="!refreshingHistory" class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg><div x-show="refreshingHistory" class="animate-spin rounded-full h-4 w-4 border-2 border-gray-400 border-t-transparent mr-1"></div><span x-text="refreshingHistory ? 'Refreshing...' : locales['voice_refresh']"></span></button><button @click="clearCallHistory()" :disabled="clearingHistory" :class="clearingHistory ? 'bg-gray-200 text-gray-500' : 'bg-red-100 text-red-700 hover:bg-red-200'" class="flex items-center px-3 py-2 text-xs font-medium rounded-lg transition-colors duration-150"><svg x-show="!clearingHistory" class="h-4 w-4 mr-1" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L7.586 12l-1.293 1.293a1 1 0 101.414 1.414L9 13.414l3.293 3.293a1 1 0 001.414-1.414L12.414 12l1.293-1.293z" clip-rule="evenodd"></path></svg><div x-show="clearingHistory" class="animate-spin rounded-full h-4 w-4 border-2 border-gray-400 border-t-transparent mr-1"></div><span x-text="clearingHistory ? 'Clearing...' : locales['voice_clear']"></span></button></div></div><div class="mt-4"><div class="flex space-x-1 bg-gray-100 rounded-lg p-1"><button @click="historyFilter = 'all'" :class="historyFilter === 'all' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'" class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all duration-150"> 📊 {{locales.voice_all_calls}} </button><button @click="historyFilter = 'outgoing'" :class="historyFilter === 'outgoing' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'" class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all duration-150"><svg class="inline h-3 w-3 mr-1 text-green-500" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 117 7v-1a1 1 0 112 0v1a9 9 0 01-9 9H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> {{locales.voice_outgoing}} </button><button @click="historyFilter = 'incoming'" :class="historyFilter === 'incoming' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'" class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all duration-150"><svg class="inline h-3 w-3 mr-1 text-blue-500" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M12.293 3.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 9H9a7 7 0 00-7 7v1a1 1 0 01-2 0v-1a9 9 0 019-9h5.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> {{locales.voice_incoming}} </button><button @click="historyFilter = 'missed'" :class="historyFilter === 'missed' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'" class="flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all duration-150"><svg class="inline h-3 w-3 mr-1 text-red-500" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg> {{locales.voice_missed}} </button></div></div></div><div x-show="callHistory.loading" class="text-center py-16"><div class="relative"><div class="animate-spin rounded-full h-12 w-12 border-4 border-gray-200 mx-auto"></div><div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent absolute top-0 mx-auto"></div></div><div class="mt-4"><p class="text-lg font-medium text-gray-900">🔄 Loading call history...</p><p class="text-sm text-gray-600">Please wait while we fetch your recent calls</p></div></div><div x-show="!callHistory.loading && filteredCallHistory.length > 0" class="p-4"><div class="space-y-3"><template x-for="call in filteredCallHistory" :key="call.id"><div class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-150"><div class="flex items-center space-x-4 flex-1"><div class="flex-shrink-0"><div x-show="call.type === 'outgoing'" class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center"><svg class="h-5 w-5 text-green-600" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 117 7v-1a1 1 0 112 0v1a9 9 0 01-9 9H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></div><div x-show="call.type === 'incoming'" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center"><svg class="h-5 w-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M12.293 3.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 9H9a7 7 0 00-7 7v1a1 1 0 01-2 0v-1a9 9 0 019-9h5.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></div><div x-show="call.type === 'missed'" class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"><svg class="h-5 w-5 text-red-600" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg></div></div><div class="flex-1"><div class="flex items-center justify-between"><h4 class="text-lg font-semibold text-gray-900 font-mono" x-text="call.number"></h4><span class="text-sm text-gray-500" x-text="call.timestamp"></span></div><div class="flex items-center space-x-4 mt-1"><span class="text-sm font-medium capitalize" :class="call.type === 'outgoing' ? 'text-green-700' : call.type === 'incoming' ? 'text-blue-700' : 'text-red-700'" x-text="call.type"></span><span class="text-sm text-gray-600" x-text="call.duration || 'N/A'"></span></div></div><div class="flex space-x-2"><button @click="dialNumber = call.number" class="flex items-center justify-center w-8 h-8 text-green-600 bg-green-50 hover:bg-green-100 rounded-full transition-colors duration-150" title="Call Back"><svg class="h-4 w-4" fill="currentColor" viewbox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg></button><button @click="deleteCallRecord(call.id)" :disabled="deletingRecord[call.id]" :class="deletingRecord[call.id] ? 'bg-gray-200 text-gray-500' : 'bg-red-50 text-red-600 hover:bg-red-100'" class="flex items-center justify-center w-8 h-8 rounded-full transition-colors duration-150" title="Delete"><svg x-show="!deletingRecord[call.id]" class="h-4 w-4" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L7.586 12l-1.293 1.293a1 1 0 101.414 1.414L9 13.414l3.293 3.293a1 1 0 001.414-1.414L12.414 12l1.293-1.293z" clip-rule="evenodd"></path></svg><div x-show="deletingRecord[call.id]" class="animate-spin rounded-full h-4 w-4 border-2 border-gray-400 border-t-transparent"></div></button></div></div></div></template></div></div><div x-show="!callHistory.loading && filteredCallHistory.length === 0" class="text-center py-16"><div class="text-6xl mb-6">📞</div><div class="mb-4"><svg class="mx-auto h-16 w-16 text-gray-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg></div><h3 class="text-lg font-semibold text-gray-900 mb-2">No call history found</h3><p class="text-gray-600 mb-6"><span x-show="historyFilter === 'all'">🚀 Start making calls to see your history here!</span><span x-show="historyFilter !== 'all'">🔍 No <span x-text="historyFilter"></span> calls found in your records.</span></p><button @click="refreshCallHistory()" class="px-4 py-2 bg-blue-100 text-blue-700 hover:bg-blue-200 rounded-lg font-medium transition-colors duration-150"> 🔄 Refresh History </button></div></div></div></div></div></div> {% endblock %} {% block bottom %} <script defer>
  // Make locales available to JavaScript
  const locales = {{ locales | tojson }};
  
  document.addEventListener("alpine:init", () => {
    Alpine.data('voiceCallsManager', () => ({
      // Locales for translations
      locales: locales,
      // Initialization state
      initialized: false,
      
      // Call state
      dialNumber: '',
      dialing: false,
      audioPath: '1',
      
      // Loading states for buttons
      answeringCall: false,
      hangingUpCall: false,
      refreshingHistory: false,
      clearingHistory: false,
      deletingRecord: {},
      
      // Call status
      callStatus: {
        loading: false,
        hasActiveCalls: false,
        hasIncomingCall: false,
        calls: []
      },
      
      // Incoming call state
      incomingCall: {
        active: false,
        number: null,
        ring_count: 0,
        duration: 0
      },
      
      // Call history
      callHistory: {
        loading: false,
        data: []
      },
      historyFilter: 'all',
      
      // Notification state
      notification: {
        show: false,
        message: '',
        type: 'info' // 'success', 'error', 'info'
      },
      
      // Computed
      filteredCallHistory() {
        if (this.historyFilter === 'all') {
          return this.callHistory.data;
        }
        return this.callHistory.data.filter(call => call.type === this.historyFilter);
      },
      
      // Initialization
      init() {
        this.refreshCallStatus();
        this.refreshCallHistory();
        this.refreshIncomingCall();
        
        // Auto-refresh call status every 2 seconds for more responsive updates
        setInterval(() => {
          this.refreshCallStatus();
        }, 2000);
        
        // Monitor incoming calls every 1 second for faster response
        setInterval(() => {
          this.refreshIncomingCall();
        }, 1000);
        
        // Set up call timeout tracking
        this.callTimeoutTracker = null;
      },
      
      // Call management methods
      async makeCall() {
        if (!this.dialNumber || this.dialing) return;
        
        this.dialing = true;
        try {
          const response = await fetch('/api/v1/voice_call/make', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ number: this.dialNumber })
          });
          
          const data = await response.json();
          if (data.success) {
            this.showNotification('Call initiated', 'success');
            this.refreshCallStatus();
            this.refreshCallHistory();
            // Clear dial number after successful call
            this.dialNumber = '';
          } else {
            this.showNotification('Failed to make call: ' + (data.error || 'Unknown error'), 'error');
          }
        } catch (error) {
          this.showNotification('Error making call: ' + error.message, 'error');
        } finally {
          this.dialing = false;
        }
      },
      
      async answerCall() {
        this.answeringCall = true;
        try {
          const response = await fetch('/api/v1/voice_call/answer', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
          });
          
          const data = await response.json();
          if (data.success) {
            this.showNotification('Call answered', 'success');
            this.refreshCallStatus();
            // Clear incoming call state when answered
            this.incomingCall.active = false;
            this.callStatus.hasIncomingCall = false;
            // Start timeout when call is answered
            this.startCallTimeout();
          } else {
            this.showNotification('Failed to answer call: ' + (data.error || 'Unknown error'), 'error');
          }
        } catch (error) {
          this.showNotification('Error answering call: ' + error.message, 'error');
        } finally {
          this.answeringCall = false;
        }
      },
      
      async hangupCall() {
        this.hangingUpCall = true;
        try {
          const response = await fetch('/api/v1/voice_call/hangup', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
          });
          
          const data = await response.json();
          if (data.success) {
            this.showNotification('Call ended', 'success');
            this.clearCallTimeout();
            // Clear incoming call state when hung up
            this.incomingCall.active = false;
            this.callStatus.hasIncomingCall = false;
            this.refreshCallStatus();
            this.refreshCallHistory();
          } else {
            this.showNotification('Failed to hangup call: ' + (data.error || 'Unknown error'), 'error');
          }
        } catch (error) {
          this.showNotification('Error hanging up call: ' + error.message, 'error');
        } finally {
          this.hangingUpCall = false;
        }
      },
      
      async refreshCallStatus() {
        this.callStatus.loading = true;
        try {
          const response = await fetch('/api/v1/voice_call/status');
          const data = await response.json();
          
          if (data.success) {
            this.callStatus.calls = data.calls || [];
            this.callStatus.hasActiveCalls = data.has_active_calls || false;
          }
        } catch (error) {
          console.error('Error refreshing call status:', error);
        } finally {
          this.callStatus.loading = false;
        }
      },

      async setAudioPath() {
        try {
          const response = await fetch('/api/v1/voice_call/audio_path', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ path: parseInt(this.audioPath) })
          });
          
          const data = await response.json();
          if (data.success) {
            this.showNotification('Audio path updated', 'success');
          } else {
            this.showNotification('Failed to set audio path: ' + (data.error || 'Unknown error'), 'error');
          }
        } catch (error) {
          this.showNotification('Error setting audio path: ' + error.message, 'error');
        }
      },
      
      // Incoming call monitoring
      async refreshIncomingCall() {
        try {
          const response = await fetch('/api/v1/voice_call/incoming');
          const data = await response.json();
          
          if (data.success) {
            const incoming = data.incoming_call;
            const wasActive = this.incomingCall.active;
            
            // Update incoming call state
            this.incomingCall = incoming;
            
            // Show notification when new incoming call starts
            if (incoming.active && !wasActive) {
              const callerInfo = incoming.number || 'Unknown Number';
              this.showNotification(`📞 Incoming call from ${callerInfo}`, 'info');
              
              // Update call status to show incoming call
              this.callStatus.hasIncomingCall = true;
            } else if (!incoming.active && wasActive) {
              // Call ended, refresh call history
              this.refreshCallHistory();
              this.callStatus.hasIncomingCall = false;
            }
          }
        } catch (error) {
          console.error('Error checking incoming calls:', error);
        }
      },
      
      // Call history methods
      async refreshCallHistory() {
        this.callHistory.loading = true;
        this.refreshingHistory = true;
        try {
          const response = await fetch('/api/v1/voice_call/history');
          const data = await response.json();
          
          if (data.success) {
            this.callHistory.data = data.history || [];
            this.showNotification('Call history refreshed', 'success');
          } else {
            this.showNotification('Failed to refresh call history: ' + (data.error || 'Unknown error'), 'error');
          }
        } catch (error) {
          console.error('Error refreshing call history:', error);
          this.showNotification('Error refreshing call history: ' + error.message, 'error');
        } finally {
          this.callHistory.loading = false;
          this.refreshingHistory = false;
        }
      },
      
      async clearCallHistory() {
        if (!confirm('Are you sure you want to clear all call history?')) return;
        
        this.clearingHistory = true;
        try {
          const response = await fetch('/api/v1/voice_call/clear_history', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
          });
          
          const data = await response.json();
          if (data.success) {
            this.showNotification('Call history cleared', 'success');
            this.refreshCallHistory();
          } else {
            this.showNotification('Failed to clear history: ' + (data.error || 'Unknown error'), 'error');
          }
        } catch (error) {
          this.showNotification('Error clearing history: ' + error.message, 'error');
        } finally {
          this.clearingHistory = false;
        }
      },
      
      async deleteCallRecord(callId) {
        // Set loading state for this specific record
        this.deletingRecord[callId] = true;
        try {
          const response = await fetch('/api/v1/voice_call/delete_history', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ call_id: callId })
          });
          
          const data = await response.json();
          if (data.success) {
            this.showNotification('Call record deleted', 'success');
            this.refreshCallHistory();
          } else {
            this.showNotification('Failed to delete record: ' + (data.error || 'Unknown error'), 'error');
          }
        } catch (error) {
          this.showNotification('Error deleting record: ' + error.message, 'error');
        } finally {
          // Clear loading state for this specific record
          this.deletingRecord[callId] = false;
        }
      },
      
      // Call timeout management
      startCallTimeout() {
        this.clearCallTimeout();
        // Set timeout for 30 minutes
        this.callTimeoutTracker = setTimeout(() => {
          this.refreshCallStatus();
          this.refreshCallHistory();
        }, 30 * 60 * 1000);
      },
      
      clearCallTimeout() {
        if (this.callTimeoutTracker) {
          clearTimeout(this.callTimeoutTracker);
          this.callTimeoutTracker = null;
        }
      },
      
      // Notification system
      showNotification(message, type = 'info') {
        // Set notification data
        this.notification.message = message;
        this.notification.type = type;
        this.notification.show = true;
        
        // Auto-hide after 4 seconds for success and info messages
        if (type !== 'error') {
          setTimeout(() => {
            this.notification.show = false;
          }, 4000);
        }
        
        // Also log to console for debugging
        console.log(type.toUpperCase() + ': ' + message);
      }
    }));
  });
</script> {% endblock %}