@extends('admin.dashboard.layout.app')

@section('style')
<link rel="stylesheet" href="{{ asset('plugins/datatable/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatable/style.css') }}">

<style>
    :root{
        --card-bg:#fff;
        --border:#e9eef5;
        --text:#1f2a37;
        --muted:#6b7280;
        --shadow: 0 10px 30px rgba(17,24,39,.06);
        --radius: 16px;
    }

    .page-card{
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 18px;
    }

    /* Search box */
    .search-wrap{
        position: relative;
        max-width: 380px;
        width: 100%;
    }
    .search-wrap i{
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
    }
    #search-ip{
        width: 100%;
        padding: 10px 14px 10px 42px;
        border: 1px solid var(--border);
        border-radius: 12px;
        outline: none;
        background: #fbfcfe;
        transition: .15s ease;
    }
    #search-ip:focus{
        background: #fff;
        border-color: #cfe7ff;
        box-shadow: 0 0 0 4px rgba(59,130,246,.08);
    }

    /* Table */
    .table-shell{
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        margin-top: 14px;
    }

    table.dataTable{
        margin: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0;
        color: var(--text);
        font-size: 14px;
    }

    table.dataTable thead th{
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f7f9fc;
        color: #374151;
        font-weight: 600;
        border-bottom: 1px solid var(--border) !important;
        white-space: nowrap;
        padding: 12px 14px !important;
    }

    table.dataTable tbody td{
        padding: 12px 14px !important;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        white-space: nowrap;
    }

    table.dataTable tbody tr:nth-child(even){
        background: #fbfdff;
    }
    table.dataTable tbody tr:hover{
        background: #f1f7ff;
    }

    /* DataTables footer */
    .dataTables_wrapper .dataTables_paginate{
        padding: 12px 0 0 0;
    }
    .dataTables_wrapper .dataTables_info{
        padding-top: 12px;
        color: var(--muted);
        font-size: 13px;
    }

    .dt-search{
        display: none;
    }

    /* Make the horizontal scroll feel nice */
    .table-responsive{
        overflow: auto;
    }
    .table-responsive::-webkit-scrollbar{ height: 10px; }
    .table-responsive::-webkit-scrollbar-thumb{
        background: #dbe6f3;
        border-radius: 999px;
    }

    @media (max-width: 576px){
        .dataTables_wrapper .dataTables_paginate{
            float: none !important;
            text-align: center !important;
        }
    }
</style>
@endsection

@section('content')
@include('admin.dashboard.layout.header', ['title' => 'Merchant List'])

<div class="page-card">
    <div class="d-flex justify-content-end">
        <div class="search-wrap">
            <i class='bx bx-search bx-sm'></i>
            <input type="text" name="search" id="search-ip" placeholder="Search merchants...">
        </div>
    </div>

    <div class="table-shell">
        <div class="table-responsive">
          <table id="data-table" class="table table-borderless align-middle">
    <thead>
    <tr>
        <th>Sr. No.</th>
        <th>Merchant ID</th>
        <th>Merchant Name</th>
        <th>Business Name</th>
        <th>Phone</th>
        <th>Created At</th>
        <th>Avail Balance</th>
        <th>MWD Disbursement %</th>
        <th>IBFT Disbursement %</th>
        <th>Collection Service Rate %</th>
        <th>Cnic</th>
        <th>Address</th>
        <th>City</th>
        <th>JazzCash</th>
        <th>Easypaisa</th>
    </tr>
    </thead>
    <tbody>
    @foreach($merchants as $index => $merchant)
        @php
            $mwd = optional($merchant->paymentPreferences->firstWhere('payment_gateway_id', 3))->disbursement_rate;
            $ibft = optional($merchant->paymentPreferences->firstWhere('payment_gateway_id', 4))->ibft_disbursement_rate;
            $serviceRate = optional($merchant->paymentPreferences->first())->service_rate;

            $jazzcash = $merchant->paymentPreferences->firstWhere('payment_gateway_id', 1);
            $easypaisa = $merchant->paymentPreferences->firstWhere('payment_gateway_id', 2);

            $jazzcashActive = $jazzcash && $jazzcash->status == 1;
            $easypaisaActive = $easypaisa && $easypaisa->status == 1;
        @endphp
        <tr>
            <td>{{ $index + 1 }}</td>
            <td>{{ $merchant->id }}</td>
            <td>{{ $merchant->name }}</td>
            <td>{{ $merchant->business_name }}</td>
            <td>{{ $merchant->phone }}</td>
            <td>{{ optional($merchant->created_at)->format('M d, Y') }}</td>
            <td>{{ $merchant->merchantBalance->available_for_withdraw ?? 'NA' }}</td>
            <td>{{ $mwd !== null ? $mwd.' %' : 'NA' }}</td>
            <td>{{ $ibft !== null ? $ibft.' %' : 'NA' }}</td>
            <td>{{ $serviceRate !== null ? $serviceRate.' %' : 'NA' }}</td>
            <td>{{ $merchant->cnic }}</td>
            <td>{{ $merchant->address }}</td>
            <td>{{ $merchant->city }}</td>

            <td>
    <style>
        .cool-switch .form-check-input {
            width: 50px;
            height: 24px;
            cursor: pointer;
            transition: .3s;
        }

        /* JazzCash Color */
        .jazzcash-switch:checked {
            background-color: #FF8C00 !important;
            border-color: #FF8C00 !important;
        }

        /* Easypaisa Color */
        .easypaisa-switch:checked {
            background-color: #1DBF73 !important;
            border-color: #1DBF73 !important;
        }

        .cool-switch .form-check-label {
            margin-left: 8px;
            font-weight: 600;
            color: #555;
        }
    </style>

    <div class="form-check form-switch cool-switch d-flex align-items-center">
        <input
            class="form-check-input gateway-toggle jazzcash-switch"
            type="checkbox"
            id="jazzcashToggle-{{ $merchant->id }}"
            data-merchant-id="{{ $merchant->id }}"
            data-gateway-id="1"
            {{ $jazzcashActive ? 'checked' : '' }}
        >
        <label class="form-check-label" for="jazzcashToggle-{{ $merchant->id }}">
            {{ $jazzcashActive ? 'Enabled' : 'Disabled' }}
        </label>
    </div>
</td>

<td>
    <div class="form-check form-switch cool-switch d-flex align-items-center">
        <input
            class="form-check-input gateway-toggle easypaisa-switch"
            type="checkbox"
            id="easypaisaToggle-{{ $merchant->id }}"
            data-merchant-id="{{ $merchant->id }}"
            data-gateway-id="2"
            {{ $easypaisaActive ? 'checked' : '' }}
        >
        <label class="form-check-label" for="easypaisaToggle-{{ $merchant->id }}">
            {{ $easypaisaActive ? 'Enabled' : 'Disabled' }}
        </label>
    </div>
</td>

           
        </tr>
    @endforeach
    </tbody>
</table>



        </div>
    </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>
    $(function () {
        const table = $("#data-table").DataTable({
            lengthChange: false,
            pagingType: "simple_numbers",
            info: true,
            ordering: true,
            searching: true
        });

        // hide the built-in DT search since we use a custom one
        $("#data-table_filter").hide();

        $('#search-ip').on('keyup', function() {
            table.search(this.value).draw();
        });
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    document.querySelectorAll('.gateway-toggle').forEach(function (toggle) {
        toggle.addEventListener('change', function (e) {
            const checkbox = e.target; // this input
            const merchantId = checkbox.dataset.merchantId;
            const gatewayId = checkbox.dataset.gatewayId;
            const enabled   = checkbox.checked;

            // Update label immediately (optimistic UI)
            const label = checkbox.closest('.form-check').querySelector('.form-check-label');
            if (label) {
                label.textContent = enabled ? 'Enabled' : 'Disabled';
            }

            fetch("{{ route('admin.merchant.payment-gateway.toggle') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    merchant_id: merchantId,
                    payment_gateway_id: gatewayId,
                    is_enabled: enabled ? 1 : 0,
                }),
            })
            .then(async (response) => {
                if (!response.ok) {
                    let text = await response.text();
                    throw new Error(text || 'Request failed');
                }
                return response.json();
            })
            .then((data) => {
                if (!data.success) {
                    throw new Error('Server returned error');
                }
                // You could sync label exactly with server response if needed
                // e.g. label.textContent = data.status == 1 ? 'Enabled' : 'Disabled';
            })
            .catch((error) => {
                console.error('Error updating gateway:', error);

                // Revert checkbox & label on error
                checkbox.checked = !enabled;
                if (label) {
                    label.textContent = checkbox.checked ? 'Enabled' : 'Disabled';
                }

                alert('Failed to update gateway status. Please try again.');
            });
        });
    });
});
</script>
@endsection