@extends('layouts.master')

@section('content')
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="row">
    <div class="col">
      <h4 class="fw-bold py-3 mb-4 animate__animated animate__bounce">
        <span class="text-muted fw-light">Factures /</span> Liste Des Factures
      </h4>
    </div>
    <div class="col">
      @if(session('success'))
          <div class="alert alert-primary alert-dismissible" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
      @endif

      @if(session('danger'))
          <div class="alert alert-danger alert-dismissible" role="alert">
            {{ session('danger') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
      @endif
    </div>
  </div>
  <!-- Bootstrap Table with Header - Dark -->
  <div class="card">
    <h5 class="card-header">Liste Des Factures</h5>
    <div class="table-responsive text-nowrap">
      <table class="table">
        <thead class="table-dark">
          <tr>
            <th>N° Facture</th>
            <th>Client</th>
            <th>Montant HT</th>
            <th>Remise</th>
            <th>Status</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody class="table-border-bottom-0">
          <tr>
            @foreach($factures as $facture)
            <td>
              {{ $facture->nFacture}}
            </td>


            <td>{{ $facture->client_id}}</td>

            <td>
              {{ $facture->montantHT }}
            </td>

            <td>
              {{ $facture->id }}
            </td>

            <td>
              @if( $facture->statut == 0)
                <span class="badge bg-label-danger me-1">Impayée</span>
              @else
                <span class="badge bg-label-success me-1">Payée</span>
              @endif
            </td>

            <td class="text-end">

              @if( $facture->statut == 0)
              <a href="#" class="btn btn-icon btn-outline-success" data-bs-toggle="modal" 
                          data-bs-target="#basicModalPayeFacture{{$facture->id}}" >
                <i class='bx bx-check-double'></i>
              </a>
              @endif

              <a href="#" class="btn btn-icon btn-outline-info">
                <i class='bx bx-archive-in'></i>
              </a>

              @if( $facture->statut == 0)
              <a href="{{ route('factures.edit',$facture->id) }}" class="btn btn-icon btn-outline-warning">
                <i class="bx bx-edit-alt"></i>
              </a>
              @endif

              <a href="#" class="btn btn-icon btn-outline-danger" data-bs-toggle="modal" data-bs-target="#basicModal{{$facture->id}}">
                <i class='bx bx-trash'></i>
              </a>

               
            </td>
          </tr>

<!-- Modal Begin payer Facture-->
<div class="modal fade" id="basicModalPayeFacture{{$facture->id}}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="border: 4px solid green;">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1">Confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
      </div>

      <form action="{{ url('payeFacture/'.$facture->id) }}" method="POST">
        @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col mb-3">
              <p>êtes vous sure d'avoire <strong>Cloturer</strong> cette Facture - 
                        {{ $facture->nFacture}}</p>
              <input type="hidden" value="{{ $facture->id }}" class="form-control" name="PyFact" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"> Fermer</button>
          <button type="submit" class="btn btn-success">Payer</button>
        </div>
      </form>

    </div>
  </div>
</div>
<!-- Modal End -->

<!-- Modal Begin -->
<div class="modal fade" id="basicModal{{$facture->id}}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="border: 4px solid #fc5656;">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1">Confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
      </div>

      <form action="{{ route('factures.destroy',$facture->id) }}" method="POST">
        @csrf
        @method('DELETE')
        <div class="modal-body">
          <div class="row">
            <div class="col mb-3">
              <p>êtes vous sure d'avoire <strong>supprimer</strong> ce devis - 
                {{ $facture->id}}</p>
              <input type="hidden" value="{{ $facture->id }}" class="form-control" name="deleteTarif" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
            Fermer
          </button>
          <button type="submit" class="btn btn-danger">Supprimer</button>
        </div>
      </form>

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

      <div class="d-flex justify-content-center">
        {!! $factures->links('pagination::bootstrap-4') !!}
      </div>
    
  </div>
  <!--/ Bootstrap Table with Header Dark -->
  


</div>
<!-- / Content -->
@endsection