@extends('layouts.app', ['class' => '', 'elementActive' => 'listRechnung'])



@section('content')

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="shadow p-3 mb-5 bg-white rounded">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col-12 col-md-8">
                                    <h3 class="mb-0">{{ __('Rechnungsliste') }}</h3>
                                </div>
                                <div class="col-12 col-md-4 text-md-end text-right mt-2 mt-md-0">
                                    <a href="{{ route('rechnung.addRechnung') }}" class="btn btn-primary px-3 py-2 px-lg-4 py-lg-3 btn-lg" role="button">{{ __('Rechnung Hinzufügen') }}</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            
        @if (count($errors) > 0)
        @if($errors->any())
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{$errors->first()}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
          </div>
        @endif
    @endif
                            @if (session('status'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('status') }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif
                        </div>
            
                      
                        <!-- <div class="table-responsive"> -->
                   
                           <table class="table  datatable1"> <!--align-items-center table-flush-->
                                <thead class="text-primary">
                                <th scope="col">#</th>
                                <th scope="col">Vorname</th>
                                <th scope="col">Nachname</th>
                                <th scope="col">Straße</th>
                                <th scope="col">Adresse</th>
                                <th scope="col">PLZ</th>
                                <th scope="col">Ort</th>
                                <th scope="col">Land</th>
                                <th scope="col">E-Mail</th>
                                <th scope="col">Tele</th>
                                <th scope="col">Geburtsdatum</th>
                                <th scope="col">Ausweis-Nr</th>
                                <th scope="col">Lieferdatum</th>
                                <th scope="col">Bemerkung</th>
                                <th scope="col">Drittland</th>
                                <th scope="col">Neuwagen</th>
                                <th scope="col">Zahlungsart 1</th>
                                <th scope="col">Zahlungsvermerk 1</th>
                                <th scope="col">Zahlungsart 2</th>
                                <th scope="col">Zahlungsvermerk 2</th>
                                <th scope="col">Zahlungsfrist</th>
                                <th scope="col">MwSt</th>
                                <th scope="col">Empfänger-USt-IdNr.</th>
                                <th scope="col">Preistyp</th>
                                <th scope="col">Rechnung gleich abschliesen</th>
                                <th scope="col" class="text-center">Aktionen</th>

            
            <th scope="col">Hinzugefügt am</th>
            <th scope="col">Geändert am</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($listRechnung as $key => $user)
        <tr>
            <td>{{ $key + 1 }}</td>
            <td>{{ $user->rechnung_vorname }}</td>
            <td>{{ $user->rechnung_nachname }}</td>
            <td>{{ $user->rechnung_strasse }}</td>
            <td>{{ $user->rechnung_address }}</td>
            <td>{{ $user->rechnung_plz }}</td>
            <td>{{ $user->rechnung_ort }}</td>
            <td>{{ $user->rechnung_land }}</td>
            <td>{{ $user->rechnung_email }}</td>
            <td>{{ $user->rechnung_tele }}</td>
            <td>{{ $user->rechnung_geburtsdatum }}</td>
            <td>{{ $user->rechnung_ausweisnr }}</td>
            <td>{{ $user->rechnung_lieferdatum }}</td>
            <td>{{ $user->rechnung_bemerkung }}</td>
            <td>{{ $user->rechnung_drittland }}</td>
            <td>{{ $user->rechnung_neuwagen }}</td>
            <td>{{ $user->rechnung_zahlungsart1 }}</td>
            <td>{{ $user->rechnung_zahlungsvermerk1 }}</td>
            <td>{{ $user->rechnung_zahlungsart2 }}</td>
            <td>{{ $user->rechnung_zahlungsvermerk2 }}</td>
            <td>{{ $user->rechnung_zahlungsfrist }}</td>
            <td>{{ $user->rechnung_mwst }}</td> 
            <td>{{ $user->rechnung_empfangerust }}</td>

            <td>{{ $user->rechnung_netprice }}</td>            
            <td>{{ $user->rechnung_rechgleich }}</td>
            
           
            
            <td>{{ $user->rechnung_added_date }}</td>
            <td>{{ $user->rechnung_modified_date }}</td>



            <td>

<div class="d-flex gap-2">

<div class="d-flex flex-column align-items-center">


<small class="text-muted d-block mb-1">Bearbeiten</small>

<a href="editRechnung/{{$user->rechnung_id}}" class="btn btn-success  btn-round" role="button" aria-disabled="true">
<i class="nc-icon nc-refresh-69"></i></a>


</div>  

&nbsp;

<div class="d-flex flex-column align-items-center">



<small class="text-muted d-block mb-1">Löschen</small>
 <a href="deleteRechnung/{{$user->rechnung_id}}" 
       onclick="return confirm('Möchten Sie diese Rechnung wirklich löschen?')"
       class="btn btn-danger  btn-round" role="button" aria-disabled="true">
       <i class="nc-icon nc-button-power"> </i></a>

</div> 


    </td>


        </tr>

                                    @endforeach
                                </tbody>
                            </table>
                        <!-- </div> -->



  



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

@endsection



@stack('css')
<style>

    .dataTables_scrollBody {
    width: fit-content !important;
    max-width: 100%;  /* prevent overflow outside parent */
    overflow-x: auto !important;
    }


    /* Target the dropdown for colvis button */
    div.dt-button-collection {
        column-count: 3;
        column-gap: 10px;
        max-height: none;
        overflow-y: auto;
        width: 800px !important;
        padding: 10px;
        white-space: normal;
    }

    
/* All buttons: show empty checkbox by default */
div.dt-button-collection .dt-button::after {
    content: "\2610";  /* empty checkbox ☐ */
    color: #777;
    font-weight: bold;
    font-size: 14px;
    float: right; /* default tick alignment */
}

/* Active buttons (visible columns): show green checkmark */
div.dt-button-collection .dt-button.dt-button-active::after {
    content: "\2713";  /* checkmark ✓ */
    color: green;
}


.dt-button {
  background: linear-gradient(135deg, #4a90e2, #357ABD);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(53, 122, 189, 0.4);
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dt-button:hover, 
.dt-button:focus {
  background: linear-gradient(135deg, #357ABD, #2a5f9e);
  box-shadow: 0 4px 12px rgba(53, 122, 189, 0.7);
  outline: none;
}

.dt-button:active {
  background: linear-gradient(135deg, #2a5f9e, #1f4e7a);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.dt-button:disabled {
  background: #ccc;
  color: #666;
  cursor: default;
  box-shadow: none;
}

.buttons-colvis {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
}


</style>
<!-- @endstack -->


@push('scripts')
<!-- or stack  -->
    <script> //for jquerys use push scripts


    
    </script>
@endpush



@stack('js')
    <script>

  

    </script>
    <!-- @endstack -->