@extends('layouts.appv2')

@section('content')
<div class="row-sm-12">
    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5>Add Repository Item: {{ $employee->employee_first_name }} {{ $employee->employee_last_name }}</h5>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <a href="{{ route('employees.repository', ['employee_id' => $employee->employee_id]) }}"
                        class="btn btn-sm btn-secondary mt-1 mb-1"
                        style="width: 70px; text-align: center; border-radius: 50px;">Back
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error) 
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('employees.repository.update', ['repository_id' => $repositoryItem->repository_id]) }}"
                  method="POST" enctype="multipart/form-data">
                @csrf

                {{-- Repository Name --}}
                <div class="mb-3">
                    <label for="repository_name" class="form-label">Repository Name </label>
                    <input type="text" name="repository_name" id="repository_name"
                           value="{{ old('repository_name', $repositoryItem->repository_name) }}"
                           class="form-control @error('repository_name') is-invalid @enderror" required>
                    @error('repository_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Category --}}
                <div class="mb-3">
                    <label for="category_id" class="form-label">Category</label>
                    <select name="category_id" id="category_id" class="form-select">
                        <option value="">-- Select Category --</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->category_id }}"
                                {{ old('category_id', $repositoryItem->category_id) == $category->category_id ? 'selected' : '' }}>
                                {{ $category->category_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Current File --}}
                <div class="mb-3">
                    <label class="form-label">Current File</label>

                    @if ($repositoryItem->repository_file)
                        @php
                        // Determine correct path and URL
                        if (str_contains($repositoryItem->repository_file, 'employee_repository/')) {
                        $filePath  = $repositoryItem->repository_file;
                        $assetPath = asset('storage/' . $repositoryItem->repository_file);
                    } else {
                        $filePath  = 'employee_repository/' . $repositoryItem->repository_file;
                        $assetPath = asset('storage/employee_repository/' . $repositoryItem->repository_file);
                    }

                    $fileExists = Storage::disk('public')->exists($filePath);
                @endphp

                @if ($fileExists)
                <div class="d-flex align-items-center justify-content-between border rounded p-2">
                    <span>{{ $repositoryItem->repository_file }}</span>
                    <div>
                        <a href="{{ route('employees.repository.view', ['repository_id' => $repositoryItem->repository_id]) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                            View
                        </a>
                        <button type="button" id="replaceFileBtn" class="btn btn-sm btn-outline-secondary">
                        Replace File
                        </button>
                    </div>
                </div>
                @else
                    <span class="text-danger">File not found on disk</span>
                @endif
                @else
                    <span class="text-muted">No file uploaded</span>
                @endif
                </div>


                {{-- Hidden file input (shows only when Replace File is clicked) --}}
                <!-- <div class="mb-3" id="replaceFileField" style="display:none;">
                    <label for="repository_file" class="form-label">Upload New File</label>
                    <input type="file" name="repository_file" id="repository_file"
                           class="form-control @error('repository_file') is-invalid @enderror">
                    @error('repository_file')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div> -->

                <div class="mb-3" id="replaceFileField" style="display: none;">
                    <label for="repository_file" class="form-label">Upload New File</label>
                    <input type="file" name="repository_file" id="repository_file"
                        class="form-control @error('repository_file') is-invalid @enderror"
                        accept=".pdf,.jpg,.jpeg,.png"
                        data-max-size="10485760">
                    
                    <div class="form-text">
                        Supported files: PDF, JPEG, JPG, PNG (Max: 10MB)
                    </div>
                    @error('repository_file')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                    <br>
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
            </form>
        </div>
    </div>
</div>

{{-- Script to toggle Replace File input --}}
<script>
    document.getElementById('replaceFileBtn')?.addEventListener('click', function () {
        document.getElementById('replaceFileField').style.display = 'block';
        this.style.display = 'none'; // hide the button once clicked
    });


    document.getElementById('repository_file')?.addEventListener('change', function () {
        const maxSize = 10 * 1024 * 1024;
        if (this.files.length && this.files[0].size > maxSize) {
            alert('File is over 10MB. Please select another file.');
            this.value = '';
        }
    });
</script>
@endsection