@csrf

<div class="form-group row">
    <label class="control-label col-sm-3 col-form-label" for="name">Nom du device</label>
    <div class="input-group col-sm-9">
        <input type="text" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" id="name" name="name"
               placeholder="Nom"
               value="{{ $device->name ?? old('name') }}">
        @if ($errors->has('name'))
            <div class="invalid-feedback">{{ $errors->first('name') }}</div>
        @endif
    </div>
</div>

<div class="form-group row">
    <label class="control-label col-sm-3 col-form-label" for="brand">Marque</label>
    <div class="input-group col-sm-9">
        <input type="text" class="form-control {{ $errors->has('brand') ? 'is-invalid' : '' }}" id="brand" name="brand"
               placeholder="Marque"
               value="{{ $device->brand ?? old('brand') }}">
        @if ($errors->has('brand'))
            <div class="invalid-feedback">{{ $errors->first('brand') }}</div>
        @endif
    </div>
</div>

<div class="form-group row">
    <label class="control-label col-sm-3 col-form-label" for="type">Type</label>
    <div class="input-group col-sm-9">
        <select class="form-control" name="type" id="type">
            @foreach(\App\Models\Device::TYPES as $type => $value)
                <option
                        {{ (isset($device->type) and $device->type == $type) ? 'selected' : '' }} value="{{ $type }}">{{ $value }}</option>
            @endforeach
        </select>
        @if ($errors->has('type'))
            <div class="invalid-feedback">{{ $errors->first('type') }}</div>
        @endif
    </div>
</div>

<div class="form-group row">
    <label class="control-label col-sm-3 col-form-label" for="purchase_date">Date d'achat</label>
    <div class="input-group col-sm-9">
        <input type="text" class="form-control {{ $errors->has('purchase_date') ? 'is-invalid' : '' }}"
               id="purchase_date" name="purchase_date"
               placeholder="Date d'achat"
               value="{{ $device->purchase_date->format('Y-m-d') ?? old('purchase_date') }}">
        @if ($errors->has('purchase_date'))
            <div class="invalid-feedback">{{ $errors->first('purchase_date') }}</div>
        @endif
    </div>
</div>

<div class="form-group row">
    <label class="control-label col-sm-3 col-form-label" for="price">Prix d'achat HT</label>
    <div class="input-group col-sm-9">
        <input type="text" class="form-control {{ $errors->has('price') ? 'is-invalid' : '' }}" id="price" name="price"
               placeholder="Prix"
               value="{{ $device->price ?? old('price') }}">
        <div class="input-group-append">
            <div class="input-group-text">€ HT</div>
        </div>
        @if ($errors->has('price'))
            <div class="invalid-feedback">{{ $errors->first('price') }}</div>
        @endif
    </div>
</div>

<div class="form-group row">
    <label class="control-label col-sm-3 col-form-label" for="shop">Lieu d'achat</label>
    <div class="input-group col-sm-9">
        <input type="text" class="form-control {{ $errors->has('shop') ? 'is-invalid' : '' }}" id="shop" name="shop"
               placeholder="Magasin"
               value="{{ $device->shop ?? old('shop') }}">
        @if ($errors->has('shop'))
            <div class="invalid-feedback">{{ $errors->first('shop') }}</div>
        @endif
    </div>
</div>

<hr>
<h5>Attributions</h5>

<div class="row d-flex justify-content-between align-items-center" style="margin-bottom: 20px;">
    @foreach(\App\Models\User::orderBy('first_name', 'ASC')->get() as $user)
        <div class="form-group form-check col-md-3">
            <input @if($device->users->whereIn('id', $user->id)->isNotEmpty()) checked @endif class="form-check-input"
                   type="checkbox" value="{{ $user->id }}" id="checkbox_{{ $user->id }}" name="users[]">
            <label class="form-check-label" for="checkbox_{{ $user->id }}">
                {{ $user->first_name }} {{ $user->name }}
            </label>
        </div>
    @endforeach
</div>

<h5>Documents</h5>

<div style="margin-bottom: 20px;">
    <input type="file" id="selectedFile" name="device_file" style="display: none;" accept="application/pdf"
           onchange="addFile(this)"/>
    <input style="margin-bottom: 20px;" type="button" class="btn btn-primary" value="Ajouter un fichier..."
           onclick="document.getElementById('selectedFile').click();"/>
    @if ($errors->has('device_file'))
        <p>{{ $errors->first('device_file') }}</p>
    @endif
    <ul id="attached_file">
        @forelse($device->attachedFile()->get() as $file)
            <li id="f-{{ $file->id }}">
                <a target="_blank"
                   href="{{ config('app.url') . '/storage/' . $file->file_path }}">{{ $file->name  }}</a>
                (<a class="text-danger" onclick="deleteFile('{{ @route('remove_file', $file->id) }}')">Supprimer</a>)
            </li>
        @empty
            <p id="nofile">Aucun fichier</p>
        @endforelse
    </ul>
</div>

<script>
    async function deleteFile(url) {
        let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        await fetch(url, {
            method: 'DELETE',
            headers: {
                'Content-type': 'application/json',
                "X-CSRF-TOKEN": token
            }
        })
            .then((res) => res.json())
            .then((data) => {
                if (data.status === 'success') {
                    let li = document.getElementById(`f-${data.id}`);
                    li.remove();
                }
            })
    }

    async function addFile(input) {
        let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        let formData = new FormData();
        let file = input.files[0];

        formData.append("device_file", file);
        formData.append("device_id", {{ $device->id }});

        const ctrl = new AbortController()    // timeout
        setTimeout(() => ctrl.abort(), 5000);

        try {
            await fetch('/upload/file',
                {method: "POST", body: formData, signal: ctrl.signal, headers: {"X-CSRF-TOKEN": token}})
                .then((res) => res.json())
                .then((data) => {
                    if (data.status === 'success') {
                        const p = document.getElementById("nofile");
                        const ul = document.getElementById("attached_file");
                        const li = document.createElement("li");
                        li.setAttribute("id", "f-" + data.file_id)
                        if (p) {
                            p.remove();
                        }
                        li.innerHTML = `<a target="_blank" href="{{ config('app.url') . '/storage/'}}${data.file_path}">${data.file_name}</a>
                        (<a class="text-danger" onclick="deleteFile('{{ config('app.url') }}/file/${data.file_id}')">Supprimer</a>)`
                        ul.appendChild(li)
                        input.value = '';
                    }
                })
        } catch (e) {
            console.log('Huston we have problem...:', e);
        }
    }
</script>