RomhackPlaza/resources/views/livewire/hashes-upload.blade.php

<div x-data="HashesManager($wire)" x-ref="hashRoot">
    <x-form-field-title name="Hashes" required="true" />
    @if( count( $hashes ) > 0)
    <div class="form-group grid-hashes">

        <div class="hash-filename hash-first">
            <x-form-field-title name="Filename" />
        </div>

        <div class="hash-crc32 hash-first">
            <x-form-field-title name="CRC32" />
        </div>

        <div class="hash-sha1 hash-first">
            <x-form-field-title name="SHA-1" />
        </div>

        <div class="hash-verified hash-first">
            <x-form-field-title name="Verified" />
        </div>

        <div class="hash-remove hash-first">
            <x-form-field-title name="Actions" />
        </div>

        @foreach( $hashes as $i => $hash )
            <div class="hash-filename">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['filename'] }}" disabled>
            </div>
            <div class="hash-crc32">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['hash_crc32'] }}" disabled>
            </div>
            <div class="hash-sha1">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['hash_sha1'] }}" disabled>
            </div>
            <div class="hash-verified">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['verified'] }}" disabled>
            </div>
            <div class="hash-remove">
                <button type="button" class="btn" wire:click="removeHash({{ $i }})">
                    Remove
                </button>
            </div>

            <input type="hidden" name="hashes[{{ $i }}][filename]" value="{{ $hash['filename'] }}">
            <input type="hidden" name="hashes[{{ $i }}][hash_crc32]" value="{{ $hash['hash_crc32'] }}">
            <input type="hidden" name="hashes[{{ $i }}][hash_sha1]" value="{{ $hash['hash_sha1'] }}">
            <input type="hidden" name="hashes[{{ $i }}][verified]" value="{{ $hash['verified'] }}">
        @endforeach

    </div>
@endif

<div style="display:flex;align-items: flex-end;justify-content: right;gap:15px;">
    <span x-show="isCalculating" x-cloak>
        <i data-lucide="loader-2" class="spin"></i>
        Please wait...
    </span>

    <span x-show="error" x-text="error" class="form-error-text" x-cloak></span>

    <button type="button" class="btn" :disabled="isCalculating" @click="manualHashesModal = true;">Provide hash manually</button>
    <button type="button" class="btn primary" :disabled="isCalculating" @click="handleSubmitFile()">Add hashes</button>
</div>
        <div
        class="modal-overlay"
        x-show="manualHashesModal"
        x-effect="manualHashesModal && $nextTick(() => window.refreshIcons($el))"
        x-cloak
        x-transition.opacity.duration.300ms
        @keydown.escape.window="manualHashesModal = false"
        @focus="window.refreshIcons($el)"
        @close-manual-modal.window="manualHashesModal = false"
    >
        <div @click.outside="manualHashesModal = false" class="modal-window">

                <div class="modal-header">
                    <span class="modal-title">Provide hash manually</span>
                    <button type="button" @click="manualHashesModal = false" class="modal-close">
                        <i data-lucide="x" size="18"></i>
                    </button>
                </div>

            <div class="modal-content">

                <div class="form-group">
                    <label class="form-label">Filename</label>
                    <input type="text" wire:model="manualFilename" class="form-input" maxlength="512">
                    @error('manualFilename') <span class="form-error-text">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">CRC32</label>
                    <input type="text" wire:model="manualCRC32" class="form-input" maxlength="512">
                    @error('manualCRC32') <span class="form-error-text">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">SHA-1</label>
                    <input type="text" wire:model="manualSHA1" class="form-input" maxlength="512">
                    @error('manualSHA1') <span class="form-error-text">{{ $message }}</span> @enderror
                </div>

                <button type="button" class="btn primary" style="width: 100%; justify-content: center;" wire:click="addManualHash" wire:loading.attr="disabled">
                    <i data-lucide="plus" size="14"></i> Add
                </button>

            </div>

        </div>
    </div>

</div>