@extends('layouts.app')

@section('content')
<style>
    .form-group {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }
    .form-container {
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        max-width: 800px;
        margin: 30px auto;
        font-family: Arial, sans-serif;
        border-style: groove;
    }
    .form-container h2 {
        text-align: center;
        margin-bottom: 25px;
    }    
    .form-control {
        border: 2px solid gray;
    }
</style>

<div class="form-container">
    <a href="{{ route('customers.index') }}" class="btn btn-success mb-3">Manage Customer</a>
    <h2>Edit Customer</h2>
    <form action="{{ route('customers.updateUnique', $customer->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" value="{{ old('name', $customer->name) }}" class="form-control" required>
        </div>

        <div class="form-group">
            <label>CNIC</label>
            <input type="text" id="email" name="email" value="{{ old('email', $customer->email) }}" class="form-control" maxlength="15" required>
        </div>

        <div class="form-group">
            <label>Phone</label>
            <input type="text" name="phone" value="{{ old('phone', $customer->phone) }}" class="form-control" required>
        </div>

        <div class="form-group">
            <label>Address</label>
            <textarea name="address" class="form-control">{{ old('address', $customer->address) }}</textarea>
        </div>

        <button type="submit" class="btn btn-success">Update</button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const cnicInput = document.getElementById('cnic');

    function formatCNIC(value) {
        value = value.replace(/\D/g, '');
        if (value.length > 5 && value.length <= 12) {
            return value.slice(0,5) + '-' + value.slice(5);
        } else if (value.length > 12) {
            return value.slice(0,5) + '-' + value.slice(5,12) + '-' + value.slice(12,13);
        }
        return value;
    }

    cnicInput.value = formatCNIC(cnicInput.value); // Format on load

    cnicInput.addEventListener('input', function (e) {
        let caretPos = e.target.selectionStart;
        let formatted = formatCNIC(e.target.value);
        e.target.value = formatted;
    });
});
</script>
@endsection