@extends('admin.dashboard.layout.app')
@section('style')
    <link rel="stylesheet" href="{{ asset('plugins/notyf/style.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert/style.css') }}">
    <style>
        .card {
            padding: 16px;
            border-radius: 16px;
            border: 0.5px;
            gap: 24px;
            box-shadow: 5px 5px 0px 0px #d6f2fc;
        }

        .dt-search {
            display: none;
        }

        #search-ip:active,
        #search-ip:focus {
            outline: 1px solid grey !important;
        }

        .form-control:focus,
        .form-control:active {
            box-shadow: none;
            outline: none;
        }

        table th {
            white-space: nowrap;
        }

        .table-responsive::-webkit-scrollbar {
            display: none;
        }

        .table-responsive {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }


        @media (max-width: 576px) {
            .dt-paging {
                float: none !important;
                text-align: center !important;
                display: flex !important;
                justify-content: center !important;
                width: 100%;
            }

            .dt-info {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: #fff;
                padding: 10px 0;
                display: flex !important;
                justify-content: center !important;
                z-index: 1030;
            }
        }
    </style>
@endsection
@section('content')
    @include('admin.dashboard.layout.header', ['title' => 'Payment Methods'])
    <div class="card p-3 mb-3">
        <form action="{{ route('admin.paymentMethods.create') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-5 mb-md-0 mb-2">
                    <div class="form-floating">
                        <input type="text" name="provider" id="provider" value="{{ old('provider') }}"
                            class="form-control @error('provider') is-invalid @enderror" placeholder="Provider">
                        <label for="provider">Provider</label>
                        @error('provider')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-5 mb-md-0 mb-2">
                    <div class="form-floating">
                        <input type="text" name="method" id="method" value="{{ old('method') }}"
                            class="form-control @error('method') is-invalid @enderror" placeholder="Method">
                        <label for="method">Method</label>
                        @error('method')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-2 mb-md-0 mb-2 d-flex align-items-center">
                    <button class="btn btn-primary d-flex justify-content-center align-items-center gap-1 w-100"><i
                            class='bx bx-plus-circle'></i>Create</button>
                </div>
            </div>
        </form>
    </div>
    <div class="card p-3">
        <div class="d-flex justify-content-md-end justify-content-center">
            <div class="wrapper mx-2" style="position: relative">
                <i class='bx bx-search bx-sm' style="position: absolute;top:25%;left:4%;color:grey;"></i>
                <input type="text" style="padding-left: 40px;width:300px;border:1px solid grey !important;"
                    class="py-2 rounded-3" name="search" id="search-ip" placeholder="Search">
            </div>
        </div>
        <div class="table-responsive">
            <table id="data-table" class="table ">
                <thead>
                    <tr>
                        <th class="text-muted">Sr #</th>
                        <th class="text-muted">Provider</th>
                        <th class="text-muted">Method</th>
                        <th class="text-muted">Type</th>
                        <th class="text-muted">Status</th>
                        <th class="text-muted">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($paymentMethods as $index => $pm)
                        <tr data-id="{{ $pm->id }}" data-provider="{{ $pm->provider }}"
                            data-method="{{ $pm->method }}" data-status="{{ $pm->status }}">
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $pm->provider }}</td>
                            <td>{{ $pm->method }}</td>
                            <td>{{ $pm->type }}</td>
                            <td>
                                @if ($pm->status == 0)
                                    <span class="badge bg-secondary">Inactive</span>
                                @elseif ($pm->status == 1)
                                    <span class="badge bg-success">Active</span>
                                @endif
                            </td>
                            <td class="d-flex align-items-center gap-1">
                                <button class="btn btn-primary btn-edit d-flex align-items-center gap-1" type="button">
                                    <i class='bx bx-edit-alt'></i>
                                </button>
                                <button class="btn btn-danger btn-delete d-flex align-items-center gap-1" type="button"><i
                                        class='bx  bx-trash'></i></button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <!-- Edit Payment Method Modal -->
    <div class="modal fade" id="editPmModal" tabindex="-1" aria-labelledby="editPmModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="editPmForm" class="modal-content">
                @csrf
                <input type="hidden" name="id" id="edit-id">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPmModalLabel">Edit Payment Method</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit-provider" class="form-label">Provider</label>
                        <input type="text" class="form-control" id="edit-provider" name="provider" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-method" class="form-label">Method</label>
                        <input type="text" class="form-control" id="edit-method" name="method" required>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary d-flex align-items-center gap-1">
                        <i class='bx bx-save'></i> Save changes
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('plugins/jquery/script.js') }}"></script>
    <script src="{{ asset('plugins/datatable/script.js') }}"></script>
    <script src="{{ asset('plugins/datatable/bootstrap.js') }}"></script>
    <script src="{{ asset('plugins/sweetalert/script.js') }}"></script>
    <script>
        var table
        $(document).ready(function() {
            table = $("#data-table").DataTable({
                lengthChange: false,
                pagingType: "simple_numbers"
            });
            $('#search-ip').on('keyup', function() {
                table.search(this.value).draw();
            });
        });
        $(document).on('click', '.btn-delete', function() {
            let row = $(this).closest('tr');
            let id = row.data('id');

            Swal.fire({
                title: "Are you sure?",
                text: "This record will be permanently deleted!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.paymentMethods.delete') }}",
                        type: "POST",
                        data: {
                            id: id,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire("Deleted!", response.message, "success");
                                table.row(row).remove().draw(false);
                            } else {
                                Swal.fire("Error!", response.message, "error");
                            }
                        },
                        error: function() {
                            Swal.fire("Error!", "Something went wrong.", "error");
                        }
                    });
                }
            });
        });

        $(document).on('click', '.btn-edit', function() {
            let $tr = $(this).closest('tr');
            if ($tr.hasClass('child')) $tr = $tr.prev('.parent');

            let id = $tr.data('id');
            let provider = $.trim($tr.find('td:eq(1)').text());
            let method = $.trim($tr.find('td:eq(2)').text());

            $('#edit-id').val(id);
            $('#edit-provider').val(provider);
            $('#edit-method').val(method);

            $('#editPmForm').data('row', $tr);

            $('#editPmModal').modal('show');
        });

        $('#editPmForm').on('submit', function(e) {
            e.preventDefault();

            let $form = $(this);
            let $tr = $form.data('row');

            let payload = {
                id: $('#edit-id').val(),
                provider: $('#edit-provider').val(),
                method: $('#edit-method').val(),
                _token: "{{ csrf_token() }}"
            };

            $.ajax({
                url: "{{ route('admin.paymentMethods.update') }}",
                type: "POST", 
                data: payload,
                success: function(res) {
                    if (res.success) {
                        let dtRow = table.row($tr);
                        let rowData = dtRow.data();
                        rowData[1] = payload.provider;
                        rowData[2] = payload.method;

                        dtRow.data(rowData).draw(false);

                        Swal.fire("Updated!", res.message ?? "Payment method updated.", "success");

                        $('#editPmModal').modal('hide');
                    } else {
                        Swal.fire("Error!", res.message ?? "Update failed.", "error");
                    }
                },
                error: function() {
                    Swal.fire("Error!", "Something went wrong.", "error");
                }
            });
        });
    </script>
@endsection