@extends('layout')

@inject('carbon', 'Carbon\Carbon')


@section('content')
  <div class=" page-header-light" style="border-radius: 0px;">
    <div class="d-flex justify-content-between align-items-center mx-3 my-2">
    <div class="d-flex flex-column tailwind-scope">
      <h4 class="text-white text-2xl font-bold mb-1">Propriétés & Maintenance</h4>
      <p class="text-white text-sm">Gestion de stock</p>
    </div>
    @include('shared.navbar')
    </div>
  </div>
  <!-- Content area -->
  <div class="">
    <div x-data="{ tab: 'Stock' }">
    <div class="space-y-3 p-4 ">
      <!-- Tabs -->
      <div class="tailwind-scope">

      <div class="flex gap-8 mb-3 border-b border-gray-[#E2E9FC]">
        <button class=" px-2 py-2 text-sm font-medium focus:outline-none mr-3 xl:mr-5 " :class="tab === 'Stock' ? 'border-b-4 border-[#31B08F] text-[#212633] font-bold' : 'text-[#8E9ABB] '" @click="tab = 'Stock'">

        Stock
        <span class="rounded-2xl px-2 py-1 ml-1 text-xs text-white" :class="tab === 'Stock' ? 'bg-[#31B08F]' : 'bg-[#8E9ABB] '">{{ $stocks->count() }}</span>
        </button>

        <button class=" px-2 py-2 text-sm font-medium focus:outline-none mr-3 xl:mr-5 " :class="tab === 'Produits' ? 'border-b-4 border-[#31B08F] text-[#212633] font-bold' : 'text-[#8E9ABB] '" @click="tab = 'Produits'">
        Produits
        <span class="rounded-2xl px-2 py-1 ml-1  text-xs text-white" :class="tab === 'Produits' ? 'bg-[#31B08F]' : 'bg-[#8E9ABB] '">{{ $products->count() }}</span>
        </button>


      </div>
      </div>

      <!-- Tab Contents -->
      <div x-show="tab === 'Stock'" class="transition ">

      @include('stock.partials._stock')

      </div>

      <div x-show="tab === 'Produits'" class="transition ">

      @include('stock.partials._products')

      </div>

    </div>
    </div>
    <!-- Whole row as a control -->
    {{-- <div class="card"> --}}


    {{--
    </div> --}}
    <!-- /whole row as a control -->
    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModalStock" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">

      <div class="modal-header bg-warning text-white">
        <h5 class="modal-title" id="deleteModalLabel">Êtes-vous sûr ?</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        Vous ne pourrez pas récupérer ces informations !
      </div>

      <div class="modal-footer">
        <form id="formDeleteStock" action="" method="post">
        {{ csrf_field() }}
        @method('DELETE')
        <button type="submit" class="btn btn-danger">Oui, supprimez-le!</button>
        </form>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
      </div>

      </div>
    </div>
    </div>
    <div class="modal fade" id="deleteModalProduct" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">

      <div class="modal-header bg-warning text-white">
        <h5 class="modal-title" id="deleteModalLabel">Êtes-vous sûr ?</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        Vous ne pourrez pas récupérer ces informations !
      </div>

      <div class="modal-footer">
        <form id="formDeleteProduct" action="" method="post">
        {{ csrf_field() }}
        @method('DELETE')
        <button type="submit" class="btn btn-danger">Oui, supprimez-le!</button>
        </form>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
      </div>

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

  </div>
  <!-- /content area -->
  <!-- /main content -->
  <script>

    function openDeleteModalProduct(id) {
    $('#deleteModalProduct').modal('show');


    document.getElementById("formDeleteProduct").action = "/product/" + id;
    }
    function openDeleteModalStock(id) {
    $('#deleteModalStock').modal('show');

    document.getElementById("formDeleteStock").action = window.location.href + "/" + id;
    }

    function closeDeleteModal() {
    $('#deleteModalStock').modal('hide');
    $('#deleteModalProduct').modal('hide');
    }
  </script>
  {{--
  </div> --}}
@endsection