@extends('layouts.master')

@section('titel', 'Payments | ')
@section('content')
    @include('partials.header')
    @include('partials.sidebar')

    <!-- Loader -->
    <div id="loader" class="text-center" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;">
        <img src="{{ asset('images/loader.gif') }}" alt="Loading..." width="100">
        <p>Loading data, please wait...</p>
    </div>

    <!-- Page Content (Initially Hidden) -->
    <main class="app-content" id="main-content" style="display: none;">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-th-list"></i> Account Table</h1>
            </div>
            <ul class="app-breadcrumb breadcrumb side">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item">Payment</li>
                <li class="breadcrumb-item active"><a href="#">Account Table</a></li>
            </ul>
        </div>

        <div class="mb-3">
            <a class="btn btn-primary" href="{{ route('otheraccounts.create') }}">
                <i class="fa fa-plus"></i> Create New Account
            </a>
        </div>



        <div class="row mt-2">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">
                        <table class="table table-hover table-bordered" id="sampleTable">
                            <thead>


                                <tr>
                                    <th>Account ID</th>
                                    <th>Account Ttile</th>
                                    <th>Control Title</th>
                                    <th>Op.Balance</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($accounts as $payment)
                                    <tr>
                                        <td>{{ $payment->Account_ID }}</td>
                                        <td>{{ $payment->Account_Title }}</td>
                                        <td>{{ $payment->Control_Title }}</td>
                                        <td>{{ $payment->OpeningBalance }}</td>

                                        <td>
                                            <a class="btn btn-primary btn-sm" href="{{ route('otheraccounts.show', $payment->Account_ID) }}">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <a class="btn btn-info btn-sm" href="{{ route('otheraccounts.edit', $payment->Account_ID) }}">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <button class="btn btn-danger btn-sm" type="submit" onclick="deleteTag({{ $payment->Account_ID }})">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                            <form id="delete-form-{{ $payment->Account_ID }}" action="{{ route('payment.destroy', $payment->Account_ID) }}" method="POST" style="display: none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('js')
    <!-- jQuery & DataTables -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">

    <script type="text/javascript">
        $(document).ready(function () {
            console.log("Page is loading...");

            // Hide Loader and Show Content When Page is Fully Loaded
            $(window).on('load', function () {
                console.log("Page loaded completely.");
                $('#loader').fadeOut(500);
                $('#main-content').fadeIn(500);

                // Initialize DataTable AFTER page is fully loaded
                $('#sampleTable').DataTable({
                    "paging": true,
                    "searching": true,
                    "ordering": true,
                    "info": true
                });
            });

            function deleteTag(Id) {
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    buttonsStyling: false,
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {
                        document.getElementById('delete-form-' + Id).submit();
                    } else if (result.dismiss === swal.DismissReason.cancel) {
                        swal('Cancelled', 'Your data is safe :)', 'error');
                    }
                });
            }
        });
    </script>
@endpush