<?php $__env->startSection('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="<?php echo e(route('customers.index')); ?>" class="btn btn-success mb-3">Manage Customer</a>
    <h2>Add Customer</h2>
    <form action="<?php echo e(route('customers.store')); ?>" method="POST">
        <?php echo csrf_field(); ?>
        <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>
<?php $__env->stopSection(); ?>




<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/laravel-app1/resources/views/customers/create.blade.php ENDPATH**/ ?>