@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="userDatatable global-shadow border p-30 bg-white radius-xl w-100 mb-30">
                        {{-- Top Action Toolbar --}}
                        <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap" style="gap: 12px;">
                            <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                @can('charge.manage')
                                    <button type="button" class="btn btn-primary btn-sm px-20 radius-md" data-toggle="modal" data-target="#modal-add-charge">
                                        <i class="la la-plus fs-14 mr-1"></i> Add New Charge
                                    </button>
                                @endcan
                            </div>

                            <form method="GET" action="{{ route('charges.index') }}" class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                <select name="status" class="form-control form-control-sm w-auto" onchange="this.form.submit()">
                                    <option value="">All Statuses</option>
                                    <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Inactive</option>
                                </select>
                                <div class="input-group input-group-sm" style="width: 240px;">
                                    <input type="text" name="search" class="form-control" placeholder="Search charge name..."
                                           value="{{ request('search') }}">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-lighten border" type="submit">
                                            <i class="la la-search"></i>
                                        </button>
                                    </div>
                                </div>
                                @if(request('search') || request('status') !== null)
                                    <a href="{{ route('charges.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
                                @endif
                            </form>
                        </div>

                        {{-- Table --}}
                        <div class="table-responsive">
                            <table class="table mb-0 table-borderless">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th style="width: 8%;"><span class="userDatatable-title">ID</span></th>
                                        <th style="width: 26%;"><span class="userDatatable-title">Charge Name</span></th>
                                        <th style="width: 16%;"><span class="userDatatable-title">Type</span></th>
                                        <th style="width: 15%;"><span class="userDatatable-title">Amount / Rate</span></th>
                                        <th style="width: 15%;"><span class="userDatatable-title">Applied Scope</span></th>
                                        <th style="width: 10%;"><span class="userDatatable-title">Status</span></th>
                                        <th style="width: 10%;"><span class="userDatatable-title">Action</span></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($charges as $charge)
                                        <tr class="item-row">
                                            <td>
                                                <div class="userDatatable-content font-weight-600 font-monospace">
                                                    #{{ $charge->id }}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content text-dark font-weight-600">
                                                    {{ $charge->name }}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    @if ($charge->type === 'Fixed Amount')
                                                        <span class="badge bg-light-primary text-primary font-weight-bold">
                                                            <i class="la la-money-bill mr-1"></i> Fixed Amount
                                                        </span>
                                                    @else
                                                        <span class="badge bg-light-info text-info font-weight-bold">
                                                            <i class="la la-percentage mr-1"></i> Percent
                                                        </span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content font-weight-bold text-dark">
                                                    @if ($charge->type === 'Fixed Amount')
                                                        RM {{ number_format($charge->amount, 2) }}
                                                    @else
                                                        {{ number_format($charge->amount, 2) }}%
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content d-flex align-items-center" style="gap: 6px;">
                                                    @if ($charge->active_buy)
                                                        <span class="badge bg-light-success text-success fs-11 font-weight-600">Buy</span>
                                                    @endif
                                                    @if ($charge->active_sell)
                                                        <span class="badge bg-light-warning text-warning fs-11 font-weight-600">Sell</span>
                                                    @endif
                                                    @if (!$charge->active_buy && !$charge->active_sell)
                                                        <span class="text-muted fs-12">-</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    @if ($charge->is_active == 1)
                                                        <span class="status-badge status-badge--success">
                                                            <span class="status-badge__dot"></span> Active
                                                        </span>
                                                    @else
                                                        <span class="status-badge status-badge--danger">
                                                            <span class="status-badge__dot"></span> Inactive
                                                        </span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content d-flex align-items-center" style="gap: 12px;">
                                                    @can('charge.manage')
                                                        <button type="button" 
                                                                class="item-action-link text-primary btn-edit-charge"
                                                                data-id="{{ $charge->id }}"
                                                                data-name="{{ $charge->name }}"
                                                                data-type="{{ $charge->type }}"
                                                                data-amount="{{ $charge->amount }}"
                                                                data-is-active="{{ $charge->is_active }}"
                                                                data-active-buy="{{ $charge->active_buy }}"
                                                                data-active-sell="{{ $charge->active_sell }}"
                                                                data-action="{{ route('charges.update', $charge->id) }}"
                                                                title="Edit Charge">
                                                            <i class="la la-edit"></i> Edit
                                                        </button>

                                                        <form method="POST" action="{{ route('charges.toggleStatus', $charge->id) }}" class="d-inline form-toggle-status">
                                                            @csrf
                                                            @if ($charge->is_active == 1)
                                                                <button type="button" class="item-action-link text-warning btn-confirm-toggle" data-action-text="deactivate">
                                                                    <i class="la la-ban"></i> Deactivate
                                                                </button>
                                                            @else
                                                                <button type="button" class="item-action-link text-success btn-confirm-toggle" data-action-text="activate">
                                                                    <i class="la la-check-circle"></i> Activate
                                                                </button>
                                                            @endif
                                                        </form>
                                                    @else
                                                        <span class="text-muted fs-12">Read-only</span>
                                                    @endcan
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-40">
                                                <div class="atbd-empty text-center">
                                                    <div class="atbd-empty__image mb-2">
                                                        <img src="{{ asset('img/folders/1.svg') }}" alt="Empty" style="max-width: 70px; opacity: 0.7;">
                                                    </div>
                                                    <div class="atbd-empty__text">
                                                        <p class="text-muted mb-0">No additional charges found.</p>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal: Add New Charge --}}
    @can('charge.manage')
    <div class="modal fade" id="modal-add-charge" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form method="POST" action="{{ route('charges.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">Add New Additional Charge</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-20">
                            <label for="add_name" class="form-label font-weight-600">Charge Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="add_name" class="form-control" placeholder="e.g. Caj Pentadbiran" required>
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group mb-20">
                                <label for="add_type" class="form-label font-weight-600">Type <span class="text-danger">*</span></label>
                                <select name="type" id="add_type" class="form-control" required>
                                    <option value="Fixed Amount">Fixed Amount (RM)</option>
                                    <option value="Percent">Percent (%)</option>
                                </select>
                            </div>
                            <div class="col-md-6 form-group mb-20">
                                <label for="add_amount" class="form-label font-weight-600">Amount / Rate <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" name="amount" id="add_amount" class="form-control" placeholder="1.50" required>
                            </div>
                        </div>

                        <div class="form-group mb-20 p-3 bg-light rounded">
                            <label class="form-label d-block font-weight-600 mb-2">Apply Charge Scope</label>
                            <div class="d-flex align-items-center" style="gap: 20px;">
                                <div class="custom-checkbox">
                                    <input type="checkbox" id="add_active_buy" name="active_buy" value="1" checked>
                                    <label for="add_active_buy">Apply on Buy (Beli Emas)</label>
                                </div>
                                <div class="custom-checkbox">
                                    <input type="checkbox" id="add_active_sell" name="active_sell" value="1" checked>
                                    <label for="add_active_sell">Apply on Sell (Jual Emas)</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <div class="custom-checkbox">
                                <input type="checkbox" id="add_is_active" name="is_active" value="1" checked>
                                <label for="add_is_active">Active</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary px-20">Save Charge</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal: Edit Charge --}}
    <div class="modal fade" id="modal-edit-charge" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form method="POST" action="" id="form-edit-charge">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title font-weight-bold">Edit Additional Charge</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-20">
                            <label for="edit_name" class="form-label font-weight-600">Charge Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="edit_name" class="form-control" required>
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group mb-20">
                                <label for="edit_type" class="form-label font-weight-600">Type <span class="text-danger">*</span></label>
                                <select name="type" id="edit_type" class="form-control" required>
                                    <option value="Fixed Amount">Fixed Amount (RM)</option>
                                    <option value="Percent">Percent (%)</option>
                                </select>
                            </div>
                            <div class="col-md-6 form-group mb-20">
                                <label for="edit_amount" class="form-label font-weight-600">Amount / Rate <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" name="amount" id="edit_amount" class="form-control" required>
                            </div>
                        </div>

                        <div class="form-group mb-20 p-3 bg-light rounded">
                            <label class="form-label d-block font-weight-600 mb-2">Apply Charge Scope</label>
                            <div class="d-flex align-items-center" style="gap: 20px;">
                                <div class="custom-checkbox">
                                    <input type="checkbox" id="edit_active_buy" name="active_buy" value="1">
                                    <label for="edit_active_buy">Apply on Buy (Beli Emas)</label>
                                </div>
                                <div class="custom-checkbox">
                                    <input type="checkbox" id="edit_active_sell" name="active_sell" value="1">
                                    <label for="edit_active_sell">Apply on Sell (Jual Emas)</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <div class="custom-checkbox">
                                <input type="checkbox" id="edit_is_active" name="is_active" value="1">
                                <label for="edit_is_active">Active</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary px-20">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan
@endsection

@section('styles')
    <style>
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
            white-space: nowrap;
        }

        .status-badge__dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex: 0 0 auto;
            background-color: currentColor;
        }

        .status-badge--success {
            background-color: #e5f8f3;
            color: #12a678;
        }

        .status-badge--danger {
            background-color: #fdecec;
            color: #e2434f;
        }

        .item-action-link {
            background: none;
            border: none;
            padding: 0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .item-action-link:hover {
            opacity: 0.75;
            text-decoration: underline;
        }

        .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        .modal-header {
            padding: 18px 24px;
            border-bottom: 1px solid #eef1f5;
            background: #ffffff;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        .modal-title {
            font-size: 16px;
            font-weight: 700;
            color: #2c2e3d;
            margin: 0;
        }

        .modal-header .close {
            padding: 18px 24px;
            margin: -18px -24px -18px auto;
            font-size: 20px;
            color: #9299b8;
            opacity: 0.8;
        }

        .modal-header .close:hover {
            opacity: 1;
            color: #2c2e3d;
        }

        .modal-body {
            padding: 24px;
            background: #ffffff;
        }

        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #eef1f5;
            background: #ffffff;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
    </style>
@endsection

@section('scripts')
    <script>
        $(function() {
            // Edit modal trigger
            $('.btn-edit-charge').on('click', function() {
                var id = $(this).data('id');
                var name = $(this).data('name');
                var type = $(this).data('type');
                var amount = $(this).data('amount');
                var isActive = $(this).data('is-active');
                var activeBuy = $(this).data('active-buy');
                var activeSell = $(this).data('active-sell');
                var action = $(this).data('action');

                $('#edit_name').val(name);
                $('#edit_type').val(type);
                $('#edit_amount').val(amount);
                $('#edit_is_active').prop('checked', isActive == 1);
                $('#edit_active_buy').prop('checked', activeBuy == 1);
                $('#edit_active_sell').prop('checked', activeSell == 1);
                $('#form-edit-charge').attr('action', action);

                $('#modal-edit-charge').modal('show');
            });

            // Toggle status with SweetAlert confirmation
            $('.btn-confirm-toggle').on('click', function(e) {
                e.preventDefault();
                var form = $(this).closest('form');
                var actionText = $(this).data('action-text');

                Swal.fire({
                    title: 'Confirm Action',
                    text: 'Are you sure you want to ' + actionText + ' this charge item?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: actionText === 'activate' ? '#10b981' : '#f59e0b',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Yes, ' + actionText
                }).then(function(result) {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });

            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: "{{ session('success') }}",
                    timer: 3000,
                    showConfirmButton: false
                });
            @endif

            @if (session('error'))
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: "{{ session('error') }}"
                });
            @endif
        });
    </script>
@endsection