@extends('layouts.app')
@section('title', 'Customers')
@section('page-title', 'Customers')

@section('topbar-actions')
    <button class="btn btn-brand btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">
        <i class="bi bi-person-plus-fill me-1"></i> Add Customer
    </button>
    <button class="btn btn-outline-brand btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">
        <i class="bi bi-file-earmark-spreadsheet me-1"></i> Import Excel
    </button>
@endsection

@section('content')

{{-- Campaign Bar --}}
<div id="campaign-bar"
     style="display:none;background:#fff;border:1.5px solid #38bdf8;border-radius:10px;
            padding:12px 16px;margin-bottom:16px;align-items:center;gap:8px;flex-wrap:wrap;
            box-shadow:0 2px 12px rgba(56,189,248,.12);">
    <span id="selected-count" style="font-size:13px;font-weight:700;color:#0f172a;margin-right:4px;"></span>
    <button class="btn btn-brand btn-sm" id="btnStart">
        <i class="bi bi-play-fill me-1"></i> Start Campaign
    </button>
    <button class="btn btn-sm" id="btnStop"
            style="border:1.5px solid #f87171;color:#b91c1c;background:#fef2f2;border-radius:8px;font-weight:700;font-size:13px;">
        <i class="bi bi-stop-fill me-1"></i> Stop
    </button>
    <button class="btn btn-sm" id="btnDelete"
            style="border:1.5px solid #e2e8f0;color:#64748b;background:#fff;border-radius:8px;font-weight:600;font-size:13px;">
        <i class="bi bi-trash3 me-1"></i> Delete
    </button>
</div>

<div class="card">
    <div class="card-header">
        <i class="bi bi-people-fill me-2" style="color:#38bdf8;"></i><strong>Customer List</strong>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0" id="tbl">
                <thead>
                    <tr>
                        <th style="width:44px;"><input type="checkbox" id="checkAll" class="form-check-input"></th>
                        <th>#</th>
                        <th>Customer</th>
                        <th>Phone</th>
                        <th>Product</th>
                        <th>Language</th>
                        <th>Call Status</th>
                        <th>Feedback</th>
                        <th>Customer Answer</th>
                        <th>Added</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customers as $c)
                    <tr>
                        <td><input type="checkbox" class="form-check-input row-chk" value="{{ $c->id }}"></td>
                        <td style="color:#94a3b8;font-size:12px;font-weight:600;">{{ $c->id }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm">{{ strtoupper(substr($c->customer_name, 0, 1)) }}</div>
                                <strong>{{ $c->customer_name }}</strong>
                            </div>
                        </td>
                        <td>
                            <code style="font-size:12px;color:#0284c7;background:#e0f2fe;
                                         padding:2px 7px;border-radius:4px;font-weight:700;">
                                {{ $c->phone_number }}
                            </code>
                        </td>
                        <td><strong>{{ $c->product_name }}</strong></td>
                        <td>
                            <span style="font-size:12px;font-weight:700;color:#0f172a;">
                                {{ $c->language ?? 'English' }}
                            </span>
                        </td>
                        <td>
                            <span class="status-badge badge-{{ $c->call_status }}">
                                @if($c->call_status === 'calling')
                                    <span class="spinner-border spinner-border-sm me-1"
                                          style="width:7px;height:7px;border-width:1.5px;"></span>
                                @endif
                                {{ ucfirst($c->call_status) }}
                            </span>
                        </td>
                        <td>
                            @if($c->feedback === 'positive')
                                <span class="status-badge badge-positive">
                                    <i class="bi bi-emoji-smile-fill me-1"></i>Positive
                                </span>
                            @elseif($c->feedback === 'negative')
                                <span class="status-badge badge-negative">
                                    <i class="bi bi-emoji-frown-fill me-1"></i>Negative
                                </span>
                            @elseif($c->feedback === 'neutral')
                                <span class="status-badge badge-neutral">
                                    <i class="bi bi-emoji-neutral-fill me-1"></i>Neutral
                                </span>
                            @else
                                <span style="color:#94a3b8;font-size:12px;font-weight:600;">Not called</span>
                            @endif
                        </td>
                        <td style="max-width:200px;">
                            @if($c->feedback_text)
                                <div style="font-size:12px;font-weight:500;color:#0f172a;
                                            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                                     title="{{ $c->feedback_text }}">
                                    {{ Str::limit($c->feedback_text, 55) }}
                                </div>
                            @else
                                <span style="color:#94a3b8;font-size:12px;font-weight:600;">—</span>
                            @endif
                        </td>
                        <td style="font-size:12px;color:#64748b;font-weight:600;">
                            {{ $c->created_at->format('d M Y') }}
                        </td>
                        <td>
                            <button class="btn btn-sm btn-call-again"
                                    data-id="{{ $c->id }}"
                                    data-name="{{ $c->customer_name }}"
                                    style="border:1.5px solid #38bdf8;color:#0284c7;background:#e0f2fe;
                                           border-radius:8px;font-size:12px;font-weight:700;padding:4px 10px;">
                                <i class="bi bi-telephone-outbound-fill me-1"></i>Call Again
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Add Customer Modal --}}
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;">
            <div class="modal-header" style="background:#38bdf8;border:none;padding:16px 24px;">
                <h5 class="modal-title" style="font-weight:800;color:#fff;font-size:15px;">
                    <i class="bi bi-person-plus-fill me-2"></i>Add Customer
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('customers.store') }}">
                @csrf
                <div class="modal-body" style="padding:24px;background:#fff;">
                    <div class="mb-3">
                        <label class="form-label">Customer Name</label>
                        <input type="text" name="customer_name" class="form-control"
                               placeholder="e.g. Ramesh Kumar" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="text" name="phone_number" class="form-control"
                               placeholder="+919876543210" required>
                        <small style="color:#64748b;font-size:11px;font-weight:600;">
                            E.164 format with country code.
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Product Name</label>
                        <input type="text" name="product_name" class="form-control"
                               placeholder="e.g. Smart Watch" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Language</label>
                        <select name="language" class="form-select">
                            <option value="English">🇬🇧 English</option>
                            <option value="Tamil">🇮🇳 Tamil</option>
                            <option value="Hindi">🇮🇳 Hindi</option>
                            <option value="Telugu">🇮🇳 Telugu</option>
                            <option value="Malayalam">🇮🇳 Malayalam</option>
                            <option value="Kannada">🇮🇳 Kannada</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer" style="border-top:1px solid #e2e8f0;background:#f8fafc;padding:12px 24px;">
                    <button type="button" class="btn btn-sm btn-outline-brand" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-brand btn-sm">
                        <i class="bi bi-plus-circle-fill me-1"></i>Add Customer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Import Modal --}}
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;">
            <div class="modal-header" style="background:#38bdf8;border:none;padding:16px 24px;">
                <h5 class="modal-title" style="font-weight:800;color:#fff;font-size:15px;">
                    <i class="bi bi-file-earmark-spreadsheet me-2"></i>Import Excel / CSV
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('customers.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body" style="padding:24px;background:#fff;">
                    <div class="mb-4 p-3 rounded-3" style="background:#f0f9ff;border:1.5px dashed #7dd3fc;">
                        <p style="font-size:12px;color:#0f172a;margin:0;line-height:2;font-weight:600;">
                            Required columns:<br>
                            <code style="color:#0284c7;">customer_name</code> &nbsp;|&nbsp;
                            <code style="color:#0284c7;">phone_number</code> &nbsp;|&nbsp;
                            <code style="color:#0284c7;">product_name</code> &nbsp;|&nbsp;
                            <code style="color:#0284c7;">language</code>
                        </p>
                        <p style="font-size:11px;color:#64748b;margin:6px 0 0;font-weight:600;">
                            Language values: English, Tamil, Hindi, Telugu, Malayalam, Kannada
                        </p>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Select File</label>
                        <input type="file" name="excel_file" class="form-control"
                               accept=".xlsx,.xls,.csv" required>
                        <small style="color:#64748b;font-size:11px;font-weight:600;">
                            Supported: .xlsx, .xls, .csv — max 5MB
                        </small>
                    </div>
                </div>
                <div class="modal-footer" style="border-top:1px solid #e2e8f0;background:#f8fafc;padding:12px 24px;">
                    <button type="button" class="btn btn-sm btn-outline-brand" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-brand btn-sm">
                        <i class="bi bi-upload me-1"></i>Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Call Again Modal --}}
<div class="modal fade" id="callAgainModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content" style="border:1.5px solid #38bdf8;border-radius:14px;overflow:hidden;text-align:center;">
            <div style="height:4px;background:#38bdf8;"></div>
            <div class="modal-body p-4" style="background:#fff;">
                <div style="width:52px;height:52px;border-radius:50%;background:#e0f2fe;color:#0284c7;
                            display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 14px;">
                    <i class="bi bi-telephone-outbound-fill"></i>
                </div>
                <h6 style="font-weight:800;color:#0f172a;margin-bottom:6px;">Call Again?</h6>
                <p id="callAgainName" style="font-size:13px;font-weight:500;color:#64748b;margin-bottom:18px;"></p>
                <div class="d-flex gap-2 justify-content-center">
                    <button class="btn btn-sm btn-outline-brand" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-brand btn-sm" id="confirmCallAgain">
                        <i class="bi bi-telephone-fill me-1"></i>Yes, Call Now
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content" style="border:1.5px solid #fca5a5;border-radius:14px;overflow:hidden;text-align:center;">
            <div style="height:4px;background:#f87171;"></div>
            <div class="modal-body p-4" style="background:#fff;">
                <i class="bi bi-trash3-fill mb-3 d-block" style="font-size:36px;color:#f87171;"></i>
                <h6 style="font-weight:800;color:#0f172a;">Delete Selected?</h6>
                <p style="font-size:13px;font-weight:500;color:#64748b;">This cannot be undone.</p>
                <div class="d-flex gap-2 justify-content-center mt-3">
                    <button class="btn btn-sm btn-outline-brand" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-sm" id="confirmDelete"
                            style="background:#f87171;color:#fff;border:none;border-radius:8px;font-weight:700;">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(function () {
    $('#tbl').DataTable({
        pageLength: 25,
        order: [[1, 'desc']],
        columnDefs: [{ orderable: false, targets: [0, 10] }],
        language: { search: '', searchPlaceholder: 'Search customers…' },
    });

    $('#checkAll').on('change', function () { $('.row-chk').prop('checked', this.checked); syncBar(); });
    $(document).on('change', '.row-chk', syncBar);
    function getIds() { return $('.row-chk:checked').map((i,el) => $(el).val()).get(); }
    function syncBar() {
        const n = $('.row-chk:checked').length;
        $('#selected-count').text(n + ' selected');
        $('#campaign-bar').css('display', n > 0 ? 'flex' : 'none');
    }

    $('#btnStart').on('click', function () {
        const ids = getIds(); if (!ids.length) return;
        const $btn = $(this).prop('disabled', true)
            .html('<span class="spinner-border spinner-border-sm me-1" style="width:11px;height:11px;border-width:2px;"></span>Starting…');
        $.post('{{ route("campaign.start") }}', { ids })
            .done(res => toast(res.message, 'success'))
            .fail(xhr => toast(xhr.responseJSON?.message || 'Error.', 'error'))
            .always(() => {
                $btn.prop('disabled', false).html('<i class="bi bi-play-fill me-1"></i> Start Campaign');
                setTimeout(() => location.reload(), 1800);
            });
    });

    $('#btnStop').on('click', function () {
        const ids = getIds(); if (!ids.length) return;
        $.post('{{ route("campaign.stop") }}', { ids })
            .done(res => { toast(res.message, 'success'); setTimeout(() => location.reload(), 1600); })
            .fail(() => toast('Error stopping.', 'error'));
    });

    $('#btnDelete').on('click', () => $('#deleteModal').modal('show'));
    $('#confirmDelete').on('click', function () {
        $.ajax({ url: '{{ route("customers.destroy") }}', method: 'DELETE', data: { ids: getIds() } })
            .done(() => { $('#deleteModal').modal('hide'); toast('Deleted.', 'success'); setTimeout(() => location.reload(), 1200); })
            .fail(() => toast('Delete failed.', 'error'));
    });

    let callAgainId = null;
    $(document).on('click', '.btn-call-again', function () {
        callAgainId = $(this).data('id');
        $('#callAgainName').text('Place a new call to ' + $(this).data('name') + '?');
        $('#callAgainModal').modal('show');
    });
    $('#confirmCallAgain').on('click', function () {
        if (!callAgainId) return;
        const $btn = $(this).prop('disabled', true)
            .html('<span class="spinner-border spinner-border-sm" style="width:11px;height:11px;border-width:2px;"></span>');
        $.post('/customers/' + callAgainId + '/call-again')
            .done(res => { $('#callAgainModal').modal('hide'); toast(res.message, 'success'); setTimeout(() => location.reload(), 1500); })
            .fail(() => toast('Failed.', 'error'))
            .always(() => $btn.prop('disabled', false).html('<i class="bi bi-telephone-fill me-1"></i>Yes, Call Now'));
    });

    function toast(msg, type) {
        const colors = type === 'success'
            ? { bg: '#f0fdf4', border: '#22c55e', text: '#14532d' }
            : { bg: '#fef2f2', border: '#f87171', text: '#7f1d1d' };
        const el = $(`<div style="position:fixed;bottom:24px;right:24px;z-index:9999;background:${colors.bg};
            border:1.5px solid ${colors.border};color:${colors.text};padding:12px 18px;border-radius:10px;
            font-size:13px;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.1);">${msg}</div>`).appendTo('body');
        setTimeout(() => el.fadeOut(300, () => el.remove()), 3500);
    }
});
setInterval(function() { $.get('/sanctum/csrf-cookie'); }, 1800000);
</script>
@endpush