@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>Add Customer</h2>
    <form action="{{ route('customers.store') }}" method="POST">
        @csrf
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" required>
        </div>
        <div class="form-group">
            <label>CNIC</label>
            <input type="text" id="email" name="email" class="form-control" maxlength="15" required>
        </div>

        <script>
        const cnicInput = document.getElementById('email');

        cnicInput.addEventListener('input', function (e) {
            let value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters

            if (value.length >= 5 && value.length <= 12) {
                value = value.slice(0,5) + '-' + value.slice(5);
            } else if (value.length > 12) {
                value = value.slice(0,5) + '-' + value.slice(5,12) + '-' + value.slice(12,13);
            }

            e.target.value = value;
        });
        </script>

        <div class="form-group">
            <label>Phone</label>
            <input type="text" name="phone" class="form-control" required>
        </div>
        <div class="form-group">
            <label>Address</label>
            <textarea name="address" class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-success">Save</button>
    </form>
</div>
@endsection