@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 des coûts fixes</p>
            </div>
            @include('shared.navbar')
        </div>
    </div>
    <!-- Content area -->
    <div class="content">
        <!-- Whole row as a control -->
        {{-- <div class="card"> --}}

            <div class="d-flex">
                <a href="{{ route('coutfixe.create') }}" class="button button-success ml-auto">Ajouter un nouveaux coûts
                    fixes</a>

            </div>
            <table class="table datatable-responsive-row-control">
                <thead>
                    <tr>
                        <th>#</th>
                        {{-- <th>Nom du logement</th> --}}
                        <th>Description</th>
                        <th>Prix</th>
                        <th>Créer le</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($fixedCost as $key => $c)
                        <tr>
                            <td>{{ ++$key }}</td>
                            {{-- <td>{{ $propertys->where('id', $c->property_id)->value('name') }}</td> --}}
                            <td>{{ $c->name }}</td>
                            <td>{{ $c->price }}</td>
                            <td>{{ $c->created_at }}</td>
                            <td class="text-center">
                                <div class="list-icons">
                                    <div class="dropdown">
                                        <a href="#" class="list-icons-item" data-toggle="dropdown">
                                            <i class="icon-menu9"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="{{ route('coutfixe.edit', $c->id) }}" class="dropdown-item"><i
                                                    class="icon-file-excel"></i> Modifier</a>
                                            <button type="button" onclick="openDeleteModal({{ $c->id }})"
                                                class="dropdown-item"><i class="icon-fixed-width icon-trash"></i>
                                                Supprimer</button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            {{--
        </div> --}}
        <!-- /whole row as a control -->
        <div class="swal2-container swal2-center swal2-fade swal2-shown" id="modal1"
            style="overflow-y: auto;display: none;">
            <div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-modal swal2-show"
                tabindex="-1" role="dialog" aria-live="assertive" aria-modal="true" style="display: flex;">
                <div class="swal2-header">
                    <ul class="swal2-progresssteps" style="display: none;"></ul>
                    <div class="swal2-icon swal2-error" style="display: none;">
                        <span class="swal2-x-mark">
                            <span class="swal2-x-mark-line-left"></span>
                            <span class="swal2-x-mark-line-right"></span>
                        </span>
                    </div>
                    <div class="swal2-icon swal2-question" style="display: none;">?</div>
                    <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;">!</div>
                    <div class="swal2-icon swal2-info" style="display: none;">i</div>
                    <div class="swal2-icon swal2-success" style="display: none;">
                        <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
                        <span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
                        <div class="swal2-success-ring"></div>
                        <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
                        <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
                    </div>
                    <img class="swal2-image" style="display: none;">
                    <h2 class="swal2-title" id="swal2-title">Êtes-vous sûr?</h2>
                    <button type="button" class="swal2-close" style="display: none;">×</button>
                </div>
                <div class="swal2-content">
                    <div id="swal2-content" style="display: block;">Vous ne pourrez pas récupérer ces informations!</div>
                    <input class="swal2-input" style="display: none;"><input type="file" class="swal2-file"
                        style="display: none;">
                    <div class="swal2-range" style="display: none;"><input type="range"><output></output></div>
                    <select class="swal2-select" style="display: none;"></select>
                    <div class="swal2-radio" style="display: none;"></div>
                    <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;"><input
                            type="checkbox"></label>
                    <textarea class="swal2-textarea" style="display: none;"></textarea>
                    <div class="swal2-validationerror" id="swal2-validationerror" style="display: none;"></div>
                </div>
                <div class="swal2-actions" style="display: flex;">
                    <form id="formDelete" action="" method="post">
                        {{ csrf_field() }}
                        @method('DELETE')
                        <button type="submit" class="swal2-confirm btn btn-primary" aria-label="">Oui,
                            supprimez-le!</button>
                    </form>
                    <button type="button" class="swal2-cancel btn btn-light" onclick="closeDeleteModal();" aria-label=""
                        style="display: inline-block;">Annuler</button>
                </div>
                <div class="swal2-footer" style="display: none;"></div>
            </div>
        </div>
    </div>
    <!-- /content area -->
    <!-- /main content -->
    <script>

        function openDeleteModal(id) {
            document.getElementById("modal1").style.display = "flex";

            document.getElementById("formDelete").action = window.location.href + "/" + id;
        }
        function closeDeleteModal() {
            document.getElementById("modal1").style.display = "none";
        }
    </script>
@endsection