@section('styles')
    <style>
        .modal-header {
            border-radius: 0 0 2px 2px;
            background-color: #fafafa;
            padding: 4px 6px;
            height: 56px;
            width: 100%;
        }
        .modal-title {
            font-size: 20px;
            font-weight: 500;
            color: #000;
        }
        .modal {
            z-index: 1103 !important;
        }
        .lean-overlay {
            z-index: 1102 !important;
        }
    </style>
@endsection

<div>
    <div class="row">
        <div class="col s12">
            <div class="card">
                <div class="card-content">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="card-title">Daftar Kondisi Sarpras</span>
                        <button class="btn waves-effect waves-light indigo right" onclick="openAddModal()">
                            <i class="mdi-content-add"></i> Tambah Kondisi Sarpras
                        </button>
                    </div>

                    @if (session('success'))
                        <div id="card-alert" class="card green" style="position: fixed; top: 20px; right: 20px; z-index: 1000; min-width: 300px;">
                            <div class="card-content white-text">
                                <p><i class="mdi-navigation-check"></i> {{ session('success') }}</p>
                            </div>
                            <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                    @endif

                    <table class="centered striped responsive-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kondisi</th>
                                <th>Keterangan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($kondisiSarpras as $kondisi)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $kondisi->kondisi }}</td>
                                    <td>{{ $kondisi->keterangan }}</td>
                                    <td>
                                        <button class="btn-floating btn-flat waves-effect waves-light amber accent-2 white-text tooltipped" data-position="top" data-delay="50" data-tooltip="Edit" onclick="openEditModal({{ $kondisi->id }})"><i class="mdi-editor-mode-edit"></i></button>
                                        <button onclick="confirmDelete({{ $kondisi->id }})" class="btn-floating btn-flat waves-effect waves-light red accent-2 white-text tooltipped" data-position="top" data-delay="50" data-tooltip="Hapus"><i class="mdi-action-delete"></i></button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="center-align">Tidak ada data kondisi sarpras</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                    <div class="center-align mt-3">
                        {{ $kondisiSarpras->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Tambah -->
    {{-- <div id="modal-tambah" class="modal"> ... </div> --}} <!-- Modal Materialize dikomentari -->

    <!-- Modal Edit -->
    <div id="modal-edit" class="modal">
        <div class="modal-header cyan accent-3 lighten-4 valign-wrapper">
            <h1 class="modal-title center">Edit Kondisi Sarpras</h1>
        </div>
        <form wire:submit.prevent="update">
            <div class="modal-content">
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text" id="edit_kondisi" wire:model="edit_kondisi" required>
                        <label for="edit_kondisi">Kondisi</label>
                        @error('edit_kondisi') <span class="red-text">{{ $message }}</span> @enderror
                    </div>
                    <div class="input-field col s12">
                        <textarea id="edit_keterangan" wire:model="edit_keterangan" class="materialize-textarea"></textarea>
                        <label for="edit_keterangan">Keterangan</label>
                        @error('edit_keterangan') <span class="red-text">{{ $message }}</span> @enderror
                    </div>
                </div>
            </div>
            <div class="modal-footer cyan accent-3 lighten-4">
                <button type="button" class="modal-close waves-effect waves-red btn-flat red modal-action white-text left">Batal</button>
                <button type="submit" class="waves-effect waves-green btn-flat indigo modal-action white-text right">Update</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('livewire:initialized', function () {

            window.Livewire.on('editDataLoaded', function(data) {
                const kondisiData = data[0];

                Swal.fire({
                    title: 'Edit Kondisi Sarpras',
                    html: `
                        <form id="editForm" class="text-left">
                            <div class="input-field">
                                <input type="text" id="swal_edit_kondisi" class="validate" value="${kondisiData.kondisi}" required>
                                <label for="swal_edit_kondisi" class="active">Kondisi</label>
                            </div>
                            <div class="input-field">
                                <textarea id="swal_edit_keterangan" class="materialize-textarea">${kondisiData.keterangan}</textarea>
                                <label for="swal_edit_keterangan" class="active">Keterangan</label>
                            </div>
                        </form>
                    `,
                    showCancelButton: true,
                    confirmButtonText: 'Update',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#26a69a',
                    cancelButtonColor: '#ef5350',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {

                        @this.edit_kondisi = document.getElementById('swal_edit_kondisi').value;
                        @this.edit_keterangan = document.getElementById('swal_edit_keterangan').value;

                        return @this.update();
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: 'Data berhasil diperbarui',
                            icon: 'success',
                            confirmButtonColor: '#26a69a'
                        });
                    }
                });
            });

            window.Livewire.on('storeSuccess', function() {
                Swal.fire({
                    title: 'Berhasil!',
                    text: 'Data berhasil ditambahkan',
                    icon: 'success',
                    confirmButtonColor: '#26a69a'
                });
            });
        });

        function openAddModal() {
            Swal.fire({
                title: 'Tambah Kondisi Sarpras',
                html: `
                    <form id=\"addForm\" class=\"text-left\">
                        <div class=\"input-field\">
                            <input type=\"text\" id=\"swal_add_kondisi\" class=\"validate\" required>
                            <label for=\"swal_add_kondisi\" class=\"active\">Kondisi</label>
                        </div>
                        <div class=\"input-field\">
                            <textarea id=\"swal_add_keterangan\" class=\"materialize-textarea\"></textarea>
                            <label for=\"swal_add_keterangan\" class=\"active\">Keterangan</label>
                        </div>
                    </form>
                `,
                showCancelButton: true,
                confirmButtonText: 'Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#26a69a',
                cancelButtonColor: '#ef5350',
                showLoaderOnConfirm: true,
                preConfirm: () => {

                    @this.kondisi = document.getElementById('swal_add_kondisi').value;
                    @this.keterangan = document.getElementById('swal_add_keterangan').value;

                    return @this.store();
                },
                allowOutsideClick: () => !Swal.isLoading()
            });
        }

        function openEditModal(id) {
            @this.edit(id);
        }

        function confirmDelete(id) {
            Swal.fire({
                title: "Apakah Anda yakin?",
                text: "Data kondisi sarpras akan dihapus secara permanen!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Batal",
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return @this.delete(id);
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: "Terhapus!",
                        text: "Data kondisi sarpras berhasil dihapus.",
                        icon: "success",
                        confirmButtonColor: "#26a69a"
                    });
                }
            });
        }
    </script>
@endpush