@extends('layouts.app')

@section('content')
<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 E-Proposal</span>
                </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>Nama Lengkap</th>
                            <th>Perihal</th>
                            <th>Alamat</th>
                            <th>Dokumen</th>
                            <th>Tanggal</th>
                            @canany(['update', 'delete'])
                            <th>Aksi</th>
                            @endcanany
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($eproposals as $eproposal)
                            <tr>
                                <td>{{ ($eproposals->currentPage() - 1) * $eproposals->perPage() + $loop->iteration }}</td>
                                <td>{{ $eproposal->nama_lengkap }}</td>
                                <td>{{ $eproposal->perihal }}</td>
                                <td>{{ Str::limit($eproposal->alamat, 50) }}</td>
                                <td>
                                    @if($eproposal->file_dokumen)
                                        <a href="{{ route('eproposals.show', $eproposal->id) }}" class="btn-floating btn-flat waves-effect waves-light blue accent-2 white-text tooltipped" data-position="top" data-delay="50" data-tooltip="Lihat Dokumen">
                                            <i class="mdi-file-folder"></i>
                                        </a>
                                    @else
                                        <span class="text-muted">Tidak ada file</span>
                                    @endif
                                </td>
                                <td>{{ $eproposal->created_at->format('d/m/Y') }}</td>
                                @canany(['update', 'delete'])
                                <td>
                                    @can('update')
                                    <a href="#" class="btn-floating btn-flat waves-effect waves-light amber accent-2 white-text tooltipped edit-btn"
                                       data-position="top"
                                       data-delay="50"
                                       data-tooltip="Edit"
                                       data-id="{{ $eproposal->id }}"
                                       data-nama="{{ $eproposal->nama_lengkap }}"
                                       data-perihal="{{ $eproposal->perihal }}"
                                       data-alamat="{{ $eproposal->alamat }}">
                                        <i class="mdi-editor-mode-edit"></i>
                                    </a>
                                    @endcan
                                    @can('delete')
                                    <a href="{{ route('eproposals.destroy', $eproposal->id) }}" class="btn-floating btn-flat waves-effect waves-light red accent-2 white-text tooltipped delete-btn" data-position="top" data-delay="50" data-tooltip="Hapus">
                                        <i class="mdi-action-delete"></i>
                                    </a>
                                    @endcan
                                </td>
                                @endcanany
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="center-align">Tidak ada data proposal</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

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

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const editButtons = document.querySelectorAll('.edit-btn');

        // Handle edit button click
        editButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const id = this.getAttribute('data-id');
                const nama = this.getAttribute('data-nama');
                const perihal = this.getAttribute('data-perihal');
                const alamat = this.getAttribute('data-alamat');

                Swal.fire({
                    title: 'Edit E-Proposal',
                    html: `
                        <form id="editForm" class="text-left">
                            <div class="input-field">
                                <input type="text" id="swal_edit_nama" class="validate" value="${nama}" required>
                                <label for="swal_edit_nama" class="active">Nama Lengkap</label>
                            </div>
                            <div class="input-field">
                                <textarea id="swal_edit_alamat" class="materialize-textarea">${alamat}</textarea>
                                <label for="swal_edit_alamat" class="active">Alamat</label>
                            </div>
                            <div class="input-field">
                                <input type="text" id="swal_edit_perihal" class="validate" value="${perihal}" required>
                                <label for="swal_edit_perihal" class="active">Perihal</label>
                            </div>
                            <div class="file-field input-field">
                                <div class="btn cyan accent-3">
                                    <span>File</span>
                                    <input type="file" name="file_dokumen" accept=".pdf">
                                </div>
                                <div class="file-path-wrapper">
                                    <input class="file-path validate" type="text" placeholder="Upload file PDF (opsional)">
                                </div>
                            </div>
                        </form>
                    `,
                    showCancelButton: true,
                    confirmButtonText: 'Update',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#26a69a',
                    cancelButtonColor: '#ef5350',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = "{{ route('eproposals.update', '') }}/" + id;
                        form.enctype = 'multipart/form-data';

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';

                        const methodField = document.createElement('input');
                        methodField.type = 'hidden';
                        methodField.name = '_method';
                        methodField.value = 'PUT';

                        const namaField = document.createElement('input');
                        namaField.type = 'hidden';
                        namaField.name = 'nama_lengkap';
                        namaField.value = document.getElementById('swal_edit_nama').value;

                        const alamatField = document.createElement('input');
                        alamatField.type = 'hidden';
                        alamatField.name = 'alamat';
                        alamatField.value = document.getElementById('swal_edit_alamat').value;

                        const perihalField = document.createElement('input');
                        perihalField.type = 'hidden';
                        perihalField.name = 'perihal';
                        perihalField.value = document.getElementById('swal_edit_perihal').value;

                        form.appendChild(csrfToken);
                        form.appendChild(methodField);
                        form.appendChild(namaField);
                        form.appendChild(alamatField);
                        form.appendChild(perihalField);

                        // Handle file upload if selected
                        const fileInput = document.querySelector('input[type="file"]');
                        if (fileInput.files.length > 0) {
                            const fileField = document.createElement('input');
                            fileField.type = 'file';
                            fileField.name = 'file_dokumen';
                            fileField.files = fileInput.files;
                            form.appendChild(fileField);
                        }

                        document.body.appendChild(form);
                        form.submit();
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: 'Data berhasil diperbarui',
                            icon: 'success',
                            confirmButtonColor: '#26a69a'
                        });
                    }
                });
            });
        });

        // Handle delete button click
        const deleteButtons = document.querySelectorAll('.delete-btn');
        deleteButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const href = this.getAttribute('href');

                Swal.fire({
                    title: "Apakah Anda yakin?",
                    text: "Data proposal akan dihapus secara permanen!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Ya, hapus!",
                    cancelButtonText: "Batal",
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = href;

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';

                        const methodField = document.createElement('input');
                        methodField.type = 'hidden';
                        methodField.name = '_method';
                        methodField.value = 'DELETE';

                        form.appendChild(csrfToken);
                        form.appendChild(methodField);
                        document.body.appendChild(form);
                        form.submit();
                    } else {
                        Swal.fire("Dibatalkan", "Data proposal tidak dihapus", "error");
                    }
                });
            });
        });
    });
</script>
@endpush