@extends('root')
@section('title', 'Dedicated Numbers')

@section('content')
<div class="container-fluid">
    <div class="card bg-light-info shadow-none position-relative overflow-hidden">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Dedicated Numbers</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a class="text-muted" href="/">Dashboard</a></li>
                            <li class="breadcrumb-item" aria-current="page">Dedicated Numbers</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3">
                    <div class="text-center mb-n5">
                        <img src="{{ asset('imgs/chat.png') }}" alt="" class="img-fluid mb-n4">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card w-100 position-relative overflow-hidden">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-primary active filter-btn" data-filter="all">Show All</button>
                    <button type="button" class="btn btn-outline-primary filter-btn" data-filter="assigned">Assigned Only</button>
                    <button type="button" class="btn btn-outline-primary filter-btn" data-filter="unassigned">Unassigned Only</button>
                    <button type="button" class="btn btn-outline-primary filter-btn" data-filter="in_cart">In Cart</button>
                </div>
                <button class="btn btn-success" id="btnAddToCart">
                    <i class="ti ti-shopping-cart-plus me-1"></i> Add to Cart
                </button>
            </div>

            <div class="table-responsive rounded-2 mb-4">
                <table id="table-dedicated" class="table border text-nowrap customize-table mb-0 align-middle">
                    <thead class="text-dark fs-4">
                        <tr>
                            <th>Phone Number</th>
                            <th>Display Name</th>
                            <th>Assignment</th>
                            <th>Status</th>
                            <th>Assigned To</th>
                            <th>Price</th>
                            <th>Templates</th>
                            <th>Tier</th>
                            <th>Daily Limit</th>
                            <th>Cart Status</th>
                            <th>Last Sync</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modal Assign --}}
<div class="modal fade" id="modalAssign" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign Number to Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
                <form id="formAssign">
                <div class="modal-body">
                    <input type="hidden" id="assign_pool_id" name="pool_id">
                    <div class="mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="text" class="form-control" id="assign_phone_number" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Price</label>
                        <input type="text" class="form-control" id="assign_price" readonly>
                        <small class="text-muted">Harga ini akan dipotong dari saldo client.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Select Client</label>
                        <select class="form-select" name="client_id" id="assign_client_id" required>
                            <option value="">-- Select Client --</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }} ({{ $client->email }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Assign</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        let filterStatus = 'all';

        // Initialize Select2
        $('#assign_client_id').select2({
            dropdownParent: $('#modalAssign'),
            placeholder: "-- Select Client --",
            allowClear: true,
            width: '100%'
        });

        var table = $('#table-dedicated').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('reseller.dedicated-numbers.data') }}",
                data: function(d) {
                    d.filter_status = filterStatus;
                }
            },
            columns: [
                { data: 'phone_number', name: 'phone_number' },
                { data: 'account_name', name: 'account_name' },
                { data: 'assignment_badge', name: 'assignment_badge', orderable: false, searchable: false },
                { data: 'status', name: 'status' },
                { data: 'client_name', name: 'client.name' },
                { data: 'dedicated_price', name: 'dedicated_price' },
                { data: 'templates_count', name: 'templates_count', searchable: false },
                { data: 'messaging_tier', name: 'messaging_tier' },
                { data: 'limit_max', name: 'limit_max' },
                { data: 'cart_status', name: 'cart_status', orderable: false, searchable: false },
                { data: 'last_used_at', name: 'last_used_at' },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ]
        });

        $('.filter-btn').on('click', function() {
            $('.filter-btn').removeClass('active');
            $(this).addClass('active');
            filterStatus = $(this).data('filter');
            table.draw();
        });

        // Add to Cart Logic
        $('#btnAddToCart').on('click', function() {
            let selected = [];
            $('.select-cart:checked').each(function() {
                selected.push($(this).val());
            });

            if (selected.length === 0) {
                toastr.warning('Pilih minimal satu nomor untuk ditambahkan ke keranjang.');
                return;
            }

            if(!confirm('Tambahkan ' + selected.length + ' nomor ke keranjang reseller?')) return;

            $.ajax({
                url: "{{ route('reseller.dedicated-numbers.cart.add') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    waba_pool_ids: selected
                },
                success: function(res) {
                    toastr.success(res.message);
                    table.draw();
                },
                error: function(err) {
                    toastr.error(err.responseJSON.message || 'Gagal menambahkan ke keranjang');
                }
            });
        });

        // Open Assign Modal
        $(document).on('click', '.btn-assign', function() {
            let id = $(this).data('id');
            let phone = $(this).data('phone');
            let price = $(this).data('price') || 0;
            $('#assign_pool_id').val(id);
            $('#assign_phone_number').val(phone);
            $('#assign_price').val('Rp ' + new Intl.NumberFormat('id-ID').format(price));
            $('#assign_client_id').val(null).trigger('change'); // Reset Select2
            $('#modalAssign').modal('show');
        });

        // Handle Assign Submit
        $('#formAssign').on('submit', function(e) {
            e.preventDefault();
            let id = $('#assign_pool_id').val();
            let formData = $(this).serialize();

            $.ajax({
                url: "/reseller/waba-pools/" + id + "/assign",
                type: "POST",
                data: formData,
                success: function(res) {
                    $('#modalAssign').modal('hide');
                    toastr.success(res.message);
                    table.draw();
                },
                error: function(err) {
                    toastr.error(err.responseJSON.message || 'Terjadi kesalahan');
                }
            });
        });

        // Handle Unassign
        $(document).on('click', '.btn-unassign', function() {
            let id = $(this).data('id');
            if(confirm('Apakah Anda yakin ingin unassign nomor ini dari client?')) {
                $.ajax({
                    url: "/reseller/waba-pools/" + id + "/unassign",
                    type: "POST",
                    success: function(res) {
                        toastr.success(res.message);
                        table.draw();
                    },
                    error: function(err) {
                        toastr.error(err.responseJSON.message || 'Terjadi kesalahan');
                    }
                });
            }
        });
    });
</script>
@endpush