@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-6">
                        <h5 class="card-title mb-0">Upload Proof Media</h5>
                    </div>
                    <div class="col-6 text-end">
                        <a href="{{ route('proof-media.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                @can('create proof media')
                    <form action="{{ route('proof-media.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="checklist_item_id" class="form-label">Checklist Item *</label>
                                <select class="form-control @error('checklist_item_id') is-invalid @enderror" 
                                        id="checklist_item_id" name="checklist_item_id" required>
                                    <option value="">Select Checklist Item</option>
                                    @foreach($checklistItems as $item)
                                        <option value="{{ $item->id }}" {{ old('checklist_item_id') == $item->id ? 'selected' : '' }}>
                                            {{ $item->task_title }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('checklist_item_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="source" class="form-label">Source *</label>
                                <select class="form-control @error('source') is-invalid @enderror" 
                                        id="source" name="source" required>
                                    <option value="">Select Source</option>
                                    @foreach($sources as $key => $label)
                                        <option value="{{ $key }}" {{ old('source') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('source')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="uploaded_by" class="form-label">Uploaded By</label>
                                <select class="form-control @error('uploaded_by') is-invalid @enderror" 
                                        id="uploaded_by" name="uploaded_by">
                                    <!--<option value="">Select User</option>-->
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('uploaded_by') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Leave empty to use current user</small>
                                @error('uploaded_by')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="file" class="form-label">File *</label>
                                <input type="file" class="form-control @error('file') is-invalid @enderror" 
                                       id="file" name="file" accept=".jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.pdf,.doc,.docx" required>
                                <small class="text-muted">Accepted formats: Images (JPG, PNG, GIF), Videos (MP4, MOV, AVI), Documents (PDF, DOC, DOCX). Max size: 10MB</small>
                                @error('file')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <div id="file-preview" class="mt-2 d-none">
                                    <p class="mb-1">Preview:</p>
                                    <img id="image-preview" src="#" alt="Preview" class="img-thumbnail d-none" style="max-width: 200px;">
                                    <div id="video-preview" class="d-none">
                                        <video id="video-player" controls width="200" class="d-none">
                                            <source id="video-source" src="#" type="video/mp4">
                                        </video>
                                    </div>
                                    <div id="document-preview" class="d-none">
                                        <i class="fas fa-file fa-3x text-secondary"></i>
                                        <p id="document-name" class="mt-1"></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-upload"></i> Upload Media
                            </button>
                            <a href="{{ route('proof-media.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                @else
                    <div class="alert alert-danger">
                        <i class="fas fa-ban"></i> You don't have permission to upload proof media.
                    </div>
                @endcan
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    // File preview
    $('#file').on('change', function(e) {
        var file = e.target.files[0];
        if (!file) return;
        
        $('#file-preview').removeClass('d-none');
        $('#image-preview').addClass('d-none');
        $('#video-preview').addClass('d-none');
        $('#document-preview').addClass('d-none');
        $('#video-player').addClass('d-none');
        
        var extension = file.name.split('.').pop().toLowerCase();
        var imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
        var videoExtensions = ['mp4', 'mov', 'avi'];
        
        if (imageExtensions.includes(extension)) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#image-preview').attr('src', e.target.result).removeClass('d-none');
            }
            reader.readAsDataURL(file);
        } else if (videoExtensions.includes(extension)) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#video-source').attr('src', e.target.result);
                $('#video-player').removeClass('d-none');
                $('#video-preview').removeClass('d-none');
                $('#video-player')[0].load();
            }
            reader.readAsDataURL(file);
        } else {
            $('#document-name').text(file.name);
            $('#document-preview').removeClass('d-none');
        }
        
        // Check for duplicate hash
        var reader = new FileReader();
        reader.onload = function(e) {
            var arrayBuffer = e.target.result;
            crypto.subtle.digest('SHA-256', arrayBuffer).then(function(hashBuffer) {
                var hashArray = Array.from(new Uint8Array(hashBuffer));
                var hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
                
                $.ajax({
                    url: "{{ route('proof-media.check-duplicate') }}",
                    type: "GET",
                    data: { hash: hashHex },
                    success: function(response) {
                        if (response.duplicate) {
                            alert('Warning: This file has already been uploaded before!');
                        }
                    }
                });
            });
        };
        reader.readAsArrayBuffer(file);
    });
});
</script>
@endpush