@extends('template.desktop.app')

@section('title', 'Tambah Customer Service')

@section('content')
<div class="card">
    <div class="card-header border-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
        <h4 class="card-title text-dark fw-bold mb-0">Tambah Customer Service</h4>
        <a href="{{ route('customer-services.index') }}" class="btn btn-secondary btn-sm">
            <i class="ti tabler-arrow-left me-1"></i> Kembali
        </a>
    </div>

    <div class="card-body pt-3">

        <div id="alert-container"></div>

        <form id="createCustomerServiceForm">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text" name="full_name" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Username <span class="text-danger">*</span></label>
                    <input type="text" name="username" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Email <span class="text-danger">*</span></label>
                    <input type="email" name="email" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Nomor Telepon <span class="text-danger">*</span></label>
                    <input type="text" name="phone_number" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Gaji (Rp) <span class="text-danger">*</span></label>
                    <input type="number" name="salary" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Target Box <span class="text-danger">*</span></label>
                    <input type="number" name="target_boxes" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Password <span class="text-danger">*</span></label>
                    <input type="password" name="password" class="form-control" required minlength="6">
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Status</label>
                    <select name="status" class="form-select">
                        <option value="1" selected>Aktif</option>
                        <option value="0">Nonaktif</option>
                    </select>
                </div>
            </div>

            <div class="mt-4 d-flex justify-content-end">
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="ti tabler-device-floppy me-1"></i> Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.getElementById('createCustomerServiceForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = e.target;
    const btn = document.getElementById('submitBtn');
    const alertContainer = document.getElementById('alert-container');

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Menyimpan...';
    alertContainer.innerHTML = '';

    const formData = new FormData(form);

    axios.post("{{ route('customer-services.store') }}", formData)
        .then(response => {
            if (response.data.success) {
                alertContainer.innerHTML = `
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        ${response.data.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>`;
                form.reset();
            }
        })
        .catch(error => {
            if (error.response) {
                const res = error.response.data;
                let message = `<div class="alert alert-danger alert-dismissible fade show" role="alert">`;

                if (res.errors) {
                    message += `<strong>${res.message}</strong><ul class="mb-0">`;
                    for (const field in res.errors) {
                        message += `<li>${field}: ${res.errors[field][0]}</li>`;
                    }
                    message += `</ul>`;
                } else {
                    message += res.message || 'Terjadi kesalahan.';
                }

                message += `<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>`;
                alertContainer.innerHTML = message;
            } else {
                alertContainer.innerHTML = `
                    <div class="alert alert-danger">Tidak dapat terhubung ke server.</div>`;
            }
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="ti tabler-device-floppy me-1"></i> Simpan';
        });
});
</script>
@endsection