@extends('layouts.app')

@section('title', 'Ajustement / Inventaire')

@section('content')
<style>
    .inventaire-container {
        font-family: Arial, sans-serif;
    }

    .inventaire-container h1 {
        text-align: center;
        font-size: 2.5rem;
        color: #007bff;
        margin-bottom: 20px;
    }

    .inventaire-container h2 {
        text-align: center;
        font-size: 2rem;
        color: #343a40;
        margin-top: 40px;
        margin-bottom: 20px;
        border-bottom: 2px solid #007bff;
        display: inline-block;
        padding-bottom: 5px;
    }

    .inventaire-container .btn-primary {
        background-color: #007bff;
        color:white;
        border: none;
        font-size: 1rem;
        padding: 10px 20px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
        font-weight:bold;
    }

    .inventaire-container .btn-primary:hover {
        background-color: #0056b3;
    }

    .inventaire-container .card {
        margin: 0 auto;
        max-width: 800px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .inventaire-container .table {
        margin-top: 20px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        border-collapse: collapse;
        border: 1px solid #dee2e6;
    }

    .inventaire-container .table thead {
        background-color: #007bff;
        color: white;
    }

    .inventaire-container .table th, 
    .inventaire-container .table td {
        padding: 12px;
        text-align: center;
        border: 1px solid #dee2e6;
    }

    .inventaire-container .table tbody tr:nth-of-type(odd) {
        background-color: #f8f9fa;
    }

    .inventaire-container .table tbody tr:nth-of-type(even) {
        background-color: #ffffff;
    }

    .inventaire-container .table tbody tr:hover {
        background-color: #d6e4f0;
        cursor: pointer;
    }

    .inventaire-container .form-table {
        width: 100%;
        margin: 0 auto;
        border-spacing: 15px;
    }

    .inventaire-container .form-table th {
        text-align: right;
        padding-right: 15px;
        font-weight: normal;
        color: #6c757d;
    }

    .inventaire-container .form-table td {
        text-align: left;
    }

    .inventaire-container .form-control {
        border-radius: 5px;
        border: 1px solid #ced4da;
        padding: 10px;
    }
</style>

<div class="container my-4 inventaire-container">
    <h1>Inventaire & Ajustement du Stock</h1>

    @if(session('success'))
        <div class="alert alert-success text-center">{{ session('success') }}</div>
    @endif

    <div class="card mb-4">
        <div class="card-header text-center font-weight-bold">
            Créer un Nouvel Inventaire
        </div>
        <div class="card-body">
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('inventaire.store') }}" method="POST">
                @csrf
                <table class="form-table">
                    <tr>
                        <th><label for="item_type">Article :</label></th>
                        <td>
                            <select name="item_type" id="item_type" class="form-control" required>
                                <option value="">-- Sélectionner --</option>
                                @foreach($itemTypes as $type)
                                    <option value="{{ $type }}">{{ $type }}</option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th><label for="nouveau_stock">Nouveau Stock Réel :</label></th>
                        <td>
                            <input type="number" 
                                   name="nouveau_stock" 
                                   id="nouveau_stock" 
                                   class="form-control" 
                                   min="0" 
                                   required>
                        </td>
                    </tr>
                    <tr>
                        <th><label for="commentaire">Commentaire :</label></th>
                        <td>
                            <input type="text" 
                                   name="commentaire" 
                                   id="commentaire" 
                                   class="form-control" 
                                   placeholder="Ex: Inventaire du 12/01/2025">
                        </td>
                    </tr>
                </table>
                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-primary">Ajuster</button>
                </div>
            </form>
        </div>
    </div>

    <h2>Historique des Ajustements</h2>
    <div class="table-responsive">
        <table class="table table-striped align-middle">
            <thead>
                <tr>
                    <th>Date de l'Ajustement</th>
                    <th>Article</th>
                    <th>Ancien Stock</th>
                    <th>Nouveau Stock</th>
                    <th>Commentaire</th>
                </tr>
            </thead>
            <tbody>
                @foreach($inventaires as $inv)
                    <tr>
                        <td>{{ $inv->date_adjust }}</td>
                        <td>{{ $inv->item_type }}</td>
                        <td>{{ $inv->ancien_stock }}</td>
                        <td>{{ $inv->nouveau_stock }}</td>
                        <td>{{ $inv->commentaire }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection