@extends('Admin.layout')
@section('content')
<style>
    :root {
        --primary: #00a86b;


    }

    /* ===== Page Header ===== */
    .page-header h5 {
        font-weight: 600;
        margin: 0;
    }

    .back-btn {
        border-radius: 10px;
        transition: 0.2s ease;
    }

    .back-btn:hover {
        border-color: var(--primary);
    }

    /* ===== Info Text ===== */
    .info-text {
        font-size: 14px;
        margin-bottom: 5px;
    }


    .nav-pills .nav-link:hover {
        background: var(--primary-soft);
        color: var(--primary);
    }

    /* ===== Royalty Cards ===== */
    .royalty-card {
        border-radius: 14px;
        border: 1px solid var(--border-soft);
        transition: 0.25s ease;
    }
    .royalty-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: var(--primary-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: var(--primary);
    }

    .royalty-card h6 {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 5px;
    }

    .royalty-card h5 {
        font-weight: 700;
        margin-bottom: 0;
    }

    .royalty-link {
        font-size: 13px;
        font-weight: 600;
        color: var(--primary);
        text-decoration: none;
    }

    .royalty-link:hover {
        text-decoration: underline;
    }

    /* ===== Table Card ===== */
    .table-card {
        border-radius: 14px;
        border: 1px solid var(--border-soft);
    }

    .table thead {
        background: var(--primary-soft);
    }

    .table thead th {
        font-weight: 600;
        font-size: 13px;
        color: #333;
    }

    /* ===== Modal Styling ===== */
    .custom-modal {
        border-radius: 14px;
        border: none;
    }

    .modal-content {
        border-radius: 14px;
        border: 1px solid var(--border-soft);
    }

    .btn-primary {
        background: var(--primary);
        border-color: var(--primary);
    }

    .btn-primary:hover {
        background: #01915c;
        border-color: #01915c;
    }

</style>

<div class="row align-items-center justify-content-between mb-3 mt-3 page-header">
    <div class="col-auto d-flex align-items-center gap-2">
        <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('customer_table') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
        <h5>{{ $user->name }}</h5>
    </div>
</div>

<p class="info-text">Patient Name: <strong>{{ $user->name }}</strong></p>
<p class="info-text">Patient ID: <strong>{{ $user->id_number }}</strong></p>

<ul class="nav nav-pills flex-column flex-sm-row mb-4 gap-2 mt-4">
    <li class="nav-item"><a class="nav-link" href="{{ route('view_customer_profile', $user->id)}}">Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="{{ route('view_customer_health', $user->id) }}">Health</a></li>
    <li class="nav-item"><a class="nav-link" href="{{ route('view_customer_attendance', $user->id) }}">Attendance</a></li>
    <li class="nav-item"><a class="nav-link" href="{{ route('view_customer_follow_up', $user->id)}}">Follow Up</a></li>
    <li class="nav-item"><a class="nav-link active" href="{{ route('view_customer_royalty', $user->id) }}">Royalty</a></li>
    <li class="nav-item"><a class="nav-link" href="{{ route('view_customer_subscription', $user->id) }}">Subscriptions</a></li>
    <li class="nav-item"><a class="nav-link" href="{{ route('view_customer_referral', $user->id) }}">Referral</a></li>
</ul>

<hr class="text-primary">

{{-- ROYALTY CARDS --}}
<div class="row g-4">

    <div class="col-lg-4">
        <div class="card royalty-card p-3 h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="royalty-icon bg-label-success">
                    <i class="ti tabler-wallet"></i>

                </div>
                <a href="#" data-bs-toggle="modal" data-bs-target="#typeModal" class="royalty-link">
                    <i class="ti tabler-arrow-bar-to-up me-1"></i> Credit
                </a>
            </div>
            <h6>Total Royalty</h6>
            <h5 class="text-success">{{ $totalCredit }}</h5>

        </div>
    </div>

    <div class="col-lg-4">
        <div class="card royalty-card p-3 h-100">
            <div class="royalty-icon mb-3 bg-label-success">
                <i class="ti tabler-coins"></i>
            </div>
            <h6>Remaining Royalty</h6>
            <h5>{{ $remaining }}</h5>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card royalty-card p-3 h-100">
                        <div class="d-flex justify-content-between align-items-center mb-3">

            <div class="royalty-icon mb-3 bg-label-success">
                <i class="ti tabler-shield-dollar"></i>
            </div>
             <a href="#" data-bs-toggle="modal" data-bs-target="#debitmodal" class="royalty-link">
                    <i class="ti tabler-arrow-bar-to-down me-1"></i> Debit
                </a>
                </div>
            <h6>Royalty Used</h6>
            <h5 class="text-danger">-{{ $totalDebit }}</h5>

        </div>
    </div>

</div>

{{-- TABLE SECTION --}}
<div class="card table-card mt-4 p-3">
    <div class="row mb-3 align-items-center g-2">
        <div class="col-1">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="col-md-3 ms-auto">
            <input type="text" id="toDate" class="form-control" placeholder="Search...">
        </div>
    </div>

    <div class="table-responsive">
        <table class="table align-middle" id="usersTable">
            <thead>
                <tr>
                    <th>Sno</th>
                    <th>Date</th>
                    <th>Points</th>
                    <th>Type</th>
                    <th>Points For</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="typeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content custom-modal p-3">
            <h6 class="fw-semibold text-center mb-3">Add Royalty Credit</h6>
            <form action="{{ route('add_royalty_post') }}" method="POST" id="royaltyForm">
                @csrf
                <input type="hidden" name="user_id" value="{{ $user->id }}">
                <div class="row g-2">
                    <div class="col-lg-12">
                        <label class="form-label">
                            Type <span class="text-danger">*</span>
                        </label>
                        <select class="form-select form-select-sm" name="royalty_id" required>
                            <option value="">Select</option>
                            @foreach($royalties as $royalty)
                            <option value="{{ $royalty->id }}">
                                {{ $royalty->title }} ({{ $royalty->points }})
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-12">
                        <button type="submit" id="royaltyBtn" class="btn btn-primary btn-sm w-100">
                            Add Royalty
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="debitmodal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content custom-modal p-3">
            <h6 class="fw-semibold text-center mb-3">Select Type</h6>
            <form action="{{ route('debit_royalty_post') }}" method="POST" id="royaltyForm">
                @csrf
                <input type="hidden" name="user_id" value="{{ $user->id }}">
                <div class="col-lg-12">
                    <label class="form-label">Points</label>
                    <input type="number" step="0.01" name="points" class="form-control form-control-sm" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">
                        Remark
                    </label>
                    <textarea name="remark" class="form-control" id="remark" rows="3" required></textarea>
                </div>
                <div class="d-flex justify-content-center">
                    <button type="submit" id="debitBtn" class="btn btn-primary me-2">
                        Submit
                    </button>
                    <button type="reset" class="btn btn-label-secondary">
                        Discard
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    const table = $('#usersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('customer_royalty_data', $user->id) }}",
        order: [],
        columns: [{
                data: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'created_at',
                name: 'created_at'
            },
            {
                data: 'points',
                name: 'points',
                orderable: false
            },
            {
                data: 'type',
                name: 'type',
                orderable: false
            },
            {
                data: 'royalty',
                name: 'royalty',
                orderable: false
            },
            {
                data: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });
    $('#toDate').on('keyup change', function() {
        table.search(this.value).draw();
    });
});
</script>
<script>
$(document).ready(function() {
    $('#typeModal').on('submit', function() {
        let btn = $('#royaltyBtn');
        btn.prop('disabled', true);
        btn.text('Processing...');
    });
    $('#debitmodal').on('submit', function() {
        let btn = $('#debitBtn');
        btn.prop('disabled', true);
        btn.text('Processing...');
    });
});
</script>
<script>

let deleteId = null;

   $(document).on('click', '.delete-btn', function () {

        deleteId = $(this).data('id');

        const $btn = $('#delete').find('.btn-danger');

        // Reset button every time modal opens
        $btn.prop('disabled', false).text('Yes, Sure');

        $('#delete').modal('show');
    });
$(document).on('click', '#delete .btn-danger', function(e) {
    e.preventDefault();

    if (!deleteId) {
        showToast("Invalid record selected.", "error");
        return;
    }

    const $btn = $(this);

    $btn.prop('disabled', true);
    $btn.text('Deleting...');

    $.ajax({
        url: "{{ route('delete_user_royalty') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            id: deleteId
        },
        success: function(response) {
            if (response.status) {
                $('#delete').modal('hide');
                $('#usersTable').DataTable().ajax.reload(null, false);
                showToast(response.message, "success");
            } else {
                showToast(response.message, "error");
                // Reset button on failure
                $btn.prop('disabled', false).text('Yes, Sure');
            }
        },
        error: function(xhr) {
            let errorMsg = "Something went wrong.";
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
            }
            showToast(errorMsg, "error");

            // Reset button on error
            $btn.prop('disabled', false).text('Yes, Sure');
        },
        complete: function() {
            // Optional: ensure button resets if modal stays open
            deleteId = null;
        }
    });
});
</script>

@endsection