@extends('layouts.portal')
@section('title', 'Store Will')
@section('page_title', 'Will Storage')
@section('page_subtitle', 'Register new will storage')
@section('sidebar')
@include('admin.partials.sidebar', ['active' => 'storage'])
@endsection
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="bg-white rounded-xl shadow-sm p-6">
  <h3 class="text-lg font-semibold text-gray-800 mb-6">Register Will Storage</h3>

  <!-- PDF PREVIEW SECTION -->
  <div id="pdfPreviewSection" class="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200 hidden">
    <div class="flex justify-between items-center mb-3">
      <h4 class="font-semibold text-gray-700">📄 Will Document Preview</h4>
      <a id="viewWillOnlyBtn" href="#" class="text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium" target="_blank" style="display: none;">
        <i class="fas fa-external-link-alt mr-1"></i> View Full Will
      </a>
    </div>
    <div class="grid grid-cols-2 gap-4 mb-4">
      <div class="text-sm">
        <p class="text-gray-600">Client Name:</p>
        <p id="previewClientName" class="font-semibold text-gray-800">-</p>
      </div>
      <div class="text-sm">
        <p class="text-gray-600">Will Type:</p>
        <p id="previewWillType" class="font-semibold text-gray-800">-</p>
      </div>
      <div class="text-sm">
        <p class="text-gray-600">File Size:</p>
        <p id="previewFileSize" class="font-semibold text-gray-800">-</p>
      </div>
      <div class="text-sm">
        <p class="text-gray-600">Finalized Date:</p>
        <p id="previewFinalizedDate" class="font-semibold text-gray-800">-</p>
      </div>
    </div>
    <div class="bg-white p-3 rounded border border-gray-300 max-h-96 overflow-y-auto">
      <iframe id="pdfPreview" src="" style="width: 100%; height: 400px; border: none;"></iframe>
    </div>
    <p class="text-xs text-gray-500 mt-2">✓ PDF automatically loaded - Ready to store</p>
  </div>

  <!-- LOADING INDICATOR -->
  <div id="loadingIndicator" class="mb-4 hidden">
    <div class="flex items-center space-x-2">
      <div class="animate-spin">
        <i class="fas fa-spinner text-blue-500"></i>
      </div>
      <span class="text-gray-600">Loading will document...</span>
    </div>
  </div>

  <!-- ERROR MESSAGE -->
  <div id="errorMessage" class="mb-4 hidden p-3 bg-red-50 border border-red-200 rounded text-red-700 text-sm"></div>

  <!-- FORM -->
  <form action="{{ route('admin.storage.store') }}" method="POST">
    @csrf

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Select Will <span class="text-red-500">*</span></label>
      <select id="willSelect" name="will_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none">
        <option value="">-- Select a Will --</option>
        @foreach($wills as $will)
          <option value="{{ $will->id }}" data-will-id="{{ $will->id }}">
            #{{ $will->id }} - {{ $will->client ? $will->client->full_name : 'Unknown Client' }} 
            ({{ $will->is_joint ? 'Joint' : ($will->will_type === 'individual' ? 'Individual' : 'Trust') }} Will)
            - Status: {{ ucfirst($will->status) }}
          </option>
        @endforeach
      </select>
      <p class="text-xs text-gray-500 mt-1">📄 Select a finalized will to auto-load its PDF</p>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Storage Type <span class="text-red-500">*</span></label>
      <select name="storage_type" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none">
        @foreach(App\Models\WillStorage::getStorageTypes() as $key => $label)
          <option value="{{ $key }}">{{ $label }}</option>
        @endforeach
      </select>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Box/Container Number <span class="text-red-500">*</span></label>
      <input type="text" name="box_number" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none" placeholder="e.g., BOX-001">
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Location Details <span class="text-red-500">*</span></label>
      <input type="text" name="location_details" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none" placeholder="e.g., Vault Room A, Safe Deposit Box #123">
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Storage Date <span class="text-red-500">*</span></label>
      <input type="date" name="stored_date" value="{{ date('Y-m-d') }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none">
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Retention Years</label>
      <input type="number" name="retention_years" value="50" min="1" max="100" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none">
      <p class="text-xs text-gray-500 mt-1">How many years to keep the will in storage (default: 50 years)</p>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Access PIN/Code</label>
      <input type="text" name="access_code" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none" placeholder="Leave blank if not applicable">
    </div>

    <div class="grid grid-cols-2 gap-4 mb-6">
      <div>
        <label class="flex items-center">
          <input type="checkbox" name="has_original" value="1" class="mr-2">
          <span class="text-sm font-medium text-gray-700">Has Original Document</span>
        </label>
      </div>
      <div>
        <label class="flex items-center">
          <input type="checkbox" name="has_hard_copy" value="1" class="mr-2">
          <span class="text-sm font-medium text-gray-700">Has Hard Copy</span>
        </label>
      </div>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Additional Digital Copy (Optional)</label>
      <input type="file" name="digital_copy" accept="application/pdf,image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none">
      <p class="text-xs text-gray-500 mt-1">Upload additional scanned copy (already auto-loaded from selected will)</p>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
      <textarea name="notes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 outline-none" placeholder="Any special instructions or notes about this storage"></textarea>
    </div>

    <div class="flex gap-4">
      <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
        <i class="fas fa-save mr-2"></i> Register Storage
      </button>
      <a href="{{ route('admin.storage') }}" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
        Cancel
      </a>
    </div>
  </form>

  @if ($errors->any())
    <div class="mt-6 p-4 bg-red-50 border border-red-200 rounded-lg">
      <h4 class="font-semibold text-red-800 mb-3">Validation Errors:</h4>
      <ul class="list-disc list-inside text-red-700 space-y-1">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif
</div>

<!-- JAVASCRIPT FOR AJAX PDF LOADING -->
<script>
document.getElementById('willSelect').addEventListener('change', function() {
    const willId = this.value;
    
    if (!willId) {
        document.getElementById('pdfPreviewSection').classList.add('hidden');
        document.getElementById('errorMessage').classList.add('hidden');
        return;
    }

    // Show loading indicator
    document.getElementById('loadingIndicator').classList.remove('hidden');
    document.getElementById('errorMessage').classList.add('hidden');

    // Fetch PDF via AJAX - direct URL
    const url = `/admin/storage/fetch-will-pdf/${willId}`;
    
    fetch(url, {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            document.getElementById('loadingIndicator').classList.add('hidden');

            if (!data.success) {
                showError(data.message);
                document.getElementById('pdfPreviewSection').classList.add('hidden');
                return;
            }

            // Display PDF preview
            displayPdfPreview(data);
            document.getElementById('pdfPreviewSection').classList.remove('hidden');
        })
        .catch(error => {
            document.getElementById('loadingIndicator').classList.add('hidden');
            showError('Error loading PDF: ' + error.message);
            console.error('Fetch Error:', error);
        });
});

function displayPdfPreview(data) {
    document.getElementById('previewClientName').textContent = data.client_name;
    document.getElementById('previewWillType').textContent = data.will_type.charAt(0).toUpperCase() + data.will_type.slice(1);
    document.getElementById('previewFileSize').textContent = data.file_size_display;
    document.getElementById('previewFinalizedDate').textContent = data.finalized_date;
    
    // Set the "View Full Will" button link
    const viewWillBtn = document.getElementById('viewWillOnlyBtn');
    viewWillBtn.href = `/admin/storage/will-only/${data.will_id}`;
    viewWillBtn.style.display = 'block';
    
    // Display PDF in iframe using Blob URL instead of data URI
    const binaryString = atob(data.pdf);
    const bytes = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    const blob = new Blob([bytes], { type: 'application/pdf' });
    const blobUrl = URL.createObjectURL(blob);
    document.getElementById('pdfPreview').src = blobUrl;
}

function showError(message) {
    const errorEl = document.getElementById('errorMessage');
    errorEl.textContent = message;
    errorEl.classList.remove('hidden');
}
</script>
@endsection