@extends('layouts.app')

@section('content')
    @if(auth()->user() && auth()->user()->is_admin)
    <div class="container">
        <div class="row">
            <!-- Section Marques -->
            <div class="col-md-4 p-2">
                <div class="card p-4 box-shadow">
                    <h4 class="mb-3 pt-2">MARQUES</h4>
                    <form action="{{ route('pages.products.addMarque') }}" method="POST" class="needs-validation">
                        @csrf
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label>Nouvelle marque</label>
                                <input type="text" class="form-control" name="new_marque" required placeholder="Ajouter une nouvelle marque">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label>Marques existantes</label>
                                <select id="marque-list" class="custom-select d-block w-100">
                                    <option value="">Choose...</option>
                                    @foreach($marques as $marque)
                                        <option value="{{ $marque->id }}">{{ $marque->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12 mb-3">
                                <button type="submit" class="btn btn-primary btn-block">Ajouter Marque</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Section Modèles -->
            <div class="col-md-4 p-2">
                <div class="card p-4 box-shadow">
                    <h4 class="mb-3 pt-2">MODELES</h4>
                    <form action="{{ route('pages.products.addModele') }}" method="POST" class="needs-validation">
                        @csrf
                        <input type="hidden" name="marque_du_modele" id="marque-du-modele-modele" value="">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label>Nouveau modèle</label>
                                <input type="text" class="form-control" name="new_modele" required placeholder="Ajouter un nouveau modèle">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label>Modèles existants</label>
                                <select id="modele-list" class="custom-select d-block w-100">
                                    <option value="">Choose...</option>
                                </select>
                            </div>
                            <div class="col-md-12 mb-3">
                                <button type="submit" class="btn btn-primary btn-block">Ajouter Modèle</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Section Préfixes -->
            <div class="col-md-4 p-2">
                <div class="card p-4 box-shadow">
                    <h4 class="mb-3 pt-2">PREFIXES</h4>
                    <form action="{{ route('pages.products.addPrefixe') }}" method="POST" class="needs-validation">
                        @csrf
                        <input type="hidden" name="modele_du_prefixe" id="modele-du-prefixe" value="">
                        <input type="hidden" name="marque_du_modele" id="marque-du-modele-prefixe" value="">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label>Nouveau préfixe</label>
                                <input type="text" class="form-control" name="new_prefixe" required placeholder="Ajouter un nouveau préfixe">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label>Préfixes existants</label>
                                <select id="prefixe-list" class="custom-select d-block w-100">
                                    <option value="">Choose...</option>
                                </select>
                            </div>
                            <div class="col-md-12 mb-3">
                                <button type="submit" class="btn btn-primary btn-block">Ajouter Préfixe</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="alert alert-info mb-4">Seuls les administrateurs peuvent ajouter des produits, marques, modèles ou préfixes.</div>
    @endif
    <!-- Tableau des relations -->
    <div class="container mt-5">
        <table id="relation-table" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Marque</th>
                    <th>Modèle</th>
                    <th>Préfixe</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($marques as $marque)
                    @if(isset($modeles[$marque->id]))
                        @foreach($modeles[$marque->id] as $modele)
                            @if(isset($prefixes[$modele->id]))
                                @foreach($prefixes[$modele->id] as $prefixe)
                                    <tr>
                                        <td>{{ $marque->name }}</td>
                                        <td>{{ $modele->name }}</td>
                                        <td>{{ $prefixe->name }}</td>
                                        <td>
                                            @if(auth()->user() && auth()->user()->is_admin)
                                                <a href="{{ route('pages.products.editPrefixe', ['id' => $prefixe->id]) }}" class="text-warning">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a href="{{ route('pages.products.deletePrefixe', ['id' => $prefixe->id]) }}" class="text-danger" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce préfixe ?');">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                            @else
                                                <span class="text-muted small">Actions admin uniquement</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td>{{ $marque->name }}</td>
                                    <td>{{ $modele->name }}</td>
                                    <td>—</td>
                                    <td>
                                        @if(auth()->user() && auth()->user()->is_admin)
                                            <a href="{{ route('pages.products.editModele', ['id' => $modele->id]) }}" class="text-warning">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('pages.products.deleteModele', ['id' => $modele->id]) }}" class="text-danger delete-modele" data-id="{{ $modele->id }}">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        @else
                                            <span class="text-muted small">Actions admin uniquement</span>
                                        @endif
                                    </td>
                                </tr>
                            @endif
                        @endforeach
                    @else
                        <tr>
                            <td>{{ $marque->name }}</td>
                            <td>—</td>
                            <td>—</td>
                            <td>
                                @if(auth()->user() && auth()->user()->is_admin)
                                    <a href="{{ route('pages.products.editMarque', ['id' => $marque->id]) }}" class="text-warning">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ route('pages.products.deleteMarque', ['id' => $marque->id]) }}" class="text-danger delete-marque" data-id="{{ $marque->id }}">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                @else
                                    <span class="text-muted small">Actions admin uniquement</span>
                                @endif
                            </td>
                        </tr>
                    @endif
                @endforeach
            </tbody>
        </table>
    </div>

    @if(auth()->user() && auth()->user()->is_admin)
    <div class="container mt-5">
        <h3 class="mb-3">Ajout rapide</h3>
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger 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
        <div class="card mb-4">
            <div class="card-header font-weight-bold">Ajout rapide d’un produit complet</div>
            <div class="card-body">
                <form method="POST" action="{{ route('pages.products.quickAdd') }}">
                    @csrf
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="brand_name">Marque</label>
                            <input type="text" class="form-control @error('brand_name') is-invalid @enderror" id="brand_name" name="brand_name" maxlength="500" required value="{{ old('brand_name') }}">
                            @error('brand_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-4">
                            <label for="model_name">Modèle</label>
                            <input type="text" class="form-control @error('model_name') is-invalid @enderror" id="model_name" name="model_name" maxlength="500" required value="{{ old('model_name') }}">
                            @error('model_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group col-md-4">
                            <label for="prefix_name">Préfixe</label>
                            <input type="text" class="form-control @error('prefix_name') is-invalid @enderror" id="prefix_name" name="prefix_name" maxlength="500" required value="{{ old('prefix_name') }}">
                            @error('prefix_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Ajout rapide</button>
                </form>
            </div>
        </div>
    </div>
    @endif

<!-- Inclure les fichiers nécessaires pour DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function () {
        $('#relation-table').DataTable({
            paging: true,
            searching: true,
            ordering: true,
            info: true,
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/French.json"
            }
        });

        const marqueList = $('#marque-list');
        const modeleList = $('#modele-list');
        const prefixeList = $('#prefixe-list');
        const addPrefixeButton = $('#add-prefixe-button');
        const hiddenMarqueFieldModele = $('#marque-du-modele-modele');
        const hiddenMarqueFieldPrefixe = $('#marque-du-modele-prefixe');
        const hiddenModeleField = $('#modele-du-prefixe');

        marqueList.change(function () {
            const selectedMarque = $(this).val();
            hiddenMarqueFieldModele.val(selectedMarque);
            hiddenMarqueFieldPrefixe.val(selectedMarque);
            modeleList.empty().append('<option value="">Choose...</option>');
            prefixeList.empty().append('<option value="">Choose...</option>');
            addPrefixeButton && addPrefixeButton.prop('disabled', true);

            if (selectedMarque) {
                $.get(`/products/models/${selectedMarque}`, function (models) {
                    models.forEach(model => {
                        modeleList.append(`<option value="${model.id}">${model.name}</option>`);
                    });
                });
            }
        });

        modeleList.change(function () {
            const selectedModele = $(this).val();
            hiddenModeleField.val(selectedModele);

            if (selectedModele) {
                hiddenMarqueFieldPrefixe.val(marqueList.val());
                addPrefixeButton && addPrefixeButton.prop('disabled', false);
                prefixeList.empty().append('<option value="">Choose...</option>');

                $.get(`/products/prefixes/${selectedModele}`, function (prefixes) {
                    prefixes.forEach(prefix => {
                        prefixeList.append(`<option value="${prefix.name}">${prefix.name}</option>`);
                    });
                });
            } else {
                addPrefixeButton && addPrefixeButton.prop('disabled', true);
            }
        });
    });
</script>

@endsection