@extends('layouts.master')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="col-xxl">
            <div class="row">
                <div class="col-md-12">

                    <div class="card shadow-sm mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Payment Method</h5>
                        </div>
                        <div class="card-body">
                            <form id="paymentMethodForm" method="POST" action="{{ route('admin.paymentmethod.store') }}">
                                @csrf
                                <input type="hidden" name="id" id="method_id">
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-5">
                                        <label class="form-label">Payment Method</label>
                                        <input type="text" class="form-control" name="name" id="method_name" placeholder="Enter Payment Method Name" required>
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label">Number</label>
                                        <input type="text" class="form-control" name="number" id="method_number" placeholder="Enter Number">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" id="submitBtn" class="btn btn-primary w-100">
                                            <i class="fa fa-plus me-1"></i> Add
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                    <div class="row mt-4">
                        {{-- payment Methods Here --}}
                            @if($paymentMethods->count() > 0)
                                @foreach($paymentMethods as $method)
                                    <div class="col-md-3 mb-3">
                                        <div class="card shadow-sm border-0 h-100">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div>
                                                        <h6 class="mb-1 fw-bold text-capitalize">{{ $method->name }}</h6>
                                                        @if($method->number)
                                                            <small class="text-muted">{{ $method->number }}</small>
                                                        @endif
                                                    </div>
                                                    <div class="dropdown">
                                                        <button class="btn btn-sm btn-light" data-bs-toggle="dropdown">
                                                            <i class="fa fa-ellipsis-v"></i>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li>
                                                                <a class="dropdown-item editMethod"
                                                                   data-id="{{ $method->id }}"
                                                                   data-name="{{ $method->name }}"
                                                                   data-number="{{ $method->number }}">
                                                                    <i class="fa fa-edit me-2"></i>Edit
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <button class="dropdown-item text-danger deleteMethod"
                                                                        data-id="{{ $method->id }}">
                                                                    <i class="fa fa-trash me-2"></i>Delete
                                                                </button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-12">
                                    <div class="alert alert-info text-center">
                                        No Payment Methods Added Yet
                                    </div>
                                </div>
                            @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var paymentDeleteUrl = "{{ route('admin.paymentmethod.delete') }}";
        var paymentUpdateUrl = "{{ route('admin.paymentmethod.update') }}";
        var paymentStoreUrl = "{{ route('admin.paymentmethod.store') }}";
        var CSRF_TOKEN = "{{ csrf_token() }}";
    </script>
@endsection