@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
members List
@parent
@stop

{{-- Page content --}}
@section('content')
<section class="content-header">
    <h1>Members</h1>
    <ol class="breadcrumb">
        <li>
            <a href="{{ route('dashboard') }}"> <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                Dashboard
            </a>
        </li>
        <li>members</li>
        <li class="active">members</li>
    </ol>
</section>

<section class="content paddingleft_right15">
    <div class="row">
        <div class="panel panel-primary ">
            <div class="panel-heading clearfix">
                <h4 class="panel-title pull-left"> <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                    Members List
                </h4>
                <div class="pull-right">
                    <a href="{{ route('kebele.members.create') }}" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-plus"></span> @lang('button.create')</a>
                </div>
            </div>
            <br />
            <!-- Include jsPDF library -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

            <div class="panel-body" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                <div>
                    <button id="printButton" style="padding: 8px 12px; margin-right: 10px;">Print</button>
                    <button id="pdfButton" style="padding: 8px 12px; margin-right: 10px;">Export to PDF</button>
                    <button id="csvButton" style="padding: 8px 12px;">Export to CSV</button>
                </div>
                <input type="text" id="searchInput" placeholder="Search..." style="padding: 8px; width: 200px; margin-left: auto;">
            </div>

            <div style="overflow-x: auto;">
                <table class="table table-bordered" id="table">
                    <thead>
                    <tr class="filters">
                        <th>ID</th>
                        <th>Idno</th>
                        <th>Firstname</th>
                        <th>Middlename</th>
                        <th>Lastname</th>
                        <th>Mothername</th>
                        <th>Dateofbirth</th>
                        <th>Placeogbirth</th>
                        <th>Age</th>
                        <th>Gender</th>
                        <th>Nationality</th>
                        <th>Kebele</th>
                        <th>Occupation</th>
                        <th>Emergencyaddress</th>
                        <th>Regdate</th>
                        <th>Phone</th>
                        <th>Reason</th>
                        <th>File</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($members as $member)
                        <tr>
                            <td>{!! $member->id !!}</td>
                            <td>{!! $member->idno !!}</td>
                            <td>{!! $member->firstname !!}</td>
                            <td>{!! $member->middlename !!}</td>
                            <td>{!! $member->lastname !!}</td>
                            <td>{!! $member->mothername !!}</td>
                            <td>{!! $member->dateofbirth !!}</td>
                            <td>{!! $member->placeogbirth !!}</td>
                            <td>{!! $member->age !!}</td>
                            <td>{!! $member->gender !!}</td>
                            <td>{!! $member->nationality !!}</td>
                            <td>{!! $member->kebele !!}</td>
                            <td>{!! $member->occupation !!}</td>
                            <td>{!! $member->emergencyaddress !!}</td>
                            <td>{!! $member->regdate !!}</td>
                            <td>{!! $member->phone !!}</td>
                            <td>{!! $member->reason !!}</td>
                            <td>{!! $member->file !!}</td>
                            <td>
                                <a href="{{ route('admin.members.show', $member->id) }}">
                                    <i class="livicon" data-name="info" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="view member"></i>
                                </a>
                                <a href="{{ route('admin.members.edit', $member->id) }}">
                                    <i class="livicon" data-name="edit" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="edit member"></i>
                                </a>
                                <a href="{{ route('admin.members.confirm-delete', $member->id) }}" data-toggle="modal" data-target="#delete_confirm">
                                    <i class="livicon" data-name="remove-alt" data-size="18" data-loop="true" data-c="#f56954" data-hc="#f56954" title="delete member"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <script>
                document.getElementById('searchInput').addEventListener('keyup', function() {
                    let filter = this.value.toLowerCase();
                    let rows = document.querySelectorAll('#table tbody tr');

                    rows.forEach(row => {
                        let cells = row.getElementsByTagName('td');
                    let found = false;

                    for (let i = 0; i < cells.length; i++) {
                        if (cells[i].textContent.toLowerCase().includes(filter)) {
                            found = true;
                            break;
                        }
                    }

                    row.style.display = found ? '' : 'none';
                });
                });

                document.getElementById('printButton').addEventListener('click', function() {
                    let printWindow = window.open('', '', 'height=600,width=800');
                    printWindow.document.write('<html><head><title>Print</title>');
                    printWindow.document.write('</head><body>');
                    printWindow.document.write('<h1>Member List</h1>');
                    printWindow.document.write(document.getElementById('table').outerHTML);
                    printWindow.document.write('</body></html>');
                    printWindow.document.close();
                    printWindow.print();
                });

                document.getElementById('pdfButton').addEventListener('click', function() {
                    const { jsPDF } = window.jspdf;
                    const doc = new jsPDF();
                    const table = document.getElementById('table');
                    const rows = Array.from(table.rows);

                    rows.forEach((row, index) => {
                        row.cells.forEach((cell, cellIndex) => {
                        doc.text(cell.innerText, 10 + cellIndex * 40, 10 + index * 10);
                });
                });

                    doc.save('members.pdf');
                });

                document.getElementById('csvButton').addEventListener('click', function() {
                    const rows = Array.from(document.querySelectorAll('#table tr'));
                    const csvContent = rows.map(row => {
                            const cells = Array.from(row.querySelectorAll('td, th')).map(cell => cell.innerText);
                    return cells.join(',');
                }).join('\n');

                    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                    const link = document.createElement('a');
                    const url = URL.createObjectURL(blob);

                    link.setAttribute('href', url);
                    link.setAttribute('download', 'members.csv');
                    link.style.display = 'none';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                });
            </script>
            </div>
    </div>    <!-- row-->
</section>
@stop

{{-- Body Bottom confirm modal --}}
@section('footer_scripts')
<div class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="user_delete_confirm_title" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>
<script>$(function () {$('body').on('hidden.bs.modal', '.modal', function () {$(this).removeData('bs.modal');});});</script>
@stop