@extends('admin.layouts.dashboard')

@php
    $title = !empty($address) ? "Edit Customer" : "Add Customer";
    $button_text = !empty($address) ? "Update Customer" : "Add Customer";
@endphp

@section('title', $title)
@section('content')
<section class="py-0">
    <div class="container-fluid">
        <div class="pt-3">
            <h3 class="main-heading mb-3">{{ $title }}</h3>
        </div>
        <div class="card mb-4 border-0 rounded-4">
            <form method="POST" action="{{ !empty($address) ? route('admin.users.update', $address) : route('admin.users.store') }}" enctype="multipart/form-data">
                @csrf
                @if(!empty($address))
                    @method('PUT')
                @endif

                @if(session('failure'))
                    <div class="alert alert-danger">
                        {{ session('failure') }}
                    </div>
                @endif
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                <div class="card-body rounded-4">
                    <div class="row">
                        <div class="col-lg-6 mt-2 mb-2">
                            <div class="form-group">
                                <input type="text" name="firstname" id="firstname" class="form-control" placeholder="FirstName" value="{{ old('firstname',isset($address) ?  $address->firstname : '') }}" required>
                                @error('firstname')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
                            <div class="form-group">
                                <input type="text" name="lastname" id="lastname" class="form-control" placeholder="LastName" value="{{ old('lastname', isset($address) ? $address->lastname : '') }}" required>
                                @error('lastname')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
                            <input type="email" name="email" id="email" class="form-control" placeholder="Email Address" value="{{ old('email', isset($address) ? $address->email : '') }}" required @if(isset($address) && isset($address->email)) readOnly @endif>
                            @error('email')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
                            <input type="text" name="phone" id="phone" class="form-control" placeholder="Contact Number" value="{{ old('phone', isset($address) ? $address->phone : '') }}" onkeypress="return onlyNumberKey(event)">
                            @error('phone')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <h5 class="mt-3">Address</h5>
                    <div class="row">
                        <div class="col-lg-6 mt-2 mb-2">
                        <input type="text" name="pincode" class="form-control" placeholder="Pincode" id="pincode" value="{{ old('pincode', isset($address) ? $address->pincode : '') }}"  maxlength="7">
                            @error('pincode')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
                            <input type="text" name="locality" class="form-control" placeholder="Locality" value="{{ old('locality', isset($address) ?  $address->locality : '') }}">
                            @error('locality')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
                            <input type="text" name="address" class="form-control" placeholder="Address" value="{{ old('address',isset($address) ?  $address->address : '') }}">
                            @error('address')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
                            <input type="text" name="city" class="form-control" placeholder="City" value="{{ old('city',isset($address) ?  $address->city : '') }}">
                            @error('city')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
							<select name="state" id="state" class="form-control" required>
								<option value="Alberta" {{ old('state', isset($address) ?  $address->state : '') == 'Alberta' ? 'selected' : '' }}>Alberta</option>
								<option value="British Columbia" {{ old('state', isset($address) ? $address->state : '') == 'British Columbia' ? 'selected' : '' }}>British Columbia</option>
								<option value="Manitoba" {{ old('state', isset($address) ?  $address->state : '') == 'Manitoba' ? 'selected' : '' }}>Manitoba</option>
								<option value="New Brunswick" {{ old('state', isset($address) ? $address->state : '') == 'New Brunswick' ? 'selected' : '' }}>New Brunswick</option>
								<option value="Newfoundland and Labrador" {{ old('state', isset($address) ? $address->state : '') == 'Newfoundland and Labrador' ? 'selected' : '' }}>Newfoundland and Labrador</option>
								<option value="Nova Scotia" {{ old('state', isset($address) ?  $address->state : '') == 'Nova Scotia' ? 'selected' : '' }}>Nova Scotia</option>
								<option value="Ontario" {{ old('state',  isset($address) ?  $address->state : '') == 'Ontario' ? 'selected' : '' }}>Ontario</option>
								<option value="Prince Edward Island" {{ old('state', isset($address) ? $address->state : '') == 'Prince Edward Island' ? 'selected' : '' }}>Prince Edward Island</option>
								<option value="Quebec" {{ old('state', isset($address) ? $address->state : '') == 'Quebec' ? 'selected' : '' }}>Quebec</option>
								<option value="Saskatchewan" {{ old('state', isset($address) ?  $address->state : '') == 'Saskatchewan' ? 'selected' : '' }}>Saskatchewan</option>
							</select>
                            @error('state')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6 mt-2 mb-2">
                            <input type="text" name="country" class="form-control" placeholder="Country" value="Canada" readOnly>
                            @error('country')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">{{ $button_text }}</button>
                </div>
            </form>
        </div>
    </div>
</section> @endsection
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" defer></script>
<script>

$(document).ready(function() {

    $('#example').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                 ''
            ]
        } );

	$("#details").click(function() {
		document.getElementById('detail_div').classList.remove('d-none');
		document.getElementById('order_div').classList.add('d-none');
		document.getElementById('address_div').classList.add('d-none');
		document.getElementById('details').classList.add('bg-active');
		document.getElementById('order').classList.remove('bg-active');
		document.getElementById('address').classList.remove('bg-active');
		
	});
	$("#order").click(function() {
		document.getElementById('detail_div').classList.add('d-none');
		document.getElementById('order_div').classList.remove('d-none');
		document.getElementById('address_div').classList.add('d-none');
		document.getElementById('details').classList.remove('bg-active');
		document.getElementById('order').classList.add('bg-active');
		document.getElementById('address').classList.remove('bg-active');

	});

	$("#address").click(function() {
		document.getElementById('detail_div').classList.add('d-none');
		document.getElementById('order_div').classList.add('d-none');
		document.getElementById('address_div').classList.remove('d-none');
		document.getElementById('details').classList.remove('bg-active');
		document.getElementById('order').classList.remove('bg-active');
		document.getElementById('address').classList.add('bg-active');
	
	});
   
    function allowAlphaNumericKey(event) {
        var charCode = event.which || event.keyCode;
    var charStr = String.fromCharCode(charCode);
    // Allow only alphanumeric characters (A-Z, 0-9)
    if (!/[a-zA-Z0-9]/.test(charStr)) {
        event.preventDefault(); // Prevent input of non-alphanumeric characters
    }
    }

    // Format the postal code as the user types
    $('#pincode').on('input', function() {
        let value = $(this).val().toUpperCase().replace(/[^A-Z0-9]/g, ''); // Remove any non-alphanumeric characters
    
        // Ensure format is 3 letters, 3 digits, and 3 letters
        if (value.length > 3 && value.length <= 6) {
            value = value.substring(0, 3) + ' ' + value.substring(3, 6);
        }
        $(this).val(value);
    });

    // Attach the keypress handler
    $('#pincode').keypress(allowAlphaNumericKey);

	
});

function onlyNumberKey(evt) {
              
	// Only ASCII character in that range allowed
	var ASCIICode = (evt.which) ? evt.which : evt.keyCode
	if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
		return false;
	return true;
}

</script>