<form action="{{ route('admin.order.update.customer', $order->id) }}" method="POST">
    @csrf
    <ul class="list-unstyled">
        <li class="d-flex justify-content-between">
            <span class="text-muted">Name: </span>
            <span>
                <input id="c_first_name" class="text-right bg-white" type="text" value="{{ $order->first_name ?? "" }}" name="first_name" disabled>
                <input id="c_last_name" class="text-left bg-white" type="text" value="{{ $order->last_name ?? "" }}" name="last_name" disabled>
                {{-- <span class="text-muted">{{ $order->company_name ?? "" }}</span> --}}
            </span>
        </li>
        <li class="d-flex justify-content-between">
            <span class="text-muted">Email: </span>
            <span class=""><input id="c_email" class="text-right bg-white" type="text" value="{{ $order->email ?? "" }}" name="email" disabled></span>
        </li>
        <li class="d-flex justify-content-between">
            <span class="text-muted">Phone: </span>
            <span class=""><input id="c_phone" class="text-right bg-white" type="text" value="{{ $order->phone ?? "" }}" name="phone" disabled></span>
        </li>
        <li class="d-flex justify-content-between">
            <span class="text-muted">Address: </span>
            <span class="">
                @if($order->town)<input id="c_address_town" class="text-right bg-white" type="text" value="{{ $order->town }}" name="town" disabled>, @endif
                @if($order->district)<input id="c_address_district" class="text-right bg-white" type="text" value="{{ $order->district }}" name="district" disabled>, @endif
                @if($order->post_code)- <input id="c_address_post_code" class="text-right bg-white" type="text" value="{{ $order->post_code }}" name="post_code" disabled>, @endif
                @if($order->address)<input id="c_address" class="text-right bg-white" type="text" value="{{ $order->address }}" name="address" disabled>@endif
                {{-- @if($order->country)<span class="text-muted">{{ $order->country }}</span>@endif --}}
            </span>
        </li>
        <li class="d-flex justify-content-between">
            <span class="text-muted"><button id="c_submit" type="submit" class="btn btn-success mt-2 d-none">Update</button></span>
            <span id="c_edit" class="mt-2" style="cursor:pointer;"><i class="fas fa-edit"></i></span>
        </li>
    </ul>
</form>

@push('js')
<script>
    document.getElementById('c_edit').addEventListener('click', function() {
        let inputs = document.querySelectorAll('input[id^="c_"]');
        inputs.forEach(function(input) {
            input.disabled = false;
            input.classList.remove('bg-white');
            input.classList.add('border', 'border-primary');
        });
        document.getElementById('c_submit').classList.remove('d-none');
    });
</script>
@endpush