@extends('template.desktop.app')

@section('title', 'Edit 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">Edit 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="editCustomerServiceForm">
                @csrf
                @method('PUT')
                <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" value="{{ $cs->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" value="{{ $cs->user->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" value="{{ $cs->user->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" value="{{ $cs->phone }}" 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" value="{{ $cs->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" value="{{ $cs->target_boxes }}" class="form-control"
                            required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Password Baru</label>
                        <input type="password" name="password" class="form-control"
                            placeholder="Kosongkan jika tidak diubah">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Status</label>
                        <select name="status" class="form-select">
                            <option value="1" {{ $cs->status ? 'selected' : '' }}>Aktif</option>
                            <option value="0" {{ !$cs->status ? 'selected' : '' }}>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 Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.getElementById('editCustomerServiceForm').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);
            formData.append('_method', 'PUT');

            axios.post("{{ route('customer-services.update', $cs->id) }}", 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>`;
                    }
                })
                .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 ti-device-floppy me-1"></i> Simpan Perubahan';
                });
        });
    </script>
@endsection