@php
  $rnd = uniqid();
@endphp
<tr>
    <td>
        <span>{{$orderDetail->id}}</span>
        <input type="hidden" name=coordinates[{{$orderDetail->id}}] id="coordinates_{{$orderDetail->id}}">
    </td>
    <td>
        <input type="number" placeholder="Cantidad" min="1" value="{{$orderDetail->quantity ?? 1}}" name=quantity[{{$orderDetail->id}}] required class="col-6">
    </td>
    <td>
        {{$product?->category?->name}}
    </td>
    <td>{{$product->name}}</td>
    <td>{{$product?->brand?->name}}</td>
    <td>
        <input type="text" placeholder="N&uacute;mero &oacute; Serie" name="serie[{{$orderDetail->id}}]" value="{{$orderDetail->serial_number}}" required>
    </td>

    <td>
        <a href="#" data-bs-toggle="modal" data-bs-target="#photo_{{$rnd}}">Cargar fotos</a>

        <div class="modal fade"  id="photo_{{$rnd}}">
            <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
                <div class="modal-content modal-content-demo">
                    <div class="modal-header">
                        <h6 class="modal-title">Cargar fotos</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>


                        <div class="modal-body text-start">
                            <div class="row">
                                <div class="col-6">
                                    {{ Form::label('Foto frente') }}
                                    {{ Form::file('photo_front', ['id' => 'front_' . $order->id .'_'.$orderDetail->id, 'class' => 'form-control' . ($errors->has('photo_front') ? ' is-invalid' : ''), 'placeholder' => 'Foto frente', 'accept' => 'image/*']) }}
                                    {!! $errors->first('photo_front', '<div class="invalid-feedback">:message</div>') !!}
                                </div>
                                <div class="col-6">
                                    {{ Form::label('Foto trasera') }}
                                    {{ Form::file('photo_back', ['id' => 'back_' . $order->id .'_'.$orderDetail->id, 'class' => 'form-control' . ($errors->has('photo_back') ? ' is-invalid' : ''), 'placeholder' => 'Foto trasera', 'accept' => 'image/*']) }}
                                    {!! $errors->first('photo_back', '<div class="invalid-feedback">:message</div>') !!}
                                </div>
                                <div class="col-6 mt-2">
                                    <img src="{{ route('photo', ['order' => $orderDetail, 's' => 'front']) }}" alt="" style="width: 200px;">
                                </div>
                                <div class="col-6 mt-2">
                                    <img src="{{ route('photo', ['order' => $orderDetail, 's' => 'back']) }}" alt="" style="width: 200px;">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary frmPhoto" type="button" data-order="{{$order->id}}" data-detail="{{$orderDetail->id}}"
                                    data-id="photo_{{$rnd}}">Guardar</button>
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal" >Cerrar</button>
                        </div>

                </div>
            </div>
        </div>
    </td>

    <td>
        <textarea name="observations[{{$orderDetail->id}}]" id="" cols="15" rows="5">{{$orderDetail->observation}}</textarea>
    </td>

    <td>
        <input type="text" placeholder="Precio" min="1" name="price[{{$orderDetail->id}}]" value="{{$orderDetail->price ?? 1}}" required class="col-6">
    </td>
    <td>
        <a href="javascript:void(0);" class="text-danger btnDelete">Eliminar</a>
    </td>
</tr>