@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Catalogue des services</h4>
            <h6>{{ $magasin->name ?? 'Tous les magasins' }}</h6>
        </div>
    </div>
    @if($magasin)
    <div class="page-btn">
        <a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-service">
            <i data-feather="plus-circle" class="me-2"></i>Nouvelle prestation
        </a>
    </div>
    @endif
</div>

<div class="card table-list-card">
    <div class="card-body dedi-livewire-table">
        <livewire:tables.services-catalog-table :magasin-id="$magasin?->id" />
    </div>
</div>

@if($magasin)
    @include('services.catalog.partials.add')
@endif
@include('services.catalog.partials.edit')

<script>
function openEditServiceModal(id, name, unitLabel) {
    var form = document.getElementById('edit-service-form');
    form.action = "{{ url('/services/catalog') }}/" + id;
    document.getElementById('edit-service-name').value = name || '';
    document.getElementById('edit-service-unit').value = unitLabel || 'unité';
    var modal = new bootstrap.Modal(document.getElementById('edit-service-modal'));
    modal.show();
    if (typeof feather !== 'undefined') feather.replace();
}
</script>
@endsection